「ミニアプリ(LIFFアプリ) LT祭り！」に登壇してみた＆技術的な補足
約3年ぶりにブログを書きます。Qiitaやnoteに書いていてあまりこのブログの出番がありませんでしたが、これからはこのブログに技術共有や登壇話をしていくようにしようと思います。というわけで今回はLT登壇した話をします。先日LINE Developers主催のイベントに登壇してきました。
linedevelopercommunity.connpass.com
イベントのアーカイブ動画はこちらです。50:43からが僕のパートです。
ここでは1年前に深センの企業視察ツアーで訪れた無人コンビニを体験したことをふと思いだして試しにLINEで実装してみた話をしてみました。その時の登壇資料はこちら↓
資料の最後に載せていますが、今回作ったアプリのソースコードは下のGithubレポジトリで公開しています。
本当はデモをしたかったのですが、やはり5分では足りず概要だけの内容になってしまいました…というわけでこのブログではその補足記事を書いていきます。
※ここではシステムの概要を紹介するだけなので、細かい手順に関してはレポジトリのREADMEをご確認ください
システム構成
入口にあるQRコードを読み込んだら入店処理を行い店内に入ります。確か1度に店内に入れるのは1組だけだったはずです（2人以上で入ることはできるけど支払いは入口でQRスキャンした1人が代表して支払うイメージ）。そして商品を選んで出口に行くと小部屋があり、そこに閉じ込められてQRを読むと選んだ商品がまとめて集計されてその合計金額をWe Chat Payで支払ってコンビニを出るという流れでした。それをLINEに置き換えたのが上のシステム構成です。（あくまで予想です）
開発環境
今回はバックエンドとしてFlaskを使いました。作っていてDB操作とレンダリングを1ファイルで行っていてコード量が多くなったのでやっぱりDjangoでやれば良かったかなー？とも思いました。そしてアプリはおなじみのheroku上で動かすので、herokuで無料で使えるPostgresをDBにしました。SQLAlchemyを使ってDB操作をしているのでローカルでsqliteを使っても動くと思います。そしてLIFFのHTMLについては特にフレームワークを使わずにBootstrapで見た目を整えているので特に特別なことはしてません。
作成したLIFF
今回はパターンに応じて3つのLIFFを用意しました。もしお手元でアプリを動かすときはLIFF IDを3つ用意します。
- チェックイン用
- チェックアウト用
- 上2つのアプリを呼び出すためのQRコードリーダー
QRコードリーダーに関してはLINEアプリに最初からあるQRコードリーダーを使ってもいいかなと思いましたが、LIFFのQRコードリーダーを試してみたかったので、リッチメニューからLIFF IDだけ読み取ってJavaScript側でLIFF URLを作成して各アプリを立ち上げるようにしてみました。LIFFのQRコードは読み取った値に対して次何の処理をすればいいのかをプログラムで記述できるので、これはやれることが色々増えてると思い、いい勉強になりました。( iOS版LINEバージョン9.19.0以降では技術的な問題があり使用できないようですが…)
QRコードについてはこちらの記事が参考になりました！
チェックイン
チェックインボタンを押して、裏側でリクエストを投げることでチェックイン処理をしています。LIFFではユーザーIDを取得するAPIがあるのでそれを使えば簡単にユーザ情報を取得できます。
チェックアウト
チェックアウトのときの決済についてはチェックアウトのLIFFを起動したときに購入した商品の一覧が出力されて、問題なければ決済ボタンを押して決済をします。決済に関しては今年のはじめにリリースされたLINE Pay SDKを使ってみました。最初リクエストボディの設定をミスっていてエラーを探すのに手こずりましたが、使い方がわかると本当にわかりやすいSDKだと思います。何よりLIFFと相性がいい決済システムはいいですよね。
商品のスキャン
実際の深センのコンビニでは不正を防ぐために出口のQRコードを読むと選んだ商品をまとめてスキャンするのですが、調べてもやり方がよく分からなかったので、実現できる範囲の妥協策としてSONYのPaSoRiを使いシール式のNFCタグを読み取ってトランザクションデータを登録する仕組みを入れています。NFCについては今回初めて触りましたが結構便利だし、簡単にタグに情報を書き込めるのはいいですね。
タグに書き込むコードと読み込んでサーバーにリクエストするコードはGithubのレポジトリのNFCディレクトリに掲載しています。ソースコードを見るとNFCタグを読み込んだらHTTPリクエストでサーバーにトランザクションデータを登録する仕組みなのでHTTPリクエストを送信できるようにするならQRコードやふつうのバーコードを用意してリーダーで読み込む方法もありだと思います。
完成品
実際の動作がこちらになります。スマホでとった動画と画面キャプチャをつなぎ合わせたらTikTokみたいな動画になりましたｗ
まとめ
今回は1年前の記憶を頼りに深センの無人コンビニのシステムをLINEで実装してみました。久々にそこそこ大規模なプロトタイピングをしていたら思いの外LINEのAPIをフル活用したシステムができました。4連休をこのネタ作りに費やしましたが、久々に自分のペースで作りたいものを作れた気がします。すでにあるものを自力で再実装するのは仕組みを考えることができて楽しいものです。そして他の方の素晴らしい発表を通じてLINEのAPIのポテンシャルを改めて実感しました。次は何作ろうかな？
