※友達登録用QRコード(利用状況によってサービスを停止する場合があります。)
紹介資料
アピールポイント
3タップ以内!「Fast」なUI設計
- 余計なやり取りを極力排除し、必要な情報に最短でアクセスできるようにしました。
- 1画面に表示する情報量を増やし、多くの画面遷移を行わなくてもいいようにしました。
多機能&シンプル!リッチメニューの切替
- リッチメニューのサイズを広げるのではなく切り替えとすることで、トークルームに表示される領域を広く確保しました。
パーソナライズ!お気に入り、Discover機能
- サーバー上でユーザIDごとにデータを管理し、末永く利用したいと思えるものにしました。
- お気に入り機能
- 検索結果の「お気に入り登録/解除」をタップすることで利用でき、最大100件まで保存が可能。
- リッチメニュー上の「お気に入り」をタップすることで表示できます。
- Discover
- サーバ上に保存したデータから、普段あまり行かないお店を紹介します。(マンネリ解消)
- お気に入り機能
是非使ってみていただいて、フィードバックください!
https://forms.gle/H4csL1LHie7GPp2t5
フロントエンド
- LINE
- LINE公式アカウント
- リッチメニュー
- Messaging API
- LINE公式アカウント
バックエンド
- AWS Lambda(Python)
- Function URLs ※ハッカソンという限定的な期間での開発、利用のためAPIGatewayは利用せず。
- リクルートWebサービス
- グルメサーチAPI
- Google Map
- Maps URLs
利用したサービスの紹介
ハッカソンでは限られた時間の中で動くものをつくる必要があります。 今回は以下サービスを活用することで、できる限り高品質な機能とリッチな見た目を目指しました。
LINE
言わずと知れたコミュニケーションアプリ
LINE公式アカウント LINE BOTを作成する際には公式アカウントという形で作成する必要があります。 以下のMessagingAPIを作成する過程で一緒に作成できました。
Messaging API LINE BOTで利用できる機能の一つで、LINE画面を通じてユーザーとさまざまなやり取りやサービスを提供できます。
リッチメニュー 通常の吹き出し型のメッセージでのやりとりとは異なり、固定のメニュー等を作成できる機能です。
https://developers.line.biz/ja/
AWS
バックエンドの処理はAWSを利用して作成しました。
- AWS Lambda AWSにおけるFaaS(Function as a Service)で、サーバーなどを用意しなくても任意のコードを実行できます。
今回は一番使い慣れているPythonで実装を行いました。 コードの紹介と解説は利用した各サービスの解説後に記載します。 Lambdaの処理をWebAPIとして公開するにあたっては「Function URLs」を利用しました。 ※ハッカソンという限定的な期間での開発、利用のためAPIGatewayは利用せずこちらを使ってみました。
リクルートWebサービス
リクルート社が保有するデータベースを外部から利用するためのWeb API群です。 無料で利用できますが、APIキー取得のために利用登録が必要です。 また、利用するアプリ等でのクレジット表示も必要となります。
グルメサーチAPI ホットペッパーグルメにおける各種情報を取得できるAPIです。(一部情報のみ。今回で言うと電子マネーの対応情報なども取得したかったのですが提供されておらず。。残念。)
店舗サーチAPI こちらも同様のAPIですが、詳細情報が載っていない店舗も検索することができます。 検索結果の補強に利用しています。
https://webservice.recruit.co.jp/index.html
https://webservice.recruit.co.jp/doc/hotpepper/reference.html
Google Map
言わずと知れた地図情報サービス。
- Maps URLs
URLへパラメータを指定することでGoogleMapの様々な操作を行うことができます。
今回は検索結果のお店への経路案内のために利用しています。
具体的には
https://www.google.com/maps/search/?api=1&query={店舗名}+{住所}
で指定しています。
https://developers.google.com/maps/documentation/urls/get-started
LINE周りの設定
LINE BOTを作成するにあたっての作業について記載します。 ※といっても公式のドキュメントがわかりやすいので紹介だけ。
LINE公式アカウント、MassagingAPIの作成
- リプライは基本的にFlex Messageを利用しています。その他テキストメッセージやスタンプメッセージもPushしています。
- Flex Messageを作成する際はFLEX MESSAGE SIMULATORを利用してベースを作り、動的に変更したい部分を修正するのがオススメです。
https://developers.line.biz/ja/docs/messaging-api/getting-started/
https://developers.line.biz/flex-simulator/
リッチメニュー
- 多機能かつ、シンプルなUIを実現するためにリッチメニューの切り替えを実装しています。(こちらはLine Official Account Managerからは作成不可なので、こちらを参考に実装しました。)
https://developers.line.biz/ja/docs/messaging-api/using-rich-menus/#using-rich-menus-introduction
アイコン
- Shopify Hatchful
https://www.shopify.com/jp/tools/logo-maker
- canva
プレゼン資料、リッチメニュー
- canva
フィードバックフォーム
- Googleフォーム
https://www.google.com/intl/ja_jp/forms/about/
構成図
- draw.io(VSCodeの拡張機能を利用)
シーケンス図
- Mermaid.js
https://mermaid-js.github.io/mermaid/#/
各機能のシーケンス図
※replyTokenの認証等は省略しています。