技術チーム竹内([twitter:@chimerast])です。
作ったものが知らない間に記事のネタにされていたので、どんな仕組みで動いているか技術的なところについて書いてみます。どう使われているかの細かい話は、後日ブログ内に別の記事が上がる予定です。
（6/2 追記：「みんなの会」の動画配信システムについて記事を投稿しました。） tech.uzabase.com
全社会議で「ニコニコメソッドプレゼン」
だいぶ昔にWeb業界界隈で話題になった(?)ニコニコメソッドプレゼンを、週一の全社会議で取り入れたところ、プレゼンのエンタメ性が増して以前よりだいぶ面白いものになりました。プレゼンを聞く側の一体感がでて面白くなったのに加え、プレゼンする側としても、今まで聞いてるんだか聞いていないんだかよくわからない状態だったのが、反応が目に見えるようになってやりやすくなりました。
ニコニコメソッドプレゼンとは、視聴者がスマホ等でコメントを入力して、そのコメントがニコニコ動画のようにプレゼン資料の上に流れる、視聴者参加型のプレゼンです。
やるとこんな感じになります(全社会議内でやっている社員の自己紹介タイム)↓
ニコニコメソッドを取り入れることになったきっかけは、全社会議への参加者のコミットメントをどうやったら上げることが出来るかどうかみたいな事を話し合った際に、
- 発言しようにも人数が多くなって発言しづらい雰囲気ができあがってしまっている
- 海外拠点等のリモートからの参加時に、発言がしづらかったり、会議の盛り上がり具合が伝わりにくい
という声があがり、その解決策として、
- ニコニコ動画みたいに横から匿名の突っ込みを入れるようにできたら発言の機会が増えるんじゃないか
という意見が出たことによるものです。
ちょうど、視聴者参加型プレゼンツールを作ってみたいなと思っていたこともあり、一晩夜なべして作りました。
作ったもの: Chrome機能拡張「NicoNico SPEENYA」
(Chromeウェブストアでの公開はしてません)
全社会議では、色んなチームが進捗報告することもあり、全員で一つのプレゼン資料を編集出来るGoogle Slidesを使用して発表を行っています。
プレゼンのためのほかのツールを使ったり作ったりすることは、移行コストや作成コストの面で考えられなかったので、Google Slidesをそのまま使うことにして、Chrome機能拡張でその上にコメントを重ねるようなものを作りました。
コメントをするだけでは面白くないので、いいねボタンをつけて、押すと親指の画像が浮き上がって消えるような機能や、それを応用して任意の画像を送り込むような機能もつけてます。
プログラムはGitHub上でひっそり公開しています。一般向けに機能拡張およびサーバを公開することも考えたのですが、チャンネル機能を作るモチベーションがわかないのと、セキュリティの事を考えると使う人ごとにサーバ立ててもらった方が良い気がするので、そのままにしています。
Forkして拡張していただいたり、面白い機能をつけてPull Requestを送っていただけるとうれしいです。
GitHub - chimerast/niconico-speenya: Google Chromeでニコニコするやつ
作るのに使ったもの
Socket.IO
ブラウザで双方向の何かをつくる場合は鉄板の選択ですね。
Chrome機能拡張側でSocket.IOのサーバへの接続を行い、サーバ側からの通知を待って、コメントやイメージ表示の通知があったらそれを表示するという事をやっています。
Google Chrome機能拡張
Chromeには、表示される全てのページへJavaScriptを挿入するような機能拡張を作るための拡張ポイントが用意されているのでそれを使いました。
Chrome Extensions content scripts - Chrome Developers
これに加えて、ツールバーにボタンを置いて、コメント表示のON/OFFを切り替えられるようにしていたりします。
Web Animations API
あまり有名ではない機能だと思いますが、HTML5標準のアニメーションAPIです。jQuery.animate()と同じようなものだと思って良いと思います。
ブラウザネイティブなので、動作が軽かったりリソース消費が少なかったりするみたいです。ただし、まだドラフトなのでサポートしていないブラウザも多いです。
あまり依存ライブラリを増やしたくなかったのと、どんなもんなのか使ってみたかったのでアニメーションAPIとして採用しました。
Node.js + Express
こったことはせず、普通のAPIサーバとしての使い方をしています。Expressで待ち受けているURLにPOSTが送信されると、Socket.IOを呼び出して、Chrome機能拡張側に通知を行います。
まとめ
視聴者参加型のプレゼンは盛り上がります。また、プレゼンする側も面白いプレゼンを作ろうという気になります。
プログラムの総行数はクライアントサーバ合わせて200行ぐらいです。ありものの機能を使うとさくさくっと作れます。
宣伝
ユーザベースでは、2015年6月14日(日)に、E2D3プロジェクトと一緒にハッカソンを行います。
スマホでのデータビジュアライズ方法が、世の中で試行錯誤されている中、みんなで考えてみようというハッカソンです。
ネタ的に面白いと思うので是非ご参加ください。
E2D3プロジェクトについてはまた別で記事を書こうと思います。
