1. HTML5制作の現在
HTML5-WEST.jp×gloops×Web CAT Studio
2012.8.29 BathTimeFish
村岡正和

2. 自己紹介
むらおか まさかず
村岡正和 @bathtimefish
Webアプリケーション開発 IT業務システム設計/開発
Webサービス導入/事業戦略コンサルティング
HTML5-WEST.jp代表 / 京都GTUG / CSS Nite in OSAKA / 神戸ITフェス
ティバル実行委員など
HTML5-WEST.jp
HTML5 JavaScript
Python
中国拳法 主夫になりたい
炊事 Google Apps
http://html5-west.jp/

3. HTML5とは
• HTMLの次のバージョンの仕様
• 現在W3C Working Draft Last Call
• 勧告を待たずに多くのブラウザが実
装をはじめている

4. イマココ

5. HTML5の特長

6. HTML5の特長
• マシンリーダブルな文章構造
• Webアプリケーションに必要な
多くの機能

7. HTML5の特長
• マシンリーダブルな文章構造
• Webアプリケーションに必要な
多くの機能
今日はこっち

8. 現在注目の機能
WCS x Gloops x
• Canvas API
• CSS3
特にゲーム開発で注目されている
HTML5-WEST.jp

9. Canvas API
WCS x Gloops x
• JavaScriptでグラフィック描画が可能
• グラッフィック系プラグイン不要
• スマートフォンでのグラフィック描画では鉄板
• 簡単高機能
• 最近はスマフォでもハードウェアアクセラレート
HTML5-WEST.jp

10. HTML5-WEST.jp
http://www.spielzeugz.de/html5/space-noodles/
http://roxik.com/mona/
DEMO

11. CSS3
WCS x Gloops x
• 超簡単高機能 そもそもプログラミング言語
じゃない
• 要素を高度に装飾、移動、変形できる
• モノによってはCanvasよりも手軽に高速なア
ニメーションができることも
• iOSは古くからハードウェアアクセラレート
している
HTML5-WEST.jp

12. HTML5-WEST.jp
https://developer.mozilla.org/en-US/demos/detail/
cssplay-go-slide-v11/launch
http://panasonic.jp/lamdash/dna/
DEMO

13. つかいどころ
WCS x Gloops x
最近PVが多くなってきたデバイスのWebブラウザ
HTML5-WEST.jp

14. つかいどころ
WCS x Gloops x
最近PVが多くなってきたデバイスのWebブラウザ
スマートデバイスとか
HTML5-WEST.jp

15. つかいどころ
WCS x Gloops x
最近PVが多くなってきたデバイスのWebブラウザ
スマートデバイスとか
スマートデバイスとか
HTML5-WEST.jp

16. つかいどころ
WCS x Gloops x
最近PVが多くなってきたデバイスのWebブラウザ
スマートデバイスとか
スマートデバイスとか
あと、
HTML5-WEST.jp

17. つかいどころ
WCS x Gloops x
最近PVが多くなってきたデバイスのWebブラウザ
スマートデバイスとか
スマートデバイスとか
あと、
スマートデバイス
HTML5-WEST.jp

18. スマートデバイスな理由
WCS x Gloops x
• 今売れている
• WebブラウザでFlashが動作しない
• HTML5非対応Webブラウザがない
• PCよりも急速にニーズが拡大している
• HTML5技術でアプリを開発できる手
段が豊富
HTML5-WEST.jp

19. いいことずくめにみえるけど、実際そうじゃない
（経験談）

20. 経験談
WCS x Gloops x
• Webブラウザごとに実装や動作がまちまち
• 詳細な動作検証と開発技術のチョイスに時間
がかかる
• 言ってるとおりに動かない
• Androidが特に大変 http://slidesha.re/IzSgd5
HTML5-WEST.jp

21. 結局いまのところクロスブラウザ対応がWebクリ
エイターの腕のみせどころ。

22. 結局いまのところクロスブラウザ対応がWebクリ
エイターの腕のみせどころ。
はっきりいってPCよりしんどいです。
がんばってください

23. Progressive enhancementなどのコンセプトでい
かにクライアントとトレードオフができるかが
Webディレクターの腕のみせどころ。

24. 閑話休題

26. Q. Flashは死ぬのか？

27. A. もうそろそろダマされんな。

28. なぜHTML5を学ぶのか？

29. HTML5-WEST.jp
HTML5は次世代のWeb標準技術。
同時に多種多様なWeb製作技術の
ひとつでもある。

30. HTML5-WEST.jp
HTML5は次世代のWeb標準技術。
同時に多種多様なWeb製作技術の
ひとつでもある。

31. HTML5-WEST.jp
HTML5の登場でまたひとつ選択肢が広がった。
HTML5を深く学ぶ。
と同時に、既存の技術の造詣をさらに深める。
それぞれの違いを知る事で、ケースごとに最適な技
術選択する。
それが現在のWeb制作の本質である。

32. Thanks！