はじめに
個人開発で初めてサービス作成をしました。サービス開発的な点や技術的な点、UX的な点で助言をいただきたいです。
サービス概要
匿名で待ち合わせ相手と、位置情報の共有、チャット、音声通話を行い、スムーズな待ち合わせを行えるような仕組みを用意しています。
サービス名: アノMeet
URL: https://anomeet-admin.web.app/
利用シーン
- オフ会での待ち合わせ
- 婚活での待ち合わせ
対応課題
初めて会う人との待ち合わせで、以下のような経験をしたことがありませんか。
- 顔がわからないから、別の人に声をかけてしまった
- (相手もしくは自分が)待ち合わせ場所を間違えてしまった or 勘違いしてしまった
- 待ち合わせるときの細かいコミュニケーションがうまくいかなかった
事前に電話番号やLINE IDなどの交換をしていれば解消するかもしれませんが、そこまでの仲で無い人とも待ち合わせることもあります。
そこで匿名での待ち合わせのためのサービスを作りました。
使い方
匿名ログインとメールアドレスなどを使ったログインを用意しています。
待ち合わせ登録
待ち合わせの名称と待ち合わせ時間を入力し、待ち合わせ場所を地図から選びます。
匿名なのでURLを知っていれば誰でもはいれるようになっていますが、パスコードを知っている人のみに限るということもできます。
待ち合わせページの共有
登録した待ち合わせを表示すると、待ち合わせメンバーで共有するようのページができます。これを待ち合わせメンバーに連携します。
待ち合わせページ入室
各待ち合わせメンバーが待ち合わせページを開き、自分の名前(ニックネーム)を指定し入室します。
待ち合わせページの利用
待ち合わせのために、チャット、音声通話、位置情報共有を行いスムーズな待ち合わせを目指します。
音声通話受信時
利用技術
- デプロイ先: Firebase
- Firebase Realtime Database
- Firebase Authentification
- Firebase Hosting
- Firebase Functions
- 使用言語/フレームワーク
- 画面側: Vue.js(Nuxt SSR)
- サーバ側: JavaScript(Firebase Functions)
- その他
- 地図: mapbox
- 音声通話: SkyWay
- 通知: Push.js
- CI/CD: circleci
- e2eテスト: cypress
苦労したところ/工夫したところ
- AWSにするかGCPにするか悩んだのですが、管理をシンプルにしたいなと思い、地図サービスにGoogle Mapを使うからFirebaseにしました。Google Mapを使って作ったところ、API呼び出しが思ったよりも多く、無料枠等を考え、mapboxに移行しました。AWSで作ってもよかったなと思っています。
- サービス設計を気を付けました。
- 匿名で安全なサービスにしたいと思い、操作者の自宅がわからないように位置情報共有に場所の制約や時間の制約を設けたり、音声通話が苦手な人のために音声通話を許可しないと実施できないようにしました。
- 簡単に利用できるように、もろもろ初期値を用意しているので、クリックだけで簡単に使えるようにしました。
- 音声通話受信時に、Web Notificationで通知したり、通話のUIをCSSで電話っぽくなるようにしました。
終わりに
個人開発ではありますが、どのようなサービスが良いのかということを考えながら仕様を検討していきました。仕様検討しつつ実装しつつを好きにできるので個人開発を楽しめました。
あとは、少しでも使ってくれる人がいて、感想などいただければありがたいです。
個人開発ですが、CI/CDやe2eテストは実プロジェクトでは他の人にお願いすることが多く、自身でやることは今まで少なかったのですが、自身で設計・実装する機会ができ、学習する良い機会になりました。
新型コロナウイルス蔓延による非常事態宣言で外出自粛などしている状況ではありますが、徐々に新規感染者が減っていっていると思います。非常事態宣言が解除され、リアルで会う際に使われていってくれると幸いです。