【A2】HTML5テクニカルセッション

HTML5アプリ開発入門

エンバカデロ・テクノロジーズ
エヴァンジェリスト 高橋智宏
ttakahashi@embarcadero.com

アジェンダ• HTML5とは?
• HTML5の基礎• Audio• Video• Canvas• WebGL(Web-Based Graphics Library)• AppCache(アプリケーションキャッシュ)• Mobile(iOS, Android, BlackBerry, WP7)
• HTML5 Builder 情報

HTML5とは?
• 実はまだ標準化の作業中...
• HTML5 = HTML5 + CSS3 + JavaScript APIs
• ブラウザのサポート状況– IE 10, Firefox 14, Chrome 21, Opera 12, Safari– iOS(△), Android (△), BlackBerry (△), Windows Phone 7.x(×)• [The HTML5 test]– ブラウザのサポートレベルを判定してくれるWebサイト– http://html5test.com/index.html• http://html5test.com/compare/browser/index.html

HTML5とは? (続き)HTML5の基礎• DOCTYPE - <!DOCTYPE html>• 文字コード - <meta charset="UTF-8">• CSS - <link rel="stylesheet" href="html5.css" />– type="text/css" は省略可• JavaScript - <script>...</script>– type="text/javascript" は省略可• Elements - Section/Grouping content/Text-level semantic/Interactive––––<header>,<footer>,<section>,<article><figure>,<figcaption><mark><details>,<summary> etc…

• Forms - Field validation/Field types––––<input type="text" required><input type="text" pattern="..."><input type="email"><input type="date"> etc…

• HTML4 - <dl>,<dt>,<dd> etc...

例:Firefox 12

Audio• PCM(.wav), AAC(.aac), MP3(.mp3), Ogg Vorbis(.ogg), WebM(.webm)<audio controls preload="auto"><source src="audio/sample.mp3" type="audio/mp3"><source src="audio/sample.ogg" type="audio/ogg"><source src="audio/sample.wav" type="audio/wav"><p>audioタグがサポートされていません</p></audio>• CSS - visibility:hidden;• JavaScript - play() メソッド etc…

Video• MPEG-4(.mp4), H.264(.mp4), Ogg Theora(.ogv), WebM(.webm)<video id="video" width="768" preload="auto" controls poster="poster.jpg"><source src="http://cuepoint.org/dartmoor.mp4"><source src="http://cuepoint.org/dartmoor-mobile.mp4"><source src="http://cuepoint.org/dartmoor.webm"><source src="http://cuepoint.org/dartmoor.ogv"></video>• Cuepoint JS(http://cuepoint.org/)– A plugin for adding cue-points and subtitles to HTML5 Video– 字幕やスキップ

Canvas• 元々は、2004年、AppleのMac OS XのDashboardウィジェットで使われ始めた– Safari以外のブラウザでもJavaScriptコードでCanvas APIを利用できるようになった• 2Dグラフィック向けJavaScript API - 2D context<canvas id="mycanvas" width="500" height="500" style="border:1px solid blue;"></canvas>…
var canvas = document.getElementById("mycanvas");var context = canvas.getContext("2d");…

• 座標系• マウスのトラッキング• FlashCanvas– 古いIE向け。FlashでHTML5 Canvasをエミュレート– Free版 または Pro版
– http://flashcanvas.net/

WebGL(Web-Based Graphics Library)• WebGL is a cross-platform, royalty-free web standard for a lowlevel 3D graphics API based on OpenGL (ES) 2.0, exposed throughthe HTML5 Canvas element as Document Object Model interfaces.
• 3Dグラフィック向けJavaScipr API - 3D context• 非営利団体のKhronos Groupで管理されている– http://www.khronos.org/webgl/• WebブラウザのWebGLサポートの有無のチェック用ページ– http://get.webgl.org/– Firefox 14, Chrome 21– Android(Opera Mobile), BlackBerry(PlayBook)

AppCache(アプリケーションキャッシュ)• Webアプリ内の特定コンテンツをWebブラウザ側に強力にキャッシュしておく– Webアプリへの初回アクセス時にmanifestファイルにしたがってキャッシュ– 2回目以降はキャッシュを優先でコンテンツを表示(Webアクセスが遮断されてもOK)• [HTML]– <html manifest="cache.manifest"> … </html>• [.htaccess]– AddType text/cache-manifest .manifest• [cache.manifest]

CACHE MANIFEST#Version:1#Comment
CACHE:
css/html5.css
js/jquery-1.7.1.min.jsindex.html#not cached
NETWORK:Mobile(iOS, Android, BlackBerry, WP7)
• Webブラウザ– iOS– Android– BlackBerry OS 7.1– Windows Phone 7.5

Safari, Chrome(中身はSafariと同じ)
Opera Mobile, Firefox, Chrome, 標準ブラウザ
標準ブラウザ(WebKit)
IE9• <meta name="viewport" content="width=device-width, initialscale=1.0, user-scalable=no" />• jQuery Mobile– http://jquerymobile.com/• ThemeRoller for jQuery Mobile– http://jquerymobile.com/themeroller/index.php• PhoneGap– http://phonegap.com/

HTML5 Builder 情報• PHP 5.3.6 (32bit) を統合– Apache 2.2.22 (Win32) を統合– Xdebug 2.2.1 を統合• RPCL(RadPHP Component Library) 5.0– データベースアクセスコンポーネントは、下位レイヤを、「オープンソースのADOdb」から「PHP標準のPDO(PHP Data Object)」に切り替えました– Zend Framework 1.11.11– Smarty 3.1.11– jQuery 1.7.1– jQuery Mobile 1.1.1• ThemeRollerも統合– PhoneGap 1.8.1• PhoneGap Build も統合• RadPHP XE2 に搭載していたqooxdoo系GUIコンポーネントは削除されました…

HTML5 Builder 情報(続き)• HTML Code Insight• JavaScript Code Insight• JavaScript デバッガの統合[ JavaScript Code Insight ][ JavaScript デバッガ ]Q&AThank You 