cometsを支える技術 ~ Crieit 個人開発サービスに用いられている技術アドベントカレンダー ~

こんにちは！渡邊です！

この記事はCrieitでの 個人開発サービスに用いられている技術 Advent Calendar 2018 の１３日目の記事です。

今回はcometsというWebサービスについて書きます。

cometsとは

https://comets.nabettu.com

発表スライド上にコメントが流せるWebサービスです。

Google Slideなどでブラウザを利用して発表しているスライドの上に、視聴者からのコメントをリアルタイムに流せるサービスとなっております。

こないだのjs祭りで使われた様子はこちら↓

ニコニコ見てるみたいｗ #jsfes pic.twitter.com/QmnkXfnvue

— 黒神 (@kokushing) November 17, 2018

（こくしんよく撮れてる動画ありがとう！）

これを使うとどうなる

普通のスライド発表って発表者の言いたいことを言って終わりになりがちですが、これを使うと一方通行にならずにインタラクティブな発表が出来ます。「リアクション」だったり「質問」などをそのタイミングで見ている人が投げる事ができるのです。

終わった後に「質問ある人〜？」などで聞いてもシャイな人はなかなか手を挙げられないと思います。そこで、cometsがあれば匿名で意見を送る事ができます。

また、QRコード生成機能があるので、cometsの画面で作ったQRコードをスライドに貼っておくとスムーズに共有出来ます。

アンケートを集計するのにも使えます

cometsにはボタンを押すだけで簡単に定形のコメントを送れます。そのボタンの中に🍎や🍌などの果物ボタンが５つあります。 これを使うと、スライドに質問を書いておいて会場の視聴者にそのままアンケートをとれます。

例）発表スライドは何でつくってる？

• 🍎Keynote
• 🍊PowerPoint
• 🍌Google Slide
• 🍇Slides
• 🍈Prezi
• その他（コメントで）

のようなスライドを作っておいて当日にアンケートを取れます。

アンケートによって話す内容を変えると非常にいい発表が出来ると思います。（「Netlifyについて知らない人が多いみたいだから詳しく話そう」とかとか）

ぜひ取り入れてみてください！

どうやって作ってるの？ 発表者編

発表者がGoogle Slideを起動している画面で、指定のブックマークレットを実行します。Chromeエクステンションではないので、どんなブラウザでも基本的に機能します。

実行すると視聴者と共有する合言葉を入れる欄が出てくるので、合言葉を入力してコメントを受け取ります。

裏側ではFirebaseのRealtime Databeseを利用して、視聴者がDBに追加したデータを検知して、同じ合言葉のテキストを画面に追加します。

画面に追加されたテキストはCSSアニメーションで右から左に流れていきます。

どうやって作ってるの？ 視聴者編

コメント画面はNetlifyでホスティングされた静的Webサイトで、画面を開くとFirebaseに匿名ログインして、コメント書いて送信ボタンを押すとFirebaseのRealtime DBに書き込みます。

開くURLには合言葉をパラメータでセットできるので、そのままURLをシェアも出来ます。

Twitterにそのままつぶやくチェックをオンにしておくと、コメントを送ってそのままTwitterの投稿画面に遷移出来るようになっています。その際合言葉はハッシュタグになるので、イベント指定のハッシュタグがある場合にはそれを合言葉としておくといいでしょう。

FirebaseのDBにはFirestoreという上位互換的なものもあるんですが、リアルタイムなデータのやり取りに関してはRealtime DBをFunctionsなどを挟まずに利用するのが早いです。

今後の展望

• 合言葉が日本語のときにQRコードがバグる
• Twitterでハッシュタグのツイートがあったらそのままcometsと同じように流す機能
• electronでローカルのスライドツールでもコメントを流せるようにする機能
• サイトがBootstrapバリバリなのでモダンなデザインにする

などを、時間あるときにやろうと思っています。

ぜひ皆さんcometsを使って、インタラクティブな発表をやってみてください！

明日はあのnaichiさんが unityroomを支える技術について話してくれます！明日もまた見てくれよな！