Concentrated HTML5 & Attractive HTML5

ぎゅ∼っと濃縮、HTML5
＆
Attractive HTML5
マークアップからAPI、その魅力まで

@shoito
HTML5-FIT

ソフトウェア設計ツールの開発

Flex(Flash)アプリ開発 [3y]

ITシステムの変遷
高

C/S RIA
ユーザビリティ

1990年代初頭∼ 2003年後半∼

メインフレーム Web
1990年代中頃∼
/ダム端末
∼1980年代頃

低コストパフォーマンス高

参考文献：RIAシステム構築ガイド Essential 2007 p005

Hokuriku.lang - HTML5
2009/10

HTML5 Tech Talk in 金沢
2009/10

HTML5勉強会＠めがね会館
2010/03/12

WCAF Seminar Vol.3 - HTML5
2010/03/20

Chrome Extensions with HTML5作ろう会
2010/04/12

Google Hackathon for Chrome Extension
2010/04/17, 24

これまでの
Webの制約が変わります

ここからの目的

• HTML5の可能性を知ってもらうこと
• HTML5に興味を持ってもらうこと
• HTML5を分かった気になってもらうこと

お話すること

• HTML5の概要
• HTML5の構文, 追加される要素/属性
• 関連APIの拡張で実現される機能
• HTML5の魅力

今、HTMLはVer. 4
大前提

WHATWG W3C
Web Applications 1.0
HTML5 HTML5

Microdata HTML5 Microdata

canvas 2D Context HTML5 2D Context

Cross-document messaging
HTML5 Communications
Channel messaging

device HTML Device

Web workers Web workers

Web storage Web storage

Server-sent events Server-sent events

Web sockets Web sockets

HTML５と関連仕様

Indexed
Web workers
Database API

Web Storage Geolocation API

HTML5
WebSocket File API

Web SQL
...etc
Database

マークアップとAPIの仕様
HTML5

前方互換性と後方互換性
HTML5の設計原則

革新より発展を優先する
HTML5の仕様策定スタンス

マークアップはよりセマンティックに
Webアプリはよりリッチに
HTML5がもたらす変化

Webの技術 - これから

JavaScript
CSS HTML
各種APIの拡張により
見栄えを表現データ構造を表現
機能を実現

新しく追加されるタグ

• セクショニングする新たなタグ
• section, article
• header, footer
• aside, nav, ...
• canvas, video, audioタグ
• ...etc

削除されるタグ
• applet
• big
• font
• frame
• strike/s
• tt
• ...etc

セクショニングする新たなタグ
<article> <footer>
ブログやニュース記事におけるセクションのフッタを表現

記事本体を表現 <header>
<section> セクションのヘッダを指定

文書などにおける一般的な <nav>
セクションを表現ページ内のリンクなど

<aside> ナビゲーション情報を保持

ページ内容の主題と関連が ...etc
あまりない内容を指定

...etc
<mark> <datalist>
マーキングされたテキストを表現 inputタグのlist要素と組み合わせて

<progress> 入力候補を指定

ダウンロードや実行中のタスクの <embed>
進捗を表現プラグインを利用するコンテンツに

<command> 利用

ユーザーが実行するコマンドを表現 <meter>
<time> ディスク容量などの測定値を表現

日付や時刻などを表現 ...etc

HTML4の構造 HTML5の構造

html5を使ったブログのデザイン -html5doctor- -HTML5.JP

入力サポート

• Non-JavaScriptでバリデーションチェック
• データの種類
• email
• url <input name="pass"
• date
• tel
password type="password">
• number
• range
•
demo

canvasタグ
<canvas id= sky ></canvas>

canvasタグ
名前を指定してcanvas領域を置く
<canvas id= sky width= 320 height= 240 />

canvasに描画するにはJavaScriptを使う

<script>
var canvas = document.getElementById( sky );
var context = canvas.getContext( 2d );
context.ﬁllStyle = rgb(255, 0, 0) ;
context.ﬁllRect(0, 0, 100, 100);
</script>

video
<video src= movie.mov ></video>

videoタグ

• W3Cはタグの規定のみ
• コーデック/コンテナは規定していない
ブラウザの対応

Firefox ogg/theora
Opera ogg/theora
Safari H.264
Google Chrome ogg/theora, H.264

videoタグ
src属性に動画ファイルのパスを指定する
<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>

demo

独自データ属性
data- で始まるサイト独自の属性

適当な属性や要素がない時に独自定義

<ul>
<li data-country= JP >ハナミズキ</li>
<li data-country= US >恋のマイアヒ</li>
....
</ul>

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>

JavaScript API拡張
アプリケーション・プラットフォームとしての
機能性を実現

関連API
• Application Cache API
• Communication API
• Geolocation API
• Web Storage
• Web SQL Database
• Web Workers
• Web Socket
• File API
• ...etc

Application Cache
オフライン実行

ネットワークに接続していなくてもアプリケーション
を利用できるようにするAPI

マニフェストファイルにファイルを列挙する

CACHE MANIFEST
hello.html
hello.js

NETWORK:
server.cgi

<!DOCTYPE html>
<html manifest= hello.manifest >

