はじめに
こんにちは。NTTドコモ サービスイノベーション部の大西です。 普段の業務ではマーケティング関連のデータ分析や開発をしています。 また趣味でGAS（Google Apps Script）やGoogle AppSheetを使って簡単なアプリなどを作っています。 AppSheetで作成した家事管理アプリについて以前社内で話した際に受けが良かったため、本記事ではその作り方を紹介したいと思います！
AppSheetとは
- ノーコードでアプリを作ることができるサービス
- 2020年にGoogleが買収
- 無料・有料プランがある
- 個人で簡易的に利用する場合、無料プランでも不便はなかった（テストユーザとして最大10人と共有可能）
- 参考
対象者
今回の記事は、AppSheet初心者の方向けにAppSheetの始め方から記載しています。
今回作るもの
家事タスクとその実績を管理するアプリを作成します。 今回は以下の機能を実装します。
- タスク管理機能：家事タスク、担当者、実施有無を登録し一覧で確認できる
- 集計・可視化機能：実施済の家事タスクを集計し、分担割合をグラフで可視化
なお、今回は家事タスクの管理を例にご紹介していますが、家事以外にも複数人でのタスク管理・分担実績を確認をしたい場合に利用できるものになっています。
アプリ作成方法
Googleアカウントを持っていることを前提としていますので、Googleアカウントをご用意ください。 手順の中でAppSheetにGoogleドライブやスプレッドシートの操作権限を許諾するため、気になる方は普段使用しているものとは別のアカウントを用意するのが良いと思います。 なお、今回のアプリは無料の範囲で作成できる内容になっています（2024年12月1日時点）。 以下の手順で実装していきます。
- スプレッドシートの用意・AppSheetへの移動
- タスク管理機能の実装
- 集計・可視化機能の実装
1. スプレッドシートの用意・AppSheetへの移動
まず、Google ドライブ上の任意のフォルダ下にスプレッドシートを用意します。 シート「task list」を用意し、以下列をもつ表を作ります。
- ID
- DATE（日付）
- TASK_NAME（タスク名）
- ASSIGNED_TO（担当）
- IS_DONE（実施有無）
今回はデバッグのため、下図のようにあらかじめ数行ほど値を入力しておきます。
スプレッドシートの画面上にて 拡張機能 > AppSheet > アプリを作成 を押下し、AppSheetのページへ移動します。 その後 Google アカウントを選択して、ドライブやスプレッドシートへのアクセス許可等を行います。
スプレッドシートの連携・AppSheetへのサインインが完了すると、以下のような画面が表示されます。 スプレッドシートの内容をもとに、すでにテンプレートアプリが作成された状態になります。
ここからAppSheetの編集に入っていきます。 まず、左側にある各編集項目のアイコンを選択して、アプリの編集画面を表示します（下図ではDataを選択しています）。 アプリの編集画面では、下図のように各種編集・デバック用の画面が用意されています。 AppSheetでは、基本的に以下の流れで編集していきます。
編集項目を選択：データや画面、ボタン押下時の設定など編集する項目を設定します。以下のような項目があります
- Data：使用するデータを編集
- Views/Format rules：画面デザインを編集（UX という項目名になっている環境もあるようです）
- Actions：ボタンを押したときの動作などを編集
- Automation：定期実行やデータ操作時の動作を編集
内容を編集：各編集項目の具体的な設定内容を編集します
- 保存：編集内容を保存します。保存しなくてもデバッグ用の画面に反映されますが、中途半端な状態で画面反映されることもあるため確認の際には保存します。また作業を離れる際も保存します
- 画面確認：編集した内容で意図通りに表示・動作しているかを確認します
2. タスク管理機能の実装
それでは各機能の実装をしていきます。 まずは、タスクを一覧表示・追加・編集・削除するタスク管理機能を実装します。 はじめに、編集項目のうち使用するデータを編集する Data を選択します。 Data では、各カラムについて名前・型・表示有無・初期値などを設定できます。 データの内容から、上図のようにある程度自動で設定されています。 今回は下図のように設定します。
右にスクロールすると、残りの設定項目が表示されるためこちらも下図のように設定します。
また、カラム名の左にあるペンのマークを押下することで、カラムの詳細設定をすることができます。 今回は、担当者を規定の値リスト（花子、太郎）からタスクの追加・編集時にドロップダウンで選択できるようにしたいと思います。 これは、担当者のカラム ASSIGNED_TO について、型を ENUM に設定し、Type Details にて下図の通り規定の値リスト、入力モードなどを設定することで実装できます。 詳細設定が完了したらダイアログ右上の Done を押下します。 これでタスク管理機能の Data の設定は完了です。
次に Views のアイコンを選択し、画面デザインの編集に移ります。 今回の場合は、デフォルトで task list の一覧画面が設定されています。こちらを編集していきます。 View Type で表・カレンダー・チャートなどの表示形式を選択し、View をカスタマイズできます。
今回は家事タスクをチェックリストの形式で表示したいため、View Type は check を選択します。 View Options にあるソート方式、グルーピング方式、表示項目等を以下のように設定します。
また、Display にてアイコンや View の表示名を設定します。
次に、ボタンの表示条件・デザイン・動作を編集する Actions に移動します。 デフォルトでは task list に対して Add、Delete、Edit ボタンがすでに実装されています。 今回は、タスク実施有無を表現・変更できるチェックボタンを追加します。 task list の右にある + ボタン（Add Action）を押し、Action を追加します。
次の画面で Action のテンプレートを検索できます。 今回は、ボタンを押すと IS_DONE カラムの値を true/false に切り替える Action を追加したいのですが、提案された「Add buttons to set IS_DONE to No or Yes on task list data」が合うのでこちらを利用します。
提案されたものを選択すると、以下のようにテンプレートの Action が追加されます。 こちらをベースに詳細をカスタマイズしていきましょう。
まず、IS_DONE を true（Yes）に設定するボタンを編集します。 テンプレートとして追加された Set IS_DONE to Yes は、ボタンを押すと当該行のカラム IS_DONE の値を true に設定するような内容になっています。 こちらの設定はそのまま利用します。
また、表示名やアイコンを設定します。
今回未実施のときのみチェックなしのアイコンを表示するため、まずチェックの入っていないアイコンを選択します。
そして、ボタンの表示条件を設定する Behavior で未実施の場合のみ表示するように設定します。今回はテンプレートですでにタスク未実施のときのみ表示される設定 [IS_DONE] <> true になっているため、そのまま利用します。
IS_DONE を false（No）に設定するボタン（Set IS_DONE to No）も同様に編集します。
設定後、SAVE を押し保存します。 右側に表示されるデバッグ画面でタスク一覧のアイコンをクリックすると、タスク一覧画面にチェックボタンが追加されていることがわかります。 チェックボタンの動作確認をすると、チェックを外してつける動作ができていることがわかります。 また実際にスプレッドシート上でも IS_DONE 列の値が変化するようになっているため、確認してみてください。
これでタスク管理機能の実装は完了です。 デフォルトで実装されている追加・編集・削除アイコンでも実際にデータを操作できます。
3. 集計・可視化機能の実装
次に、集計・可視化機能を追加します。 本機能では、実施済のタスクを担当者ごとにカウントし、その割合をグラフで表示します。 2. タスク管理機能の実装 と同様に Data、Views を設定していきます。 集計方法はいくつか方法があります。 今回は、テーブルから条件にあうデータを抽出する Slice 機能を使用した以下の方法で実装したいと思います。
- Data：task list から実施済のタスクリストを抽出した Slice を用意
- Views：上記 Slice について、担当者ごとのタスク数を集計しグラフ表示する View を作成
まず Data を選択し、task list 右にある + ボタン（Add Slice to filter data）を押下して Slice を追加していきます。
次に出てくる Slice の追加画面では、いくつかテンプレートが提案されます。 今回は実施済のみ、すなわち、IS_DONE が true（Yes）のみのデータを抽出したものを作成します。 提案されたもののうち、Show task list where IS_DONE is No がやりたいことに近いテンプレートのため、こちらを選択します。
選択したテンプレートの Slice が追加されます。
今回は下図のように Row filter condition を変更して、IS_DONE カラムが true の行を抽出してくるように設定します（テンプレートではfalseの行を抽出するようになっているため） 。表示カラムやアクションは task list と同じものにします。
なお、Row filter condition のフォームを押下すると、Expresson Assistant が表示されます。
Examples 欄で条件の記法を見ることができます。
今回は IS_DONE が true の場合のため、[IS_DONE] を設定します（カラムの値はカラム名を [ ] でくくります）。
設定後、SAVE を押下して反映させます。
次に、上記で作成した Slice について担当者ごとのタスク数を集計し、グラフ表示する View を追加していきます。 Views に移動し、PRIMARY NAVIGATION の右にある + ボタン（Add View）を押下します。 画面左の PRIMARY NAVIGATION、MENU NAVIGATION 等は各 View のアイコン（リンク）の配置場所を示しています。 今回はデバッグ画面下部に設置するため、PRIMARY NAVIGATION に View を追加することにしました。
次の画面で View のテンプレートを検索できます。 提案されたテンプレートも選択できますが、今回は Create a new view からテンプレートなしで作成します。
Create a new view を押すと、新規の View が追加されます。
追加された View を下図のように設定していきます。 今回はグラフを表示するため View Type は chart を選択します。 また、集計値を円グラフにするため、Chart type で aggregate piechart を設定します。 Group aggregate：COUNT、Chart columns：ASSIGNED_TO を設定することで担当者ごとの実施済タスク数が円グラフで表示されるようになります。 さらに、Label type で Percent を設定することで、パーセント表記で値を表示できます。 以上で集計・可視化機能の実装が完了したため、保存します。
これで家事管理アプリの完成です！
さいごに
AppSheet を利用すると、テンプレートを利用して簡単にアプリ開発できました。 今回作成したものは既存のアプリ・サービスですでに存在するようなものを実装していますが、細かい設定変更やGASとの連携追加等さらにカスタマイズすることで、自分オリジナルのより高度な機能を実装できます。 こういう機能があったら良いなというものがあれば、追加実装してみてください。
本記事の内容を、活用してもらえると嬉しいです。
