ぎゅ～っと濃縮、HTML5＆
Attractive HTML5
@shoitoHTML5-FIT
マークアップからAPI、その魅力まで
自己紹介/shoito
宮城 → 福井 [3.5y]
ソフトウェア設計ツールの開発
Flex(Flash)アプリ開発 [3y]
技術系コミュニティ
HTML5に興味を持った訳
ITシステムの変遷
メインフレーム/ダム端末～1980年代頃
Web1990年代中頃～
C/S 1990年代初頭～
RIA2003年後半～
低 高
高
コストパフォーマンス
ユーザビリティ
参考文献：RIAシステム構築ガイド Essential 2007 p005
HTML5とワタシ
Hokuriku.lang - HTML52009/10
HTML5 Tech Talk in 金沢2009/10
WCAF Seminar Vol.3 - HTML52010/03/20
Chrome Extensions with HTML5作ろう会2010/04/12
Google Hackathon for Chrome Extension2010/04/17, 24
まずはご覧ください
9elements.com
chrome://newtab
これまでのWebの制約が変わります
ここからの目的
•HTML5の可能性を知ってもらうこと•HTML5に興味を持ってもらうこと•HTML5を”分かった気”になってもらうこと
お話すること
•HTML5の概要•HTML5の構文, 追加される要素/属性•関連APIの拡張で実現される機能•HTML5の魅力
今、HTMLはVer. 4大前提
Web Applications 1.0HTML5
Microdata
canvas 2D Context
Cross-document messagingChannel messaging
device
Web workers
Web storage
Server-sent events
Web sockets
HTML5
HTML5 Microdata
HTML5 Communications
HTML5 2D Context
HTML Device
Web workers
Web storage
Server-sent events
Web sockets
WHATWG W3C
HTML５と関連仕様
HTML5
Indexed Database API
Geolocation API
Web workers
WebSocket
Web Storage
File API
Web SQL Database
...etc
マークアップとAPIの仕様HTML5
前方互換性と後方互換性HTML5の設計原則
革新より発展を優先するHTML5の仕様策定スタンス
マークアップはよりセマンティックにWebアプリはよりリッチに
HTML5がもたらす変化
Webの技術 - これから
HTMLデータ構造を表現
CSS見栄えを表現
JavaScript各種APIの拡張により
機能を実現
HTMLデータ構造を表現
CSS見栄えを表現
JavaScript各種APIの拡張により
機能を実現
Webの技術 - これから
HTMLデータ構造を表現
CSS見栄えを表現
JavaScript各種APIの拡張により
機能を実現
Webの技術 - これから
新しく追加されるタグ
•セクショニングする新たなタグ• section, article• header, footer• aside, nav, ...• canvas, video, audioタグ• ...etc
削除されるタグ• applet• big• font• frame• strike/s• tt• ...etc
セクショニングする新たなタグ<article>ブログやニュース記事における
記事本体を表現
<section>文書などにおける一般的な
セクションを表現
<aside>ページ内容の主題と関連が
あまりない内容を指定
<footer>セクションのフッタを表現
<header>セクションのヘッダを指定
<nav>ページ内のリンクなど
ナビゲーション情報を保持
...etc
...etc<mark>マーキングされたテキストを表現
<progress>ダウンロードや実行中のタスクの
進捗を表現
<command>ユーザーが実行するコマンドを表現
<time>日付や時刻などを表現
<datalist>inputタグのlist要素と組み合わせて
入力候補を指定
<embed>プラグインを利用するコンテンツに
利用
<meter>ディスク容量などの測定値を表現
...etc
HTML4の構造 HTML5の構造
html5を使ったブログのデザイン -html5doctor- -HTML5.JP
入力サポート
•Non-JavaScriptでバリデーションチェック•データの種類• email• url• date• password• tel• number• range
<input name="pass" type="password">
demo
canvasタグ<canvas id=”sky”></canvas>
canvasタグ
<canvas id=”sky” width=”320” height=”240”/>
<script> var canvas = document.getElementById(“sky”); var context = canvas.getContext(“2d”); context.fillStyle = “rgb(255, 0, 0)”; context.fillRect(0, 0, 100, 100);</script>
canvasに描画するにはJavaScriptを使う
名前を指定してcanvas領域を置く
video<video src=”movie.mov”></video>
videoタグ
• W3Cはタグの規定のみ• コーデック/コンテナは規定していない
ブラウザの対応
Firefox ogg/theoraOpera ogg/theoraSafari H.264
Google Chrome ogg/theora, H.264
videoタグ
<video src=”me.mov” controls=”true”/>
<video controls=”true”> <source src=”me.mov” type=”video/quicktime”/> <source src=”me.ogg” type=”video/ogg; codecs=’theora, vorbis’”/></video>
ブラウザ毎にサポートフォーマットが違う
複数フォーマットを指定しておくのが有効
src属性に動画ファイルのパスを指定する
demo
独自データ属性
<ul> <li data-country=”JP”>ハナミズキ</li> <li data-country=”US”>恋のマイアヒ</li> ....</ul>
“data-” で始まるサイト独自の属性
適当な属性や要素がない時に独自定義
XHTML1からHTML5へその変換方法
<!DOCTYPE html PUBLIC “-//W3C/DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR
/xhtml1/DTD/xhtml1-strict.dtd”>
DOCTYPEを変更するだけ
<!DOCTYPE html>
XHTML / HTML5の誤解
JavaScript API拡張アプリケーション・プラットフォームとしての
機能性を実現
HTMLデータ構造を表現
CSS見栄えを表現
JavaScript各種APIの拡張により
機能を実現
Webの技術 - これから
関連API•Application Cache API• Communication API•Geolocation API•Web Storage•Web SQL Database•Web Workers•Web Socket• File API• ...etc
Application Cacheオフライン実行
CACHE MANIFESThello.htmlhello.js
NETWORK:server.cgi
ネットワークに接続していなくてもアプリケーションを利用できるようにするAPI
マニフェストファイルにファイルを列挙する
<!DOCTYPE html><html manifest=”hello.manifest”>
Communication APIウィンドウ間連携
Cross Document Messaging
window.addEventListener(“message”, function() { ...}, false);
ウィンドウ間でメッセージの送受信を行うAPI
メッセージの受信
postMessage(“hogehoge”, “http://example.com/”);
メッセージの送信
Geolocation API位置情報
function showMap(position) {
....
}
navigator.geolocation.getCurrentPosition(showMap);
ブラウザ経由で位置情報を取得するAPI
位置情報の取得方法はブラウザの実装次第
Firefox 3.5はGoogle Location Serviceを利用
demo
セッション・ストレージローカル・ストレージ
Web Storage
KEY : VALUEKEY : VALUEKEY : VALUE
セッション・ストレージ
sessionStorage.myKey = myValue;
sessionStorage.setItem(“yourKey”, “yourValue”);
sessionStorage.clear();
• ウィンドウ毎のデータを保持するストレージ• ウィンドウが閉じられるとデータは消える
ローカル・ストレージ
localStorage.myKey = myValue;
localStorage.removeItem(“myKey”);
localStorage.clear();
• 複数ウィンドウをまたがるストレージ• オリジン(プロトコル+ドメイン+ポート)毎に異なるストレージ
• ウィンドウが閉じられてもデータは保持される
Web Workers並列処理
JavaScriptでバッググラウンド処理を実現するAPI
• バッググランド処理スレッド(ワーカー)を生成する• ワーカーはJavaScriptファイルに定義する• ワーカー間ではメッセージの送受信でデータ通信する制約
• バッググランドワーカーはDOMをいじれない• DOM操作はこれまで通りUIスレッド側で行う
File APIブラウザ上でファイル操作
ブラウザ上でファイル操作をするAPI
ファイル読み込みの制約
•ユーザーアクションが必要(DnD, ファイル選択)•勝手にローカルファイルを読み込まれないように
demo
Attractive HTML5HTML5の魅力をこっそりと
ここからの目的 HTML5の魅力を
✤ 皆さんに共有すること
✤ 皆さんから共有してもらうこと
私が感じる魅力
標準技術HTML, CSS, JavaScript
標準技術HTML, CSS, JavaScript
HTMLデータ構造を表現
CSS見栄えを表現
JavaScript各種APIの拡張により
機能を実現
デザイナ
開発者
標準技術HTML, CSS, JavaScript
ー13
ー13
Browser is a PlatformWebアプリケーションの制約からの解放
No Plug-inFlash player, Silverlight plug-in, JavaFX runtime
Cross-PlatformWindows, Mac OS X, Linux, Chrome OS
Multi-devicePC, Mac, Mobile, .....
余談
叶わなかった願い - FlashiPhone OSへのFlash Playerの搭載
iAdiPhone/iPad向け、モバイル広告 - 広告はHTML5で作る
非Andoide Mobile AP-PFの共同開発ブラウザのHTML5対応はどうなる？
Server-Side lessオフライン、ローカルストレージ、Drag&Drop、File API、WebWorker
Web/Desktopの低い垣根Drag&Drop/File API、ネイティブアプリケーションとしてラッピング
<section>
Webがよりセマンティックにheader, nav, section, article, footer, aside
<header>
<nav> <aside>
<header>
<footer>
<footer>
<article>
HTML5 is Simple!doctype, meta, script, link 省略...
<!doctype html>
<meta charset=”utf-8”>
<script src=”xxx.js”></script>
<link rel=”stylesheet” href=”xxx.css”></link>
段階的変化の許容HTML4/XHTMLからHTML5へ - 前方/後方互換性の維持(革新より発展)
常に最新のソフトウェアを使えるWebアプリケーションの特性
New！
低コストな開発/実行環境デバッグ、プロファイラなどがブラウザに組み込める/まれている
私のイチバン
HTMLデータ構造を表現
CSS見栄えを表現
JavaScript各種APIの拡張により
機能を実現
デザイナ
開発者
標準技術HTML, CSS, JavaScript
ー13
ー13
皆さんが感じたHTML5の魅力って？時間がなかったら懇親会で話しましょう
HTML5対応チェック
When can I use...
FlashってFlash Playerのこと？Flash CSのこと？
巷のFlash悲観論
ExternalInterfaceを利用したJavaScript ⇔ ActionScript連携
HTML5とFlashの共存
HTML5 / Flash 比較HTML5 Flash
公平性
互換性
PC普及率
モバイル普及率
開発者数
開発ツール
○(標準技術) ×(Adobe独占)×(ブラウザ依存) ○(Flash Playerのみ)
×(IE未サポート) ○(ほぼ100%)
△ △○(HTML, JavaScript) △(ActionScript)
○ ○
HTML5に関してコメント
HTML5,いつから使えるの？
もう, 使える機能から部分的に
iPhone/Android＆
IE以外のブラウザでは既に結構イケる
HTML5はデザイナ/開発者にとって魅力的
次期Web標準技術なので無視できない
これまでのWebの制約が変わります
提案
別に作りたいサイトやWebアプリはないという方
Chrome Extensionsで便利なツールを作っては？
[email protected]://twitter.com/shoitoHTML5-FIT
Recommended
![[MS-HTML5]: Microsoft Edge / Internet Explorer HTML5 ...interoperability.blob.core.windows.net/web/MS-HTML5/[MS-HTML5].pdf · Microsoft Edge / Internet Explorer HTML5 Standards Support](https://img.dokumen.tips/doc/110x75/5a903bb67f8b9a4a268e1ade/ms-html5-microsoft-edge-internet-explorer-html5-ms-html5pdfmicrosoft.jpg)
![[MS-HTML5]: Microsoft Edge / Internet Explorer …MS-HTML5].pdfMicrosoft Edge / Internet Explorer HTML5 ... Microsoft Edge / Internet Explorer HTML5 ... Microsoft Edge / Internet Explorer](https://img.dokumen.tips/doc/110x75/5ad35ecf7f8b9aff738de6d3/ms-html5-microsoft-edge-internet-explorer-ms-html5pdfmicrosoft-edge-.jpg)
