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

『詳解OpenCV』が届いた！

今朝、宅急便で届きました！

いやぁ、面白そうだなぁ

こいつを味方につけると心強そうです（笑）

あと、上の方に密かに"Software that Sees"って書いてあるのに気づいた。

色々遊んでみたいです（笑）

3D遊び

非常に簡単なプログラムです。
一応マウス位置のはデカくなるというインタラクション付きです。
ソースコードは以下。

int l=50;
int num;
Qube[] qube;

void setup(){
  size(800,500,OPENGL);
  //smooth();
  frameRate(30);
  colorMode(HSB,100);
  float x=l;
  float y=l;
  for(; x<width; x+=l){
    for(; y<height; y+=l) ;
  }
  num = int(x*y);
  
  qube = new Qube[num];
  for(int i=0; i<num; i++){
    qube[i] = new Qube(l,l,l); 
  }
}

void draw(){
  background(99);
  lights();
  directionalLight(99,0,99,0,0,-1);

  int count=0;
  for(float x=l; x<width; x+=l){
    for(float y=l; y<height; y+=l){
      pushMatrix();
      translate(x,y);
      rotateX(frameCount*PI/60 + x);
      rotateY(frameCount*PI/60 + y);
      float h = map(x,0,width,0,100);
      float s = map(y,0,height,0,100);
      float b = 99;
      fill(h,s,99,60);
      noStroke();
      qube[count].getDistance(x,y);
      qube[count].changeSize();
      qube[count].display();
      count++;
      popMatrix();
    }
  }
}

class Qube{
  int XL;
  int YL;
  int ZL;
  float xl;
  float yl;
  float zl;
  
  float range = 200;
  float distance=0;
  
  boolean isOver = false;
  
  Qube(){ }
  Qube(int XL, int YL, int ZL){
    this.XL = XL;
    this.YL = YL;
    this.ZL = ZL; 
  }
  
  void display(){
    box(xl,yl,zl);
  }
  
  void getDistance(float x,float y){
    distance=sqrt(sq(mouseX-x)+sq(mouseY-y));
    if(distance<range) isOver=true;
    else isOver=false; 
  }
  
  void changeSize(){
    if(isOver){
      float s=1;
      xl=XL+(range-distance)*s;
      yl=YL+(range-distance)*s;
      zl=ZL+(range-distance)*s;
    }else{
      xl=XL;
      yl=YL;
      zl=ZL;
    }
  }
}

予選通過

予選通過しました。

でけた！

最近は夏衣ちゃんと一緒にSuperConっつーやつの予選問題解いてました。

その問題ってのは、一辺の長さがdのn個の正方形が占める面積の合計を求めろってやつで。
与えられるデータはnとd、そして各正方形の左下頂点の座標。
ただし、この座標がとりうる範囲は0から10,000。
ついでに、nは1以上5万以下で、dは1以上100以下。
当然正方形どうしが重なりあうこともあるわけで、求めるのはそれら全体が覆う部分の面積。

アルゴリズム教えられへんけど、いまんとこ0.3秒くらいでn=50,000、d=100のやつの面積を求めることができてる。
本番まで比較相手がいないからこれが速いのか遅いのかよく分からないけど。
もうこれで出そうかな。締め切り明後日だし。と思ってる今日このごろでした。

あ・・・プレゼン・・・やばい・・・おわらんって・・・・・・
つかまず練習せなアカンやろ・・・スライドさえもまだ・・・テスト直後とか、やる時期ミスってるやろ・・・