イベント‎ > ‎

第8回勉強会@岡山

終了しました。参加者の皆様お疲れさまでした。

テーマ:「京都GTUGの村岡さんとHTML5ハッカーソン」

日程:2011年8月13日 9:00〜17:00

場所:岡山県立図書館 サークル活動室1
定員:30名
参加費:無料

参加申込:

懇親会申込:

※注意:
できる限り、公共交通機関を利用して会場まで来て下さい。

当日無線LANをご利用される場合は、
に従って、アカウントを取得しておいて下さい。
もしくは、SoftBankモバイルポイント(Yahoo BBポイント?)が利用できますので
そちらのアカウントでもOKです。

※今回のHTML5ハッカーソンのルール
 ・HTML5を使ったアプリケーションを作るか、HTML5の技術をハックする。
 ・Web上の公開されているAPIを利用しても良い
 ・GWTの開発はOK
 ・Chrome Extensionの開発もOK
 ・初心者向けハッカソンという位置付け。HTML5のノウハウを教えていただきましょう!

 参考:HTML5 Hackathon(京都GTUG)

タイムスケジュール:
09:00:集合
〜16:00
 ハッカーソン

16:00〜17:00
 発表

当日の様子です。

第8回中国GTUG勉強会


角田さんのTwitterまとめ(2011/08/13の大都会技術者クラスタ)

最初に村岡さんに、HTML5ビデオに合わせてコンテンツを切り替えるMediaFrameworkのpopcorn.jsを使った
岡山の紹介コンテンツを披露していただきました。ビデオの再生に合わせて切り替わるのは面白かったです。

角田さんのPamfletを使った成果を披露していただきました。
ブログにまとめてくださっています。

吉田さんは位置情報を使ったアプリケーションを作ってくれました。
たまに渋谷区役所にいることになっていたとのこと。

曽根さんがBlogにまとめてくれました。

みずきさんは、Canvasを使ったペイントツールを作成されていました。
URLを指定して画像を取り込んだ後はローカルにファイルを保存できない制約があるとの事。
開発版ChromeにはFileWriterAPIが実装されている(?)のでいけるかもしれない。
本来のCanvasは保存できるようです。

真さんはWebSocketを使って2台で通信しながら絵を書くというアプリケーション。
軽快に動作していました。描画が増えても遅くなっていませんでした。

Tamさんは新着iRのChromeExtensionを作成されていました。
写真では見えにくいですが、BrowserActionのアイコンに受信した件数が表示されています。

patorashさんもChromeExtensionを作成されました。現在開いているタブのタイトルを表示して、
リンクを選択するとタブがアクティブになります。そのうち、Chrome Web Storeで公開されるかもしれません。

patorashさんがblogにまとめてくれました。

私が作成したGoogleTV(笑)はYouTube Data APIとカスタムプレーヤーを使った動画再生ツールです。
午前中に再生もできたので勝利を確信していたのですが、皆さん素晴らしい成果をだしてきました。
HTML5の要素としてはDOCTYPEとscriptタグにtypeを指定しない書き方ぐらいしか使われていません。

blogにまとめました。

ソースコード(github)

松原さんはWebSocketのサーバをC++で作成していました。通信できるところまでは作れたということで
今後に期待です。目標はKinectとWebsocketを利用して何かをするものを作るということです。

塩入さんはWebDatabaseに苦戦しつつ、Webフォントの表示を研究されました。
これからWebフォントも重要になってくるということでした。

最後に、大阪から参加していただいた秋葉さんのAndroid用の開発版Operaブラウザのみに実装されている
navigator.getUserMedia()を利用したAndroid端末のカメラで撮影した写真をデコレーションするアプリケーションを
紹介していただきました。6時間程度でこのクオリティとプレゼンを披露する生産性の高さは
見習うべきものだと思いました。文句なく優勝だったと思います。

開発版Operaのサイト

と、ここで、会場の終了時間が来てしまい、全員の発表はできませんでしたが、次回以降で活躍していただくことにしましょう!

発表ができなかった須増さんの成果が以下の所にあるのでご興味がある方はどうぞ。
昨日のハッカソンの成果物です

ソース一式は以下になります

私は以下の「CSS3で画像のサムネイルを回転させる」というネタをGETしたので、
それに加速度センサーを組み合わせてみました

Perfectly Rotate and Mask Thumbnails With CSS3

えいのうさんも成果をblogにまとめて下さいました。
HTML5のDrag and Drop APIなどを利用されているようです。

懇親会:18:00〜
※当日、並行して開催されるオープンラボ岡山との合同開催となる予定です。

Comments