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

folder_openAppSheet

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

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

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

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

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

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

Googleドライブにエクセルのデータをアップロードする。

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

エクセルデータをGoogleスプレッドシートに変換する。

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

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

2. AppSheetアプリを生成する

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

AppSheetにログイン後、「Make a new app」をクリックする。

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

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

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

「Create a new app」を設定してAppSheetアプリを生成する。

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

AppSheetデータソースにするGoogleスプレッドシートを選択する。

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

AppSheetプレビューにアプリが表示される。

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

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

AppSheetエディタでテーブルを表示する。

「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エディタで列を設定する。

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

IDはスプレッドシートのレコードを識別する。

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

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

NAME TYPE KEY LABEL SHOW? EDITABLE? REQUIRE?
_RowNumber Number
ID Text check check check
タスク Text check check check check
タスク説明 LongText check check check
作成日 Date check check check
期日 Date check check check
完了日 Date check check
カンバン Enum check check check
進捗 Progress check check check
カラー Color check check

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

ID

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

作成日

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

「作成日」を編集する。

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

Initial Valueを設定する

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

TODAY関数を設定する。

TODAY()

今日の日付を入力する。

カンバン

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

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

「カンバン」を設定する。

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

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

Enumの値を設定する。

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

Enumの初期値を設定する。

進捗

「進捗」列は、ハーベイボールという方法で進捗状況を見える化します。
ハーベイボールは列タイプを「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」をクリックします。

Initial Valueを設定する。

カラー

「カラー」列は、カレンダー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」で保存することを忘れずに。

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

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

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

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

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

NAME TYPE KEY LABEL SHOW? EDITABLE? REQUIRE?
_RowNumber Number
ID Text check check check
タスクID Ref check check
区分 Enum check check check
タイトル Text check check check check
ファイル File check check check

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

タスクID

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

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

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

Ref
  • 別テーブルの値を参照して、リスト表示などに使用する
  • テーブル間のリレーションシップを設定する

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

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

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

「Is a part of ?」を設定する。

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

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

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

「タスク」テーブルで「Related ドライブs」の仮想列を確認する。

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

区分

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

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

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

「区分」を設定する。

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

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

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

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

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

NAME TYPE KEY LABEL SHOW? EDITABLE? REQUIRE?
_RowNumber Number
ID Text check check check
タスクID Ref check check
作成日 Date check check check
ノート LongText check check check check
ノートタグ EnumList check check

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

タスク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回)はカンバンボードの設定に必要となるスライスを作成します。

Share Me!

前の投稿
AppSheetでタスク管理アプリ(第1回)カンバンでタスク管理しよう
次の投稿
AppSheetでタスク管理アプリ(第3回)スライスでデータを切り出す

関連記事

メニュー