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

# お詫び
チャットサービスとして提供するのは届出が必要だとわかったので、全体公開を停止します。
あくまで個人利用としては続けていきますので、改善内容など技術的な情報はどっかでまとめて記事にします。

記事としては一応残しておきますが、WEBサービスのリンク先は削除しておきます。
（ドメインとの接続を切ったので、履歴から辿ってももう見れないヨ。）

# はじめに
[勉強会を何度か開催している](https://qiita.com/nh321/items/f7e20c7ba737ff5c0f60)のですが、sli.doをはじめとしたQAチャットツールはすごく便利で重宝します。
ただ、個人的には、参加者がもっと関われるようなチャットツールが欲しい！

- 管理者以外も返信したっていいじゃないか！
- 「いいね」は1回だけじゃなくても良いじゃないか！

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

~~Meetupchat.net -全員参加型のMeetup向けチャット-~~
※ドメイン反映に時間がかかって公開が遅れたのは秘密

**使い方**

1. channelを作ります。（channel名を入力して、「Create!」を押下）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214587/f3d02457-2cf2-8050-4ebe-b40047b8180f.png)

2. 右下のボタンを押下して、コメントを打ち込めば、時系列で表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214587/42a0fc94-3418-2ace-9345-38a1fe993805.png)

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

# コンセプト

**管理者以外も返信できる！**

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

でも、このチャットなら、リモート参加者側もリアクションができる！
もう、リモート側が寂しい思いをしなくても良い！

**エンドレス良いね！**

一回だけじゃ、この思いは伝わらない！
ありったけの思いをこのクリックに込めるんだ！

**匿名でアクセスができる！**

上記ならSlackでもある程度実現できるますが、不特定多数が参加する可能性のある勉強会には向きません。
誰でも気軽に参加できる匿名アクセスがデフォルト！
（ログイン機能は後々作ります）

# 技術的な話

**全体イメージ図**
![SystemImage.png](https://qiita-image-store.s3.amazonaws.com/0/214587/084f7222-3052-a95b-28a2-26275b2fc1fb.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サービスを個人開発してみたけど、すごく学びになった感ある。
これからも続けていく所存。

# 開発時に参考にした資料

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

- [【クラウドVPS/PaaS/FaaS比較】最低料金とサービスレベルの比較](https://qiita.com/nh321/items/cc66bf0be8b1a305d229)
- [【クラウドDB比較】無料枠で提供されるサービスレベル](https://qiita.com/nh321/items/e8c63b02e3fa9c28837f)

**GCP関連**

- [Google Domainsで独自ドメインを購入してみる](https://www.apps-gcp.com/google-domains-unique-domain-buy/)：GoogleDomains使いました。本人確認がまじで一瞬。
- [.appドメインはFirebase hostingとの相性が抜群](https://qiita.com/fromkk/items/c2361747733125ca36d0)：ドメイン接続の方法が開設されている。公式の説明がさっぱりだったので、とても助かった。
- [【2018年版】利用前に知って欲しいFirebase Hostingにできること・できないこと](https://qiita.com/kgsi/items/66e1d41c4d6346733a59)：FirebaseHosting単独では、静的ホスティングしかできねぇってことをここで知りました。
- [静的サイトホスティングの為のGCS/GAE/Firebase Hosting比較](https://medium.com/google-cloud-jp/%E9%9D%99%E7%9A%84%E3%82%B5%E3%82%A4%E3%83%88%E3%83%9B%E3%82%B9%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AE%E7%82%BA%E3%81%AEgcs-gae-firebase-hosting%E6%AF%94%E8%BC%83-e7d406609f2e)：これをみてFirebaseHostingに決めました。
- [Cloud Functions for Firebase でジョブをスケジューリング（cron）する](https://developers-jp.googleblog.com/2017/04/how-to-schedule-cron-jobs-with-cloud.html):Cronジョブ化はこれを参考にしましたが、思ってたよりは簡単にできた。（3時間くらいでできた）

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

- [【Netlify】Netlify / GithubPages / Heroku の速度比較](https://qiita.com/NaokiIshimura/items/0b6c4ff5da437081866b)：Netlifyってか、CDNの効果を思い知った。
- [HTTPSの静的コンテンツをホストするならs3よりNetlifyが俺の求めていたものだった](https://qiita.com/shogomuranushi/items/6ab5bc29923b3f82c9ed)：最終的にはFirebaseHostingかGAE@GCPで悩み、結局楽そうなFirebaseHostingに行きました。（CDNとかデフォルトで付いてくるので楽）

**vue.js**

- [公式ドキュメント](https://jp.vuejs.org/index.html)：まじで日本語化すごい。
- [Nuxt.jsいらない説](https://uyamazak.hatenablog.com/entry/2018/08/15/124952)：脳死でnuxt.jsにしようと思ってたけど、vue.jsのかっこよさに触れてみたくなったので、vue.jsを選択

**WEBサービス開発**

- [2016年 独りで新規WEBサービスを開発・運用した際の知見](https://qiita.com/haminiku/items/711cbdb894d1d6839e3e)：

**書籍**

- [体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性が生まれる原理と対策の実践](https://www.amazon.co.jp/gp/product/4797361190)：必読っすわ。
- [良いウェブサービスを支える「利用規約」の作り方](https://www.amazon.co.jp/dp/4774155942)：必読っすわ。