「サイボウズ・ラボユース Hackathon 2013夏」に参加してきました。

レッドブル飲み放題に惹かれて「サイボウズ・ラボユース Hackathon 2013夏」に参加してきました。結果から言うと優勝してiPad miniゲットしました！ｗ

↑こんな感じのインターン

全国から5人集まって3日間オフィスと旅館でレッドブルを飲みまくりながらなんでも好きなソフトを開発しまくろう！というハッカソンでした（ほんとに何を作っても良い、規定なし）。メンターにはサイボウズ・ラボの社員の方々がついてくださります。
ハッカソン自体参加するのが初めてだったので新鮮でした。

他の参加者が色々話を聞いてみるとなかなか優秀な人ばかりで、やべぇ、こんな中でやっていけるのかｗと恐々としてました。ていうか5人中4人がセプキャン経験者でした。ちなみに講師の方々は３人ともセプキャンでも講師をされていた方々でした。謎のセプキャン率ｗ

ハッカソンが始まって他の参加者は早々にテーマを設定してしまってコーディングにとりかかっている中、僕はなかなかテーマが決まらず焦ってました。テーマが決まってからは使ったことないけど初めて使ってみたフレームワーク（ Sailsとか）がうまく動かなくて一日目を潰すという結構悲惨というかヤバい状況でした。

形にするのさえヤバいのではないかという状況だったのですがなんとか最後の追い込みで形にすることができました。いつもこんな感じなんでこの性格直さないといけないなーｗ

ちなみに、僕のテーマは「インタラクティヴなリアルタイムプレゼンテーションシステム」です。名付けて"Pinteraction"。発表者が出しているスライドと同じものが聴衆の手元でも見れ、聴衆は発表者に対してなんらかのインタラクションが可能なプレゼンテーションシステムです。

考えたきっかけはオリエンテーションの中でインターン中の情報共有システムとしてkintoneを使うという説明の時にやたら長いURLがスライドに表示されそれを手打ちしないといけない場面があり、これ超めんどくさいなーと思ったことです。URLとかが手元に届けばいいなと。
これを発展させて、むしろスライド自体手元で見れれば良いよね、どうせスライドが手元で見れるんだったら現在進行中のプレゼンと同期すればいいよね、と考えていきました。
実際学校とかでも使ってくれたら超便利だろなーと思って。

というわけで機能をまとめると

• スライド（PDF）をアップロード→Slideが作成される
• Slideのshowページには「プレゼンをする」ボタンがあり、これをクリックすると新たなSessionを作成するページに飛ぶ
• Sessionを作成すると他のユーザもそのSessionを見ることができる
• 発表者がスライドを動かすとそのSessionを見てる聴衆のスライドも同期して動く。もちろんautoplayモードはon/offできる
• 聴衆はコメントを投稿できる。投稿したコメントはニコニコ動画よろしく全員のスライドの上を右から左へ流れる
• スライドに含まれるURLは自動的に抽出されユーザに提示される
• facebookでログイン

といった感じのシステムを構想し、実際に作りました。
SlideとSessionという２つのモデルがあり、Slideはアップロードしたスライドそのものを、SessionはSlideを発表する度に作られる発表の場を表します。つまり実際にプレゼンをする時は発表者も聴衆も同じSessionにアクセスすることになります（ビューは異なる）。

実装はNode.js上でExpress, Socket.IOなどを用いPDFの表示にはPDF.jsを使いました。PDF.jsよくわかんねーｗ

さて、言葉だけだとなんのこっちゃという感じだと思うのでSessionの画面のデモ動画：

Pinteraction: Interactive, realtime syncing presentation system from TaKUMA7 on Vimeo.

左が発表者、右が聴衆の画面です。異なるfacebookアカウントでログインしています。
両者が同じSessionにアクセスし、発表者がスライドを動かすと聴衆のスライドも動いていることが分かると思います。聴衆側のビューの左下にある水色になっているボタンは自動再生モードがonになっていることを示していて、これは聴衆が自分でスライドを進める/戻る動作をするとoffになります。自動再生モードがoffになっている場合も今現在どのページが発表されているのか聴衆は青いステータスバーにより確認できます。聴衆側のビューにはコメント投稿フォームがあり、ここにコメントを打つとニコニコ動画のようにコメントが流れます。
こんな感じ。

ちなみに他の参加者は

• Twitter上の発言のつながりを3Dで可視化するクライアント
• QRコードに余裕で収まる（実行ファイルの大きさが1KBちょっとという変態的な）テトリスの開発
• ニコニコ動画の炎上動画をリアルタイムで取得しユーザに提示するシステム
• Gunosyのようなレコメンデーションであるが今まで興味のなかった対象を広げてくれるレコメンデーションシステム

などを作っていました。なんかよくわかんないけどすげーなと思って見てました。

みんなレッドブル片手に深夜2時とか3時に寝て朝は5時とかに起きるということをやっていました。僕はそんな早起きできないので7時とかに起きてました。それでもかなり睡眠時間短いけど。

さて、3日目の夕方、作ったソフトをデモを交えて社長をはじめサイボウズ、サイボウズ・ラボの方々の前で発表しました。ニューヨークで発表しました（サイボウズのオフィスの会議室とか応接室にはニューヨークやら松山やら東京やらの地名がついていて中の雰囲気もそれをイメージした装飾がされている）。

そして、なぜか僕のやつが最優秀に選ばれてしまいましたｗ意外だったけども嬉しかったです。賞品としてiPad miniを頂きました。ちなみに早速使ってます。思ってたよりQOLあがるヽ(^。^)ノ

この3日間で計約15本のレッドブルを飲みましたｗ

旅館の冷蔵庫に詰め込まれたレッドブル達

なかなかのペースですねー。でも、もっと飲めたかもしれない(・∀・)笑

ランチ・ディナー等で社員の方々と交流したり、旅館で他の参加者の人と夜通し作業しながら仲良くなったり楽しかったです。サイボウズ、サイボウズ・ラボの方々ありがとうございました。

---

発表資料：

「サイボウズ・ラボユース Hackathon 2013夏」発表資料 from Takuma Yoshitani