Google AppSheetで日用品在庫管理アプリを作ってみた

<h2 name="f03d047b-3752-48ad-96ab-13fc6c1fef97" id="f03d047b-3752-48ad-96ab-13fc6c1fef97">はじめに</h2><p name="28a0802b-6b31-4a9e-acbb-9917a91bc21f" id="28a0802b-6b31-4a9e-acbb-9917a91bc21f">
※こちらの記事は以前noteで投稿していた記事の移植版です。

Googleのノーコードでアプリを開発できるサービスが良いと聞いたので試しに触ってみました。<br>
で、どうせなら簡単ながら日常使えそうなものをと思い、日用品等の在庫を管理するアプリを作ってみよう！ということで作ってみました。<br>
我が家ではトイレットペーパーや日持ちする食品等をまとめて通販で買って屋根裏部屋等で保管しているので、こういう在庫管理があると買い忘れやどこに保管しているか忘れることがなくなるかなという目論見です。<br>
今回はあくまで試しにやってみただけなので詳細は全然理解していませんが、とりあえずデプロイして妻とシェアするところまではできたので、簡単なアプリ作成とデプロイするところまでやったことの紹介です。</p><p name="5e9aaaf6-52a7-407a-9105-79566a49fbc5" id="5e9aaaf6-52a7-407a-9105-79566a49fbc5">まず、アプリを作るにあたってGoogleが用意してくれているテンプレートが色々あったのですが、こういうものを手っ取り早くやるには先にある程度のデータを用意してそれを読み込ませると楽ちんだと思っています。<br>
AccessとかでもExcelである程度作ってから読み込ませると楽だった記憶。<br>
なのでスプレッドシートでテストデータを作っておきました。</p><figure name="24afddf7-b1c4-4427-ba77-4e8e32794b46" id="24afddf7-b1c4-4427-ba77-4e8e32794b46"><img src="https://i.gyazo.com/1485a7fd3322d1d1086aaae6381a667c.png" alt="" width="620" height="217"><figcaption></figcaption></figure><p name="1bb07856-c5f7-4c88-ad06-36442bf85814" id="1bb07856-c5f7-4c88-ad06-36442bf85814">こんな感じです。<br>
学生の頃まではサッポロ一番をそんなに美味しいとは思わなかったですが、大人になって改めて食べると意外と美味しく、クセのない味が色々アレンジするのに向いていることに気づき、在宅勤務時のお昼にも欠かせない存在になりました。</p><p name="5afac112-fa00-4a85-946b-73c8084ab05a" id="5afac112-fa00-4a85-946b-73c8084ab05a">余談はさておき、これをもとにアプリを作っていきますので、まずはAppSheetにサインインしましょう。<br>
ここからです。Googleはもちろんマイクロソフトのアカウントでも入れるそうです。</p><figure name="877d65d1-e867-4d01-8085-decf061a110a" id="877d65d1-e867-4d01-8085-decf061a110a" data-src="https://about.appsheet.com/home/" data-identifier="null" embedded-service="external-article" embedded-content-key="emb1d2912d06cf7"> 

<a href="https://about.appsheet.com/home/" rel="nofollow noopener" target="_blank">

<strong>

Google AppSheet | Build apps with no code

</strong>

<em>

Use Google AppSheet to build powerful applications that trans

</em>

<em>

about.appsheet.com

</em>

</a><a href="https://about.appsheet.com/home/" rel="nofollow noopener" target="_blank"></a>



 

