Edited at

10日間で「勉強会で使いたくなるチャット」を作りました


お詫び

チャットサービスとして提供するのは届出が必要だとわかったので、全体公開を停止します。

あくまで個人利用としては続けていきますので、改善内容など技術的な情報はどっかでまとめて記事にします。

記事としては一応残しておきますが、WEBサービスのリンク先は削除しておきます。

(ドメインとの接続を切ったので、履歴から辿ってももう見れないヨ。)


はじめに

勉強会を何度か開催しているのですが、sli.doをはじめとしたQAチャットツールはすごく便利で重宝します。

ただ、個人的には、参加者がもっと関われるようなチャットツールが欲しい!


  • 管理者以外も返信したっていいじゃないか!

  • 「いいね」は1回だけじゃなくても良いじゃないか!

ということで作りました。

Meetupchat.net -全員参加型のMeetup向けチャット-

※ドメイン反映に時間がかかって公開が遅れたのは秘密

使い方


  1. channelを作ります。(channel名を入力して、「Create!」を押下)

    image.png


  2. 右下のボタンを押下して、コメントを打ち込めば、時系列で表示されます。

    image.png


あとは雰囲気でわかるでしょう。


コンセプト

管理者以外も返信できる!

最近Zoomでリモートアクセスしてもらいながら勉強会をするケースがあるんですが、なかなかコミュニケーションがとりずらい。

目の前のメンバーをつい優先しがち。

でも、このチャットなら、リモート参加者側もリアクションができる!

もう、リモート側が寂しい思いをしなくても良い!

エンドレス良いね!

一回だけじゃ、この思いは伝わらない!

ありったけの思いをこのクリックに込めるんだ!

匿名でアクセスができる!

上記ならSlackでもある程度実現できるますが、不特定多数が参加する可能性のある勉強会には向きません。

誰でも気軽に参加できる匿名アクセスがデフォルト!

(ログイン機能は後々作ります)


技術的な話

全体イメージ図

SystemImage.png

使った技術


  • Vue.js:初心者には難しかった気がしたけど、サービスまで作れた事実を考えれば難しく無いのか?

  • Firebase


    • hosting : 勝手にCDN配布までしてくれる!便利!

    • Firestore : こんな簡単にDB使えるなんて嬉しすぎる。

    • CloudFunctions : ほとんどサンプルそのままなので全く苦戦してない。



  • Google Cloud Plattform


    • Google App Engine : ほとんどサンプルそのままなので全く苦戦してない。



正直、Firebase触りたさで選んだ感じはある。

個々の技術に関しては、結構いろんな記事で触れられているので、この記事では割愛します。

細かく言えば、Vuexとか使ってる。

開発期間

12/7〜12/17の10日間!

しんどかった!

でも、すごいのは私じゃなくて、こんなに簡単にWEBサービスを実現させてくれる、Firebaseくん。

※12/7と12/14は有給休暇使って、これ作ってました。


開発を振り返って


締め切り駆動開発は効果がある

まぁ効果があるかどうかは人次第だとは思いますが、少なくとも自分には効果がありました。


知らない技術はなるべく小さいタスクにする

知ってるかL?

知らない技術は、アクションが億劫になる。とても億劫になる。

知らない技術に手を出しすぎた。正直、キツかった。

Firebaseも初めて触ったし、GCPもだし、vue.jsも知らん。

【解決策】

チケットをなるべく小さくしました。

具体的には、「Firebaseアカウントを作る」くらい小さくしました。

それくらい小さくしないと自分は動けんかった。


一番の売りポイントを明確にする

ログイン機能とか色々作りたいものが盛りだくさん。

でも、そんなに作ってたら間に合わない。

でも、12/17までに作るって、アドベントカレンダーで宣言したし間に合わせたい。

【解決策】

スクラム開発で言う所のPOの気持ちになって考えました。

これは価値があるのだろうか?と。

価値を明確にするために、ランディングページを序盤に作りました。

おかげで、このサービスのポイントはなんなのかが明確になりました。

他のサービスでもできることは、そこまで頑張るメリットは無い。

一番のコア機能をさっさと作って展開すべきだ!

って舵を切れたのが大きかった。


食生活と睡眠までは削らない

開発時間は足りて無いです。

途中から、会社のお昼休み時間も使ってました。

でも、ご飯はちゃんと食べたし、夜も11:00には布団に入るようにした。

健康的に開発しましょう!って感覚で実践できたのは良かった。


未だに解決できていないポイント →解決しました

2018/12/23追記: 解決しました。

スマホで「エンドレス良いね」がやりづらい

「エンドレスいいね」は実装できたけど、スマホからだと操作しづらい。

ダブルタップを「ページ拡大」と解釈されてしまうため・・・

これ、良い解決方法を誰か教えて・・・

やりたいのは「気持ちよく、エンドレスにイイねする」なので、連続タップ以外でも解決方法があれば嬉しい・・・

長押しでカウントアップされる仕様にしました。


さいごに

この後、いろんな機能を追加実装していく予定です。

もし要望あれば、問い合わせフォームから投げてもらえればありがたいです。

今考えている追加機能


  • チャットの生存期間が3日間にしてるけど、1週間とか、3ヶ月とかのオプションを儲けたい。

初めてwebサービスを個人開発してみたけど、すごく学びになった感ある。

これからも続けていく所存。


開発時に参考にした資料

サービスを作る前のインプットになった物

GCP関連

Netlifyに心移りしそうだった時に見た記事

vue.js

WEBサービス開発

書籍