概要
趣味で外向けに公開するようなWebサービスを作ったことがなかったので、一念発起して２ヶ月でinstagramの画像からランチを探せるサービスを作ってみた。
らんらんランチ www.lun-lun-lunch.com
なぜ作ったか？
ランチやディナーのお店を探すときに、instagramの画像を見ておいしそうなごはん屋さんはないかと探すことが時々あった。 しかし、食事の画像以外も紛れ込んだり、食事の画像が見つかっても、そのお店がどこにあるかだけ知りたいのに、投稿のコメントやハッシュタグからお店の名前を見つけ出してgoogleや食べログで検索する、という行為が面倒だった。 だったらいっそ、instagramの画像でごはん屋さんを探すためだけのサービスがあったらいいのでは？と思い立った。
あと、軽い感じで趣味開発したいな、と思ったのもあり、簡単にできそうだったので開発してみた。趣味なので、そこまで大げさな機能は作らずに検索もシンプルしフォーム１つだけにして、対象もランチに絞ることにした。
気軽さを全面に押し出してらんらんランチと名付けた。
システムのつくり
サービスが動いてる環境はGoogle Cloud Platformです。 Google様ありがとうございます。
構成は以下。
バックエンド
リクエストされたクエリをハッシュタグに持つinstagramの画像を取得して返すAPIサーバ。 いいねの数が多そうな画像を集めたり、適切な画像ではなさそうなキーワードをはじいたりしてる。
言語の理由は、Go言語で書いたことなかったし、Go言語で何か作ってみたいなーと思ってたので作った。ぶっちゃけバックエンドサーバなくても構成としては問題ない。
BFF
フロントからキーワードか位置情報をクエリで受け取って、Foursquare API, Hotpepper APIを叩いてお店一覧を取得する。 取得したお店一覧の店舗名をクエリにしてバックエンドにリクエストしてinstagramの画像を取得する。 それらの情報を結合してフロントにレスポンスを返す。
foursquare developers https://developer.foursquare.com/ https://developer.foursquare.com/
hotpepper api webservice.recruit.co.jp
フロントエンド
規模も小さいし、html5とes6（JavaScript）で問題ないだろうと判断して、react/vueなどのフレームワークを使うのはやめた。メンテナビリティが下がっても嫌だし、こだわるところじゃないかなと思った。
やってることは見てもらえばわかるように、検索してきた画像を出しているだけなので、そこまで難しいことはしていない。
作った感想としては、素のJavaScriptでも問題はなかったけどvue.jsの方が作りやすかったかもな、と思った。作ってるうちに思ったよりDOMをいじることになったので、強いjQuery的にvue.jsにしてもよかったかなと思った。
詰まったところ
元気だったらあとで個々に別のブログ記事にします。
まとめ
そんなこんなで趣味開発で、ランチ検索サービスを開発しました。クソサービスだけど、趣味なので許して欲しい。 こういうどうでもいい開発でも、2ヶ月毎日コツコツこういう風だったら便利かな、とか思いながらGitHubに草生やすの楽しかったので、趣味開発みんなしたらいいと思う、というポエムで締めくくる。
らんらんランチ www.lun-lun-lunch.com
