concentrated html5 & attractive html5
DESCRIPTION
「ぎゅ〜っと濃縮、HTML5」と「Attractive HTML5」セッションの二本立てTRANSCRIPT
![Page 1: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/1.jpg)
ぎゅ~っと濃縮、HTML5&
Attractive HTML5
@shoitoHTML5-FIT
マークアップからAPI、その魅力まで
![Page 2: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/2.jpg)
自己紹介/shoito
![Page 3: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/3.jpg)
宮城 → 福井 [3.5y]
![Page 4: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/4.jpg)
ソフトウェア設計ツールの開発
![Page 5: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/5.jpg)
Flex(Flash)アプリ開発 [3y]
![Page 6: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/6.jpg)
技術系コミュニティ
![Page 7: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/7.jpg)
HTML5に興味を持った訳
![Page 8: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/8.jpg)
ITシステムの変遷
メインフレーム/ダム端末~1980年代頃
Web1990年代中頃~
C/S 1990年代初頭~
RIA2003年後半~
低 高
高
コストパフォーマンス
ユーザビリティ
参考文献:RIAシステム構築ガイド Essential 2007 p005
![Page 9: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/9.jpg)
HTML5とワタシ
![Page 10: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/10.jpg)
Hokuriku.lang - HTML52009/10
![Page 11: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/11.jpg)
HTML5 Tech Talk in 金沢2009/10
![Page 13: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/13.jpg)
WCAF Seminar Vol.3 - HTML52010/03/20
![Page 14: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/14.jpg)
Chrome Extensions with HTML5作ろう会2010/04/12
![Page 15: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/15.jpg)
Google Hackathon for Chrome Extension2010/04/17, 24
![Page 16: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/16.jpg)
まずはご覧ください
![Page 17: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/17.jpg)
9elements.com
![Page 22: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/22.jpg)
chrome://newtab
![Page 23: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/23.jpg)
これまでのWebの制約が変わります
![Page 24: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/24.jpg)
ここからの目的
•HTML5の可能性を知ってもらうこと•HTML5に興味を持ってもらうこと•HTML5を”分かった気”になってもらうこと
![Page 25: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/25.jpg)
お話すること
•HTML5の概要•HTML5の構文, 追加される要素/属性•関連APIの拡張で実現される機能•HTML5の魅力
![Page 26: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/26.jpg)
今、HTMLはVer. 4大前提
![Page 27: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/27.jpg)
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
![Page 28: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/28.jpg)
HTML5と関連仕様
HTML5
Indexed Database API
Geolocation API
Web workers
WebSocket
Web Storage
File API
Web SQL Database
...etc
![Page 29: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/29.jpg)
マークアップとAPIの仕様HTML5
![Page 30: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/30.jpg)
前方互換性と後方互換性HTML5の設計原則
![Page 31: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/31.jpg)
革新より発展を優先するHTML5の仕様策定スタンス
![Page 32: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/32.jpg)
マークアップはよりセマンティックにWebアプリはよりリッチに
HTML5がもたらす変化
![Page 33: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/33.jpg)
Webの技術 - これから
HTMLデータ構造を表現
CSS見栄えを表現
JavaScript各種APIの拡張により
機能を実現
![Page 34: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/34.jpg)
HTMLデータ構造を表現
CSS見栄えを表現
JavaScript各種APIの拡張により
機能を実現
Webの技術 - これから
![Page 35: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/35.jpg)
HTMLデータ構造を表現
CSS見栄えを表現
JavaScript各種APIの拡張により
機能を実現
Webの技術 - これから
![Page 36: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/36.jpg)
新しく追加されるタグ
•セクショニングする新たなタグ• section, article• header, footer• aside, nav, ...• canvas, video, audioタグ• ...etc
![Page 37: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/37.jpg)
削除されるタグ• applet• big• font• frame• strike/s• tt• ...etc
![Page 38: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/38.jpg)
セクショニングする新たなタグ<article>ブログやニュース記事における
記事本体を表現
<section>文書などにおける一般的な
セクションを表現
<aside>ページ内容の主題と関連が
あまりない内容を指定
<footer>セクションのフッタを表現
<header>セクションのヘッダを指定
<nav>ページ内のリンクなど
ナビゲーション情報を保持
...etc
![Page 39: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/39.jpg)
...etc<mark>マーキングされたテキストを表現
<progress>ダウンロードや実行中のタスクの
進捗を表現
<command>ユーザーが実行するコマンドを表現
<time>日付や時刻などを表現
<datalist>inputタグのlist要素と組み合わせて
入力候補を指定
<embed>プラグインを利用するコンテンツに
利用
<meter>ディスク容量などの測定値を表現
...etc
![Page 40: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/40.jpg)
HTML4の構造 HTML5の構造
html5を使ったブログのデザイン -html5doctor- -HTML5.JP
![Page 41: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/41.jpg)
入力サポート
•Non-JavaScriptでバリデーションチェック•データの種類• email• url• date• password• tel• number• range
<input name="pass" type="password">
demo
![Page 42: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/42.jpg)
canvasタグ<canvas id=”sky”></canvas>
![Page 43: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/43.jpg)
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領域を置く
![Page 44: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/44.jpg)
video<video src=”movie.mov”></video>
![Page 45: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/45.jpg)
videoタグ
• W3Cはタグの規定のみ• コーデック/コンテナは規定していない
ブラウザの対応
Firefox ogg/theoraOpera ogg/theoraSafari H.264
Google Chrome ogg/theora, H.264
![Page 46: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/46.jpg)
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
![Page 47: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/47.jpg)
独自データ属性
<ul> <li data-country=”JP”>ハナミズキ</li> <li data-country=”US”>恋のマイアヒ</li> ....</ul>
“data-” で始まるサイト独自の属性
適当な属性や要素がない時に独自定義
![Page 48: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/48.jpg)
XHTML1からHTML5へその変換方法
![Page 49: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/49.jpg)
<!DOCTYPE html PUBLIC “-//W3C/DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR
/xhtml1/DTD/xhtml1-strict.dtd”>
DOCTYPEを変更するだけ
<!DOCTYPE html>
![Page 50: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/50.jpg)
XHTML / HTML5の誤解
![Page 51: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/51.jpg)
JavaScript API拡張アプリケーション・プラットフォームとしての
機能性を実現
![Page 52: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/52.jpg)
HTMLデータ構造を表現
CSS見栄えを表現
JavaScript各種APIの拡張により
機能を実現
Webの技術 - これから
![Page 53: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/53.jpg)
関連API•Application Cache API• Communication API•Geolocation API•Web Storage•Web SQL Database•Web Workers•Web Socket• File API• ...etc
![Page 54: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/54.jpg)
Application Cacheオフライン実行
![Page 55: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/55.jpg)
CACHE MANIFESThello.htmlhello.js
NETWORK:server.cgi
ネットワークに接続していなくてもアプリケーションを利用できるようにするAPI
マニフェストファイルにファイルを列挙する
<!DOCTYPE html><html manifest=”hello.manifest”>
![Page 56: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/56.jpg)
Communication APIウィンドウ間連携
![Page 57: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/57.jpg)
Cross Document Messaging
window.addEventListener(“message”, function() { ...}, false);
ウィンドウ間でメッセージの送受信を行うAPI
メッセージの受信
postMessage(“hogehoge”, “http://example.com/”);
メッセージの送信
![Page 58: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/58.jpg)
Geolocation API位置情報
![Page 59: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/59.jpg)
function showMap(position) {
....
}
navigator.geolocation.getCurrentPosition(showMap);
ブラウザ経由で位置情報を取得するAPI
位置情報の取得方法はブラウザの実装次第
Firefox 3.5はGoogle Location Serviceを利用
demo
![Page 60: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/60.jpg)
セッション・ストレージローカル・ストレージ
Web Storage
KEY : VALUEKEY : VALUEKEY : VALUE
![Page 61: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/61.jpg)
セッション・ストレージ
sessionStorage.myKey = myValue;
sessionStorage.setItem(“yourKey”, “yourValue”);
sessionStorage.clear();
• ウィンドウ毎のデータを保持するストレージ• ウィンドウが閉じられるとデータは消える
![Page 62: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/62.jpg)
ローカル・ストレージ
localStorage.myKey = myValue;
localStorage.removeItem(“myKey”);
localStorage.clear();
• 複数ウィンドウをまたがるストレージ• オリジン(プロトコル+ドメイン+ポート)毎に異なるストレージ
• ウィンドウが閉じられてもデータは保持される
![Page 63: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/63.jpg)
Web Workers並列処理
![Page 64: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/64.jpg)
JavaScriptでバッググラウンド処理を実現するAPI
• バッググランド処理スレッド(ワーカー)を生成する• ワーカーはJavaScriptファイルに定義する• ワーカー間ではメッセージの送受信でデータ通信する制約
• バッググランドワーカーはDOMをいじれない• DOM操作はこれまで通りUIスレッド側で行う
![Page 65: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/65.jpg)
File APIブラウザ上でファイル操作
![Page 66: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/66.jpg)
ブラウザ上でファイル操作をするAPI
ファイル読み込みの制約
•ユーザーアクションが必要(DnD, ファイル選択)•勝手にローカルファイルを読み込まれないように
demo
![Page 67: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/67.jpg)
![Page 68: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/68.jpg)
Attractive HTML5HTML5の魅力をこっそりと
![Page 69: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/69.jpg)
ここからの目的 HTML5の魅力を
✤ 皆さんに共有すること
✤ 皆さんから共有してもらうこと
![Page 70: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/70.jpg)
私が感じる魅力
![Page 71: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/71.jpg)
標準技術HTML, CSS, JavaScript
![Page 72: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/72.jpg)
標準技術HTML, CSS, JavaScript
![Page 73: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/73.jpg)
HTMLデータ構造を表現
CSS見栄えを表現
JavaScript各種APIの拡張により
機能を実現
デザイナ
開発者
標準技術HTML, CSS, JavaScript
ー13
ー13
![Page 74: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/74.jpg)
Browser is a PlatformWebアプリケーションの制約からの解放
![Page 75: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/75.jpg)
No Plug-inFlash player, Silverlight plug-in, JavaFX runtime
![Page 76: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/76.jpg)
Cross-PlatformWindows, Mac OS X, Linux, Chrome OS
![Page 77: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/77.jpg)
Multi-devicePC, Mac, Mobile, .....
![Page 78: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/78.jpg)
余談
![Page 79: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/79.jpg)
叶わなかった願い - FlashiPhone OSへのFlash Playerの搭載
![Page 80: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/80.jpg)
iAdiPhone/iPad向け、モバイル広告 - 広告はHTML5で作る
![Page 81: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/81.jpg)
非Andoide Mobile AP-PFの共同開発ブラウザのHTML5対応はどうなる?
![Page 82: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/82.jpg)
![Page 83: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/83.jpg)
Server-Side lessオフライン、ローカルストレージ、Drag&Drop、File API、WebWorker
![Page 84: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/84.jpg)
Web/Desktopの低い垣根Drag&Drop/File API、ネイティブアプリケーションとしてラッピング
![Page 85: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/85.jpg)
<section>
Webがよりセマンティックにheader, nav, section, article, footer, aside
<header>
<nav> <aside>
<header>
<footer>
<footer>
<article>
![Page 86: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/86.jpg)
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>
![Page 87: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/87.jpg)
段階的変化の許容HTML4/XHTMLからHTML5へ - 前方/後方互換性の維持(革新より発展)
![Page 88: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/88.jpg)
常に最新のソフトウェアを使えるWebアプリケーションの特性
New!
![Page 89: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/89.jpg)
低コストな開発/実行環境デバッグ、プロファイラなどがブラウザに組み込める/まれている
![Page 90: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/90.jpg)
私のイチバン
![Page 91: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/91.jpg)
HTMLデータ構造を表現
CSS見栄えを表現
JavaScript各種APIの拡張により
機能を実現
デザイナ
開発者
標準技術HTML, CSS, JavaScript
ー13
ー13
![Page 92: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/92.jpg)
皆さんが感じたHTML5の魅力って?時間がなかったら懇親会で話しましょう
![Page 93: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/93.jpg)
![Page 94: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/94.jpg)
HTML5対応チェック
![Page 95: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/95.jpg)
When can I use...
![Page 98: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/98.jpg)
FlashってFlash Playerのこと?Flash CSのこと?
巷のFlash悲観論
![Page 99: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/99.jpg)
ExternalInterfaceを利用したJavaScript ⇔ ActionScript連携
HTML5とFlashの共存
![Page 100: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/100.jpg)
HTML5 / Flash 比較HTML5 Flash
公平性
互換性
PC普及率
モバイル普及率
開発者数
開発ツール
○(標準技術) ×(Adobe独占)×(ブラウザ依存) ○(Flash Playerのみ)
×(IE未サポート) ○(ほぼ100%)
△ △○(HTML, JavaScript) △(ActionScript)
○ ○
![Page 101: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/101.jpg)
HTML5に関してコメント
![Page 102: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/102.jpg)
HTML5,いつから使えるの?
![Page 103: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/103.jpg)
もう, 使える機能から部分的に
![Page 104: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/104.jpg)
iPhone/Android&
IE以外のブラウザでは既に結構イケる
![Page 105: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/105.jpg)
HTML5はデザイナ/開発者にとって魅力的
![Page 106: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/106.jpg)
次期Web標準技術なので無視できない
![Page 107: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/107.jpg)
これまでのWebの制約が変わります
![Page 108: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/108.jpg)
提案
![Page 109: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/109.jpg)
別に作りたいサイトやWebアプリはないという方
![Page 110: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/110.jpg)
Chrome Extensionsで便利なツールを作っては?
![Page 111: Concentrated HTML5 & Attractive HTML5](https://reader030.vdocuments.mx/reader030/viewer/2022020710/54c3f1244a79598e2d8b4698/html5/thumbnails/111.jpg)
[email protected]://twitter.com/shoitoHTML5-FIT