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

folder_openAppSheet

タスク管理アプリを作りながら、AppSheetの使い方を学びましょう。
前回(第6回)はActionを作成して、ボタンクリックで特定の列の値を更新できるようにしました。
今回は、タスクに関連するファイルをGoogleドライブにアップロードしてみましょう。
AppSheetはGoogle Workplaceに統合されています。Googleドライブとの連携もノーコードで設定するだけです!

【お知らせ】
2022年10月以降、AppSheetエディタの画面が新しく変更されています。
AppSheetのアップデートが速すぎて(汗)、このブログ記事はまだ新エディタの画面には対応していません。
エディタ画面右上にある「Switch to the legacy editor」というアイコンをクリックすると、新エディタと旧エディタの切り替えができます。
記事のアップデートができるまでは、とりあえず、旧エディタに切り替えて解説を読んでください。

Switch to the legacy editor」で旧エディタに切り替える。

1. AppSheetの分かりにくい表示を整える

第4回でViewの設定を行いました。
アプリ内にはAppSheet特有の分かりにくい表示があり、そこが気になります。
例えば、「Related ドライブs」のような感じです。
ここで、分かりやすい表示に整えましょう。

AppSheet特有の分かりにくい表示。

Related列の表示を設定する

AppSheetエディタの左側メニュー「Data」→ タブメニュー「Columns」→「タスク」をクリックして、「タスク」テーブルの列設定パネルを開きます。

AppSheetエディタで列設定をする。

「タスク」テーブルには「Related ドライブs」列と「Related ノートs」列というVirtual Columnがあります。
現在は列名がそのままアプリに表示されているので、分かりにくいです。
そこで、列設定パネルでDISPLAY NAMEを設定しましょう。
右にスクロールしていくと、DISPLAY NAMEのフィールドがあります。

「Related ドライブs」「Related ノートs」の列を探す。

DISPLAY NAMEのフィールドをクリックして、直接設定してしまいましょう。

AppSheetではDISPLAY NAME の設定でアプリ内での表示を変えられる。

Expression Assistantが開きます。
「Related ドライブs」のDISPLAY NAMEには「ドライブ」、「Related ノートs」のDISPLAY NAMEには「ノート」と入力、「Save」をクリックします。

Expression Assistant に入力する。

このようになっていれば問題ありません。
ついでに、DISPLAY NAMEの右隣にあるDESCRIPTIONを消去しましょう。
実は、DESCRIPTIONの文章が「タスク_Form」に表示されています。
これを消去することでDISPLAY NAMEに置き換わるので、表示がスッキリします。

DISPLAY NAME を設定してAppSheetアプリ内での表示を変更し、DESCRIPTIONを消去した。

これで完成です。

DISPLAY NAME の設定が完成した。

Viewを設定する

次に、Viewを設定します。
AppSheetエディタの左側メニュー「UX」→ タブメニュー「Views」をクリックします。

AppSheetアプリのViewを調整する。

Ref Viewsにある「タスク_Detail」をクリックして、View設定パネルを開きます。

タスク_Detail を設定する。

Column orderに「Add」で以下のように列を追加してください。

AppSheet Detail View の Column order を設定する。

では、「タスク_Detail」Viewを確認してみましょう。
「ドライブ」「ノート」に表示が変更されているでしょうか。

「タスク_Detail」を確認する。

続けて、「タスク_Form」のView設定パネルを開いてください。
「タスク_Form」のColumn orderも同じように設定してください。

AppSheet Detail View の Column order を設定する。

「ドライブ」と「ノート」のViewも整えましょう。
それぞれ、View OptionsのColumn orderを調整します。

まずは、「ドライブ_Form」のColumn orderは以下のようにします。

AppSheet Form View の Column order を設定する。

右上の「Save」をクリックすると、アラートが表示されて「ID」列が自動的に追加されると思いますが、無視して大丈夫です。

次に、「ノート_Form」のColumn orderを以下のようにします。
同じようにアラートが表示されますが、こちらも無視して大丈夫です。

「ノート_Form」の View を調整する。

2. AppSheetからGoogleドライブにファイルをアップロードする

それでは、AppSheetからファイルをアップロードしてみましょう。
アップロードしたファイルはGoogleドライブに保存されます。
また、テーブル間のリレーションシップを利用してファイルをタスクに関連づけることができます。

ファイルをアップロードする

では、追加済のタスクを1つ選んで、実際にファイルをアップロードしてみましょう。

AppSheetアプリからファイルをアップロードするタスクを選ぶ。

右下の「Edit」ボタンをクリックします。

「Edit」ボタンをクリックする。

画面をスクロールすると「ドライブ」があります。
「New」をクリックします。