</figure><h2 name="d289a0b1-03fc-4c7f-b7ce-e736a3bc108a" id="d289a0b1-03fc-4c7f-b7ce-e736a3bc108a">アプリ新規作成</h2><p name="7cef5e5a-7446-4121-a1a3-095a373b6a38" id="7cef5e5a-7446-4121-a1a3-095a373b6a38">AppSheetに入れたら、アプリを作成したいのでCreateをクリックし「App」⇒「Start with existing data」と選択します。</p><figure name="082b016a-6fd5-430d-9c78-f42bb2142c5c" id="082b016a-6fd5-430d-9c78-f42bb2142c5c"><img src="https://i.gyazo.com/ac6cd02085d6d19ae5de7357ded4b7bd.png" alt="" width="620" height="366"><figcaption></figcaption></figure><p name="0b03a239-6b64-4d12-83b2-a0a0a949b200" id="0b03a239-6b64-4d12-83b2-a0a0a949b200">こんな感じのnew appのウィンドウが立ち上がるのでアプリの名前を入力してカテゴリを選択します。</p><figure name="14f5627b-49cc-474d-8357-505eced91469" id="14f5627b-49cc-474d-8357-505eced91469"><img src="https://i.gyazo.com/b00db173b96aa6ee5c6d6e890ee40e42.png" alt="" width="620" height="281"><figcaption></figcaption></figure><p name="6b4fe394-65b6-4b30-95b8-7286119f48ea" id="6b4fe394-65b6-4b30-95b8-7286119f48ea">今回はアプリ名は「テスト_在庫管理」とし、<br>
カテゴリは「Inventory Management」を選んでおきます。<br>
在庫管理という意味なのでこれでいいでしょう。</p><figure name="ad971eed-4d61-48dc-bd76-69abaeab3bee" id="ad971eed-4d61-48dc-bd76-69abaeab3bee"><img src="https://i.gyazo.com/bb87346b7f05d58dfaf764d101433b11.png" alt="" width="620" height="628"><figcaption></figcaption></figure><p name="5f2c4126-3e8a-4dd5-a829-17464459366c" id="5f2c4126-3e8a-4dd5-a829-17464459366c">その後、データソースを何にするかを聞かれますので、スプレッドシートから選択するために「Google Sheets」にしておきます。</p><figure name="cddcf7a0-7017-4eb4-9329-78d3adf21582" id="cddcf7a0-7017-4eb4-9329-78d3adf21582"><img src="https://i.gyazo.com/ac00ee2d4affcff69a86447bcb588a69.png" alt="" width="620" height="527"><figcaption></figcaption></figure><p name="0dfe47ab-e7c6-4180-aa38-96cc6c9789ca" id="0dfe47ab-e7c6-4180-aa38-96cc6c9789ca">どのファイルをもとにするかを聞かれますので、対象のファイルを選びます。</p><figure name="d9fd5971-d9e9-441f-97e2-630f6c2ecb39" id="d9fd5971-d9e9-441f-97e2-630f6c2ecb39"><img src="https://i.gyazo.com/9fe4f9b232efc138a6fa4e3a5c779a6f.png" alt="" width="620" height="379"><figcaption></figcaption></figure><p name="2a10f2bf-3468-46c7-ad50-f7a1488ad339" id="2a10f2bf-3468-46c7-ad50-f7a1488ad339">すると、データを読み込んでアプリが自動作成されます。</p><figure name="b4762c1a-0a07-4e62-88b8-97ff28cd1a8f" id="b4762c1a-0a07-4e62-88b8-97ff28cd1a8f"><img src="https://i.gyazo.com/a333176ab8291da544fa5e1d2345d296.png" alt="" width="620" height="272"><figcaption></figcaption></figure><p name="3432de98-3961-49b3-ae9a-8533fbaea1e7" id="3432de98-3961-49b3-ae9a-8533fbaea1e7">この時点ですでにデータをもとに画面右側のような状態である程度そのまま使えるぐらいまで出来上がっています。<br>
よくできていますね。<br>
しかし少しカスタマイズしてきたいので「Customize your app」から設定変更していきます。</p><h3 name="7a4a15ad-ad51-485a-b13c-3a5fb56a7bf0" id="7a4a15ad-ad51-485a-b13c-3a5fb56a7bf0">カスタマイズ</h3><p name="48f963c6-fbd1-4674-b493-033b2885df6a" id="48f963c6-fbd1-4674-b493-033b2885df6a">このままだと、新たに入力しようとした際、日用品などのカテゴリや保管場所の入力がテキスト入力になります。<br>
これでも入力できないこともないですが、カテゴリも保管場所も選択式の方がいちいち入力しなくて済みますし、後々検索したいときにも異なる文言だとうまく検索できなくなる恐れがあるのでリストから選択できるようにした方が便利でしょう。<br>
ということで変えてみます。</p><h3 name="7ea45a45-0f7b-42f5-b71f-6090f175db7f" id="7ea45a45-0f7b-42f5-b71f-6090f175db7f">カテゴリをEnum(列挙)型にする</h3><p name="7ce6fc6a-86a9-4b8a-878c-71e04656ec07" id="7ce6fc6a-86a9-4b8a-878c-71e04656ec07">編集画面に移るために鉛筆マークをクリックします。</p><figure name="52c2888e-b11a-4338-84b4-3036bf1e11cc" id="52c2888e-b11a-4338-84b4-3036bf1e11cc"><img src="https://i.gyazo.com/0650e99d24c1cd2ef450929f544ba8c8.png" alt="" width="620" height="348"><figcaption></figcaption></figure><p name="f158811f-0f26-48a2-9b7b-977628393326" id="f158811f-0f26-48a2-9b7b-977628393326">編集画面でType項目から「Enum」を選択します。<br>
ちなみに1つのみ選択する方式がこちらで、複数選択式にしたい場合は「EnumList」です。</p><figure name="3b6cb6b4-6007-41c3-8648-9ecaa395eaac" id="3b6cb6b4-6007-41c3-8648-9ecaa395eaac"><img src="https://i.gyazo.com/3ffb8387a2e3207343d63820aaff0d4e.png" alt="" width="620" height="497"><figcaption></figcaption></figure><h3 name="99db1cca-a866-44c3-8a19-362f97a534bc" id="99db1cca-a866-44c3-8a19-362f97a534bc">選択肢の追加</h3><p name="43a98653-ff13-40ee-963e-c3c719937916" id="43a98653-ff13-40ee-963e-c3c719937916">選択肢を入れていくため「Values」項目で「Add」をクリックします。<br>
入力欄が出てくるので任意の文字列を入力します。<br>
下図はすでに日用品の選択肢を入れた状態です。</p><figure name="20ee27df-0f2e-4864-9783-7973c0bcd94e" id="20ee27df-0f2e-4864-9783-7973c0bcd94e"><img src="https://i.gyazo.com/3368bfbf6ef95befaaccd02825be3c56.png" alt="" width="620" height="506"><figcaption></figcaption></figure><p name="45704a09-cce0-4774-9196-bb067db6561c" id="45704a09-cce0-4774-9196-bb067db6561c">とりあえず3つ入力してみました。<br>
設定できたら画面右上の「Done」をクリックして元の画面に戻ります。</p><figure name="e091205b-4831-4a19-945c-bc9bdf88d9d2" id="e091205b-4831-4a19-945c-bc9bdf88d9d2"><img src="https://i.gyazo.com/d03349bb03d8259ad7ca7f351f8abfd6.png" alt="" width="620" height="350"><figcaption></figcaption></figure><h3 name="d9838d2d-dca9-431f-a457-8c2786194e33" id="d9838d2d-dca9-431f-a457-8c2786194e33">途中経過プレビュー</h3><p name="87cf2ba5-a1aa-42a4-ac2e-0b391a9aed14" id="87cf2ba5-a1aa-42a4-ac2e-0b391a9aed14">この状態でプレビューして試しにちゃんと選択式になっているか確認してみましょう。<br>
AppSheetのトップ画面からアプリを選び、メニューアイコンをクリックして「Preview in full screen」を選んでみます。</p><figure name="a22f499c-64cf-4104-8457-6b6b860b5daf" id="a22f499c-64cf-4104-8457-6b6b860b5daf"><img src="https://i.gyazo.com/b083737c8722c5df004fe79d2f0b6b3b.png" alt="" width="589" height="679" style="width: 353.4px; height: 407.4px;"><figcaption></figcaption></figure><figure name="f1e67b94-cf05-4bed-9675-8a1fe1b14ef5" id="f1e67b94-cf05-4bed-9675-8a1fe1b14ef5"><img src="https://i.gyazo.com/9eddefa333739f1192b0c1c3093ef9fa.png" alt="" width="620" height="280"><figcaption></figcaption></figure><p name="5a85febc-3c9b-4c5a-847c-71df8fec84cc" id="5a85febc-3c9b-4c5a-847c-71df8fec84cc">こんな形でアプリ画面が立ち上がりますので「Add」をクリックしてデータ追加を試してみましょう。</p><p name="db4940d2-e930-4858-9e85-b2ff894d6333" id="db4940d2-e930-4858-9e85-b2ff894d6333">このようにカテゴリがリストからの選択式になっていることが確認できました。</p><figure name="cfc08d78-5140-4519-95ae-34b1f3866605" id="cfc08d78-5140-4519-95ae-34b1f3866605"><img src="https://i.gyazo.com/748450c0b8e3f5e4c9cf2b10c489204a.png" alt="" width="620" height="367"><figcaption></figcaption></figure><p name="a578e971-4719-45a2-a39a-beb77e374d18" id="a578e971-4719-45a2-a39a-beb77e374d18">この状態で「Save」を選択して試しに保存してみます。</p><p name="91f8c6fc-a6f1-4d17-b8dd-b6807e590ffc" id="91f8c6fc-a6f1-4d17-b8dd-b6807e590ffc">するとデータソースにしたスプレッドシート側でもデータが追加されており、この時点で機能していることが確認できます。</p><figure name="31b70a79-7ba9-4c08-bb1f-04bd685933ab" id="31b70a79-7ba9-4c08-bb1f-04bd685933ab"><img src="https://i.gyazo.com/694b3a04d16e0a16078f2b567af52ebd.png" alt="" width="620" height="249"><figcaption></figcaption></figure><p name="4e16e993-6329-49f0-bcab-f6caad268072" id="4e16e993-6329-49f0-bcab-f6caad268072">保管場所も選択式にしますので、同じ要領で設定しておきます。<br>
ここは先ほどと同じことをするので割愛します。<br>
アプリそのものの設定はここまでで完了します。</p><h2 name="05db13a9-a1ee-4bfb-bb3e-039c3fa0db73" id="05db13a9-a1ee-4bfb-bb3e-039c3fa0db73">デプロイする</h2><p name="4eec0339-a056-4dda-b2c6-2e65b092dfb2" id="4eec0339-a056-4dda-b2c6-2e65b092dfb2">せっかくなのでデプロイもしてみましょう。<br>
デプロイするには、まずはデプロイが可能な状態かチェックします。</p><p name="64239ed5-856f-4dbc-bd97-1100a188e8bc" id="64239ed5-856f-4dbc-bd97-1100a188e8bc">「Manage」から「Deployment Check」を選択して「Run deployment check」をクリックしてみます。</p><figure name="db177875-0ac0-460f-8f2f-9fb348eb13e9" id="db177875-0ac0-460f-8f2f-9fb348eb13e9"><img src="https://i.gyazo.com/72eb7e3711e42c526f1e376f4bba9bae.png" alt="" width="620" height="280"><figcaption></figcaption></figure><p name="b2fbf207-00cc-4a5e-999e-032a8c702106" id="b2fbf207-00cc-4a5e-999e-032a8c702106">数秒でチェックが終わり「PASSED」や「ERROR」、「WARNING」のステータスが出ます。<br>
「WARNING」は警告ですが、設定しておいた方がいいよという項目なので、一応このままでもデプロイは可能です。<br>
問題は「ERROR」の方で、アカウント関連でエラーになっています。<br>
Invalid subscription plan: テスト_在庫管理-920718727: User signin not allowed with the FREE plan<br>
つまり、無料プランではユーザーサインインが許可されていない、ということで、設定変更をする必要があります。<br>
多分有料プランでは出ないのだと思います。</p><figure name="ee2cfab3-c41e-4354-a9e6-d334c281e9fd" id="ee2cfab3-c41e-4354-a9e6-d334c281e9fd"><img src="https://i.gyazo.com/ecfc8512497123e5743d1e67317e3df7.png" alt="" width="620" height="280"><figcaption></figcaption></figure><h3 name="be483c49-d711-4a61-96e0-4f0899e7e077" id="be483c49-d711-4a61-96e0-4f0899e7e077">サインイン無しで利用できる設定に変更</h3><p name="288733dd-198b-4cd4-b823-ddba284a9b0b" id="288733dd-198b-4cd4-b823-ddba284a9b0b">このままではデプロイできないので設定変更します。<br>
「Security」の項目からそれぞれ以下に設定します。<br>
Require user signin?：オフ<br>
Yes, the data in this app is public:オン<br>
Yes, I am authorized to set up an insecure app：オン<br>
サインインを要求するかということと、データを公開するか等ですね。<br>
サインインを要求しない場合には、下の2つは強制的にオンにする必要があります。</p><figure name="9827a41f-4c68-44d0-ab1c-c69871300086" id="9827a41f-4c68-44d0-ab1c-c69871300086"><img src="https://i.gyazo.com/b662b8016aad6363075ae76a519ea4d5.png" alt="" width="620" height="280"><figcaption></figcaption></figure><h3 name="4e9a6afc-9469-4ecb-9c78-374e56b3956f" id="4e9a6afc-9469-4ecb-9c78-374e56b3956f">再チェック</h3><p name="e1fda8f3-802a-4a89-992a-38e3c12cfcbf" id="e1fda8f3-802a-4a89-992a-38e3c12cfcbf">設定変更したので改めて確認してみます。<br>
管理画面のManageに戻って「Continue editing」をクリック後、改めて「Run deployment check」をクリックします。</p><figure name="9d11fabc-ff49-420f-ab0f-7b2202cc21c2" id="9d11fabc-ff49-420f-ab0f-7b2202cc21c2"><img src="https://i.gyazo.com/ecc318b633d9f74e4d7330e1e78d454b.png" alt="" width="620" height="248"><figcaption></figcaption></figure><p name="1f9b2301-a416-45b2-85c7-f3fe66b16c8a" id="1f9b2301-a416-45b2-85c7-f3fe66b16c8a">すると、先ほどはエラー表示だったアカウント項目がPASSEDになりました。</p><figure name="19e969bf-3fac-4ae2-9f76-d88c9524bd50" id="19e969bf-3fac-4ae2-9f76-d88c9524bd50"><img src="https://i.gyazo.com/d41854d9c24fc206b5dfa3b31ba82ed5.png" alt="" width="620" height="94"><figcaption></figcaption></figure><h3 name="d86406f9-f6b2-480e-8bf3-433d6b1e0325" id="d86406f9-f6b2-480e-8bf3-433d6b1e0325">デプロイ状態に設定</h3><p name="a7974cf6-343e-4a57-83e2-cf7a6f56202f" id="a7974cf6-343e-4a57-83e2-cf7a6f56202f">これでようやくデプロイできます。<br>
画面上部から「Move app to depoyed state」をクリックします。</p><figure name="83839548-db53-4cf6-99bc-5160c62c997a" id="83839548-db53-4cf6-99bc-5160c62c997a"><img src="https://i.gyazo.com/e75cd4426c072fd3e9432f454b582881.png" alt="" width="620" height="124"><figcaption></figcaption></figure><p name="974a70e0-7e90-41bd-9ac1-a2c6052d484c" id="974a70e0-7e90-41bd-9ac1-a2c6052d484c">デプロイが成功すると、画面左上のアイコンも変わり、デプロイ状態であることが分かります。</p><figure name="534b820f-ab78-4b83-ab0b-717bddf59b41" id="534b820f-ab78-4b83-ab0b-717bddf59b41"><img src="https://i.gyazo.com/c6e0d40d80106552022391feb89d1f17.png" alt="" width="416" height="175"><figcaption></figcaption></figure><p name="63f5e260-4f1b-4825-8479-4b7eff9421a8" id="63f5e260-4f1b-4825-8479-4b7eff9421a8">ちなみにデプロイ前はこうなっています。</p><figure name="0d6d8bc9-a044-4314-9b22-53e95a75a29a" id="0d6d8bc9-a044-4314-9b22-53e95a75a29a"><img src="https://i.gyazo.com/a764c4069afb5d60b7965390c190b780.png" alt="" width="69" height="58"><figcaption></figcaption></figure><h2 name="1211a11a-8ae2-4e03-bda5-d1ff880b50a7" id="1211a11a-8ae2-4e03-bda5-d1ff880b50a7">スマホから確認する</h2><p name="a1d306ca-5742-4bc6-9e35-572e04525f85" id="a1d306ca-5742-4bc6-9e35-572e04525f85">こちらのAppSheetはスマホからも使えます。<br>
私はiPhoneユーザーなのでApp Storeからですが、Androidの方はPlay StoreでAppSheetと検索するとアプリをダウンロードできると思います。</p><figure name="f9b21845-c2e3-4057-801a-facf7a17e162" id="f9b21845-c2e3-4057-801a-facf7a17e162"><img src="https://i.gyazo.com/cc0ee71e1b5297eb21a5a108716868fa.png" alt="" width="620" height="1056" style="width: 372px; height: 633.6px;"><figcaption></figcaption></figure><p name="ca0377e8-005d-4e65-b349-7bb14afbf08a" id="ca0377e8-005d-4e65-b349-7bb14afbf08a">スマホから開いてもきちんと操作できます。</p><figure name="f666515d-c568-4c3d-b0f8-b6547a96833c" id="f666515d-c568-4c3d-b0f8-b6547a96833c"><img src="https://i.gyazo.com/a9e0bc21d7d0078cbad35706d61e9f6b.png" alt="" width="620" height="1103" style="width: 372px; height: 661.8px;"><figcaption></figcaption></figure><h2 name="2f0d1da5-ddfd-4160-8dea-15f7f17e61bf" id="2f0d1da5-ddfd-4160-8dea-15f7f17e61bf">まとめ</h2><p name="d564702a-cd04-4ec2-961e-df01a2cec563" id="d564702a-cd04-4ec2-961e-df01a2cec563">今回はお試しでアプリ作成した流れを紹介しました。<br>
まだまだ全然わかっておらず、凝ったつくりのものは作れませんが、個人レベルの即席アプリであればそれほど苦労せずに作れそうです。<br>
<br>
作ったアプリはシェアできますので、今回のようなアプリであれば、日用品や食材を使ったり買ったときに家族がそれぞれ更新して利用することができます。<br>
私は早速作ったアプリを妻とシェアして在庫管理しようと思っています。</p><p name="eaec5bab-481a-4757-a558-68804b1876dd" id="eaec5bab-481a-4757-a558-68804b1876dd">無料版でできることは限られますが、ちゃんと習得できたら凝ったつくりのものもチャレンジできたらなと思います。</p>