AppSheetでタスク管理アプリ(第3回)Googleドライブにアップロード

folder_openAppSheet

タスク管理アプリを作りながら、AppSheetの使い方を学びましょう。
前回(第2回)は、サンプルデータを読み込んでAppSheetアプリを作成してみました。
今回は、タスクに関連するファイルをGoogleドライブにアップロードしてみましょう。
AppSheetでよく使う「Ref」というTYPE(データ型)についても解説します。

1. 「ドライブ」テーブルの列を設定をする

前回(第2回)は、「タスク」テーブルの列を設定して、タスクを追加できるところまで進めました。

今回は、もうひとつの「ドライブ」テーブルの列を設定しましょう。
「ドライブ」テーブルは、AppSheetからGoogleドライブにファイルをアップロードするために用意しているテーブルです。

アプリエディタ左側メニュー「Data」をクリックします。
Dataナビゲーションで「ドライブ」テーブルを選択して、中央のメインパネルに「ドライブ」テーブルの列設定パネルを表示します。

下の表のように、各列の

  • TYPE(データ型)をプルダウンから選択する
  • KEY、LABEL、SHOW?などのチェックボックスをON / OFF する

ことで設定してください。

「タスク」テーブルと同様にTYPE(データ型)は、テーブルを読み込んだ時に自動的に設定されています。
ここでは、メモを「LongText」に変更します。
チェックボックスは「ON」のフィールドをチェックして、空欄はチェックを外してOFFにします。

「ドライブ」テーブルの列設定

NAME TYPE KEY LABEL SHOW? EDITABLE? REQUIRE? SEARCH?
_RowNumber Number
ID Text ON ON ON
タスク Ref ON ON ON ON
ファイル File ON ON ON ON
メモ LongText ON ON ON

 

「ドライブ」テーブルの各列について、補足解説と設定を続けます。

タスク

「タスク」列はTYPE(データ型)を「Ref」にしています。
「ドライブ」テーブルを追加した時に、AppSheetが自動的に「Ref」に設定しているはずです。

列名の左にある編集アイコンをクリックして「タスク」列 の設定を確認してみましょう。

Source tableが「タスク」テーブルに設定されています。これは、

  • 「タスク」列は、「タスク」テーブルを参照している

という意味です。

「Ref」型を理解するためには、以下のような公式を考えるとよいでしょう。

「Ref」の公式

「Ref」型の列は、

  • 参照先テーブル(Source table)を参照して、
  • 参照先テーブルのKEY列の値を保存することにより、
  • テーブル間のリレーションシップ(関連付け)を設定できる

サンプルデータで確認してみましょう。

「ドライブ」テーブル2行目の「タスク」列には、「18d9674c」が保存されています。
これは、「タスク」テーブル2行目の「ID」列の「18d9674c」と同じ値になっています。

「Ref」の公式に当てはめると、

「ドライブ」テーブルの「タスク」列は、

  • 参照先の「タスク」テーブルを参照して、
  • 参照先の「タスク」テーブルの「ID」列(KEY列)の値を保存することにより、
  • 「タスク」と「ドライブ」の間でリレーションシップ(関連付け)を設定した

という意味になります。

この「Ref」型の設定によって、タスクに関連するファイルをGoogleドライブにアップロードできるようになります。

Ref
  • 別テーブルを参照する
  • テーブル間のリレーションシップを設定する

「タスク」列 の設定を1箇所だけ変更しましょう。Is a part of ? のチェックをONにして、有効にします。

「Done」をクリックして「タスク」列設定パネルを閉じます。

一旦、画面右上の「SAVE」をクリックして、設定を保存しましょう。

「SAVE」ボタンをクリックして保存する。

アプリエディタ右側にあるプレビュー画面を確認します。
タブメニューで「タスク」を選択して、「+」ボタン(Add)をクリックしてください。

タスクを追加する入力フォーム画面が表示されます。
画面を一番下までスクロールすると、「New」というボタンがあるのでクリックしてみましょう。

「ファイル」列からファイルを追加できるようになっています。
8桁の英数字で分かりにくいですが、「タスク」と関連付けてファイルをアップロードできます。

このように、Is a part of ? を有効にすると、タスクを追加する時に、ファイルも同時に追加できるようになります。
また、タスクを削除した時に、関連する「ドライブ」レコードも同時に削除されます。
Googleドライブにアップロードしたファイルは削除されないので、ご注意ください。

