androidはHTML5の羊の夢をみるか？

Do “android” Dream of HTML5 Sheep?

コーディングデザイン森　史憲

2011年2月15日火曜日

自己紹介(1/3)森　史憲もり　ふみのり

鹿児島市出身昨年の9月末に16年ぶりに帰ってきました。

システムエンジニア、人形アニメ制作を経てWeb制作へ

2011年2月15日火曜日

自己紹介(2/3)

HTML/CSSコーディング

Webアクセシビリティ達成基準策定

雑誌記事/書籍執筆

2011年2月15日火曜日

自己紹介(3/3)

Loveカレー!GOOD NEIGHBORS.、美味！

Love地ビール!城山観光ホテル、美味！

Love鹿児島!温泉、自然、食べ物、酒、歴史…資源豊富で最高！

GOOD NEIGHBORS.のカレー

2011年2月15日火曜日

HTML5&API

2011年2月15日火曜日

改めてHTML5って？

Webアプリケーションを作りやすくするために策定中の新しい規格。

※Webアプリケーション？＝Web上で動くソフトウェア。例）twitter、Gmail、ネットバンキング、ネットショップ、BBS、etc...

2011年2月15日火曜日

HTML5 & API

もっと細かい意味付け

プラグイン不要

オフライン閲覧対応

Javascript APIs

android対応状況

本日の内容

2011年2月15日火曜日

例)グループ化する枠現状:•枠(div)

ポイント1：もっと細かい意味付けで検索エンジン向けに効果！

2011年2月15日火曜日

例)グループ化する枠HTML5:•情報のグループの最初(header)•意味の完結した記事(article)•見出しから始まる情報のグループ(section)•関連情報(aside)•情報のグループの最後(footer)

ポイント1：もっと細かい意味付けで検索エンジン向けに効果！

2011年2月15日火曜日

<div id="header">...</div><div id="contents"><div class="article"><div class="section">...</div><div class="section">...</div><!--/article--></div><div class="related_contents">...</div><!--/contents--></div><div id="footer">...</div>

現状:

ポイント1：もっと細かい意味付けで検索エンジン向けに効果！

2011年2月15日火曜日

<header>...</header><div id="contents"> <article><section>...</section><section>...</section></article><aside>...</aside><!--/contents--></div><footer>...</footer>

HTML5:

ポイント1：もっと細かい意味付けで検索エンジン向けに効果！

2011年2月15日火曜日

GoogleはHTML5に対応しているようす※ 昨年末からYahoo!検索はGoogleを採用

BingはHTML5に未対応のようす

結果、SEO効果にバラつきあり。あまりおすすめしない。特にh1タグを1ページに複数入れないほうがいい。

実装するなら:

ポイント1：もっと細かい意味付けで検索エンジン向けに効果！

2011年2月15日火曜日

現状:objectタグによる埋め込みはプラグインの使用が前提。➡flash player➡windows media player➡quicktime playeretc...

ポイント2： プラグイン不要で多くの環境に動画/音声を実装！

2011年2月15日火曜日

HTML5:videoタグ, audioタグによる埋め込み➡プラグイン不要

ポイント2： プラグイン不要で多くの環境に動画/音声を実装！

2011年2月15日火曜日

<object data="sample.swf" type="application/x-shockwave-flash" width="400" height="300"><param name="movie" value="sample.swf" /></object>

現状:

ポイント2： プラグイン不要で多くの環境に動画/音声を実装！

2011年2月15日火曜日

<video src="sample.mp4" width="400" height="300" ></video>

HTML5:

<video｠width="320"｠height="240"><source｠src="sample.ogv"｠type="video/ogg"><source｠src="sample.mp4"｠type="video/mp4"><source｠src="sample.webm"｠type="video/webm"></video>

実際は大人の都合で複数ファイル必要…

ポイント2： プラグイン不要で多くの環境に動画/音声を実装！

2011年2月15日火曜日

IE、Safariは動画コーデックにH.264を採用。

Firefox、Operaは動画コーデックにogg/theoraを採用。

結果、動画1つあたり最低2ファイル準備する必要ある（音声ファイルも同様）。動画はYouTubeにアップしてiframeで読み込む方式にすると楽。

ポイント2： プラグイン不要で多くの環境に動画/音声を実装！

実装するなら:

2011年2月15日火曜日

coffee <br />

on saturdays のコーヒー

2011年2月15日火曜日

現状:オフライン時はWebサイトを閲覧できない。

ポイント3： オフライン閲覧対応で閲覧ストレスを低減！

2011年2月15日火曜日

HTML5:オフライン時でもWebサイトを閲覧できる。

ポイント3： オフライン閲覧対応で閲覧ストレスを低減！

2011年2月15日火曜日

現状:

ポイント3： オフライン閲覧対応で閲覧ストレスを低減！

