2013年1月27日日曜日

Angular.js ハッカソン #angularjs

1/26 に日本で初めての Angular.JS のハッカソンが開催されました。

「Angular.js ってなあに?」という方は昨年 Google DevRel ブログに載せたこちらの記事をご覧ください。

AngularJS フレームワークについて

この記事を載せようと思ったきっかけは Angular.js の動画だったのでここにも載せておきます。衝撃的に簡単そうでビビる。





Angular.js 公式サイト http://angularjs.org/
Angular UI http://angular-ui.github.com/
UI Bootstrap http://angular-ui.github.com/bootstrap/

日本語でおkなあなたのために、ドットインストールさんが3つも講座を作ってくれています。

AngularJS の基礎 ・ AngularJSで作るToDoアプリ ・ AngularJSで作るツイッター検索
Angular.js 日本語のコミュニティもあります。

さて本題。

ハッカソンを始める前に、なんと Google のエンジニアで Angular.js の開発に携わっている Vojta Jína が Google+ hangout で30分ぐらい解説を入れてくれました。Vojta 金曜日の夜遅くまで残ってくれていてありがとう!使ったコードはこちらに公開されています。

Angular.js Hackathon

Angular.js Hackathon

作りたい物表明とチーム分け。

Angular.js Hackathon

チームにわかれてもくもく。

Angular.js Hackathon

Angular.js Hackathon

Angular.js Hackathon

Angular.js Hackathon

夕方、日も暮れる頃に発表開始。六本木ヒルズからの夕日がキレイでした。

Angular.js Hackathon

●チューターの a2c さんのプレゼン

マウスの動きで true/false のクラスを変えて、ディスプレイに色を表示。

Angular.js Hackathon

Angular.js Hackathon

Angular.js Hackathon

デモを動画でどうぞ!



ここね、ここ。

Angular.js Hackathon

a2cさんの記事「ng-class をマスターせよ

Hungry.js チームのダイエットTodo

Todoリストを復習しつつ、ダイエットアプリを作ってみた。

目標を入力して、スクワットをする。

Angular.js Hackathon

Angular.js Hackathon

終わってタスクを消すとポイントが付与される。更に「ほめてもらう」ボタンを押すと。。。

Angular.js Hackathon

萌え声で「頑張った!」の電話がかかってくるw



●チームひとりの「カラーピッカー」

実は元々は Dart で書こうとしていたもの。Angular.js ならうまくいくかも!と今日は取り組みました。

Angular.js Hackathon

Angular.js Hackathon

Angular.js Hackathon

動画でどうぞ。



ちなみにここ最近イベントレポブログをさぼっていたのにこれがすぐに出たのは、この樋口さんが「いっぱいブログ書いてて偉いですね!」と褒めてくださったからです(笑)褒められたからには書かなきゃ!と思ってすぐ書きました(^^ゞ

カレンダー物が2つ続きます。

●チームforget-me-not の Todoリスト+カレンダー連携サービス

todoってみんな使っているけれど、「期限っていつだよ」ってなりませんか?という問題意識から、カレンダーにtodoの期限を連動させて入れるというサービスが誕生。

Angular.js Hackathon

Angular.js Hackathon

Angular.js Hackathon

Angular.js Hackathon

デモを動画でどうぞ。



●Pine Tree Island チームの「ITカレンダー ft. angular.js」

IT勉強会カレンダー(Google Calendar)からデータを抜いてきて、フィルタリングしたりソートしたり検索したりできます。

Angular.js Hackathon

Angular.js Hackathon




angular.js を使うと、フィルタリングとかソートとかめちゃめちゃ簡単にできます。で、抜いてきたカレンダーデータをカレンダーに表示するところまでは出来て、あと1時間あったらフィルタリング・ソートした物をカレンダーに表示するところまでできたんだけど時間切れ。ぜひ完成させてください!


最後の2つは音系のチームです。

●YouTubeサンプラー


文字通りYouTubeサンプラーなんですが、これは動画を見ないと何もわからないと思うので動画をどうぞ(笑)


Angular.js Hackathon

Angular.js Hackathon

優勝!

Angular.js Hackathon

●上州ネギ!チームの「音と私」

Angular.js Hackathon

これも動画を見ないとわからないと思うので下記をどうぞ。声・音を喋ってサンプリングして、それを音源に合せて鳴らします。(WebRTCを使ってます。)



準優勝!

Angular.js Hackathon

すべての発表の動画が見たい方はこちら。



Tシャツや gelaskin、スティッカーなど、おみやげも色々 :)

AngularJS Hackathon

Angular.js Hackathon

お疲れ様でした!

Disclaimer このブログは山崎富美の個人的なものです。ここで述べられていることは私の個人的な意見に基づくものであり、私の雇用者には一切の関係はありません。