1. あなたはどのタイプがお好き？
~ イケメンHTML5系男子 ゲットのしかた ~
2010.9.10 KyotoGTUG GirlsHackathon
村岡 正和

2. 自己紹介
村岡正和 @bathtimefish
【仕事】
神戸でITシステム開発/コンサルティングをやってます。
【活動】
HTML5-WEST.jp Co-Founder, 京都GTUG, CSS Nite in OSAKA, OSC
Kansai実行委員, 中国ニュースブログ「Shanghai Watch」運営
【好きなもの】
HTML5, Python, JavaScript, 中国拳法

3. 太極拳は、

4. 美容と健康に
いいです。

5. HTML5とは？
• HTMLの次のバージョン
• 現在W3Cで標準化作業中
• 正式勧告は2022年？
• 正式勧告を待たず実装が進んでいる
• 今までに比べて大幅な改良が施されている

6. HTML5の強化点
• 要素の刷新
新規追加される要素、なくなる要素
section, header, nav, footer, article ... frameset, applet, dir, center ...
• 様々なAPIの追加
ビデオ、オーディオコントロール、2D&3Dグラフィック制御、
オフライン動作、バックグラウンド処理、双方向通信...
• ユニバーサル・アクセス
様々なデバイスで利用されることが考慮されている。
障がい者対応などWebアクセシビリティにも配慮されている。
できるだけ簡単な記述で強力な機能を使えるよう設計されている。

7. 注目されている点
• マルチメディア要素
video, audio, canvas, svg...
プラグインなどの機能を使わずマルチメディアの再生・コントロール
が可能になる。
• 強力なAPIによるRIA開発
グラフィックの動的生成、オフライン動作、バックグラウンド処理、
データベース、双方向通信 を JavaScriptで利用できる。
• Webセマンティクス
正しくマークアップする → データに意味を持たせる
機械が理解しやすいWebコンテンツ → Webの発展に貢献

8. 草食系男子もいいけど、

9. HTML5系男子もいいん
じゃないですか？

10. HTML5系イケメンの紹介
~ 3つのタイプに分けてみました ~

11. TYPE. One

12. TYPE. One
ビジュアル系、
チャラ男系、ホスト系

13. TYPE. One
ビジュアル系、
チャラ男系、ホスト系
いわゆるギークの敵！

14. Webを華やかに演出
• Video
動画コンテンツをブラウザ内蔵のプレイヤーで再生できる
<video src=”movie.webm” autoplay loop controls>
• Audio
動画コンテンツをブラウザ内蔵のプレイヤーで再生できる
• Canvas
2Dグラフィックを描画できる。JavaScriptで描画をコントロール
• SVG
Scalable Vector Graphics ベクターグラフィックを記述するXML言語
• WebGL
3Dグラフィックを描画できる。JavaScriptで描画をコントロール

15. ビジュアル系というか、
グラフィック系ですよね。

16. ビジュアル系というか、
グラフィック系ですよね。
若い子はすぐ顔で転ぶ

17. ビジュアル系というか、
グラフィック系ですよね。
若い子はすぐ顔で転ぶ
ころびやがって！！（怒）

18. TYPE. Two

19. TYPE. Two
守ってやるよ系

20. TYPE. Two
守ってやるよ系
安定と安心をゲットしたいアナタのHTML5

21. データを保存し、安全に使う
• Web Storage API
クライアントにデータを保存する仕組み。クッキーのようなもの
• Application Cache
Webリソースをキャッシュに保存。オフラインでも表示可能に
• Web Sql Database API
Sqlでクライアントサイドのデータベースを利用する仕組み
現在標準化が中止されているが、一部のブラウザで利用可能
• Indexed Database API
クライアントサイドのデータベースを利用する仕組み
標準化が検討されている

22. 「だいじょうぶ、
オレがお前を守ってやるよ。」

23. 「だいじょうぶ、
オレがお前を守ってやるよ。」
わかっちゃいるけど、うれしいですよね♥

24. TYPE. Three

25. TYPE. Three
ふだんは無口、
でも仕事はすごい系

26. TYPE. Three
ふだんは無口、
でも仕事はすごい系
白シャツでうでまくりって、
なんかステキじゃないですか！？

27. 強力なバックグラウンド機能
• Geolocation API
位置情報サービスを利用できる
• Drag and Drop API
ドラッグ&ドロップ機能。ブラウザ内だけでなくブラウザの外からの
D&Dもサポート。
• File API
ローカルのファイルの内容を読み込むための仕組み
• Webworker API
マルチスレッド機能を提供。重い処理をバックグラウンドで処理させ
ることができる。
• WebSocket API
双方向通信が利用可能になる。リアルタイムな通信処理が可能とな
る。

28. 「やばい、グッときた。」
by 篠原⃝子

29. 「やばい、グッときた。」
by 篠原⃝子
ちょっと古いですね…

30. ゲット
どのタイプをHackする？
• まずは理想を持つことが重要。
どんなものを作りたいか？ Ideathonで考えてね！
• 本命とガッツリつきあう。
一つの機能をカスタマイズしてリッチなコンテンツを作成
• とりあえずフタマタ、３マタで様子をみる。
複数の機能を組み合わせて新しいサービスを開発
• CSS3 もかなりのイケメン！
HTML5と組み合わせることで表現豊かなコンテンツを作成できる。
• デートには下調べが重要！
ブラウザによって使えない機能がある。（実装がまちまち）
使いたい機能が利用できるブラウザで開発しよう。

31. イケメンは、
取り扱いが難しい！？

32. 来週、HTML5と
楽しくつきあってください♥

33. Happy Hacking !