Flash使いに捧ぐ HTML5入門
-
Upload
takeshi-igarashi -
Category
Technology
-
view
3.428 -
download
0
Transcript of Flash使いに捧ぐ HTML5入門
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/
ご静聴ありがとうございました