読者です 読者をやめる 読者になる 読者になる

clock-up-blog

go-mi-tech

ハッカソンレポート:夜通しハッカソン

ハッカソン イベント レポート

夜通しハッカソンを開きました

12月21日(土)夕方~12月22日(日)昼にかけて、夜通しハッカソンを開きました。

f:id:kobake:20131221235133j:plain:w300

突発の告知にも関わらず計6人 (自分含め) が集まり、
だいたい作業時間はトータル16時間くらい確保できたと思います。
皆様ご協力ありがとうございました。

少人数のため、基本的にチームは組まずに個人個人で作業を進める形としましたが、
一部勝手に共同戦線を組んだりしていました。

会場の紹介

コワーキングスペース茅場町Co-Edoという場所で開催しました。

f:id:kobake:20131222170710j:plain:w300

普段、仕事や趣味コーディングの場所としてよく使わせてもらっており、今回もスペースをご提供いただきました。オーナーの田中さんには大変お世話になりました。ありがとうございます。

PHPWordPress を触る人がよく集まる感じの場所です。あと最近は Scala 人口も増えてます。
IT関係の勉強会がよく開催されています。

今回のハッカソンの流れ

開始

イベント開催2日前という超直前告知だったということもあり、僕含め3人という少人数体制でイベントが始まりました。もっと早めに告知して人集めれば良かったな、と少し反省しましたが、意外と途中から参加する人が増えてきて、最終的には僕含め6人になり、規模としては程良い感じになり良かったです。

休憩

少人数に落ち着いたこともあり、食事・休憩のタイミングはよしなに、という感じです。
すき家好き(あとScala好き)な方の提案により、全員ですき家に行きました。人によってはここでアルコールが注入されます。
f:id:kobake:20131222172456p:plain

夜通しにも関わらず割とみんな元気でした。
一瞬寝ている人の姿を見た気もしましたが、たぶん彼に寝る意志は無かったと思います。

発表

状況によっては途中経過を発表する時間を設けようと思っていましたが、
各自勝手に状況を見せ合うので必要なかったです。
日をまたいだ朝9時で一旦作業を区切り、各自成果物の正式な発表を行いました。

各自成果物 (発表順)

morizyun さん「勉強会共有サイト」

奇しくも僕 (kobake) と同じテーマの課題に挑んでいましたが
あえてチームは組まずにバラバラに作業していました。
が、度重なる MacBook の不調により作業断念。。途中離脱されたため、発表は無しです。

購入時期的に東芝SSDなのでは無いかという説が浮上。お大事にしてください(MacBookを)。
一緒に牛丼を食べに行ったり Rails の話ができたりと面白かったです。またのご参加をお待ちしております!

Fukuda さん「お絵かき共有ツール PaintJS」

使用技術:socket.io, node.js, MongoDB
公開場所:http://paintjs.azurewebsites.net/

WebSocket通信により多人数でお絵かきを共有できるホワイトボードアプリです。

f:id:kobake:20131222181624j:plain:w300

Canvas処理をあまり触ったことが無いようで勉強しながら作られていましたが、割とスムーズに行けたようです。直感的に操作できるオモチャっぽい挙動のウケがよく、かなり盛り上がりました。

デプロイ先サーバとしてAzureを使っていました。
_iwate さんからAzureのデプロイ方法を教わったら瞬く間にデプロイ終わってました。Azure、管理画面使いやすそうです。

だいたい初日の夜11時くらいにはざっくり機能ができあがっていて、
あとはチューニングとかデザインとか追加機能とかやっていました。
最終的な成果物はかなりオシャレに仕上がっています。

kobake「勉強会共有サイト」

使用技術:Ruby on Rails
公開場所:まだ無し。年内公開予定。

勉強会情報共有サイトのたたき台です。

f:id:kobake:20131222181317p:plain:w400

類似の既存サービスが他にも多くありますが、かゆいところに手が届かないので、自分好みの機能を持つサイトを自分で作ってみることにしました。
クローリングして集めた情報を表示したりする予定でしたが、いろいろ道草を食ってしまいほとんど進んでいません。。

ハッカソンの時間中の大半は Kohara さんから Scala と Android の環境を教えてもらったり、Java の GL と戦ったり、Kohara さんにクォータービューゲームのマップ描画方法とかを教えたり、クォータービューのチップ画像をEDGEでいじったり、牛丼食べたりしていました。
ハッカソンではやることをちゃんと一つに絞ったほうが良いと反省。ただ、すごく勉強にはなりました。

