前提
弊社には、「美味しかったお店」「行きたいお店」があったら、情報を共有する口コミ素敵Slackチャンネルがあります。
コミュニケーション円滑化も含め、こういうゆるいチャンネルって仕事の癒し場になるので本当に大切だと日々思っています。
それに知り合いの口コミに勝るものってないですよね。
今までのこのチャンネルは、お店のURL(食べログ/ホットペッパー/Retty/ぐるなび)を共有すると情報がスプレッドシートに保管される、+ わいわいする というものでした。
(URLを貼るとアーニャ(GAS)がスプレッドシートにお店情報を保存するます)
ただしこのスプレッドシートだとどこにお店があるかが一目で分かりづらく、せっかく貯めた情報をうまく活用できずに改善の声が上がっていました。
何を作ったの?
そこで作ったものが、投稿されたお店情報をマップ上で一覧できるアプリ「Map'ngo🍺」です。
デモ動画をどうぞ。
情報が整理されて場所が一目でわかるようになりました📍
元のSlackメッセージへのリンク、Googleマップへのリンクも用意しているので、詳細が見やすくなりました!🎉
Map'ngo🍺 はUIを スプレッドシート → アプリ とガラッと変更することで、蓄積されていた口コミ情報を活かすことに焦点を当てたアプリです😎(適当)
どうやって作ったの?
簡易的な構成図はこちらです。
元からあったGASとスプシを活かすようなシングルページアプリケーション構成としています。
フロント資材はAWSのS3に置いてCloudFrontをかませる一般的なアレです。
Route53でドメインを紐付けてSSL化しています。ちゃんとお金を払ってます💰
APIがGAS、DBがスプレッドシートという構成になっていますが、なるべく開発コストとランニングコストを抑えようとした結果です。
今後の機能改善次第では Lambda と DynamoDB に置き換えたいという野望があります。
そのほか下記のようなAPIを内部で使っています。
マップ表示: Google Maps JavaScript API
住所から緯度経度への変換:国土地理院のAPI
やっぱり開発は楽しい
先日学生たちのハッカソンを近くで見た影響を受け、一人ハッカソンと称して夜通しでガガっと作りました。
かかった時間(おおよそ)
技術調査:1h
フロントアプリの作成:4h
GASの改修:3h
デプロイ:4h
初めて触る技術もありつつ、それらを組み合わせて頭の中にあるアイディアをどんどん形に落とし込んでいくというのは、エンジニアをやってる中での一番楽しい瞬間ですね。
最低限の機能を開発しただけなので、口コミのフィルタリング機能だったりバックエンドの刷新だったり育てていきたいな。
ちなみにアプリ名の「Map'ngo🍺」は、ただンゴを付けただけでしたが、相棒(ChatGPT)は「'ngo」に 「行く」 のダブルミーニングも見出してくれて大絶賛でした笑