この記事は UEC 2 Advent Calendar 2023 15日目の記事です。
昨日はKanaruさんの小さなコンピュータ入門でした。
この記事では調布祭のteam411の店舗で導入したモバイルオーダーシステムについて宣伝紹介します。見かけた方は多いのではないでしょうか。これです。
ベイクドモチョチョについては深く触れないこととします。
経緯
元々はU☆PoCで応募したものでした。
U☆PoCで使用したポスター
なんとチームメンバーが考えてくれたアイディアが天才的なこともあって企業賞を受賞することができました。今回のモバイルオーダー導入はそのU☆PoCの一環でもありました。
コンセプトは簡単に導入できるモバイルオーダーシステムです。現状、店舗に導入しようとすると受注などになってしまって莫大な費用と時間がかかってしまうわけですね。実際、チェーン店などでしか導入事例を見たことがありません。そこで導入コストが低いモバイルオーダーシステムを開発しようという話です。
プロトタイプの作成
先ほどのU☆PoCも諸々関係してきますが、細かいことは飛ばしてとりあえずプロトタイプを作成しました。9月の話ですね。
Firebase愛好家（依存症）の私が実装したこともあり、Firebase Auth、Firestoreなどで実装。言ってしまえばこのシステムはFirebaseを装飾しただけです。フロントはNext.js on Vercel。この時代はまだPages Routerが主流だった気がする。もうApp Routerが浸透してるっていうんだからフロントの進化の速度は怖い。デザインはできる訳もなくMUIを採用。というかデザイナー募集。MUIいいですよね。同じ世界線に生きる人に「うわ、これMUIじゃん」って思われること以外は悪いことはないと思います。
プロトタイプで作成したのはこんなやつですね。ポスター切り抜き。商品の画像が酷いですが、これは私の仕業です。よく見ると後で受け取るとかも選べるようになってますね。消えた機能です。
いざ実装へ
プロトタイプで得た知見を参考にしつつ調布祭で使用するシステムの開発に移りました。構成は以下のようにしました。ツッコミどころが多いかと思いますが。
何回も試行錯誤した結果のこれですが、全部作成し終わった今だと改善点しかないです。それにしても酷い図。
細かい実装もせっかくなので紹介します。
注文画面
左：商品一覧 右：商品の詳細
注文画面はNext.js+MUIでの実装です。ボタンとかそのままだね。
裏側ではFirebase Authによる匿名認証が行われています。これによってメールアドレスとか入れなくても個人が特定できるってわけですね。ただプライベートモードだったり、QRコードを読み取るアプリの仕様などでアクセストークンが消えてしまったためか、注文が消えてしまったというお客様を数名確認しました。これについては要改善ですね。
Next.jsでできるだけSSRとISRを頑張っているので表示速度もそれなりに早かったと思います。
店舗操作画面
注文一覧画面
注文一覧画面ではリアルタイムに注文が表示されるため、注文状況の把握にはとても便利でした。また、iPadで操作することを想定していたので、タッチ操作しやすいデザインにしてあります。
注文操作画面
この画面も同様、iPadでの操作を考慮した作りになっています。それぞれのステータスに切り替えることで、お客様のスマホの画面にリアルタイムに注文状況が表示されます。あとで紹介しますが、店頭に設置したモニターにも連動されます。
実際に私以外の人にもこの操作を行なってもらいましたが、ミスなどはなく、問題なく扱えていたと思います。
ただ少し問題が発生。準備中や提供可能などのステータスにしか切り替わらないはずが、たまにnullが入る。その瞬間全部ぶっ壊れて注文が確認できないアクシデントがありました。急いでその場でVSCodeを開いてゴリ押しで直しましたが、かなり反省。勉強になりました。
ここではお見せできませんが、リアルタイムで統計を取っていて、売上なども確認できるようにしました。
店頭の画面
店頭にはこのようなディスプレイを設置しました。某ハンバーガー屋さんに似てる気がする？そんなわけないだろ。現状あるモバイルオーダーシステムを導入している店舗はどこも同じようなデザインなのでこれが最適解なのでしょうね。
これはFirestoreからリアルタイムで注文を取得してゴニョゴニョしてるだけですね。実は呼び出しがあると音がなったりします。
右にある某インクゲーみたいな画像はサークルメンバーが作成してくれました。まじ感謝。というかちょうど同じようなフェスやってましたね。合わせたわけではないのでただの偶然です。
商品の管理
商品の管理はバックエンドでVPSを立ててStrapiで操作しています。ここはあまり解説することはありませんね。
なぜこうなったかというと、当初はFirestore上で商品の管理もしていたのですが、なんかこれじゃない感と私の興味でこうなりました。ただ費用の割にはメリットがないのであまり意味がありませんでした。改善点ですね。
費用面
気になるのはかかった費用ですよね。費用がかかる場所はFirebaseとVPSですね。まずFirebaseですが、なんと無料で収まりました。主にFirestoreを使用していますが、こんな感じでした。
無料枠が読み取り3.5万/monthなので結構ギリかも。ただ削れるところは多くあるので要検討です。
VPSはLightsailの$10/monthを契約していました。ただ円安もありかなり高い。ちなみに使用量を見ると全然削れますね。
Lightsailの使用状況
全然余裕やん。勿体無い。ただStrapiのビルドを回すと急にリソースが足りなくなる印象。うーーん。
最後に
計画から半年で実運用まで持ってきて、早すぎだろって感じですね。その通りに時間はかなりありませんでしたが、３日間の調布祭を乗り越えられることができました。協力してくれたサークルメンバーには本当に感謝しています。サイトに使用する画像を作成してくれたり、商品の説明欄を考えてくれたり、本当に助かりました。
さて今後についてですが、今回の試験運用を終えて改善をし、来年度には他の模擬店にも使用してもらいたいという目標があります。つまり導入したい人、サークル、その他、大募集です！連絡をくれると泣いて喜びます。
文章を書くのに慣れていなくて壊滅的な記事になってしまいましたが、最後までお読みいただきありがとうございました。
Discussion