AppSheetでタスク管理アプリ（第2回）スプレッドシートからアプリ作成

タスク管理アプリを作りながら、AppSheetの使い方を学びましょう。
前回（第1回）はタスク管理アプリの概要について紹介しました。
今回は実際にアプリを作成して、テーブルと列の設定まで進めます。

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

1. スプレッドシートを作成する

それではアプリを作成していきましょう。
AppSheetアプリにはエクセルやGoogleスプレッドシートなどのデータが必要です。
このブログでは、タスク管理アプリのサンプルデータとしてエクセルのデータを用意しました。
まずは、下のエクセルアイコンをクリックしてデータをダウンロードしてください。

Googleアカウントにログインして、Googleドライブにエクセルのデータをアップロードしましょう。

Googleドライブ上でエクセルデータを開いた後、Googleスプレッドシートに変換して保存しておきます。

Googleスプレッドシートに変換して保存しました。

2. AppSheetアプリを生成する

AppSheetにログインして、「Make a new app」をクリックします。

「Start with your own data」をクリックします。

App name（アプリ名）には日本語が入力できないので、とりあえず「myTask」にします。
Category（カテゴリー）は選択しなくてもよいです。

Choose your data（ファイルを選択）でさきほど保存したGoogleスプレッドシート（マイタスク）を選択して「select」をクリックします。

これでAppSheetアプリが生成できました。
画面右にプレビューが表示されます。

3. タスク管理アプリのテーブルを追加する

AppSheetエディタの左側メニューにある「Data」をクリックして、データを確認しましょう。
タブメニュー「Tables」をクリックするとテーブルが表示されます。
テーブルとは、アプリからデータを追加したり、更新したり、削除できるデータの格納庫です。
「タスク」というテーブルをクリックしてみましょう。

「View Source」をクリックするとアプリに取り込んだスプレッドシートが表示されます。
「タスク」というワークシートがあり、テーブル名になっています。

他に「ドライブ」「ノート」というシートがありますね。この2つのテーブルも作成しましょう。
AppSheetのエディタ画面に戻って「Data」→「Tables」でテーブル設定を続けます。

「New Table」の右に「Add a table for "ドライブ"」「Add a table for "ノート"」というボタンがあります。
このボタンをクリックしましょう。

「ドライブ」「ノート」のテーブルができました。
テーブルの設定は特に変更する必要はありません。次に進みましょう。

4. AppSheetから「タスク」を追加する

3つのテーブルの列を設定していきます。
まずは、AppSheetからタスクを追加するために「タスク」テーブルの列を設定しましょう。

AppSheetエディタ左側メニューの「Data」を選択した状態にします。
タブメニュー「Columns」または、テーブルパネルの「View Columns」をクリックしましょう。
各テーブルの「列（Columns）」が一覧で表示されます。

列には、アプリから追加した各項目のデータの値（文字、数字、日付、時間など）が保存されます。
AppSheetから追加したデータは、スプレッドシートでは1行ずつ記録されていきます。
この1行のデータを「レコード」と呼びます。

それでは、「タスク」テーブルの列を設定してきましょう。
下の表のように、各列のフィールドを設定してください。

「タスク」テーブルの列設定

「タスク」テーブルの各列について設定します。

ID

「ID」列については電子名刺アプリで詳しい説明をしていますので、こちらを参照してください。
AppSheetでは「KEY」を設定した列でレコードを識別します。
タスク管理アプリでは、「ID」列を「KEY」として使用します。

作成日

「作成日」列の設定をします。
タスクを追加する時に、初期値として当日の日付を表示させます。
「作成日」列 の左にあるペン型の編集アイコンをクリックすると、列の設定パネルが表示されます。

Auto Compute → Initaial Value（初期値）を設定します。
三角フラスコアイコンをクリックします。

Expression Assistant が表示されます。以下のように入力して「Save」をクリックします。
TODAYは今日の日付を入力するAppSheet関数です。

カンバン

タスク管理アプリではタスクをカンバンボードで管理します。
カンバンボードは「未着手」「作業中」「完了」の3つを用意します。

「カンバン」列はTYPEを「Enum」にしています。
「Enum」は、ボタンやプルダウンリストなどで値が選択できる列タイプです。
左の編集アイコンをクリックして「カンバン」列 を設定します。

Type Details を以下のように設定します。

• Values ：「Add」で「未着手」「作業中」「完了」を追加
• Allow other values：チェックを外す
• Base Type：「Text」
• Input mode：「Buttons」

Auto Compute → Initaial Value（初期値）を設定します。
さきほどと同じように Expression Assistant から下のように「未着手」と入力して「Save」をクリックします。

進捗

「進捗」列は、ハーベイボールという方法で進捗状況を見える化します。
ハーベイボールは列タイプを「Progress」にして、決まった値を設定する必要があります。

左の編集アイコンをクリックして「進捗」列 を設定します。
Type Details を以下のように設定します。

• Values ：「Add」で「Empty」「Quarter」「Half」「Three Quarter」「Full」を追加
• Allow other values：チェックを外す
• Base Type：「Text」
• Input mode：「Buttons」

