【AppSheet開発事例】自分が今まで食ったサバ缶を見渡せるアプリ

はじまり

こんなアプリを作りました。

今回紹介するアプリはこんな感じのUIになっています。

左の「Cellar」と「OriginRatio」はワイン関連の機能で、今回紹介する機能は、「OmageWeapon3」というサバ缶を管理する機能です。

まず、どんなデータを表示させるかを確認してみましょう。

今回使うサバ缶のデータは以下の通りになります。

カラム名	概要
ID	1以上の主キー。
品名	サバ缶の名前。
魚種	実はサバ缶以外に、鰯とか秋刀魚も食べています。
風味	味噌煮、醤油煮、水煮などの味。
メーカー	サバ缶のメーカー。
缶の色	缶のパッケージの色。
美味しさ	数字が大きいと美味い：0＜3。
美味さ	美味しさを日本語にしたもの。
開け易い	缶の開けやすさ。
最近食った日	最近そのサバ缶を食べた日。
入手場所	サバ缶を入手した場所。
コメント	サバ缶を食べた時のコメント。
GooglePhotoのURL	Googleフォトに上げたサバ缶の写真のURL。
InstagramのURL	Instagramに上げたサバ缶の写真のURL。
画像	AppSheetで表示するためのサバ缶の画像のURL。

AppSheetでのデータ設定

では早速、GoogleスプレッドシートにあるデータをAppSheetでどのように設定しているかを紹介します。

こんな風に、Googleスプレッドシートにデータが入っています。

テーブルの設定_その1

以下が設定画面です。「LunchMaster」という名前のアプリになります。

まず、テーブルの基本設定です。

「Are updates allowed?」は、UpdatesとAddsしか許可しません。

「Source Path」は、画像にある通りのファイル名のブックになります。

「Worksheet Name/Qualifier」は、画像の通りのシート名になります。

「Data Source」は、Googleスプシを利用しているので、「google」となっています。

テーブルの設定_その2

次に、テーブルのセキュリティ設定です。

「Filter out all existing rows?」は、既にあるデータを見れなくするかどうかの機能みたいですね。僕は元からあるデータをアプリ上で出したいので、OFFにしています。

「Security filter」は、ここにぶち込んだ関数に一致するデータだけを見れるようにするみたいですね。

「Access mode」は、as app creatorとして、使用しています。as app userでも問題なく使えそうですが、まだ試していません。

「Shared?」も、とりあえずONにして権限広げています。

先程の「テーブルの設定_その1」の画面の「View Columns」をクリックすると、テーブルのカラムを設定できる画面に飛びます！

カラムの設定_その1

カラムの設定になります。以下が、カラムの一覧になります。

「KEY?」に、主キーとしたいカラムを選択します。

「LABEL?」に、レコードのラベルとして表示したいカラムを選択します。この画面でいうと、右のアプリ画面に「品名」が表示されているのが確認できます。

こちら、また別のカラムになります。設定項目を見るために、右のアプリ画面は閉じました。

「SHOW?」に、アプリに見せたいカラムを設定します。

「EDITABLE?」に、編集できるカラムを設定します。この画像の場合、「美味さ」はGoogleスプシ上で「美味しさ」から取得するようにしているので、OFFにして編集できないようにしています。

・・・「美味さ」は、なんかOFFになっていますね。確か、自己評価を書く前にサバ缶の画像をアップロードしたかったのでOFFにしたんだと思います。

次に、カラムの詳細設定画面に行きます。鉛筆ボタンを押すと行けます。

カラムの設定_その2

カラムの詳細設定画面になります。

「美味さ」のカラムを参考に見てみます。

「Type」には列挙型が入る設定になっています。ここでも設定できますが、この部分は後ほど紹介する処理で、Googleスプシに入っている値から自動的に設定してくれます。

「Allow other values」には、列挙されている値と以外の値がカラムに入っても良いかどうかを設定できます。

「Auto-complete other values」には、 列挙されている値と以外の値が自動入力で入っても良いかどうかを設定できます。

「Base type」には、列挙される値の型を設定します。Textにします。

「Input mode」には、Autoを設定します。

「Data Validity」で、バリデーションチェックの設定ができそうです。「Require」で必須項目かどうかの設定もできます。

「Auto Compute」では、他のカラムなどを見て自動的に値を入力するように設定します。「Spreadsheet formula」では、既にGoogleスプシの方にSWITCH関数が入っているので、それをAppSheet内の関数で表記しているようです。

「Update Behavior」は特に設定してません。主キーかどうか、編集可能かどうかを設定できます。レコードを更新したら初期化するのかどうかも設定できるようですね。

「Display」は、表示する条件やそのカラムの注意書きも設定できるようです。

「Other Properties」は、AppSheet内の検索時にデータがヒット可とするかとか、個人情報の扱いとするかとかを設定できるっぽいですね。

カラムの設定_その3

カラムの追加をGoogleスプシで行った場合に、この画面で表示されているカラムとGoogleスプシのカラム数が一致しないと、AppSheetからエラーメッセージが出されます。

その場合は、「Regenerate Structure」をクリックして、再び右上の「SAVE」をクリックすると、解消されたりします。

カラムの設定_その4

ここでは、データ型が「Image」のデータをアップロードする手順を見ていきます。

とりあえず、現在のサバ缶の１レコード分の画面を見てみます。以下のように、色々なカラムの値が表示されています。

右下のピンク色の鉛筆ボタンをクリックすると、編集画面に飛びます。

レコードの編集画面はこんな感じです。

「Clear ×」ボタンを押せば画像は無くなって、カメラボタンを押せば新しく画像をアップロードできます。そして、新しく画像をアップロードして「Save」をクリックするとどうなるのかと言いますと・・・。

こちら、Googleドライブ上のテーブルのデータが入っているシートがあるフォルダになるのですが、今回、そのデータがあるシート名が「サバ缶🦈」なので、この画像の中の「サバ缶🦈_Images」にアップロードした画像が入っています。

実際に「サバ缶🦈_Images」フォルダを見ると、画像が格納されていることが確認できます。

「サバ缶🦈_Images」フォルダ内の画像のパスが、シートに入っていることも確認できます。

AppSheetでのビュー設定

ここでは、実際に画面のデザインをする設定の紹介になります。

ビューの設定_その0

「OmegaWeapon3」の画面の紹介です。

ビューの設定_その1

上の画像にある通り、 「View name」には「OmegaWeapon3」と入力して、「View type」にはcardを選択します。

「Position」はrightに設定しています。「Cellar」がleft mostで「OriginRatio」がleftなので、「OmegaWeapon3」は右側に表示されています。

ビューの設定_その2

View Optionsでは、「Sort by」で表示する順番を設定したり、「Group by」でどうグループ分けするかを設定できます。

「Group aggregate」では、Group byしたときにそのグループの何を表示するかを設定できます。今回はCOUNTなので、Group名の横に件数が表示されています。

ビューの設定_その3

Layoutで、どのようなデザインで表示するかビジュアル的に設定できます。

DisplayのIconは「list-ul」を設定しています。

これ以降のビュー設定は特に設定していませんので、割愛します。

完成！

はい！　一旦ここまでの設定でSAVEすると、アプリができました！

ここで作ったアプリは、スマホでもAppSheetのアプリを入れれば使用できるはずです。

おしまい

以上になります！