HTML5の話

野 崎 弘 幸

2012.03.10 九州GTUG in 鹿児島

自己紹介野崎 弘幸

鹿児島企業に所属しています。

日本Androidの会鹿児島支部長 / 運営委員

不定期でAndroidの勉強会やってます。Android技術に関する勉強会。アプリ作成の技術とか、組込みとか、クラウドやHTML5のことも。

アジェンダ

もう一般的。HTML5

HTML5なマークアップ

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

もう一般的。HTML5

右肩上がりの注目度！

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

JAGKでもやった。

2010年6月８日

日本Androidの会鹿児島支部 第3回勉強会

「HTML5とスマートフォン」（野崎 弘幸）

2010年11年16日

日本Androidの会鹿児島支部 第7回勉強会

AndroidはHTML5の羊の夢をみるか？（森 史憲）

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

HTML5なマークアップ

HTML5で何が変わる？ウェブページがリッチに。

そして、ブラウザがプラグインなしで、

アプリケーションの基盤を担えるように。

まさにこれから旬な技術。

HTML5はWEBの最新技術全般

関連API等の周りの技術も含めると覚えることたくさん。

video要素やcanvas要素などのマルチメディア系File、Strage、Cache等のデータ系WebSocket、Messaging等の通信系

javascriptも必須

　などなど。

ともあれ、まずはマークアップを。

バリバリの開発者から、HTMLのマークアップは、

苦手だと言うのをよく耳にします。

プログラム言語は、エラーが出るが、HTMLは白黒はっきりさせにくい。

どの要素が適切かは、文脈に依存する。人が判断するので、少なからず解釈の違いもでる。

マークアップをマスターするには。

作法を覚えて、そして書いてみて、ひたすらにノウハウをためるべし。

W3C HTML5仕様の最終草案で、規定されている要素は108個。

ここを読めばだいたいバッチリ。

http://diveintohtml5.info/

コーポレートサイトに

HTML5を。

HTML5をどう取り入れるか？

具体例として、

手を付けやすい身近な感じのコーポレートサイトに

HTML5を取り入れるという前提で

考えてみたいと思います。

マークアップは、ザクッとこんな感じ

DOCTYPE、html、headの各要素をHTML5の作法で。

新要素 を気にして書く。(section、nav、article、aside、hgroup、header、footer)

　　　

セクションごとにh1を書けるのです。

フォームのバリデーションが便利な感じです。

HTML5未対応のブラウザに対応

新しい要素に、

display:blockスタイルを定義。

HTML5有効化スクリプトを適用。http://code.google.com/p/html5shim/

pjaxを取り入れてみる。

HTML5のpushStateを使えば、ブラウザの履歴を操作できる。

よく例に出されるのがGitHubのあれ。

pjax = pushstate + ajax

第19回html5とか勉強会 pjaxhttp://www.slideshare.net/KensakuKOMATSU/19html5

Media Queriesを取り入れてみる。

CSS３の機能。

画面サイズによってスタイルを変える。

既存のスタイルを上書き適用。

未対応のブラウザにはこれで対応。http://code.google.com/p/css3-mediaqueries-js/

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

http://cybercenter.jp/

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