Auto Compute → Initaial Value（初期値）を設定します。
Expression Assistant から下のように「Empty」と入力して「Save」をクリックします。

カラー

「カラー」列は、カレンダーViewで表示したときにタスクを色分けできるように用意しました。

左の編集アイコンをクリックして「カラー」列 を設定します。
Type Details を以下のように設定します。

• Values ：「Add」で「Green」「Yellow」「Orange」「Red」「Purple」「Blue」「Black」「White」を追加
• Allow other values：チェックを外す
• Base Type：「Text」
• Input mode：「Auto」

「タスク」テーブルの列設定は以上です。
設定ができたら、画面右上の「SAVE」をクリックして保存してください。

AppSheetには自動的に保存する機能がありません。
設定を変更したら必ず「SAVE」で保存することを忘れずに。

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

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

AppSheetエディタ左側メニューの「Data」を選択した状態にします。
タブメニュー「Columns」→ 「ドライブ」をクリックして、列設定パネルを開きます。
下の表のように、各列のフィールドを設定してください。

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

「ドライブ」テーブルの各列について設定していきます。

タスクID

タスク管理アプリではタスクに関連するファイルをGoogleドライブにアップロードします。

「タスクID」列は、「タスク」テーブルの「ID」列の値を格納します。
タスクとファイルを関連付けるリレーションシップを設定できるようになります。

「タスクID」列はTYPEを「Ref」にしています。
「Ref」は、別テーブルの列の値を参照したり、テーブル間のリレーションシップを設定する列タイプです。

左の編集アイコンをクリックして「タスクID」列 を設定します。
Type Details を以下のように設定します。

• Source table：「タスク」
• Is a part of ?：チェックする

「Is a part of ?」をチェックすると、タスクを追加する時に「ファイル」も同時に追加できるようになります。
また、タスクを削除した時に、関連するファイルも同時に削除されます。

「Is a part of ?」をチェックした列（「ファイル」テーブルの「タスクID」列）は、参照元のテーブル（「タスク」テーブル）から操作できるようになります。

一旦、画面右上の「SAVE」をクリックして保存してください。
次に、「タスク」テーブルの列設定パネルを開いてみましょう。
「Related ドライブs」という列が自動的に作成されていることが分かります。
「タスク」テーブルの一部に、「ドライブ」テーブルの「タスクID」列が含まれたということです。

「Related ドライブs」の左にあるペン型アイコンが青色なのが分かります。
これは「Related ドライブs」列が Virtual Column であることを示します。
AppSheetに仮想的に追加された列なので、スプレッドシートのデータには影響を及ぼしません。

「ファイル」テーブルの列設定パネルに戻りましょう。

区分

ファイルの内容を「成果物」「参考」「その他」で区分します。

「区分」列はTYPEを「Enum」にしています。
「Enum」は、ボタンやプルダウンリストなどで値が選択できる列タイプです。
左の編集アイコンをクリックして「区分」列 を設定します。

Type Details → Values で「Add」をクリックして「成果物」「参考」「その他」を追加します。

Input mode は「Buttons」にしておいた方がよいでしょう。

6. タスクに関連するメモを追加する

最後に、「ノート」テーブルの列を設定してきましょう。
「ノート」テーブルは、タスクに関連したメモを追加するために用意しているテーブルです。

AppSheetエディタ左側メニューの「Data」を選択した状態にします。
タブメニュー「Columns」→ 「ノート」をクリックして、列設定パネルを開きます。
下の表のように、各列のフィールドを設定してください。

「ノート」テーブルの列設定

「ノート」テーブルの各列について設定していきます。

タスクID

「タスクID」列は、「ドライブ」テーブルの「タスクID」と同じ設定です。Type Details を以下のように設定します。

• Source table：「タスク」
• Is a part of ?：チェックする

「Ref」TYPEにすることで、「タスク」テーブルに「Related ノートs」という列（Virtual Colomn）が自動的に作成されます。「タスク」テーブルから、「ノート」テーブルの「タスクID」列が操作できるようになりました。
これで、タスクを追加したり更新したりする時に「ノート」を追加できるようになります。

作成日

「作成日」列は、「タスク」テーブルの「作成日」と同じ設定です。
Auto Compute → Initaial Value → Expression Assistant に「TODAY()」を設定して、「Save」します。

ノートタグ

ノートにタグをつけられるようにします。

「ノートタグ」列はTYPEを「EnumList」にしています。
「EnumList」は、チェックボックスで複数の値を選択できるようにする列タイプです。
「ノートタグ」列では「EnumList」を応用してタグをつけられるようにします。

左の編集アイコンをクリックして「ノートタグ」列 を設定します。
Type Details を以下のように設定します。

• Values ：「Add」で「注意」「コメント」「その他」を追加
• Allow other values：チェックする
• Auto-complete other values：チェックする
• Base Type：「Text」
• Input mode：「Auto」

「Allow other values」をチェックすることで、追加済の値（テキスト）以外を随時追加できるようになります。
これで「EnumList」をタグのように使えるようになります。

以上、タスク管理アプリを生成してみました。
ここまでの設定でとりあえずタスクを追加するための準備はできました。

次回（第3回）はカンバンボードの設定に必要となるスライスを作成します。