2011年2月15日火曜日

HTML5:

ポイント3： オフライン閲覧対応で閲覧ストレスを低減！

2011年2月15日火曜日

静的ページなら実装可能。

※キャッシュするファイルを記載するmanifestファイルを更新するとキャッシュファイルも更新されますよ～。

実装するなら:

ポイント3： オフライン閲覧対応で閲覧ストレスを低減！

2011年2月15日火曜日

HTML5:サイトごとのデータはユーザー環境のデータベースにたくさん保存できる

スクリプトで異なるドメインのリソースを読める

ユーザー環境のファイルの読み/書きができる

サーバと双方向通信（全二重通信）ができるなどなど。

ポイント4： 多くのJavascript API で新しい閲覧体験を実装！

2011年2月15日火曜日

HTML 5 Demos and Exampleshttp://html5demos.com

ポイント4： 多くのJavascript API で新しい閲覧体験を実装！

2011年2月15日火曜日

実装度はブラウザごとにばらばら。

環境（ブラウザ、端末）を限定する必要あり。

そもそも仕様策定中なので変更の可能性あり。

実装するなら:

ポイント4： 多くのJavascript API で新しい閲覧体験を実装！

2011年2月15日火曜日

androidのHTML5対応

状況

2011年2月15日火曜日

THE HTML5 TESThttp://www.html5test.com

右図：android2.2のエミュレータの結果。

テストの満点は300点。

手持ちの端末のブラウザをテストしてみましょう

2011年2月15日火曜日

androidのHTML5対応状況

もっと細かい意味付け完全ではない。

プラグイン不要video、audioは外部プレーヤーかFlashを利用。

オフライン閲覧対応実装可能。

Javascript APIsまだ未対応APIは多い。

2011年2月15日火曜日

ちなみにPCブラウザは…ブラウザ スコア

Chrome 9 242Safari 5 208

Firefox 4 Beta 207Firefox 3.6 139IE 9 Beta 97

IE 8 27

2011年2月15日火曜日

本日のまとめ！

2011年2月15日火曜日

HTML5の羊

もっと細かい意味付け

プラグイン不要

オフライン閲覧対応

Javascript APIs

2011年2月15日火曜日

現状の羊もっと細かい意味付け新タグは検索エンジンは追いついてないのもある。SEO効果は確実とは言えない

プラグイン不要動画/音声の組み込みは新タグだと複数のファイルを用意する必要あり、面倒

2011年2月15日火曜日

現状の羊オフライン閲覧対応オフライン閲覧は静的ページなら現状でも実装可能

Javascript APIsどのJavascript APIも仕様は策定中(HTML5の仕様も策定中)

2011年2月15日火曜日

ありがとうございました！コーディングデザインmori@ codingdesign.jp

twitter：@mr_moo555

facebook：Fuminori Mori

書籍「WebデザイナーのためのHTML5入門（仮）」は今年の5月か6月あたりに技術評論社から出版予定！

写真画像は森所有のもの、HTML5のロゴやandroidのキャラクター画像は広く配布されているものです。

ムッフカフェのカプチーノ

2011年2月15日火曜日

参考URL

2011年2月15日火曜日

参考URLHTML5http://www.w3.org/TR/html5/

W3C - HTML 5 differences from HTML 4 日本語訳http://www.html5.jp/trans/w3c_differences.html

JAVASCRIPT INTERFACES CURRENT STATUShttp://www.w3.org/standards/techs/js#w3c_all

HTML 5 Demos and Exampleshttp://html5demos.com

2011年2月15日火曜日

参考URLHTML5 & CSS3 Support, Web Design Tools & Support ~ FindMeByIP ~http://www.findmebyip.com/litmus

HTML5でのSEO実験、意外にもYAHOOでは安定して高評価　bingは・・　SEO対策ホームページ SEO QUICK http://seo-quick.com/archives/113.html

YAHOOでの検索結果順位が安定中　SEO対策ホームページ SEO QUICK http://seo-quick.com/archives/124.html

2011年2月15日火曜日

参考URLAdobe Flash をクロスブラウザで埋め込み表示させる Valid な XHTML 1.0/1.1 - アリゾナではもう働きたくない社長の blog - キッススタッフブログ (Xiss Staff Blog)http://xiss.g.hatena.ne.jp/orzccc/20080716/1216226479

双方向通信/用語解説辞典/NTTPC ソリューション・ネットワーク事業http://www.nttpc.co.jp/yougo/%E5%8F%8C%E6%96%B9%E5%90%91%E9%80%9A%E4%BF%A1.html

検索エンジンはHTML5とHTML4をすでに区別していますか -html5-developers-jp | Google グループ？https://groups.google.com/group/html5-developers-jp/browse_thread/thread/4c8625d0f49ffd48?hl=ja

2011年2月15日火曜日