Communication API
ウィンドウ間連携

Cross Document Messaging
ウィンドウ間でメッセージの送受信を行うAPI

メッセージの受信
window.addEventListener( message , function() {
...
}, false);

メッセージの送信
postMessage( hogehoge , http://example.com/ );

Geolocation API
位置情報

ブラウザ経由で位置情報を取得するAPI

function showMap(position) {

....

}

navigator.geolocation.getCurrentPosition(showMap);

位置情報の取得方法はブラウザの実装次第

Firefox 3.5はGoogle Location Serviceを利用

demo

Web Storage
セッション・ストレージ
ローカル・ストレージ

KEY : VALUE
KEY : VALUE
KEY : VALUE

セッション・ストレージ
• ウィンドウ毎のデータを保持するストレージ
• ウィンドウが閉じられるとデータは消える

sessionStorage.myKey = myValue;

sessionStorage.setItem( yourKey , yourValue );

sessionStorage.clear();

ローカル・ストレージ
• 複数ウィンドウをまたがるストレージ
• オリジン(プロトコル+ドメイン+ポート)毎に異なるスト
レージ

• ウィンドウが閉じられてもデータは保持される

localStorage.myKey = myValue;

localStorage.removeItem( myKey );

localStorage.clear();

JavaScriptでバッググラウンド処理を実現するAPI

• バッググランド処理スレッド(ワーカー)を生成する
• ワーカーはJavaScriptファイルに定義する
• ワーカー間ではメッセージの送受信でデータ通信する
制約

• バッググランドワーカーはDOMをいじれない
• DOM操作はこれまで通りUIスレッド側で行う

File API
ブラウザ上でファイル操作

ブラウザ上でファイル操作をするAPI

ファイル読み込みの制約

•ユーザーアクションが必要(DnD, ファイル選択)
•勝手にローカルファイルを読み込まれないように

demo

Concentrated HTML5 & Attractive HTML5

Attractive
HTML5
HTML5の魅力をこっそりと

ここからの目的
HTML5の魅力を

✤ 皆さんに共有すること

✤ 皆さんから共有してもらうこと

標準技術
HTML, CSS, JavaScript

デザイナ 1
ー
3
JavaScript
CSS HTML
各種APIの拡張により
見栄えを表現データ構造を表現
機能を実現

1
ー開発者
3
標準技術
HTML, CSS, JavaScript

Browser is a Platform
Webアプリケーションの制約からの解放

No Plug-in
Flash player, Silverlight plug-in, JavaFX runtime

Cross-Platform
Windows, Mac OS X, Linux, Chrome OS

Multi-device
PC, Mac, Mobile, .....

叶わなかった願い - Flash
iPhone OSへのFlash Playerの搭載

iAd
iPhone/iPad向け、モバイル広告広告はHTML5で作る

非Andoide Mobile AP-PFの共同開発
ブラウザのHTML5対応はどうなる？

Server-Side less
オフライン、ローカルストレージ、Drag&Drop、File API、WebWorker

Web/Desktopの低い垣根
Drag&Drop/File API、ネイティブアプリケーションとしてラッピング

<header>

<section>
<header>
<nav> <aside>
<article>

<footer>

<footer>

Webがよりセマンティックに
header, nav, section, article, footer, aside

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へ - 前方/後方互換性の維持(革新より発展)

N
ew
！

常に最新のソフトウェアを使える
Webアプリケーションの特性

低コストな開発/実行環境
デバッグ、プロファイラなどがブラウザに組み込める/まれている

皆さんが感じたHTML5の魅力って？
時間がなかったら懇親会で話しましょう

巷のFlash悲観論
FlashってFlash Playerのこと？
Flash CSのこと？

HTML5とFlashの共存
ExternalInterfaceを利用した
JavaScript ActionScript連携

HTML5 / Flash 比較
HTML5 Flash

公平性 ○ (標準技術) (Adobe独占)

互換性 (ブラウザ依存) ○
(Flash Playerのみ)

PC普及率 (IE未サポート) ○ (ほぼ100%)

モバイル普及率 △ △
開発者数 ○(HTML, JavaScript) △ (ActionScript)

開発ツール ○ ○

HTML5,
いつから使えるの？

もう, 使える機能から部分的に

iPhone/Android
＆
IE以外のブラウザでは
既に結構イケる

HTML5は
デザイナ/開発者にとって魅力的

次期Web標準技術なので
無視できない

別に作りたいサイトや
Webアプリはないという方

Chrome Extensionsで
便利なツールを作っては？

Thanks!
shoito
sho.ito@air-life.net
http://twitter.com/shoito
HTML5-FIT

Concentrated HTML5 & Attractive HTML5

Concentrated HTML5 & Attractive HTML5

Recommended

More Related Content

What's hot

What's hot(20)

Viewers also liked

Viewers also liked(11)

Similar to Concentrated HTML5 & Attractive HTML5

Similar to Concentrated HTML5 & Attractive HTML5(20)

More from Sho Ito

More from Sho Ito(11)

Recently uploaded

Recently uploaded(12)

Concentrated HTML5 & Attractive HTML5