株式会社ユーザベースの技術チームブログです。メソッドプレゼンを全社会議に取り入れてみたら会議が面白くなった2015-06-01ニコニコメソッドプレゼンを全社会議に取り入れてみたら会議が面白くなったTweet技術チーム竹内(@chimerast)です。作ったものが知らない間に記事のネタにされていたので、どんな仕組みで動いているか技術的なところについて書いてみます。使われているかの細かい話は、後日ブログ内に別の記事が上がる予定です。追記:「みんなの会」の動画配信システムについて記事を投稿しました。tech.uzabase.com全社会議で「ニコニコメソッドプレゼン」だいぶ昔にWeb業界界隈で話題になった(?)ニコニコメソッドプレゼンを、週一の全社会議で取り入れたところ、プレゼンのエンタメ性が増して以前よりだいぶ面白いものになりました。プレゼンを聞く側の一体感がでて面白くなったのに加え、プレゼンする側としても、今まで聞いてるんだか聞いていないんだかよくわからない状態だったのが、反応が目に見えるようになってやりやすくなりました。メソッドプレゼンとは、視聴者がスマホ等でコメントを入力して、そのコメントがニコニコ動画のようにプレゼン資料の上に流れる、視聴者参加型のプレゼンです。発言しようにも人数が多くなって発言しづらい雰囲気ができあがってしまっている海外拠点等のリモートからの参加時に、発言がしづらかったり、会議の盛り上がり具合が伝わりにくいという声があがり、その解決策として、ニコニコ動画みたいに横から匿名の突っ込みを入れるようにできたら発言の機会が増えるんじゃないかという意見が出たことによるものです。視聴者参加型プレゼンツールを作ってみたいなと思っていたこともあり、一晩夜なべして作りました。Slidesを使用して発表を行っています。Slidesをそのまま使うことにして、Chrome機能拡張でその上にコメントを重ねるようなものを作りました。コメントをするだけでは面白くないので、いいねボタンをつけて、押すと親指の画像が浮き上がって消えるような機能や、それを応用して任意の画像を送り込むような機能もつけてます。プログラムはGitHub上でひっそり公開しています。一般向けに機能拡張およびサーバを公開することも考えたのですが、チャンネル機能を作るモチベーションがわかないのと、セキュリティの事を考えると使う人ごとにサーバ立ててもらった方が良い気がするので、そのままにしています。Requestを送っていただけるとうれしいです。ExpressSocket.IOブラウザで双方向の何かをつくる場合は鉄板の選択ですね。Chrome機能拡張側でSocket.IOのサーバへの接続を行い、サーバ側からの通知を待って、コメントやイメージ表示の通知があったらそれを表示するという事をやっています。Chrome機能拡張Chromeには、表示される全てのページへJavaScriptを挿入するような機能拡張を作るための拡張ポイントが用意されているのでそれを使いました。Chromeこれに加えて、ツールバーにボタンを置いて、コメント表示のON/OFFを切り替えられるようにしていたりします。APIあまり有名ではない機能だと思いますが、HTML5標準のアニメーションAPIです。jQuery.animate()と同じようなものだと思って良いと思います。ブラウザネイティブなので、動作が軽かったりリソース消費が少なかったりするみたいです。ドラフトなのでサポートしていないブラウザも多いです。依存ライブラリを増やしたくなかったのと、どんなもんなのか使ってみたかったのでアニメーションAPIとして採用しました。Expressこったことはせず、普通のAPIサーバとしての使い方をしています。Expressで待ち受けているURLにPOSTが送信されると、Socket.IOを呼び出して、Chrome機能拡張側に通知を行います。まとめ視聴者参加型のプレゼンは盛り上がります。プレゼンする側も面白いプレゼンを作ろうという気になります。プログラムの総行数はクライアントサーバ合わせて200行ぐらいです。ありものの機能を使うとさくさくっと作れます。宣伝ユーザベースでは、2015年6月14日(日)に、E2D3プロジェクトと一緒にハッカソンを行います。スマホでのデータビジュアライズ方法が、世の中で試行錯誤されている中、みんなで考えてみようというハッカソンです。e2d3.connpass.comネタ的に面白いと思うので是非ご参加ください。E2D3プロジェクトについてはまた別で記事を書こうと思います。多国通貨」をハンズオンしたら快適で楽しかった今日は。SPEEDAの開発をやっている濱口です。Team)です...2018-04-03はじめてのDuctSPEEDA開発の中村です。#2...2016-03-17Slackを全社導入したので、社内向け利用マニュアルを公開してみたはじめまして。Cultureチームの木村です。的な何かを作ってみた技術チームの竹内(@chimerast)です。»プロフィール『経済情報で、世界を変える』をミッションに、企業・業界情報プラットフォーム「SPEEDA」やソーシャル経済ニュース「NewsPicks」、ABMを強力にサポートする「FORCAS」、スタートアップの情報収集を圧倒的効率化「entrepedia」などを提供する株式会社ユーザベースの技術チームブログです。多国通貨」をハンズオンしたら快適で楽しかったGo言語でオブジェクト指向プログラミングの基本(型編)月別アーカイブ検索@Uzabase_Techさんのツイートスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。