「Cancel 」をクリックして、画面をひとつ戻しましょう。

「New」ボタンが表示されている列に「ドライブ entries that reference this entry in the タスク column」と表示されています。
この列は「Related ドライブs」という列です。

Dataナビゲーションで「タスク」テーブルをクリックして、「タスク」テーブルの列を表示しましょう。

「Related ドライブs」という列があります。
この列は、「Ref」型を設定すると自動的に追加されます。

「Related ドライブs」には、タスクに関連する「ドライブ」テーブルのレコードがリストになっています。
「New」または「Add」ボタンをクリックしてファイルを追加すると、以下のようにリスト表示されます。

「ドライブ entries that reference this entry in the タスク column」という説明文が長いので削除しましょう。
列設定パネルで「Related ドライブs」の「Description」フィールドをクリックして、Expression Assistantを開きます。

「ドライブ entries that reference this entry in the タスク column」を削除して「Save」すれば、アプリ上の表示が「Related ドライブs」に変更されます。

「ドライブ」テーブルの設定は終了です。

画面右上の「SAVE」をクリックして、設定を保存しましょう。

「SAVE」ボタンをクリックして保存する。

2. タスクを追加し、Googleドライブにファイルをアップロードする

ここまでで、「タスクを追加して、関連するファイルをGoogleドライブにアップロードする」というタスク管理アプリの基本機能は完成しています。
1件、タスクを追加してみましょう。

アプリエディタ右側のプレビュー画面で、タブメニュー「タスク」を選択します。
「+」ボタン(Add)をクリックします。

タスクを入力するフォーム画面が表示されるので、「タスク名」から順に入力します。

適当なPDFファイルを用意しておきます。
「Related ドライブs」の「New」ボタンをクリックします。

「タスク」にタスク名が表示されていると思います。
「タスク」列(Ref)は「タスク」テーブルを参照しており、LABELが「タスク名」なので、このようにタスク名が表示されます。

「ファイル」をクリックして、このタスクに関連付けるファイルを追加します。

ファイルを追加されました。
「メモ」にメモを入力して「Save」をクリックします。

追加したファイルは、「Related ドライブs」にリスト表示されます。
「New」で追加することもできます。

ここまで入力したら「Save」ボタンをクリックして、タスクを追加しましょう。

タブメニュー「タスク」を開くと、一番下にタスクが追加されていると思います。
クリックして開いてみましょう。

「Related ドライブs」に関連ファイルがリスト表示されています。
ファイルアイコン(Open File)をクリックしてみてください。
アップロードしたファイルが開きます。

3. アップロードしたファイルの保存場所を確認する

Googleドライブにアップロードしたファイルが、どのように保存されているのか確認してみます。

メインパネル右上にある「View Source」をクリックしてスプレッドシートを確認します。

「ドライブ」ワークシートを見てみましょう。

アップロードしたファイルのレコードが作成されています。
「タスク」の値(989c554f)は、参照元タスクの「ID」(KEY)です。
これで、タスクとファイル(ドライブ)のリレーションシップ(関連付け)ができます。

「ファイル」列の値(ドライブ_Files_/989c554f.ファイル.020142.pdf)がファイルの保存場所のパスです。

実際のファイルの保存場所を確認してみましょう。

「タスク管理アプリ」のGoogleスプレッドシートを保存している場所(エクセルのサンプルデータをアップロードした場所と同じです)を開きます。
そこに、「ドライブ_Files_」というフォルダが作成されていると思います。

このように、データソースのGoogleスプレッドシーと同じ階層に保存先フォルダが作られます。
「ドライブ_Files_」をクリックして開いてみましょう。

スプレッドシートに書き込まれていたファイル名(989c554f.ファイル.020142.pdf)でファイルが保存されています。

 

以上、タスクを追加して、関連するファイルをGoogleドライブにアップロードできるようになりました。
ここまでで、タスク管理アプリに必要な基本機能は完成しています。
これから機能を拡張して、より本格的なタスク管理アプリに仕上げていきましょう。
次回(第4回)は、カンバンボードの設定に必要となるスライスを作成します。

Share Me!

前の投稿
AppSheetでタスク管理アプリ(第2回)スプレッドシートからアプリ作成
次の投稿
AppSheetでタスク管理アプリ(第4回)スライスでデータを切り出す

関連記事

メニュー