· 

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

スプレッドシートからタスク管理アプリを作成する

 

このブログでは、タスク管理アプリでAppSheetの使い方を学びます。

 

前回(第1回)はアプリの概要について紹介しました。

今回は実際にアプリを生成して、テーブルと列の設定まで進めます。

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

 

それではアプリを作成していきましょう。

AppSheetアプリにはエクセルやGoogleスプレッドシートなどのデータが必要です。

このブログでは、タスク管理アプリのサンプルデータとしてエクセルのデータを用意しました。

まずは、下のエクセルデータをダウンロードしてください。

 

ダウンロード
タスク管理アプリのサンプルデータ
マイタスク.xlsx
Microsoft Excel 10.5 KB

 

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

 

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

 

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

 

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

 

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

 

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

2. アプリを生成する

 

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」を設定する。

 

 

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

 

Googleスプレッドシートを選択する。

 

アプリが生成できました。

画面右にプレビューが表示すると下のようになります。

 

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

3. テーブルを追加する

 

左側メニューにある「Data」をクリックして、データを確認しましょう。

タブメニュー「Tables」をクリックするとテーブルが表示されます。

テーブルとは、アプリからデータを追加したり、更新したり、削除できるデータの格納庫です。

「タスク」というテーブルをクリックしてみましょう。

 

テーブルを表示する。

 

「View Source」をクリックするとアプリに取り込んだスプレッドシートが表示されます。

「タスク」というワークシートがあり、テーブル名になっています。

 

列を表示する。

 

他に「ドライブ」「ノート」というシートがありますね。この2つのテーブルも作成しましょう。

AppSheetのエディタ画面に戻って「Data」→「Tables」でテーブル設定を続けます。

 

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

このボタンをクリックしましょう。

 

テーブルを追加する。

 

「ドライブ」「ノート」のテーブルができました。

テーブルの設定は特に変更する必要はありません。次に進みましょう。

 

テーブルを追加した。

4. 「タスク」テーブルの列を設定する

 

3つのテーブルの列を設定していきます。

タブメニュー「Columns」または、テーブルパネルの「View Columns」をクリックしましょう。

各テーブルの「列(Columns)」が一覧で表示されます。

 

列を設定する。

 

 

列には、アプリから追加した各項目のデータの値(文字、数字、日付、時間など)が保存されます。

アプリから追加したデータは、スプレッドシートでは1行ずつ記録されていきます。

この1行のデータを「レコード」と呼びます。

 

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

 

それでは、「タスク」テーブルの列を設定してきましょう。

下の表のように、各列のフィールドを設定してください。

 

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

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」列については電子名刺アプリで詳しい説明をしていますので、こちらを参照してください。

 

作成日

 

「作成日」列の設定をします。

タスクを追加する時に、初期値として当日の日付を表示させます。

「作成日」列 の左にあるペン型の編集アイコンをクリックすると、列の設定パネルが表示されます。

 

 

「作成日」を編集する。

 

Auto Compute → Initaial Value(初期値)を設定します。

三角フラスコアイコンをクリックします。

 

Initial Valueを設定する

 

Expression Assistant が表示されます。以下のように入力して「Save」をクリックします。

TODAYは今日の日付を入力する関数です。

 

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. 「ドライブ」テーブルの列を設定する

 

続けて、「ドライブ」テーブルの列を設定してきましょう。

タブメニュー「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 ?」をチェックした列(「ファイル」テーブルの「タスクID」列)は、参照元のテーブル(「タスク」テーブル)から操作できるようになります。

 

一旦、「タスク」テーブルの列設定パネルを開いてみましょう。

「Related ドライブs」という列が自動的に作成されていることが分かります。

「タスク」テーブルの一部に、「ドライブ」テーブルの「タスクID」列が含まれたということです。

 

「Related ドライブs」の左にあるペン型アイコンが青色なのが分かります。

これは「Related ドライブs」列が Virtual Column であることを示します。

仮想的に追加された列なので、スプレッドシートのデータには影響を及ぼしません。

 

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

 

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

 

区分

 

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

 

「区分」列はTYPEを「Enum」にしています。

「Enum」は、ボタンやプルダウンリストなどで値が選択できる列タイプです。

左の編集アイコンをクリックして「区分」列 を設定します。

 

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

 

「区分」を設定する。

 

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

 

6. 「ノート」テーブルの列を設定する

 

最後に、「ノート」テーブルの列を設定してきましょう。

タブメニュー「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 ?:チェックする

「Is a part of ?」をチェックすることにより、「タスク」テーブルに「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回)はカンバンボードの設定に必要となるスライスを作成します。

 

 

アプリを作る前に実際に試してみたい方は、アプリスイートが作ったサンプルアプリを7日間無料体験ができます。

こちらからお問い合わせください。