Sho Kohara さん「クォータービューゲームたたき台」

使用技術:Play Framework, Scala, Java, GL, Android SDK
公開場所:https://github.com/kobake/MmoBase

Android でクォータービューゲームを作る(しかもオンライン対応)という壮大な計画です。

f:id:kobake:20131222183816j:plain:w400

先に Play Framework (Scala) でサーバ側処理を作られており、そちらは最低限の実装が済んでいましたが、クライアント側のグラフィック描画周りで苦戦しており、さすがにサーバ・クライアント間の通信まではこぎつけませんでした。とりあえずマップチップ敷き詰め処理が動くようになったところでハッカソン時間終了。
上の画像だと1個のでかいマップチップに見えますが、実はあれは同じマップチップ画像を20x20x9個積み重ねた状態です。「将棋盤」とか「キャラメル」とか言われていました。美味しそうです。

僕も少し協力した都合で、何故かリポジトリが kobake アカウント上に作られています。
MmoBase という名前がなかなか壮大です。

f:id:kobake:20131222185048j:plain

ところでランダムにチップ積む数を変えるとこんな見た目になりますよ。(さっきコード書き換えて試してみました)

※クォータービューのマップチップ素材としてはpixivで見つけた「森マップ【素材】」/「suxamethonium」の漫画[pixiv]を使わせていただきました。

Noriaki Horiuchi さん「タスク情報ビューアー」

使用技術:Java, Android SDK, Photoshop
公開場所:まだ無し。

ToodledというTODOリスト管理サイトからAPI経由でTODOリストを取得し、表示するビューアーです。

f:id:kobake:20131222191129j:plain:w300

タスク情報がいくつも表示されていると気が散って仕方がない、ということで、「1画面に1つのタスクだけを表示する」ことに特化したタスク情報ビューアーです。自前でTODO管理ツールを作るのではなく、既存サイトから情報を引っ張ってくる、というのが再利用性高くて良いです。

枠の下に表示されている影の表示に実はかなり苦労していた模様。
9-patchという技術で影を表現していました。

_iwate さん「skeleton.js」

使用技術:JavaScript, jQuery
公開場所:https://github.com/iwate/skeleton.js

jsのみでモデル構築、HTML要素配置、イベント処理などの設定ができてしまうjsライブラリです。

f:id:kobake:20131222190422j:plain:w300

もうこれは画像見ても何なのか分からないので、利用ソースを見るのが分かりやすいです。

var Model = Skeleton.Model.extends({
  constructor: function(){
    this.__base__(arguments);
  },
  count: 0,
  countup: function(){
    this.count++;
  }
});

var View = new Skeleton.View.extends({
  constructor: function(prop){
    this.__base__(prop);
  },
  jsonml: ["div",
    ["h1",
       {
         style: "color: red; font-size: 10em",
         "data-bind": "innerText: count"
       },
       0
    ],
  ],
  events: {
    "click h1": "onClick"
  },
  onClick: function(){
    this.model.countup();
  }
});

$(function(){
  var model = new Model;
  var view = new View({
    model: model
  });
  view.renderTo("body");
});

こんな感じにHTML要素をJSON形式で定義できたりします。
個人的にModelが分かりやすくて好きです。
興味ある人はリポジトリをcloneして動作試してみましょう。

_iwate さんからは Azure のことを教えてもらったりレッドブルの差し入れをしていただいたりもしました。ありがとうございます。元気が出ました。

お疲れ様でした

とても有意義なイベントになりました。
常に建設的な空気が流れており、密度の高い時間が過ごせました。

実のところイベントを開催すること事体が初めてであり、諸々不確定要素の多いところがありましたが、最終的には良い感じの空気が出来上がったと思います。参加者の皆様、また、コワーキングスペースオーナーの田中様、いろいろご協力いただきありがとうございました。

他イベント告知

純粋なハッカソンとは毛色が違うのですが、トークソン(トーク版ハッカソン)というイベントを
今週末の12月28日(土)にコワーキングスペース茅場町Co-Edo (今回と同じ場所) で開きます。
端的にいうと事前準備不要の無限LTイベントです。こちらもよろしくお願い致します。

純粋なハッカソンも機会を見つけてまた開催したいと思います。
開催決まり次第、告知致します。

});