Help us understand the problem. What is going on with this article?

近くの飲食店を簡単に検索できるサービス「Ottimo!!」をPWAで作ってみた

More than 1 year has passed since last update.

:star: きっかけ

  • というのを見て自分でも似たようなものを作ってみました

:star2: 実際に作ったもの

Ottimo!!

  • スマホ向けのサービスです
  • サーバーサイドはHerokuなのでsleepしていると最初の応答が遅いです・・・

:star: 特徴

  • 近くの飲食店をwebから手軽に検索できる
  • そのままwebでGoogleMapを使ったルート案内ができる
  • 「ランチあり」「Wi-Fiあり」といったありがちな条件のON/OFFが簡単にできる
  • 横スワイプで店を選べるので長々と縦スクロールしなくていい
  • 他のURLに遷移せずにwebページで詳細を確認できる
  • webなのでストアからアプリをダウンロードしたりアップデートしたりする必要がない
  • PWA対応しているのでホーム画面に追加すると通常のスマホアプリのように動作する
  • 「作者に牛丼をおごる」ボタンをつけてみた(元ネタ

:star: 使ったもの

:pencil: React

  • create-react-appコマンドで簡単にReactアプリを作ることができます
  • このコマンドで生成するとregisterServiceWorker.jsというファイルも作ってくれるので、これを使うだけで簡単にPWA化できます
  • あとはmanifest.jsonというファイルを作ってアイコンの設定をするくらいです

:pencil: GitHub Pages

  • フロントはGitHub Pages を使うことでサーバーレスでwebページを公開できました
  • 無料かつデプロイもコマンド1つで簡単にできるのでオススメです
  • Reactの場合のデプロイ方法
  • GitLab Pagesもあるっぽい

:pencil: Onsen UI

  • 「モバイルWebアプリを最高に美しく、スムーズに」という謳い文句の通り、ネイティブアプリっぽい動作を簡単に実装できるのでオススメです
  • アイコン、ボタン、カルーセル、サイドバーなどのほぼ全てのパーツもOnsenUIを使用しています
  • PageとNavigatorを使った独自のルーティングがあるので使う前に要確認
  • なぜかReactのリファレンスはあっさりしているので、詳しくは他のリファレンスを参考にした方が良さそう(小声)

:pencil: ホットペッパー グルメサーチAPI

  • 食べログはAPIの提供終了しており、ぐるなびは店舗の画像が取得できない場合があったため、ホットペッパーグルメのAPIを使わせていただきました
  • APIの利用登録も簡単で、RateLimit(API使用回数の制限)も特になさそうでした

:pencil: GoogleMap JavaScript API

  • GoogleMapを表示させるために必要です
  • reactの場合はreact-google-mapsを使うと実装したすいです
  • 緯度経度はnavigator.geolocationで取得できます
  • iconのrotationにdeviceorientationイベントで取得した値を入れるとスマホの向いている方向にiconを回転できます
  • 使用にはAPIキーの取得が必要です

:pencil: GoogleMap Direction API

  • GoogleMapのルート案内を使用するために必要です
  • スタートとゴールの緯度経度を指定し、移動方法(徒歩、車など)を指定するだけで適切なルートを表示してくれます

:pencil: マシュマロ

  • 何かバグや改善点があった時にメッセージを受け取れるよう、「作者にメッセージを送る」をマシュマロで送るようにしてみました

:pencil: Stripe

  • 支払い(決済)を導入してみたかったので試しに使用
  • ただしReactには対応できていない部分もあり、Checkoutを使った実装がうまくできませんでした(できるはず)
  • そもそもクレジットカード情報を入力してもらうのが微妙なので、投げ銭やLINE Payなどで気軽に決済ができるようになってほしいですね・・・

:star: 追記

  • ホットペッパーAPIの仕様変更により料理カテゴリで検索ができなくなってしまいました・・・ スクリーンショット 2018-10-28 18.29.18.png
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away