2012/03/10 九州GTUG in 鹿児島 「HTML5の話」

1. HTML5の話
2012.03.10
九州GTUG in 鹿児島
野崎 弘幸

2. 自己紹介
野崎 弘幸
鹿児島企業に所属しています。
日本Androidの会鹿児島支部長 / 運営委員
不定期でAndroidの勉強会やってます。
Android技術に関する勉強会。
アプリ作成の技術とか、組込みとか、
クラウドやHTML5のことも。

3. アジェンダ
もう一般的。HTML5
HTML5なマークアップ
コーポレートサイトにHTML5を。

4. もう一般的。HTML5

5. 右肩上がりの注目度！

6. Amazonで検索すると、
参考書もいっぱい。

7. JAGKでもやった。
2010年6月８日
日本Androidの会鹿児島支部 第3回勉強会
「HTML5とスマートフォン」（野崎 弘幸）
2010年11年16日
日本Androidの会鹿児島支部 第7回勉強会
AndroidはHTML5の羊の夢をみるか？（森 史憲）

8. GDD2011でも
HTML5関連セッション多かった。

9. HTML5なマークアップ

10. HTML5で何が変わる？
ウェブページがリッチに。
そして、
ブラウザがプラグインなしで、
アプリケーションの基盤を担えるように。
まさにこれから旬な技術。

11. HTML5はWEBの最新技術全般
関連API等の周りの技術も含めると
覚えることたくさん。
video要素やcanvas要素などのマルチメディア系
File、Strage、Cache等のデータ系
WebSocket、Messaging等の通信系
javascriptも必須
などなど。

12. ともあれ、まずはマークアップを。
バリバリの開発者から、
HTMLのマークアップは、
苦手だと言うのをよく耳にします。
プログラム言語は、エラーが出るが、
HTMLは白黒はっきりさせにくい。
どの要素が適切かは、文脈に依存する。
人が判断するので、少なからず解釈の違いもでる。

13. マークアップをマスターするには。
作法を覚えて、そして書いてみて、
ひたすらにノウハウをためるべし。
W3C HTML5仕様の最終草案で、
規定されている要素は108個。

14. ここを読めばだいたいバッチリ。
http://diveintohtml5.info/

15. コーポレートサイトに
HTML5を。

16. HTML5をどう取り入れるか？
具体例として、
手を付けやすい身近な感じのコーポレートサイトに
HTML5を取り入れるという前提で
考えてみたいと思います。

17. マークアップは、ザクッとこんな感じ
DOCTYPE、html、headの各要素をHTML5の作法で。
新要素 を気にして書く。
(section、nav、article、aside、hgroup、header、footer)
セクションごとにh1を書けるのです。
フォームのバリデーションが便利な感じです。

18. HTML5未対応のブラウザに対応
新しい要素に、
display:blockスタイルを定義。
HTML5有効化スクリプトを適用。
http://code.google.com/p/html5shim/

19. pjaxを取り入れてみる。
HTML5のpushStateを使えば、
ブラウザの履歴を操作できる。
よく例に出されるのがGitHubのあれ。
pjax = pushstate + ajax
第19回html5とか勉強会 pjax
http://www.slideshare.net/KensakuKOMATSU/19html5

20. Media Queriesを取り入れてみる。
CSS３の機能。
画面サイズによってスタイルを変える。
既存のスタイルを上書き適用。
未対応のブラウザにはこれで対応。
http://code.google.com/p/css3-mediaqueries-js/

21. 今回、HTML5で作ってみたサイト。
お休みの日はサービス作るよプロジェクト。
http://cybercenter.jp/

22. ご清聴ありがとうございました。