HTML5入門Flashとおやつの会 #2

by Takeshi Igarashi

Flash使いに捧ぐ

本日の内容

• HTML5とは何か

• HTML5の新機能紹介

• HTML5事例紹介

HTML5とは何か

• 現在、絶賛仕様策定中のHTMLの新バージョン

• 現状、Flash等プラグインによって提供されているRIA（rich internet application）を標準でサポートすることを目標としている

• A社のSteveがHTML5を盾に、自社モバイル製品へのFlash Playerの搭載を拒んでいることで有名

HTML5の新機能• セマンティックな新しい要素（タグ）

• 2D/3Dグラフィックス• 動画/音声の再生• 入力フォームの機能強化• オフラインWebアプリケーション• クライアントサイドストレージ• バックグラウンド処理• サーバープッシュ・双方向処理

• クロスドメイン通信• ローカルファイルの読み取り• OSとの連携強化（drag & drop etc.）

この中からピックアップしてご紹介します。

2D/3Dグラフィックス

• canvas要素を使って自由に図形を描画することができます。• 元々、canvasはAppleの独自仕様でした。今ではInternet Explorerを除いた主要ブラウザで実装されています（IE9では対応）。

デモを見るcanvasを使って図形を描いたりしてみる

動画/音声の再生

• video/audio要素を使って、プラグインなしに動画、音声を再生出来ます。

• 動画のコーデック。今のところH.264 vs Theora。そこにGoogleがVP8をオープンソース化して投入。しばらく様子見。

• 現状の解決策。a. コーデックの異なるソースを2つ用意するb. H.264だけ用意して、FirefoxとOperaを対象外にする（IE9、Safari、Google ChromeはH.264サポート）c. やっぱFlashだよね

デモを見るvideoを使った動画再生

オフラインWEBアプリケーション

• オフラインアプリケーションキャッシュ。HTMLやバイナリファイルをキャッシュしておける。

• キャッシュするためには、manifestファイルを置いて、キャッシュするファイルを明示します。

• キャッシュしないファイルを指定することもできます。• manifestファイルを更新することでキャッシュをクリア出来ます（但しバイト数の変化で判定しているので、注意）

クライアントサイドストレージ

• ローカルデータベースもいいのですが、もう少しお手軽にデータを保存できるのがWeb Storage。

• そのセッションに限りデータを保持するsessionStorageと永続的にデータを保持するlocalStorageの2種類があります。

• デモはこちらから

バックグラウンド処理

• Web Workersを使うと、バックグラウンドでJavaScriptを走らせることが出来ます。

• 重たい処理をさせてUIがもたついたり、最悪フリーズしてしまうような事態を避けられます。

• デモはこちらから

OSとの連携強化（drag & drop etc.）

• ドラッグ＆ドロップが出来ます。• 実例をご覧下さい↓http://studio.html5rocks.com/#Photos

HTML5 事例紹介

• canvasを駆使！Chrome Experimentshttp://www.chromeexperiments.com/

• canvas × videoHTML5 Video Destructionhttp://www.craftymind.com/factory/html5video/CanvasVideo.html

HTML5 参考サイト

• HTML5の新機能が試せるHTML 5 Demos and Exampleshttp://html5demos.com/

• AppleによるHTML5紹介。必見。http://www.apple.com/html5/

• HTML5&CSS3の対応状況を判別するJSライブラリModernizrhttp://www.modernizr.com/

本デモ　引用元

• 日経ソフトウェア2010年9月号特集1「無料でここまでできる！最新Web技術」http://itpro.nikkeibp.co.jp/article/MAG/20100720/350407/

• HTML5サンプル集（株式会社あゆた）http://ayuta.co.jp/html5-samples/

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