何についての記事か
タイトルの通りですが、今いる場所から近いドライブスルーを検索するWEBアプリを作りました。作成する上での技術の選定について(主にお金をかけずにリリースするための話)と、作成するに至った動機について記事にします。
何を作ったか
こういうWEBアプリを作りました。
できることは、「今いる場所から近いドライブスルーがあるお店を検索できる」アプリです。
※アプリの性質上スマホからの操作を前提としています。PCからでも使えるっちゃ使えます。
技術スタック
- デプロイ先
- vercel
- フロントエンド
- Next.js
- tailwindcss
- Googleマップ（google Maps JavaScript API）
- バックエンド
- Next.jsのAPI Routesを使用 - データ収集
- WEBクローラ作成(selenium・ruby)
- 住所から緯度経度に変換（google Geocoding API）
どうして作ろうと思ったか
技術スタックの説明をする前に、このアプリを作ろうと思った動機です。
旅行でも何でも良いんですが、車で出かけている時にドライブスルーに行きたいなって思うこと、あるじゃないですか。私の場合不意に「小腹空いたな」とか「喉乾いたな」ということが頭をよぎったが最後、今すぐにドライブスルーに入らないと気が済みません。笑
これがコンビニで何か買うとかだったらコンビニに入ればそれで事足りるんですが、スタバ飲みたいとか、マック食べたいとかの場合はそこに行くしか無いわけです。で、そうなった時に近場のドライブスルーがある店舗はどこにあるんだとなるわけですが、これがなかなか検索できないんです。
「Googleマップとかで調べれば出てくるでしょ」と私も最初はそう思って「スタバ ドライブスルー」とかで検索したんですが、ドライブスルーが無い店舗も検索結果に出てきてしまって、結局一店舗ずつ写真を見て判断しないと分からないんですよね。（これ共感してくれる方いるのかなぁ）
意外と、「近くの」ドライブスルーをサクッと検索できるようなサイトも無かったので、無いなら作るかということで作りました。
テイクアウトで良いじゃんとか言わないでくださいね笑
ドライブスルーがしたいんだよぅ！
アプリ作成にあたっての方針
使用した技術、フレームワークについてはご覧の通りで、特に変わったことはしていません。詳しい説明はそれぞれキーワードで検索すれば素晴らしい記事がたくさん出てくると思うので、今回の記事ではどうしてこの技術スタックになったのかについてフォーカスを当てたいと思います。
今回のアプリを作る前に決めたポイントについて説明していきます。
お金をかけない
これは趣味の範疇なのでできるだけお金をかけたく無かったのと、機能もそんなに複雑なことをしない（店舗のデータ取得して画面に出すだけ）ので、ほぼ０円で行けるだろうと考えていました。実際にかかった費用で言うとドメイン代のみでした。主にgoogleという神とvercelという仏様方のおかげなのですが、、、本当にこの内容が無料でできるのは感謝ですね。詳しくどう実現したかはお声があれば書こうと思います。
DBの記載がないですが、スクレイピングしたデータをJSONファイルにしてapiが読み取っているだけなのでDB無しです。店舗のデータもそんなに頻繁にスクレイピングしなくて良いかなと思っているのでたまに自分のPCで回せば良いかなくらいで、特にサーバーを用意したりもしていません。
シンプルな操作
多機能にすると画面がゴチャついてUX上よろしくないので、できるだけシンプルを心がけました。ユースケースとしては「近くのドライブスルーを探す」なので、それ以外の機能は持たせないようにしました。
また、検索結果が近い順に表示されるので一目で近い店舗が分かるのは何気に良いポイントだと思います。
店舗の詳細データや道順といった情報は無理にアプリ内で表示せず、公式ページやGoogleマップ様に投げることでシンプルを保っています。
最後に
私と同じ悩みを持った方がどれくらいいるか分かりませんが、もしいらっしゃればぜひ一度使ってみて下さい。
何気にアプリをリリースするのは初めてなので、ご意見があればじゃんじゃん下さい！
それでは、良いドライブスルーライフを！笑