タスク管理アプリを作りながら、AppSheetの使い方を学びましょう。
前回（第6回）はActionを作成して、ボタンクリックで特定の列の値を更新できるようにしました。
今回は、タスクに関連するファイルをGoogleドライブにアップロードしてみましょう。
AppSheetはGoogle Workplaceに統合されています。Googleドライブとの連携もノーコードで設定するだけです！
【お知らせ】
2022年10月以降、AppSheetエディタの画面が新しく変更されています。
AppSheetのアップデートが速すぎて（汗）、このブログ記事はまだ新エディタの画面には対応していません。
エディタ画面右上にある「Switch to the legacy editor」というアイコンをクリックすると、新エディタと旧エディタの切り替えができます。
記事のアップデートができるまでは、とりあえず、旧エディタに切り替えて解説を読んでください。
目次
1. AppSheetの分かりにくい表示を整える
第4回でViewの設定を行いました。
アプリ内にはAppSheet特有の分かりにくい表示があり、そこが気になります。
例えば、「Related ドライブs」のような感じです。
ここで、分かりやすい表示に整えましょう。
Related列の表示を設定する
AppSheetエディタの左側メニュー「Data」→ タブメニュー「Columns」→「タスク」をクリックして、「タスク」テーブルの列設定パネルを開きます。
「タスク」テーブルには「Related ドライブs」列と「Related ノートs」列というVirtual Columnがあります。
現在は列名がそのままアプリに表示されているので、分かりにくいです。
そこで、列設定パネルでDISPLAY NAMEを設定しましょう。
右にスクロールしていくと、DISPLAY NAMEのフィールドがあります。
DISPLAY NAMEのフィールドをクリックして、直接設定してしまいましょう。
Expression Assistantが開きます。
「Related ドライブs」のDISPLAY NAMEには「ドライブ」、「Related ノートs」のDISPLAY NAMEには「ノート」と入力、「Save」をクリックします。
このようになっていれば問題ありません。
ついでに、DISPLAY NAMEの右隣にあるDESCRIPTIONを消去しましょう。
実は、DESCRIPTIONの文章が「タスク_Form」に表示されています。
これを消去することでDISPLAY NAMEに置き換わるので、表示がスッキリします。
これで完成です。
Viewを設定する
次に、Viewを設定します。
AppSheetエディタの左側メニュー「UX」→ タブメニュー「Views」をクリックします。
Ref Viewsにある「タスク_Detail」をクリックして、View設定パネルを開きます。
Column orderに「Add」で以下のように列を追加してください。
では、「タスク_Detail」Viewを確認してみましょう。
「ドライブ」「ノート」に表示が変更されているでしょうか。
続けて、「タスク_Form」のView設定パネルを開いてください。
「タスク_Form」のColumn orderも同じように設定してください。
「ドライブ」と「ノート」のViewも整えましょう。
それぞれ、View OptionsのColumn orderを調整します。
まずは、「ドライブ_Form」のColumn orderは以下のようにします。
右上の「Save」をクリックすると、アラートが表示されて「ID」列が自動的に追加されると思いますが、無視して大丈夫です。
次に、「ノート_Form」のColumn orderを以下のようにします。
同じようにアラートが表示されますが、こちらも無視して大丈夫です。
2. AppSheetからGoogleドライブにファイルをアップロードする
それでは、AppSheetからファイルをアップロードしてみましょう。
アップロードしたファイルはGoogleドライブに保存されます。
また、テーブル間のリレーションシップを利用してファイルをタスクに関連づけることができます。
ファイルをアップロードする
では、追加済のタスクを1つ選んで、実際にファイルをアップロードしてみましょう。
右下の「Edit」ボタンをクリックします。
画面をスクロールすると「ドライブ」があります。
「New」をクリックします。
「区分」を選択、「タイトル」を入力します。
「ファイル」のフィールドをクリックして、アップロードするファイルを選択、「Save」をクリックします。
この段階ではまだアップロードされません。
Form画面に戻ります。
「ドライブ」に追加したファイルが表示されています。この時点ではアップロード待ちの状態です。
「Save」をクリックするとアップロードが開始されます。
アップロード開始後はこのような画面になります。
「ドライブ (1)」と表示され、ファイルが1つ追加されたことが分かります。
スプレッドシートを確認する
どのようにファイルがアップロードされたのかスプレッドシートを確認してみましょう。
AppSheetエディタの左側メニュー「Data」→ タブメニュー「Tables」→ 「ドライブ」をクリックしてテーブル設定パネルを開きます。
右上の「View Source」をクリックしてスプレッドシートを開きます。
「ドライブ」ワークシートをクリックします。
さきほどアップロードしたファイルについてレコードが作成されています。
「タスクID」の文字列は、参照元タスクのレコードの「ID」です。この値によって「タスク」と「ドライブ」のリレーションシップが設定されます。
「ファイル」列の「ドライブ_Images/55c75e6e.ファイル.024457.png」が、ファイルが保存されている場所です。
保存場所を確認する
実際のファイルの保存場所を確認してみましょう。
Googleドライブで、「マイタスク」スプレッドシートを保存しているフォルダを開きます。
「ドライブ_Images（または、ドライブ_Files_）」というフォルダが作られていると思います。
画像をアップロードすると「ドライブ_Images」に、画像以外のファイルだと「ドライブ_Files_」になります。
このように、データソースのスプレッドシート「マイタスク」と同じ階層に保存先フォルダが作られます。
「ドライブ_Images（または、ドライブ_Files_）」をクリックして開いてみましょう。
スプレッドシートに書き込まれていたファイル名（55c75e6e.ファイル.024457.png）でファイルが保存されています。
3. タスクにノートを追加する
最後に、ノートを追加してみましょう。
テーブル間のリレーションシップを利用しているので、一つのタスクに対して複数のノートを関連付けることができます。
ノートを追加する
ファイルアップロードの時と同じようにタスクを1つ選んで、ノートを追加してみましょう。
タスクをクリック →「Edit」ボタンをクリック → 画面スクロールすると「ノート」があります。
ノートの「New」をクリックします。
ノートを追加するFormが開くので、作成日（今日の日付）、ノートを入力します。
ノートタグを追加するには、「+」の入力フィールドをクリックします。
第2回の列設定でタグの初期値は作成しました。
新しいタグを追加する場合は、「 Add or search」に入力します。
追加したタグを選択できるようになります。
「Done」で確定させます。
「Save」でノートを追加します。
この段階ではまだノートは保存されていません。
「ノート」に先ほど追加したノートが保存待ち状態になっています。
「Save」をクリックして保存します。
ノートの保存に成功すると以下のようになります。
「ノート (1) 」と表示され、ノートが1つ追加されたことが分かります。
スプレッドシートを確認する
どのようにノートが保存されたか、スプレッドシートを確認してみましょう。
ファイルアップロードと同じようにスプレッドシートを開き、今度は「ノート」ワークシートをクリックします。
さきほど追加したノートのレコードが作成されています。
「タスクID」の文字列は、参照元タスクのレコードの「ID」です。この値によって「タスク」と「ノート」のリレーションシップが設定されます。
以上、Viewの表示を調整し、Googleドライブにファイルアップロード、タスクにノートを追加しました。
これで、タスク管理アプリの作り方は終了です。いかがでしたか？
カンバンボードにスライスを活用する点が AppSheetらしい作り方です。
他に、AppSheetの標準機能であるFormat RulesとActionについても基本的な使い方を学びました。
タスク管理アプリは、AppSheetの使い方を習得するために最適なアプリなので、是非挑戦してみてください。