「ドライブ」の「New」をクリックする。

「区分」を選択、「タイトル」を入力します。
「ファイル」のフィールドをクリックして、アップロードするファイルを選択、「Save」をクリックします。
この段階ではまだアップロードされません。

ファイルアップロードのForm画面を表示する。

Form画面に戻ります。
「ドライブ」に追加したファイルが表示されています。この時点ではアップロード待ちの状態です。
「Save」をクリックするとアップロードが開始されます。

AppSheetアプリに、ドライブにアップロード待ちのファイルが追加される。

アップロード開始後はこのような画面になります。
「ドライブ (1)」と表示され、ファイルが1つ追加されたことが分かります。

AppSheetアプリからGoogleドライブにアップロードしてみる。

スプレッドシートを確認する

どのようにファイルがアップロードされたのかスプレッドシートを確認してみましょう。
AppSheetエディタの左側メニュー「Data」→ タブメニュー「Tables」→ 「ドライブ」をクリックしてテーブル設定パネルを開きます。
右上の「View Source」をクリックしてスプレッドシートを開きます。

AppSheetデータソースのスプレッドシートを開く。

「ドライブ」ワークシートをクリックします。

さきほどアップロードしたファイルについてレコードが作成されています。
「タスクID」の文字列は、参照元タスクのレコードの「ID」です。この値によって「タスク」と「ドライブ」のリレーションシップが設定されます。

「ファイル」列の「ドライブ_Images/55c75e6e.ファイル.024457.png」が、ファイルが保存されている場所です。

スプレッドシート「ドライブ」のレコードを確認する。

保存場所を確認する

実際のファイルの保存場所を確認してみましょう。
Googleドライブで、「マイタスク」スプレッドシートを保存しているフォルダを開きます。

「ドライブ_Images(または、ドライブ_Files_)」というフォルダが作られていると思います。
画像をアップロードすると「ドライブ_Images」に、画像以外のファイルだと「ドライブ_Files_」になります。

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

Googleドライブ内のファイルの保存先を確認する。

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

アップロードされたファイルを確認する。

3. タスクにノートを追加する

最後に、ノートを追加してみましょう。
テーブル間のリレーションシップを利用しているので、一つのタスクに対して複数のノートを関連付けることができます。

ノートを追加する

ファイルアップロードの時と同じようにタスクを1つ選んで、ノートを追加してみましょう。
タスクをクリック →「Edit」ボタンをクリック → 画面スクロールすると「ノート」があります。
ノートの「New」をクリックします。

AppSheetアプリからノートを追加する。

ノートを追加するFormが開くので、作成日(今日の日付)、ノートを入力します。
ノートタグを追加するには、「+」の入力フィールドをクリックします。

「タグ」のフィールドをクリックする。

第2回の列設定でタグの初期値は作成しました。
新しいタグを追加する場合は、「 Add or search」に入力します。

AppSheetのEnum Listでは、Add or search に入力すると「+ Add」でタグを追加できる。

追加したタグを選択できるようになります。
「Done」で確定させます。

追加したタグを選択する。

「Save」でノートを追加します。
この段階ではまだノートは保存されていません。

ノートを追加する。

「ノート」に先ほど追加したノートが保存待ち状態になっています。
「Save」をクリックして保存します。

「Save」してAppSheetにノートを追加する。

ノートの保存に成功すると以下のようになります。
「ノート (1) 」と表示され、ノートが1つ追加されたことが分かります。

ノートの保存に成功。

スプレッドシートを確認する

どのようにノートが保存されたか、スプレッドシートを確認してみましょう。
ファイルアップロードと同じようにスプレッドシートを開き、今度は「ノート」ワークシートをクリックします。

さきほど追加したノートのレコードが作成されています。
「タスクID」の文字列は、参照元タスクのレコードの「ID」です。この値によって「タスク」と「ノート」のリレーションシップが設定されます。

ノートの保存について、AppSheetデータソースのスプレッドシートを確認する。

以上、Viewの表示を調整し、Googleドライブにファイルアップロード、タスクにノートを追加しました。

これで、タスク管理アプリの作り方は終了です。いかがでしたか?
カンバンボードにスライスを活用する点が AppSheetらしい作り方です。
他に、AppSheetの標準機能であるFormat RulesとActionについても基本的な使い方を学びました。
タスク管理アプリは、AppSheetの使い方を習得するために最適なアプリなので、是非挑戦してみてください。

Share Me!

前の投稿
AppSheetでタスク管理アプリ(第6回)Actionで列の値を更新する
次の投稿
AppSheetで請求書アプリ(第1回)Automationで請求書を発行しよう

関連記事

メニュー