タスク管理アプリを作りながら、AppSheetの使い方を学びましょう。
前回（第1回）はタスク管理アプリの概要について紹介しました。
第2回は、実際にサンプルデータをAppSheetに読み込んで、アプリを作成してみましょう。
テーブルを追加して、「タスク」テーブルの列の設定まで進めます。
目次
1. サンプルデータをGoogleドライブにアップロードする
それでは、AppSheetでタスク管理アプリを作成していきましょう。
AppSheetアプリにはエクセルやGoogleスプレッドシートなどのデータが必要です。
このブログでは、タスク管理アプリのサンプルデータとしてエクセルデータを用意しました。
下のエクセルアイコンをクリックして、データをダウンロードしてください。
Googleアカウントにログインして、Googleドライブにエクセルデータをアップロードしましょう。
エクセルデータをGoogleスプレッドシートに変換します。
今アップロードしたエクセルデータを開きます。
「ファイル」メニューをクリックして、「Googleスプレッドシートとして保存」をクリックします。
エクセルをGoogleスプレッドシートに変換して保存しました。
2. GoogleスプレッドシートからAppSheetアプリを作成する
AppSheetアプリを作成しましょう。
先ほど変換したGoogleスプレッドシート「タスク管理アプリ」を開いた状態で、「拡張機能」メニューをクリックすると、「AppSheet」が表示されます。
「AppSheet」にカーソルを合わせて、「アプリを作成」をクリックしてください。
「We're setting up your new app!」と表示されます。
AppSheetがサンプルデータを読み込んでアプリを作成します。
アプリが無事に作成されると「Your app is ready!」と表示されます。
右上の「×」ボタンか、「customize your app」をクリックして閉じましょう。
AppSheetアプリが作成できました。
アプリエディタ（App editor）画面の右側にアプリのプレビューが表示されます。
3. タスク管理アプリのテーブルを追加する
アプリエディタの左側メニューにある「Data」をクリックして、データを確認しましょう。
Dataナビゲーション（青い帯の部分）に「タスク」テーブルが追加されていることが分かります。
テーブル（Table）とは、アプリからデータを追加したり、更新したり、削除できるデータの格納庫です。
テーブルは黒い円柱のアイコンで表示されます。
「タスク」テーブルをクリックして選択すると、タスクのデータ項目が中央のメインパネルに一覧表示されます。
こららのデータ項目を列（Columns）と呼びます。
メインパネルの上部に「View data source」ボタンがあるのでクリックしてみましょう。
サンプルデータの「タスク管理アプリ」スプレッドシートが開きます。
このスプレッドシートには、ワークシートが2つあります。
AppSheetがアプリを作成するときに、「タスク」ワークシートを読み込んでテーブルとして追加しました。
- 「タスク」ワークシートの1行目のデータ項目（ID、タスク名、内容、作成日時...）
- 「タスク」テーブルの列名（1行目「_RowNumber」は無視して、2行目のID以降）
が一致していることを確認してください。
「タスク管理アプリ」スプレッドシートには、もうひとつ「ドライブ」ワークシートがあります。
これをテーブルとして追加します。
アプリエディタ左側メニューにある「Data」をクリックします。
Dataナビゲーションの右上にある「+」ボタン（Add new data）をクリックします。
「SUGGESTIONS」に、「Add Table "ドライブ"」という薄青ボタンが表示されるのでクリックします。
「Add this table」ボタンをクリックしてテーブルを追加します。
Dataナビゲーションに「ドライブ」テーブルが追加されました。
中央のメインパネルに、「ドライブ」テーブルの列が表示されていると思います。
テーブルの設定は特に変更する必要はありません。次に進みましょう。
4. 「タスク」テーブルの列を設定する
「タスク」テーブルの列を設定しましょう。
列には、アプリから追加した各データ項目の値（文字、数字、日付、時間など）が保存されます。
アプリから追加したデータは、スプレッドシートでは1行ずつ記録されていきます。
この1行のデータを行（Rows）と呼んだり、レコード（Records）と呼んだりします。
このブログではレコードと呼ぶことが多いので、「1行のデータのことだな」と思ってください。
アプリエディタ左側メニュー「Data」をクリックします。
Dataナビゲーションで「タスク」テーブルを選択して、中央のメインパネルに「タスク」テーブルの列設定パネルを表示します。
それでは、「タスク」テーブルの列を設定してきましょう。
下の表のように、各列の
- TYPEをプルダウンから選択する
- KEY、LABEL、SHOW?などのチェックボックスをON / OFF する
ことで設定してください。
TYPE（データ型）とは列に保存するデータの種類（テキスト型、数値型、日付型など）のことです。
AppSheetがサンプルデータを読み込んだときに自動的に設定してくれますが、
- 内容：LongText
- ステータス：Enum
の2ヶ所の設定を変更します。
チェックボックスは「ON」のフィールドをチェックして、空欄はチェックを外してOFFにします。
「タスク」テーブルの列設定
| NAME | TYPE | KEY | LABEL | SHOW? | EDITABLE? | REQUIRE? | SEARCH? |
|---|---|---|---|---|---|---|---|
| _RowNumber | Number | ||||||
| ID | Text | ON | ON | ON | |||
| タスク名 | Text | ON | ON | ON | ON | ON | |
| 内容 | LongText | ON | ON | ON | |||
| 作成日時 | DateTime | ON | ON | ON | ON | ||
| 期日 | Date | ON | ON | ON | ON | ||
| ステータス | Enum | ON | ON | ON | ON | ||
| 完了日 | Date | ON | ON | ON | |||
| カラー | Color | ON | ON | ON | |||
| Related ドライブs | List | ON | ON |
「タスク」テーブルの各列について、補足解説と設定を続けます。
ID
「ID」列は「タスク」ワークシートのA1にあらかじめ入れておきました。
AppSheetではワークシートの1行目に「ID」を入れておくと、自動的に以下のように設定してくれます。
- TYPE：Text
- KEY：ON
- LABEL：ON
- INITIAL VALUE：UNIQUEID()
AppSheetは「ID」列を自動的にKEYとして設定します。
KEYはレコードを識別する列に設定する必要があります。
「ID」列には、INITIAL VALUE（初期値）に「UNIQUEID()」という関数が設定されます。
この関数を設定した列には、重複がないユニークな値（ランダムな英数字8桁）が保存されます。
「UNIQUEID()」を設定することによりレコードの識別が可能になるので、その列をKEYとして使用できるようになります。
タスク管理アプリでは「ID」列に以下の設定を追加しています。
- LABEL：OFF
- SHOW ?：OFF
LABELを設定した列は画面（ビュー：View）で表示したり、他のテーブルから参照したときに表示されます。
名前（例：顧客名、社員名、商品名など）やタイトルをLABELに設定するのがオススメです。
タスク管理アプリでは「タスク名」列をLABELに設定しました。
タスク名が、ビューや他のテーブルから参照した時に表示されるので分かりやすくなります。
最後に、「ID」列はランダムな英数字なので、アプリ上に表示されてもあまり意味がありません。
なので、「SHOW ?」のチェックを外して非表示にしました。
作成日時
「作成日時」列には、タスクを作成した日時を入力します。
アプリからいちいち日時を入力するのは面倒なので、現在日時が自動的に入力できるようにします。
AppSheetには、INITIAL VALUE（初期値）という設定項目があります。
INITIAL VALUEにNOW関数を設定すると、現在日時が自動的に入力されます。
現在日時を入力する。
実は、AppSheetがサンプルデータから判定して、自動的にINITIAL VALUEにNOW関数を設定してくれています。
なので、ここでは設定変更は不要です。
期日
「期日」列には、期日の日付を入力します。
INITIAL VALUEにTODAY関数が設定されているので、タスク入力フォームで初期値として今日の日付が入力されます。
今日の日付を入力する。
ただし、タスクを追加する際に期日が今日であるとは限りません。
ここは空欄にしておいて、ユーザーが自分で入力するように変更しましょう。
「期日」列のINITAIL VALUEフィールドをクリックします。
Expression Assistantが開くので、「TODAY()」を削除して「Save」します。
以下のように、INITAIL VALUEが空欄になっていればOKです。
完了日
「完了日」列には、タスクが完了した日の日付を入力します。
ここでは、「ステータス」列の値を「完了」に変更した時に、自動的に完了日の日付を入力するようにします。
「完了日」列のFORMULAフィールドをクリックします。
Expression Assistantが開くので、以下の式をコピペします。
|
1 2 3 4 |
IF( [ステータス] = "完了", TODAY(), "" ) |
この式の意味は、「ステータス」の値が、
- 「完了」の時、今日の日付を入力する
- それ以外の時、空白にする
という意味になります。
タスクのステータスを「完了」に変更すると「完了日」列に今日の日付が保存されます。
以下のように、Expression Assistantに入力して「Save」をクリックします。
「完了日」は上の式によって自動的に入力されるので、INITIAL VALUEのTODAY関数は不要になります。
「期日」と同様に、INITIAL VALUEは空欄にしておきましょう。
「完了日」のINITAIL VALUEフィールドをクリックします。
Expression Assistantが開くので、「TODAY()」を削除して「Save」します。
以下のように、INITAIL VALUEが空欄になっていればOKです。
ステータス
タスク管理アプリでは、カンバンボードでステータス管理（進捗管理）します。
ステータスは「着手前」「作業中」「完了」の3つを用意しましょう。
「ステータス」列はTYPEを「Enum」にしています。
「Enum」は、ボタンやプルダウンリストなどで値を選択（単一選択）できる列タイプです。
列名の左にある編集アイコンをクリックして「ステータス」列 を設定します。
Typeが「Enum」になっていることを確認して、Type Details を以下のように設定します。
- Values ：Addボタンで「着手前」「作業中」「完了」を追加
- Input mode：「Buttons」
続けて、INITIAL VALUE（初期値）も設定しましょう。
タスクを新規で追加する時、ステータスは「着手前」が多いと思います。
なので、初期値として「着手前」が自動的に入力されていれば、入力の手間が省けます。
Auto Comuputeタブをクリックして開き、INITIAL VALUEの入力フィールドをクリックします。
Expression Assistantが開くので、以下のように「着手前」と入力して「Save」します。
Initial Valueに「着手前」が設定されたら、設定パネル右上の「Done」ボタンをクリックして閉じます。
カラー
「カラー」列は、カレンダー表示したときにタスクを色分けできるように用意しました。
「カラー」列は、AppSheetがサンプルデータから判定して自動的に設定してくれています。
どのように設定されているか確認してみましょう。
列名の左にある編集アイコンをクリックして「カラー」列 設定パネルを開きましょう。
Type DetailsのValuesに、8種類（Green、Yellow、Orange、Red、Purple、Blue、White、Black）のカラーの値が追加されていることが分かります。
「タスク」テーブルの列設定は以上です。
設定ができたら、画面右上の「SAVE」をクリックして保存してください。
AppSheetには自動的に保存する機能がありません。
設定を変更したら必ず「SAVE」で保存することを忘れずに。
以上、スプレッドシートのサンプルデータからタスク管理アプリを作成してみました。
ID、KEY、LABELなどはAppSheetの基礎知識なので、忘れたらこの記事の補足解説で復習してください。
次回（第3回）は、タスクに関連するファイルをGoogleドライブにアップロードできるようにします。
