ロフトワークの今を伝えるブログメディア

社内プレゼン大会にニコニコメソッドを取り入れてみた話

どこからともなく「もっとマニア魂を全面に打ち出してほしい!」と言われたので、そこそこマニアっぽい話を捻り出してみました。

ロフトワークの月に一度の社内プレゼン大会「Creative Meeting
昨年度 半年程、Creative Meetingを企画するメンバーに入っていました。

「失敗から学び」「ナレッジを共有」するロフトワークのCreative Meeting、開催
http://www.loftwork.jp/column/2016/20160815_creativemeeting.aspx

2016年の春にリデザインされて、テーマが設定されたり演出も凝ったものになり、参加者にとって、すごく楽しいものになりました。

ロフトワークが社内イベントをリデザイン! “Creative Meeting”4月のプレゼンを紹介します
http://www.loftwork.jp/prblog/2016/20160408_blog73.aspx

しかし、テーマが設定されてしまうと、話したい内容がテーマと異なると話せない。
そんな思いを個人的に抱えていたので、企画の順番が回ってきたら下記を満たそうと考えていました。

 

  • 登壇者はどんなテーマであっても登壇できる
  • プレゼンツールの制約をかけない(PDFファイルのみとか無理)
  • 参加者にリデザインされる以前よりもプレゼンに集中させる
  • 参加者が気軽に登壇者にフィードバックできる
  • 質疑応答の時間は設けない
  • コストはかけない(社内の設備と社内の人的リソースのみ活用)
  • 難しいことはしない(初歩的なプログラミングスキルしかないから元々できない)

 

これらの条件を満たすことで、リデザインされる前の形式でも問題が解消できることを証明しようとした訳です。

 

結論、なにをしたのか。

まず、「ニコニコメソッド」を採用。

ニコニコメソッドプレゼンを全社会議に取り入れてみたら会議が面白くなった
http://tech.uzabase.com/entry/2015/06/01/143202

そこから「NicoNico SPEENYA」というChrome機能拡張をちょっとだけカスタマイズ。

Chrome機能拡張「NicoNico SPEENYA」
https://github.com/chimerast/niconico-speenya

そして、透明ブラウザ化した「Electron」にコメントが流れるようにしました。

Build cross platform desktop apps with JavaScript, HTML, and CSS
https://electron.atom.io/

 

 

いろいろ組み合わせて、参加者がリアルタイムにフィードバックできるプレゼンテーションの仕組みが完成。

NicoNico SPEENYAをそのまま使わなかったのは「プレゼンツールの制約をかけない」条件を満たせなかったからです。他にニコニコ生放送などの利用も検討したのですが、数秒の遅延でも「気軽にフィードバックできる」条件に影響したので、リアルタイムにフィードバックできるようにこだわりました。

 

「Creative Meeting」にニコニコメソッドを取り入れたら、どうなったのか。
まず、普段黙ってプレゼンを聞いている参加者の心の声がダダ漏れになりました。
プレゼンに対するツッコミやリアクションはもちろん、こんなのもあるよって教えてくれる声まで。
ケータリングがポテトチップスだったのですが「ベトベトの手でキーボードべとべとだよヽ(`Д´)ノ」というお叱りの声までコメントで流れてきました。
プレゼンを聞いて、食べて、飲んで、コメントを書いて、参加者の方が忙しかったようですね。

 

リアルタイムフィードバックの仕組みができあがったので、「Creative Meeting」における課題解決につながると思っていたのですが、この仕組みが別の問題を生み出す結果にもなりました。
新たに発生した問題については、また後日お話します。

 

以下、できあがるまでの紆余曲折です。
お時間のある方だけ、どうぞ。

■niconico speenya
Google Chromeでニコニコするやつ

■ニコ動風コメント
NicoScreen.jsを使って、日本語翻訳をした文字を動画に流すアプリ
jQuery Plugins by Takodo

■スプレッドシート
Google Apps Scriptのスプレッドシート読み書きを格段に高速化をする方法
スプレッドシートからのデータ読み出し
Googleスプレッドシートをプログラムから操作

■Typeform API
TypeformのAPI
Typeform でイベント受付を行い、問い合わせがあった場合に通知する

■OBS
【OBS(Studio)】Youtube Liveでライブ配信する方法
無料で使える高機能な配信ソフト、OBSの詳しい使い方
動画投稿だけじゃない!YouTubeでゲーム配信する方法

■Youtube ライブストリーミング LiveChat API
API Reference
google/google-api-php-client-services

■ライブチャット
YouTube Gaming
http://getnews.jp/archives/1498218
YouTubeのゲーム実況アプリ「YouTube Gaming」でコメントのオーバーレイ表示や履歴の閲覧などが可能に
Open BroadCaster Software (OBS) で YouTube ライブストリーミングを使った動画配信をする方法
Youtube生配信動画にチャットを表示させる方法!
チャットをしながら生中継…YouTubeのライブ動画がニコ動みたいなものになっていた
YouTube Live Chat Moderation

■チャット
“Updated” YouTube Chat-Room Captures
ニコニコ風実況アプリ
ニコニコ動画風のコメントをJavaScriptで作ってみよう
発表スライド上にニコニコ風コメントが流せるサービス
[JavaScript]ニコニコ風コメントを作ってみた[リメイク]
HTML5 videoでニコニコ動画風プレーヤーを作ろう

■ライブチャット透明化
https://restream.io/
HOW TO STREAM CHAT OVERLAY ON YOUTUBE GAMING USING OBS TUTORIAL

■低遅延
遅延ほぼなしでゲーム配信が可能なフリーソフト「Tachyon」

■OBS&ライブチャット
http://nanishira.net/youtubechat/
The latest Update for Youtube Gaming Chat like twitch

■AirPlayer
意外と便利かも? Mac を AirPlay 送信先にできる AirPlayer

■EC2 & node.js
今更だけどnode.jsのexpressでリアルタイムチャットを作る!!
AWS EC2でNodeを動作させる
[AWS] 手順に沿った画像付きでAmazon EC2にNode.js, Express環境の構築する
EC2にnodejsの環境を構築した時のメモ

■Mac & node
Node.jsをMacにインストールしてnpmを使えるようにする
Mac(OSX)で.bashrcを編集する

■ブラウザ透明化
NW.jsを使ってHello World !
最新版で学ぶElectron入門 – HTML5でPCアプリを開発する利点と手順
「常に最前面で透過度とuserAgentが変更できる」ブラウザを、Electronで作ってみた

https://nwjs.io/
透過がサポートされたnode-webkit(NW.js)でガジェットを作ろう

[OS X] 透過型のTwitterクライアントを作ってみた
動画やWebサイトを見ながら快適に作業ができるMacアプリ「Helium」
Macの画面を半透明にして「ながら作業」ができるアプリ「Fluid Browser」
Helium – 表示しっぱなしで邪魔にならない究極のながら見ブラウザー
Macでウィンドウを半透明化して作業を効率化する方法が便利!
Electron製のピクセルパーフェクトを支援するアプリ

以上

川竹 敏晴 川竹 敏晴

大学卒業後、システム開発会社にエンジニアとして勤務。Java等を用いて大小様々なWeb系システムを開発。その後、Web制作会社にて数多くのCMS導入案件の開発を担当したのち、2011年にロフトワーク入社。主にCMS導入案件の技術的なサポートを担当している。自他共に認めるCMS好きで、日々新しいCMSの研究を行なっている。>>プロフィール詳細

関連記事