回転寿司のセルフオーダー端末を完コピ！　ついでにLINE Payとバーコードリーダーも付けてみた

　画面にパーツを貼り付けて、参照したいデータを関数で指定していくだけ。コードなしでビジネスアプリを構築できる「Microsoft PowerApps」を使って、某回転寿司チェーン店のセルフオーダー端末を再現してみた。「素人建築」ならではの危うさはご容赦願いたいが、使い始めて2週間ほどで、ここまでできることに感心した。

回転寿司のセルフオーダー端末をコツコツと自作

　まずは、この動画を見て欲しい。

　回転寿司店に行ったことがある人なら見覚えがあるかと思うが、回転寿司チェーン店「くら寿司」のテーブルに設置されている業務用端末を模倣したセルフオーダーアプリだ。

　5皿おきに作動するゲームが実装されていないなど、完全に同じ機能を実現しているわけではないが、単純に画面を模倣しただけでなく、商品マスターや販売ジャーナルなどのデータベースを持ち、商品登録や会計、売り上げレポート表示まで、実際に使える機能をそこそこ搭載。さらに、バーコード読み取りで購入商品を登録する機能や、「LINE Pay」による決済機能まで搭載している。

「Microsoft PowerApps」で作ったセルフオーダーアプリのメニュー画面をiPadで表示

　1週間ほど、仕事の合間を見つけてコツコツと、筆者が自分で作り上げたものだ。

　本連載でも度々触れているが、筆者は、中学生時代にBASICをかじったくらいで、ほとんどコードが書けない（UiPathのおかげでVB.NETはそこそこ覚えた）。それでも、Microsoft PowerAppsを使えば、これくらいのアプリなら試行錯誤しつつ自作することができた。

　PowerAppsは、ローコーディングでビジネスアプリを作成できるアプリケーションプラットフォームだ。

　現在は、「Microsoft Flow」、「Power BI」の2製品とともに、Power Platformとしてブランディングされているが、個別のサブスクリプションやOffice 365のプランの一部としても利用できる。

　イメージとしては、PowerPointとAccess（もしくはExcel）を組み合わせたようなものと考えればいい。

PowerPointのように画面上に並べた各パーツに対して、さまざまな関数を設定していく

　PowerPointでスライドを作るときのように、ラベルやテキストボックス、ボタンなどのツールを画面上に自由に配置していき、まずは画面のデザインを作成する。

　実際、筆者も先ほどのセルフオーダーアプリを作る際は、YouTubeに投稿されていた実機の操作動画を見ながら、画面の色やボタンの配置、テキストの文言などを確認して画面を作成した。

　その後、関数を使って、各々のパーツに機能を割り当てていけばいい。例えば、メニュー画面が表示されたときに、データベースからお勧め商品をピックアップして並べたタブを表示したいなら、メニュー画面の「OnVisible」プロパティに、次のように関数を「;」で区切って並べておけばいい。

ClearCollect(getProducts,Filter(商品マスタ,販売中='販売中 (商品マスタ)'.'1',お勧め='お勧め (商品マスタ)'.'1'));Set(menuNum,6)

　これで、商品マスタのエンティティ（PowerAppsではデータベースのテーブルをエンティティと呼ぶ）から、「販売中」かつ「お勧め」のフラグが設定されている商品をフィルターで取り出し、「getProducts」変数に格納する。その後、「menuNum」変数に「6（お勧めメニューの番号）」をセットすれば、最初のメニュー画面に表示されるようになる。

　こんな感じで、ラベルに注文した皿数を示す変数（totalAmount）を登録したり、ボタンが押されたときに別の画面に移動するよう、「OnSelect」プロパティに「Navigate(おあいそ画面,ScreenTransition.Cover)」のように記入していけばいい。

　関数の役割や書式については、ある程度調べていく必要はあるが、要するに、画面上のそれぞれの要素に1つずつ機能を登録していけばいいわけだ。

物置のつもりで始めたら、3階建て住宅が建った！

　当初、筆者は「あのメニュー画面と同じようなものできれば面白いなぁ」くらいのつもりでアプリを作り始めたつもりだった。

　しかし、いざ作り出すと欲が出てくるもので、「せっかくなら商品マスタ作って登録削除できるようにしよう」となり、「じゃあ、レジ用の画面も作ってしまえ」、「バーコード読み取り機能あるじゃん使ってみよう」、「LINE Payで支払えないかな」となり、今のアプリが出来上がった。

　これは、PowerAppsのスゴイところでもあり、怖いところでもある。

　PowerAppsでは、画面を追加していくことで、どんどん機能も拡張していけるのだが、その際には連動するデータベースの変更も伴うことが多い。

　エンティティ上のフィールドの追加や削除なんてのはざらで、名前や型を変えることも度々あったのだが、こんなことをしても、アプリが破綻しないのだ。

　もちろん、場合によっては関数の修正を迫られることもあるが、変更が必要になると画面上に「！」が表示されるので、修正は最小限の手間で済んでしまう。

　なので、事前にしっかりデータベースを設計するとか、画面の仕様を固めるといったことをしなくても、欲望のままにアプリを作り続けることができてしまうのだ。

PowerAppsで利用するCommon Data Service（データベース）。エンティティ（テーブル）にフィールドを追加して型を設定しておく。後から追加や変更をしても、割と何とかなる

