26
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

社内で使える居酒屋共有アプリを作ったンゴ 【Map'ngo🍺】

Last updated at Posted at 2024-11-11

前提

弊社には、「美味しかったお店」「行きたいお店」があったら、情報を共有する口コミ素敵Slackチャンネルがあります。
コミュニケーション円滑化も含め、こういうゆるいチャンネルって仕事の癒し場になるので本当に大切だと日々思っています。
それに知り合いの口コミに勝るものってないですよね。

今までのこのチャンネルは、お店のURL(食べログ/ホットペッパー/Retty/ぐるなび)を共有すると情報がスプレッドシートに保管される、+ わいわいする というものでした。

Image from Gyazo
(URLを貼るとアーニャ(GAS)がスプレッドシートにお店情報を保存するます)

Image from Gyazo

下記の流れです。
Image from Gyazo

ただしこのスプレッドシートだとどこにお店があるかが一目で分かりづらく、せっかく貯めた情報をうまく活用できずに改善の声が上がっていました。

何を作ったの?

そこで作ったものが、投稿されたお店情報をマップ上で一覧できるアプリ「Map'ngo🍺」です。
デモ動画をどうぞ。

90d501dc2fd57cdaa08bb3a89336f708.gif

Image from Gyazo

情報が整理されて場所が一目でわかるようになりました📍
元のSlackメッセージへのリンク、Googleマップへのリンクも用意しているので、詳細が見やすくなりました!🎉

Map'ngo🍺 はUIを スプレッドシート → アプリ とガラッと変更することで、蓄積されていた口コミ情報を活かすことに焦点を当てたアプリです😎(適当)

どうやって作ったの?

簡易的な構成図はこちらです。

Image from Gyazo

元からあった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」に 「行く」 のダブルミーニングも見出してくれて大絶賛でした笑

Image from Gyazo

26
22
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
26
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?