昔、習慣づけのために日々を振り返るチェックシートをスプレッドシートで作成したのですが、PCでぽちぽちするのが億劫でした。
やはりぽちぽちするのならスマホアプリが便利。
ただ一人で利用する分にはよいのですが、複数人で同じものを共有したかったり、入力したデータを任意のデータベースに保存しておきたかったりしたいと思うとちょっと不便。
今は簡単なものならノーコードで制作ができるようですので、ならば作ってしまおう！
というわけで今回は、Appsheet を使ってチェックリストアプリを作った記録を残しておこうと思います。
・プログラミング不要、GUIでぽちぽちするだけで簡単なアプリが作れる
・スプレッドシートをデータソースに使える。（他の選択肢もたくさんあります）
・所要時間30分。さくっと試せます。
・今回の内容ではフリーでできる
・Android, ios 両方に対応。
・複数人で同じアプリを共有可。
出来上がりイメージ↓
Appsheet とは
はじめに、今回利用するサービスのAppsheetについて簡単にご紹介。
Appsheet は、ノーコードでアプリケーション開発を行うことのできる、業務支援アプリ開発プラットフォームです。
スタートアップ企業でしたが、2020年の1月に、Googleが買収され、Google Cloudの仲間入りをしました。
できることは幅広く、ざっと並べるとこのような感じです。マシンラーニングとかOCRもついてるんですね、すごい。詳細はホームページをあたってください。
ちなみに以前（昨年の6月ごろ）は英語の情報しかなかったのですが、最近みたら日本語チュートリアルができていました！
日本語版ナレッジベースを見る、からアクセスできます↓
https://www.appsheet-japan-community.com/blank
また、サンプルアプリがたくさんあり、それをコピーしてきて中身を見たり書き換えたりしながら自分のアプリを作成することもできます。
https://www.appsheet.com/SampleApps
制作開始！
ここからは実際に作成する画面等、細かい話です。
今回自分がたどった道筋をなぞらえていきたいと思います。大まかには以下のフローです。
①スプレッドシートでデータソースの作成（5分）
②会員登録＆ログイン（5分）
③Data の設定（5分）
④UX の設定（5分）
⑤Behavior の設定（5分）
⑥デプロイ＆共有（5分）
それでは順にみていきます。
スプレッドシートでデータソースの作成（5分）
まずはこんな感じでシートを作成します。黒枠で囲った部分が、チェックする項目となるイメージです。
項目はなんでもよいのですが、記入完了したかどうかを判別するフラグとする項目を一つ入れておきます。
（今回は”DONE”という名前で入れました。これは、記入完了したら表示色を変えるような設定をするために使います。必須ではありません。）
2人で使えるように、同じ内容のシートをコピーしておきます。
会員登録＆ログイン（5分）
はじめて利用する場合は、会員登録が必要です。
といってもGoogle アカウントあればそれでログインするだけなので簡単です。
ログインしたらMyAppの画面へ移動します。
（私はすでにアプリ1個作っているのでDeployed App（１）となっていますが、初めてだと何もないはずです。）
右上の「New app」＞「Start with your own data」と進み、アプリの名前と、カテゴリを入力します。
データソースから、先ほど作成したスプレッドシートを選択します。（appsheet_data）
Data の設定（5分）
まずは、左側のメニューのDataを選びます。
ここでは、データソースとしてスプレッドシートの、どのシートをアプリに使うかどうかを選択できます。
現在、「まるお」シート（テーブル）が追加されている状態です。
「まるこ」シートも追加します。（Add a table for “まるこ”）
まるおテーブルの詳細設定に関しては、Updates のみ選択にします。（黒枠箇所）
ここは元のスプレッドシートに対してアプリ側からどのような操作を許可するかの設定です。
次に、Columnsタブを開き、各カラムのデータ型や入力タイプの選択を行います。
Yes / No にするとそのままですが、Yes / No の選択をできるようになります。
これでDataの設定は完了です。
今回作るアプリではこれだけでよいですが、他にもいろいろ設定できます。例えば…
・そのカラムを表示するかどうか（SHOW?）
・そのカラムを編集可能にするかどうか（EDITABLE？）
・そのカラムを記入必須とするかどうか（REQUIRE？）
UX の設定（5分）
次はUXの設定に移ります。UXは見ばえの設定をする箇所です。
ちなみに画面右側に表示されているのが、スマホアプリの表示画面です。こちらで随時確認をしながら調整していきます。
まるこ、まるおテーブルの見ばえとは別に、カレンダーが2つできているので、まずはこれを消去します。
（それぞれを開いて、Delete です。）
そうすると
下で選択できるアイコンが4つあったのが、カレンダーの分が消えて2つになりました。
次にView タイプの変更を行います。デフォルトではdeck になっていましたが、これを calender に変更します。
Position はアイコンをどの位置に配置するかの設定です。例えば left most とすると一番左にアイコンを配置します。
View Options では、Start date と End date を”日付”カラムに設定します。
そうすると、スプレッドシートで日付がセットされている箇所のカレンダーに色がついて選択できるようになります。
Default View では、カレンダーのデフォルト表示の粒度を月か週か日のどれにするか選択できます。
※追記：上記のキャプチャの Category の箇所（Default Viewの上）で、DONEのカラムを指定します。これで、もしDONEのカラムに値がセットされたら、カレンダーのその日の表示色を変更してくれるようになります。）
Display の詳細設定では、アイコンを変更します。好きなものにしましょう
全体的な見ばえをもう少しいじっていきます。Brand タブから以下のように設定を変更します。
ここは私の好みで、Thema は Dark, Primary Color は黄色に設定しました！
UXの設定はここまでです。次は Behavior に行きましょう。
Behavior の設定
Behavior では、特定の条件を満たしたら、Goodスタンプを表示するように設定していきます。
Add New Action でアクションを追加します。
Set these columns の箇所に [カラム名] = [値] を設定し、その条件の際に表示するスタンプを、APPEARANCEで決めます。
Yes / No での入力の際には、スプレッドシートには True / False で記入されるので、[よく寝た] = true にします。
APPEARANCEの下のBEHAVIORでも設定してください。
これで、[よく寝た]がYesだったら goodjob スタンプが出るようになります。
試しに、右側のアプリイメージの箇所でチェックリストを記入してみると、GOODスタンプが出てくることが確認できます。
同様にして、[よく食べた] [よく笑った] でのアクションも Add New Action から追加しましょう。
デプロイ＆共有（5分）
ここまでできたら、アプリはほぼ完成なので、デプロイしましょう。
Manage > Deployタブ > Deployment Check で出てくる Run deployment check で、現状の設定で問題なくデプロイ可能か見てみます。
そうすると、Accountの箇所でエラーが出ています。FREEプランではUser Signin 機能は使えませんよとのことです。
有料プランにするか、Sigininオプションを無効にすることで解決できます。
サインインオプションは Security から設定できます。
sigininをOFFにしたら、その下の2つの同意項目をONにしましょう。
もう一度Deployment Checkを行うと、今度は別のエラーが出てきます。
次はOffline Access が許可されていませんよ、とのこと。直しましょう。
Behavior > Offlene/Sync > OFFLINE USE から設定できます。
これでもう一度Deployment Checkすると、今度は問題ないですので、デプロイしてしまいます。
同じアプリを複数人で共有するのも簡単です。
Usersから、招待したい人のメールアドレスを登録すればOKです。招待メールが届き、アプリダウンロードもしくは、リンクからウェブでアプリを閲覧＆入力できます。
…30分はちょっと無理があったかな。
おわり
Appsheetを使ったスマホアプリの紹介でした。
実際に使う際には、Appsheetアプリをダウンロードして、ログインすると作成したアプリの画面になります。
自分は、個人で使うチェックシートに加えて、日記シートも作ってこれで日記もつけるようにしようと思います。
（チェックリスト作る要領で、Yes/NoをText型に指定すればOKです）
今回ほんの一部の機能しか触れなかったですが、細かくいろいろ設定できるようで、使いこなせればとても強力そうなツールだなと感じました。
改めてですが、Appsheetで作られたいろんな機能のアプリを探すことができるので、それを見て勉強してみるとよいかもしれません。
https://www.appsheet.com/SampleApps
最後まで読んでいただきありがとうございました。
最近のコメント