プログラミングできない人が買い物リストアプリを作る話（Amazon Honeycodeで）

これはプログラミングできないおっさんが買い物リストアプリをAmazon Honeycodeの力を借りて作る話です。

Amazon Honeycodeとは（6月28日時点）

まず、Amazon HoneycodeとはAmazonが2020年6月24日に公開したスプレッドシートをベースにNo codeでウェブアプリやモバイルアプリを構築することができるツールです。（ベータ版として公開）

ね、なんか抽象的ですごそうだけどわからないでしょ？
というわけで、No codeでどんな感じで作れるのか試すために触ってみる中で買い物リストを作ってみたのです。

なんで買い物リストなん？

実は我が家では買い物リストをgoogleフォームとスプレッドシート、データポータルを使って管理してました。

こんな感じ

ちなみにこのアプリ作る前に使ってたもの
（めちゃめんどい🤮）
1. Googleフォームに入力
2. データポータルみながら買い物
3. 買ったらスプレッドーシートでチェック pic.twitter.com/VJ1gsdwdQE

— 石川優輝(ゆき)⛄@楽を作る畳職人 (@Natsuki53010077) June 28, 2020

Trelloとか他のツールでもできるのになんでわざわざスプレッドシートとデータポータルだったのか。
主な理由はこれです。

・欲しい最低限の機能は項目を追加して買ったらチェックして消えるだけ
・とはいえ過去に買ったものはパッとみで把握しときたい
・Trelloとかいちいち開くのめんどい、タブ移動処理もめんどい
・家計簿をデータポータルで管理してるからついでにそこで見たい
・わざわざいろんなツール探して試すのがめんどい

要はめんどくさいです。
しかしながらこの管理ではデメリットが多かったんです。

メリット
・データポータル見れば現在の家計状況と書いたいものがわかる
・放り込んでおけば買うもの、買ったもの、その傾向が把握できる
デメリット
・データポータルからチェック（購入済）できないのでスプレッドシートに行く必要がある
・それがめんどくさすぎて処理も忘れて追加意欲もなくなってくる
（・でも他のツール探すのもめんどい）←くどい

そんな中でAmazon Honeycodeが公開され、その中にテンプレートでToDoが入ってることがわかりました。
これを見たときあれ、これ元に買い物リスト作ったらやりたいことできるんじゃね？って思ったことがきっかけです。

ってことでできたのがこちら

昨日に続いてAmazon Honeycodeで買い物リスト作ったよ。
Simple ToDoを改造して作成。
カテゴライズとか優先順位づけとかしたくてちょっとテーブル追加したけど基本はそのまま使うだけでできるし動きの把握にも繋がるしで、最初からいくつかテンプレート入ってるのいいよね。 pic.twitter.com/QCETir698L

— 石川優輝(ゆき)⛄@楽を作る畳職人 (@Natsuki53010077) June 28, 2020

どうやって作ったの？

１．どんなのが欲しいのか整理する

すでに書いた通りテンプレートのSimple ToDoをベースにするのは決まってたので、やりたいこと洗い出してどう変えるのかを整理しました。

ちなみにHoneycode内にはSimple ToDoだけでなくこれだけのテンプレートが最初からあります。

考えるときは字が汚いし間違えまくってるけど手書き派ですw

２．Simple ToDo内のテーブルを考えた形に修正する

基本そのままでカラムの追加、「食品」とかを分けるためのカテゴリーや欲しいもの順で優先順位つけたかったのでそれ用のテーブル追加したくらいしか変えてないです。
テーブル名やカラム名も変えるのめんどくさいので追加分以外はそのまま。

テーブルとかは基本エクセルと同じ操作で、関数もほぼ同じく使えるのでエクセル触ってる人からしたら楽でいいですね。

３．Builderで見せたい項目に合わせて編集する

Simple ToDoがベースなので、最初からアプリが存在してます。
なので、それをもとにコメントの中やいらない項目（Due Dateとか）をカテゴリーや優先順位に変えていきます。
変えるときにももとから入ってる関数などがあるのでそれを参考にしてけばそれほど迷わずに構築できます。

４．Viewで動作確認する

パクって作るときはここが一番心にくる。
やっぱパクってるので細かいとこでミスが多い…

こういうポカミスがちょいちょい出てくるのよねー。
・コメント直し忘れてる
・参照元変えたから動作が変わってる

５．妻にシェアして完成

動作確認除けばテンプレート使うだけで実質3ステップでできてしまいます。

あーノーコードって素晴らしいw

で、使った感じどうなの？簡単なの？

テーブル作ってBuilderでスクリーンに置きたいオブジェクトを置いて設定してくだけで構築できるので楽です。

ちなみに昨日試しにいちから作ったクレーム対応レポートアプリはこちら

感覚的にはSalesforceでオブジェクト作ってる時とか、kintoneでアプリ作ってる時の感覚に似てるかも。
あー、コード無しで形ができてくーみたいな。
関数だけで、項目を見せる見せないを設定できるのはkintoneより楽かもと思いました。

一方でプロセスフローの構築ができないのでそこまでできたらいいなーと。
あと、グラフ作ったりとかのビジュアライズ機能もここについてくれたら個人的にハッピーですw
（初心者なので把握してないだけかもだけど）

なにはともあれテーブル作成してアプリ作るってことがこんな簡単にできるのはいいなーって感じでした。

何より妻から「いい感じじゃん」て言ってもらえたのでそれで満足です。

ちなみにこちらは同じくまず触ってみたシリーズ（？）でいちから作ってみたクレーム対応レポート
（よくわかってなかったから挙動がおかしいw）

Amazon Honeycode使ってコード書かずにアプリつくってみたよ📱
ベースは品質管理おなじみのクレーム処理！（嫌よねクレーム）
テーブル作ってビルダー立ち上げれば簡単にそれっぽくなってくれるからありがたい！
スマホで動かすと反映されるのがちと遅い気がするけど。
プログラミング不要で楽しいー🥳 pic.twitter.com/Zhcal9F2Kv

— 石川優輝(ゆき)⛄@楽を作る畳職人 (@Natsuki53010077) June 27, 2020