「Chrome+HTML5 Conference~第20回記念HTML5とか勉強会スペシャル~」レポート

ライトニングトークレポート

本稿では、Chrome+HTML5 Conferenceのライトニングトーク8本についてレポートします。

ライトニングトークとは5分という時間制限の中で発表を行うもので、カンファレンス等のイベントではよく使われるプレゼンテーションです。今回は5分ちょうどで打ち切る方式でしたので、時間が足りずに最後まで発表しきれない方がほとんどでした。

緊急地震速報 by Extension を作って

トップバッターは石本光明さんによるChrome拡張機能の緊急地震速報についての発表です。災害時に役に立つものを作ろうと思い、この拡張機能を作ったそうです。

実装概要は、緊急地震速報を流すtwitterアカウントをUserstreams APIを利用して更新情報を取得し、WebSocketを使ってクライアントに情報を送り、Desktop Notificationで通知するという仕組みになっていることを話されました。

発表資料はこちらになります。

画像

HTML5 for Mobile

2番手は小俣博司さんによるフィーチャーフォン向けブラウザのHTML5対応についてです。

世間ではFlash to HTML5という流れが強いですが、HTML5をフィーチャーフォンで動かすためにその逆を行ったブラウザです。日本のフィーチャーフォンはFlash liteを載せているものが多いため、CanvasをFlashに変換し、残りの部分をフィーチャーフォン用にHTMLを変換して動かすという仕組みになっているようです。

発表資料はこちらになります。

画像

mixer2っていうJavaテンプレートエンジンを作ってたらもっとすごいjsoupっていうやつを外人が作っててヘコんだけどめげずにがんばるでござるの巻

3番手は、わたなべさんよるmixer2というJavaテンプレートエンジンについてです。

一般的なテンプレートエンジンは通常のHTMLタグだけではなく、専用のタグを書く必要があり、エンジニアとデザイナーが共存しにくい環境になっています。それを改善しようとしたのがmixer2だそうです。mixer2は普通のHTMLでテンプレートを定義し、サーバ上のコードでidやclassを探索して書き換えるという仕組みになっているそうです。

タイトルにあるjsoupとは、mixer2と同じコンセプトで実装されていて、サーバサイドの実装がjQueryのようにできて書き方が簡単で使いやすいというmixer2にとっては強敵な存在と述べていました。

発表資料はこちらになります。

画像

スマホ向けwebアプリとWeb SQL Databaseでのオフライン対応

4番手は、澤紀彦さんによるスマートフォン向けサイトのオフライン対応についてです。

あるニュースサイトのスマートフォン向けページにWeb SQL Databaseを使ってオフライン対応というより、高速化を期待して実装したというお話です。記事一覧が出ている間に裏で本文をAjaxで取得し、その本文と記事一覧をWeb SQL Databaseに保存するという仕組みのようです。localStorageとのハイブリッドに実装し、ものによって保存場所を分けているとのことでした。また、Web SQL Databaseは既にW3C上では仕様の策定が止まっているため、Indexed DBにいつか変更する予定だと述べていました。

発表資料はこちらです。

画像

Enjoy WebFonts!!

5番手は、ひらいさだあきさんによるWebFontsについてです。

WebFontsはFontデータのスタイルシートを適用して、font-familyに指定するだけであるため、簡単に使うことができます。さらにCanvasにも利用でき、fontを指定する関数でWebFontsを指定すればそのまま使うことができるそうです。また、SVGにも使えるそうです。

発表中では、Zen-Codingを用いたLive Codingも披露され、SVGのときはデザイナートラックの「Dive into SVG」セッションで使われていたLive SVGを使ってデモが行われました。発表当日のセッションを見て、Live SVGを使う発表に変更したと述べていました。

発表資料はこちらになります。

画像

学生向け会社説明会でHTML5で弄んでみた

6番手は、原田定治さんによるHTML5関連技術で作った業界クイズアプリです。

原田さんの勤める会社の説明会で実際に使ったアプリで、技術は楽しいということを説明会に来た学生に伝えることを目的としたものだそうです。

アプリの内容は、WebSocketとCanvasを使ったもので、絵を書く参加者とお題を出すホストが居て、ホストの方では参加者のキャンバスがリアルタイムに表示されているというものです。node.jsでコロンビアというものを元にしているとのことです。

発表資料はこちらになります。

画像

さようなら”Google Wave”、あとは”co-meeting”にまかせてください

7番手は、木村篤彦さんによるco-meetingについてです。

co-meetingという製品がGoogle Waveの技術を引き継ぎます!と宣言し、どのような製品なのかを紹介しました。とてもよくできていると感じましたが、技術の話がなかったため、どのように実装されているのは分からなかったのが残念です。

発表資料はこちらになります。

画像

HTML5レンジャー!

ラストは、山崎富美さんによるHTML5レンジャーについてです。

HTML5レンジャーとは第0回 HTML5プログラミング&クリエイティブ・コンテストでキャラクターデザイン部門に選ばれたキャラクターです。こちらをデザインした森川聡子さんの紹介とキャラクター毎の設定について話していただきました。LT中では森川さんからのメッセージビデオも再生されました。

画像

このキャラクターたちは、Creative Commons Attribution Licenceですので、森川さんの名前を出していれば自由に使って問題ないということなので、どんどん使っていきましょう!

発表資料はこちらになります。

画像

おすすめ記事

記事・ニュース一覧