Fast Gourmet

© CC BY 4+ visibility774
© CC BY 4+
visibility774

「手軽に、身軽に、行きたいお店」が見つかるサービスです。

動画
開発素材
システム構成
system image

※友達登録用QRコード(利用状況によってサービスを停止する場合があります。)

紹介資料

https://www.canva.com/design/DAFQqPQzz4Q/OcBdj-zREPHNSYyhxH_3UA/view?utm_content=DAFQqPQzz4Q&utm_campaign=designshare&utm_medium=link&utm_source=publishpresent

アピールポイント

3タップ以内!「Fast」なUI設計

  • 余計なやり取りを極力排除し、必要な情報に最短でアクセスできるようにしました。
  • 1画面に表示する情報量を増やし、多くの画面遷移を行わなくてもいいようにしました。

多機能&シンプル!リッチメニューの切替

  • リッチメニューのサイズを広げるのではなく切り替えとすることで、トークルームに表示される領域を広く確保しました。

パーソナライズ!お気に入り、Discover機能

  • サーバー上でユーザIDごとにデータを管理し、末永く利用したいと思えるものにしました。
    • お気に入り機能
      • 検索結果の「お気に入り登録/解除」をタップすることで利用でき、最大100件まで保存が可能。
      • リッチメニュー上の「お気に入り」をタップすることで表示できます。
    • Discover
      • サーバ上に保存したデータから、普段あまり行かないお店を紹介します。(マンネリ解消)

是非使ってみていただいて、フィードバックください!

https://forms.gle/H4csL1LHie7GPp2t5

フロントエンド

  • LINE
    • LINE公式アカウント
      • リッチメニュー
      • Messaging API

バックエンド

  • 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は利用せずこちらを使ってみました。

https://aws.amazon.com/jp/

リクルート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/ja/docs/messaging-api/building-bot/#set-up-bot-on-line-developers-console

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

https://www.canva.com/

プレゼン資料、リッチメニュー

  • canva

https://www.canva.com/

フィードバックフォーム

  • Googleフォーム

https://www.google.com/intl/ja_jp/forms/about/

構成図

  • draw.io(VSCodeの拡張機能を利用)

https://app.diagrams.net/

シーケンス図

  • Mermaid.js

https://mermaid-js.github.io/mermaid/#/

各機能のシーケンス図

※replyTokenの認証等は省略しています。

キーワード検索

周辺検索

もっと見る機能

ここに行く機能

お気に入り登録/解除機能

お気に入り表示機能

人気のお店機能

メンバー
  • user
    ITA_やまだ @papasim824
    • バックエンドエンジニア
  • user
    DLS_はな @hana0001
    • フロントエンドエンジニア
  • user
    KSOL_こぐり @ksol_koguriyama
    • フロントエンドエンジニア
  • user
    MYT_asa @myt_asa
    • 宴会
    • プレゼン(資料作成・発表)
  • user
    MYT_yama @myt_yama
    • フロントエンドエンジニア
    • プレゼン資料作成

関連イベント
  • event ヒーローズ・リーグ 20222022-09-05 開催
  • event Hack Rock(6) Fes 20222022-11-07 開催
関連リンク

同じニオイがする作品
  • event 野良猫これくしょん by 野良猫に癒され隊
  • event まち歩きマップメーカー
  • event ふくおかげっさー
  • event toio地球儀

Proto lovers ♥
user
user
user
user

イベントまとめ

コンテストまとめ

作品を登録しよう

モノづくりしている人に、つくった作品を見てもらえ、リアクションがもらえるかも?

close

目次


Proto lovers ♥
user
user
user
user