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

Epicurism

はじまり

135ml
135ml

今回はこのスクレイピングでGoogleスプレッドシートに格納したデータを使って、自分が今までに飲んだワインを一覧で見れるアプリを作っていきたいと思います。

ペンギン
ペンギン

ラッスンゴレライ♪ 説明してね♪

掃除機
掃除機

ウヒイイイン! ウヒイイイン! ウヒイイヒイイイン!!

135ml
135ml

あーもー、うるさーい。本当にうるさーい。ちくしょーまだ捨ててねえのかよー。

ペンギン
ペンギン

おれが家事するためには、この掃除機が必要なのだ! な、吸引力が下がらないただ一つのー?

掃除機
掃除機

ウイイイイン、ウヒイイイイイン!!

135ml
135ml

あーわかった。頼むから、その奇声みたいな鳴き声を出すのを止めてくれ。普通に喋れるんだろう?

掃除機
掃除機

少々悪ふざけが過ぎましたか。

小生、このお宅の塵から味噌汁まで全て吸い尽くしてみせますよ!

135ml
135ml

ちくしょお、こいつに何を吸わせれば壊れんのかなあ? クリームシチューとか吸わせれば壊れんのかなあ?

ペンギン
ペンギン

とりあえず、本題に行こうぜ! Here we go!

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

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

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

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

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

カラム名概要
ID1以上の主キー。
品名サバ缶の名前。
魚種実はサバ缶以外に、鰯とか秋刀魚も食べています。
風味味噌煮、醤油煮、水煮などの味。
メーカーサバ缶のメーカー。
缶の色缶のパッケージの色。
美味しさ数字が大きいと美味い:0<3。
美味さ美味しさを日本語にしたもの。
開け易い缶の開けやすさ。
最近食った日最近そのサバ缶を食べた日。
入手場所サバ缶を入手した場所。
コメントサバ缶を食べた時のコメント。
GooglePhotoのURLGoogleフォトに上げたサバ缶の写真のURL。
InstagramのURLInstagramに上げたサバ缶の写真の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」のデータをアップロードする手順を見ていきます。

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

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

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

「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のアプリを入れれば使用できるはずです。

おしまい

135ml
135ml

今回はこんなもんだなあ。

ペンギン
ペンギン

うおおお、サバ缶を管理するなんて、なかなか壮観なアプリじゃねえか!

掃除機
掃除機

ウイイイイン、ウヒイイイイイン!!

135ml
135ml

だろだろ? とりあえず、ワインの機能と併せて紹介できたことだし、今度は新しいアプリを作ってみるんだぜ!

ペンギン
ペンギン

よーし、じゃあ俺はもっとサバ缶を食べて、「OmegaWeapon3」を充実させていくか!

掃除機
掃除機

ウイイイイン、ウヒイイイイイン!!

135ml
135ml

おい、とりあえず、そのうるせえ掃除機を黙らせろ。

ペンギン
ペンギン

まあ、いいじゃねえか! 吸引力が下がらないただ一つのやつも盛り上げてくれてるんだ!

掃除機
掃除機

ウイイイイン、ウヒイイイイイン!!

135ml
135ml

じゃあ、サバ缶はもう必要ないということでファイナルアンサー?

ペンギン
ペンギン

おい、そこの鉄クズいやプラクズ、口をつぐめ。吸い込み口を噤めえええええ!!

掃除機
掃除機

ウイイ・・・・ン。なんて現金な方だ・・・。

135ml
135ml

よし、今度また掃除機がうるさかったら、サバ缶を1週間抜きにするからな。

ペンギン
ペンギン

承知いたしました! おい、今度うるさくしたら、粗大ごみセンターに連絡するからな。

掃除機
掃除機

こいつら・・・、いつか目に物を食わせてやる・・・。何もかも吸い取ってやる・・・。

以上になります!

コメント

タイトルとURLをコピーしました