「サイボウズ・ラボユース 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

セプキャン2010に参加してきた

1週間ほど前まで、セキュリティ＆プログラミングキャンプ2010（通称：セプキャン2010）というものに参加してた。
8/12〜8/16の間、千葉のOVTAという研修センターでプログラミングのお勉強をしてたわけです。

ブログに書くまでがキャンプだそうで。
でもかなり更新遅れてしまった＞＜

ちなみにセプキャンというのは、5日間、全国から22歳以下の学生が60人くらい集まってセキュリティやプログラミングについて勉強したり交流をしたりとかいう素晴らしい合宿で、IPAが主催してる。
IT系ハイレベルな人がいっぱい集まってくる夏のイベント。

まず凄いのは、なんとこれは交通費・食事代・宿泊費・授業料等全部タダ。国が負担してくれてる。
しかも講師の方々はIT業界で有名な方も多く、かなりハイレベルであります。

実は僕自身このキャンプの存在はネットからの情報により去年から知っていて、去年も応募してた。
まぁ去年は当初の予想通り落選。
倍率6倍とか聞いてorz となっていて、「とりあえず22歳までに一回でも行ければいいやー」と気長に構えていることにしていた。

てなわけで今年も懲りずに応募してみたのだけど、なんと通ってしまいビックリ。
キャンプ前、ラッキーラッキー良かった良かったって浮かれてた。


ところでセプキャンはセキュリティコースとプログラミングコースに分かれている。
下に示すようにコースの中でそれぞれ3つづつの組分けがあり、僕はこのうちプログラミングコースのプログラミング言語組に参加した。

• セキュリティコース
• ソフトウェアセキュリティ組
• Webセキュリティ組
• ネットワークセキュリティ組
• プログラミングコース
• OSを作ろう組
• プログラミング言語組←これ
• Linuxカーネル組

プログラミング言語組では何をするのか。

以下セプキャンホームページ内容の引用だけど：

言語組では、プログラミング言語Ruby、およびその言語処理系を題材に、座学と実習によって言語処理系の基本、ソフトウェア構成手法の基本、性能改善手法の基本を学び、Ruby開発コミュニティで活躍できるレベルを目指します。

とかいう感じ。
要するにRubyの処理系をいじったりいじったりいじったりするわけですね。

実際にしたこと：

• Rubyのバージョン番号を変えてみる
• Rubyのバグ取り体験→バグ取り競争
• Rubyの拡張ライブラリ作成体験
• Ruby関係の課題に取り組む

演習的なことを中心に挙げてみた。

もちろん座学もやった。gitのお話とか、ソフトウェアの高速化のお話とか、コミュニティのお話とか、Ruby処理系のお話とか。あとRubyではなくPythonなのだけど、PEPのお話とかも。

どれも面白く、タメになった。
同時に、自分はもっと勉強しなきゃダメだなとも思った。

演習では初めてのことが結構多く、多少手間取ってしまったのだけど良い経験になったと思う。

さて、先ほど「実際にしたこと」の中で「Ruby関係の課題に取り組む」と書いたけど、具体的に実際みんながやってた課題というのは以下の通り：

• 「Little Quilt言語の処理系実装とRuby binding」
• 「Ruby処理系の"見えるor聞こえる化"」
• 「Rubyのデバッグ」
• 「Rubyのボトルネック分析と高速化」
• 「Rubyに新しい文法の追加」

課題は色々案が用意されていて、その中から選択する、という形だった。

上の箇条書きはその案のうち実際に誰かが選んだもの。

この中で、僕は「Ruby処理系の"見えるor聞こえる化"」を選んだ。

実際にやったのはRubyの可視化。

もっと具体的に言うと「クラス定義時、メソッド定義時、インスタンス生成時にリアルタイムでそれらの関係性を視覚化」した。

これについてはまた別エントリを書こうと思うが、とりあえず完成したやつはこんな感じ：

Visualizing Ruby from TaKUMA YOSHiTANi on Vimeo.

細かい部分で思ったより手間取ってしまい、講師やチューターの方に助けられながらなんとか時間内に間に合わせることができた。
余裕があればGCで回収された時そのオブジェクトが断末魔の叫びをあげるようにしたかったんだけどなーw

さて、それはいいとして、キャンプのことに話を戻そう。

あ、そうだ、人生で初めて名刺交換をした。
キャンプが始まる少し前にキャンプマニュアルがpdfで公開されいたのだけど、そこには「名刺100枚くらい作っておいで」と書いてあった。Σ（°□°　）←ってなった。
結局40枚ほど余ってしまったのだけど、それでもたくさんの方と名刺交換することができ、なんかとても新鮮だった。
やはり名刺にも個性が出ていて、手書き名刺から、なかなか凝った名刺まで色々。
中でも良いなぁと思ったのは透明な名刺。センス良いし印象に残るし。
名刺一つとってもなかなか面白いなぁと感じた。

キャンプ中はいろんな人と交流できて有意義だった。いろんな人がいて面白いなと感じた。僕なんかにはワケワカランすげー人もいっぱいいて、刺激ビンビン受けまくり。

特別講義やBoFなどでも、色々新しい価値観だったりものの見方だったりを知る事ができたと思う。

では、キャンプ中に感じたことなどを素直に：

• へぇー
• ほぉー
• なるほどぉー
• なんか凄い
• 仮想の図書館（笑）
• Bコースにして満額の料理を食べるのか、Cコースにしてドリンクバーを付けるのか...
• 13歳なのにすごいなぁ。あれ、俺負けてるわ
• OVTAネット24時間500円ェ・・・
• セキュリティ組のCTF楽しそうだな
• プロパティ（笑）
• バグ・・・バグ・・・
• 16階談話室熱い。しかも暑い。
• 三点リーダェ・・・
• お土産多くてハッピー
• 技術書2冊+雑誌1冊全員にプレゼントとかすげぇ

これ以上書いてるときりが無いのでここらへんで。


まともな感想&まとめ：
世の中には凄い人がいっぱいいるんだなと実感でき、自分はこのままではいけないなと強く感じた。普段なかなかこういう人たちとは出会えないわけで、交流できて楽しかったし、とても良い刺激になった。
またキャンプで得た知識については、これから頑張れるとっかかりができたと思う。

最後に、このキャンプに関わった全ての方へ。
ありがとうございました!!!

あ、あと
＼爽快セキュリティ！／