　おかげで筆者のアプリは、物置のつもりで作り始めて、気付いたら3階建ての住宅になっていたようなもので、あらためて見ると実にアラが多い。複数のデータベースに重複した内容が格納されていたり、変数の名前に一貫性がなかったり、ボタンやラベルがデフォルトの名前のままだったりする。

　「うわー、直したい」と思っても、もはや床を剥がして基礎を打ち直したり、バラバラの柱のサイズを統一したりする気力が起きない。もちろん、こうした修正をシステム側である程度吸収してくれるPowerAppsなら、修正自体は不可能ではない。しかし、その「気力」がもう起きないのだ。

　なので、元々は今回作ったアプリを公開しようと考えていたのだが、止めた。こんな恥ずかしい中身を他人様に見せることは、到底できないからだ。

バーコードスキャンによる商品情報登録も実装、スマホなどのカメラを利用

　というわけで、途中からは「バベルの塔」とばかりに開き直り、機能を追加しまくってみたのだが、工夫次第ではかなりいろいろなアプリができそうだ。

　例えば、「バーコードスキャナー」というパーツが用意されている。これを使うと、実行端末（タブレットやスマホ）のカメラを使ってバーコードを読み取ることができる。

バーコードスキャナーをパーツとして簡単に利用できる

　これにより、商品マスタに商品を登録する際にパッケージからバーコードを読み取って文字列を登録したり、逆にパッケージのバーコードを読み取ることで商品マスタから該当商品をピックアップすることなどができる。

　面白いので、今回のアプリでは、商品の中に「Aterm WG1200HP3」を登録し、メニュー画面から「スキャン」ボタンでバーコードで注文できるようにしてみた。

　ちなみに、この機能はバーコードなら何でも読み込むので、シリアル番号やMACアドレスなども一緒にラベルに記載されていると困ってしまう。このため今回は、JAN/EANコードのみを読み取るように工夫してみた。

Microsoft Flowを介するLINE Payでの決済機能も

　続いて、決済機能を導入してみることにした。

　できれば、コンビニでの決済のように、スマホのアプリからバーコードを読み取って決済するというものにしたかったのだが、結局、実現方法がよく分からなかった。

　調べてみると、LINE PayのAPIを使った決済なら、PowerAppsからも簡単に実装できそうだったので、こちらを使ってみることにした。

　詳細は、LINEが公開している開発者向けのウェブページを参照してほしいが、テスト用のサンドボックスも用意されている上、1世代前のAPI（v2）ならリクエストも単純（v3ではnonceを使った署名が必要なのでノンコードでは困難）なので、実装はさほど難しくない。

　LINE Payの決済は、次のような流れで実施される。

1. アプリから商品名、金額、通貨、オーダーID、承認用アドレスをLINE Payのサーバーにリクエスト
2. LINE Payサーバーが、支払い用URL（ウェブとアプリの2種類）とトランザクションID、アクセストークンを送信
3. 支払い用URLからLINE Payのサーバー上の決済ページにアクセスし（アプリの場合はアプリで実施）、LINE IDでログインして決済を実行
4. LINE Payサーバーが、1で指定した承認用アドレスで指定したサーバーに決済完了を知らせるトランザクションIDを送信

　要するに、アプリ、LINE Payサーバー、承認サーバーの3者で情報をやり取りすることで決済が実行されることになる。

　問題は、承認サーバーをどうするかだ。もちろん、サーバーを立ててもかまわないが、今回はこれをMicrosoft Flowで受けることにした。

　Microsoft Flowには、コネクターとして「HTTP要求の受信時」が用意されている。これをフローを実行するときのトリガーとして使えば、LINE Payサーバーからの返答を受けることができるわけだ。以下のウェブサイトの情報を参考にさせていただき、無事に実装できた。

Power BIからHTTPリクエストをリンクで送ってFlowで受け取る方法

　最終的には、Common Data Service（データベース）を経由して、セルフオーダーアプリとFlowの間でデータをやり取りし、アプリから決済情報が新しいレコードとして登録されたら、リクエスト用のフローを起動し決済用のURLを取得。決済用URLから顧客が決済を実行後、LINE Payから送られたトランザクションIDを承認用のフローで受け取り、決済が完了のフラグをデータベースに書き込むという処理にした。

　リクエストとデータベースの処理で時間がかかる点に改良の余地がありそうだが、Microsoft Flowを使うことで、こちらもコードを記述することなく処理を実装できた。

Microsoft FlowでLine Payサーバーからの決済要求を承認。サーバーを稼働させなくてもFlowで代替できる

模倣システムを量産したい

　以上、PowerAppsを使って、セルフオーダーアプリを作ってみた。中身は洗練されているとは言い難いが、機能的にはやりたいことを一通り実装できた。

　基本的には、画面を作って、表示したい情報を関数で指定していけばいいので、かなり楽にビジネスアプリが作れる。一見、複雑そうな処理もFlowを組み合わせれば実現可能だ。

　また、今回はあまり触れなかったが、データベースのデータをPower BIで読み込めば、日付や時間帯、商品ごとの売れ行きなども簡単にグラフ化できるので、データ分析までこのシリーズで何とかカバーできる。

Power BIで売り上げデータをさまざまな角度から分析することも可能

　さて、これで寿司はクリアしたので、次はどこのシステムを模倣しようか？　そう考えながらいろいろな店舗を回るのが、最近の楽しみだ。