見出し画像

ロケーションベースのチャットアプリをさくっと作る

使うもの

・what3words
・Firebase
・Google Maps Javascript API
・Ionic
・Figma

0. アイデアを考える

what3wordsが1,2年ほど前から話題になっていて、何かで使ってみたいなーと思ってました。

そこで、ロケーションベースのチャットアプリあったら面白いかも!と思い、調べてみると。

けっこうありそう。まあ、おもしろそうだしいいか!と軽いノリで作ってみることにしました。

ただ、what3wordsを使ったチャットアプリはなさそう(?)だったので、他製品を踏まえて課題を上げるとしたら、

課題

・位置情報をベースにすると、Google Mapsのような店舗や建物などの予め指定されたオブジェクトに対してしかコメントができない
・または緯度と経度に基づいているため、非常に細かい領域のため共有しづらい
・Google Mapsなどのコメント機能ではチャットのようなリアルタイムなコミュニケーションが難しい
・従来のチャットアプリでは、IDの登録など一時的なコミュニケーションが取りづらい

Solution

・what3wordsを使った3メートル四方に区切った中でのコミュニケーションを提供
・3つの単語を伝えるだけで場所に基づいたコミュニケーションを共有できる
・位置情報の制約をかけることで、ID交換などが不要なその場限りのコミュニケーションを実現する

ユースケース

・動物園や水族館、美術館などで、動物の前でコメントしたり、特定の何かに対して場所を指定してコメントする
・ライブやイベントなどで、その場にいる人とコミュニケーションをする
・観光地や名所で、その場所に対してコメントする

プロトタイプアプリを作るまで

1. Figmaでイメージをカタチにする

まずは、頭の中にイメージしていたアプリのUIデザインをします。

Figmaを使って頭の中にあったイメージをデザインに起こすことで、アプリに必要なページと、機能を洗い出せます。
これをせずに開発し始めると、細かいデザインにこだわってしまったり、機能があとづけになって、再利用性が低くなったり、いろいろとめんどうです。

2. IonicでiOSアプリの土台を作る

モバイルアプリをさくっと作るにはいくつかのフレームワークを使うと便利です。
最近はionicにハマっているのでこれを使います。

先程のFigmaもそうですが、どのツールを使うかは宗教論争的な部分なので特に意識が高いエンジニアでなければ好きなものを使います。

さくっといつもの作り方の流れを書くと、

1. ページを追加
2. プラグインを追加
3. HTMLを書く
4. Typescriptを書く
5. CSSで整える

みたいな感じでいつも書いてます。ここでも最初にFigmaに起こしておくと、1と2がスムーズな気がします。
今回は、①地図のページと②チャットのページの2ページと、
Google MapsとFirebaseが使えるようにプラグインやら入れました。
(正直、ionicのプラグインまわりは互換性も含めて苦手です)

3. Google Maps を埋め込む

結局、Google Maps Javascript APIを使いました。

埋め込みました。

4. what3words APIを使う

さっそく、Google Mapsで位置情報を取得できたら、それを使ってWhat3wordsに使ってみます。

使い方はすごく簡単で、APIキーと緯度経度をいれたURLにリクエストするだけです。

https://api.what3words.com/v2/reverse?coords=51.521251%2C-0.203586&key=MY-API-KEY

弊社オフィスあたりは、「ごうりゅう・しんごうき・あおぞら」でした。
丸の内のオフィスをよく表しているなーと思いました。

5. Firebaseを用意する

Firebaseは非常に簡単にリアルタイムのデータベースを用意できて好きです。データ構造はシンプルに、

部屋とユーザとメッセージの3つを管理することにしました。深い階層構造にしてはいけないらしいけど、とりあえず、

・部屋 は位置情報とwhat3wordsの単語をもつ
-> what3wordsの単語は変わるらしいので位置情報だけでいいかも
・部屋ごとにメッセージが付与される
・ユーザーは今は匿名なのでデバイスUUIDをとって、メッセージに紐付ける

ようにしました。

6. Typescriptを頑張る

ここはがんばります。今までのようにQiitaを調べてコピペするだけではできません。
でも、とてもシンプルなので、500行ほど書くだけでできました。

7. UIを整える

最後に、見た目を人様に見せてもよいように最低限整えます。そして、個人開発はただの趣味なので、こだわりたいデザインだけこだわります。

思い描いていたデザインを動きに起こすのはとてもむずかしいので、デザインツールでパワポさながら、マウス操作だけで開発をした気になるのはやめて、コードを書いてみると面白いです。

8. 完成

というわけで、さくっと数時間で頭に浮かんだアイデアをプロトタイプアプリに落とすまでの流れでした!

この記事が気に入ったらサポートをしてみませんか?