きっかけ
ランチの店を決めるのがめんどくさいなーと思い、「人数と値段を選ぶだけで、サクッと飲食店を決められるアプリ」のプロトタイプを作ってみました🙆1000RT 達成したらこのアプリ作ります！🎉 pic.twitter.com/jHIp6sOsDE
— ren@グルメアプリ開発中 (@lotus_rs) 2018年5月12日
- というのを見て自分でも似たようなものを作ってみました
実際に作ったもの
Ottimo!!
近くの飲食店が簡単に探せるWebアプリを作ってみました！
— みかん三世 (@mikan_the_third) 2018年6月9日
ランチやWiFiのある店も簡単に探せて、地図で案内してくれます。
また、ホーム画面に追加するとアプリをインストールできます。https://t.co/fo3FJC8aat pic.twitter.com/bbBC6eYgaW
- スマホ向けのサービスです
- サーバーサイドはHerokuなのでsleepしていると最初の応答が遅いです・・・
特徴
- 近くの飲食店をwebから手軽に検索できる
- そのままwebでGoogleMapを使ったルート案内ができる
- 「ランチあり」「Wi-Fiあり」といったありがちな条件のON/OFFが簡単にできる
- 横スワイプで店を選べるので長々と縦スクロールしなくていい
- 他のURLに遷移せずにwebページで詳細を確認できる
- webなのでストアからアプリをダウンロードしたりアップデートしたりする必要がない
- PWA対応しているのでホーム画面に追加すると通常のスマホアプリのように動作する
- 「作者に牛丼をおごる」ボタンをつけてみた（元ネタ）
使ったもの
React
-
create-react-appコマンドで簡単にReactアプリを作ることができます - このコマンドで生成すると
registerServiceWorker.jsというファイルも作ってくれるので、これを使うだけで簡単にPWA化できます - あとは
manifest.jsonというファイルを作ってアイコンの設定をするくらいです
GitHub Pages
- フロントはGitHub Pages を使うことでサーバーレスでwebページを公開できました
- 無料かつデプロイもコマンド1つで簡単にできるのでオススメです
- Reactの場合のデプロイ方法
-
GitLab Pagesもあるっぽい
Onsen UI
- 「モバイルWebアプリを最高に美しく、スムーズに」という謳い文句の通り、ネイティブアプリっぽい動作を簡単に実装できるのでオススメです
- アイコン、ボタン、カルーセル、サイドバーなどのほぼ全てのパーツもOnsenUIを使用しています
- PageとNavigatorを使った独自のルーティングがあるので使う前に要確認
なぜかReactのリファレンスはあっさりしているので、詳しくは他のリファレンスを参考にした方が良さそう（小声）
ホットペッパー グルメサーチAPI
- 食べログはAPIの提供終了しており、ぐるなびは店舗の画像が取得できない場合があったため、ホットペッパーグルメのAPIを使わせていただきました
- APIの利用登録も簡単で、RateLimit(API使用回数の制限)も特になさそうでした
GoogleMap JavaScript API
- GoogleMapを表示させるために必要です
- reactの場合はreact-google-mapsを使うと実装したすいです
- 緯度経度は
navigator.geolocationで取得できます - iconのrotationに
deviceorientationイベントで取得した値を入れるとスマホの向いている方向にiconを回転できます - 使用にはAPIキーの取得が必要です
GoogleMap Direction API
- GoogleMapのルート案内を使用するために必要です
- スタートとゴールの緯度経度を指定し、移動方法（徒歩、車など）を指定するだけで適切なルートを表示してくれます
マシュマロ
- 何かバグや改善点があった時にメッセージを受け取れるよう、「作者にメッセージを送る」をマシュマロで送るようにしてみました
Stripe
- 支払い（決済）を導入してみたかったので試しに使用
- ただしReactには対応できていない部分もあり、Checkoutを使った実装がうまくできませんでした（できるはず）
- そもそもクレジットカード情報を入力してもらうのが微妙なので、投げ銭やLINE Payなどで気軽に決済ができるようになってほしいですね・・・
追記
- ホットペッパーAPIの仕様変更により料理カテゴリで検索ができなくなってしまいました・・・
