fxug html5

FxUG勉強会 #155 in Osaka

HTML5のAPIをひとまわり

2011年10月22日土曜日

FxUG#155 in Osaka

COPYRIGHT 2011 PLUGRAM, INC.

自己紹介

名前　：田中　豪（たなか　ごう）

twitter：@tan_go238

所属：PLUGRAM, Inc.

言語：Java, Flex, PHP

興味：HTML5, Obj-C, Scala

出身：京都


FxUG#155 in Osaka


HTML5のAPIをひとまわり

・HTMLの歴史・HTML5のJavaScriptAPI・サーバ通信・CSSの歴史・CSS3

もくじ


FxUG#155 in Osaka


HTMLの歴史


FxUG#155 in Osaka


HTMLとはHyperText Markup Language

Webページを記述するためのマークアップ言語簡単に言えばハイパーリンク付きの文章ファイルSGML(Standard Generalized Markup Language)を元にしてできている


FxUG#155 in Osaka


HTMLの歴史

http://web-tan.forum.impressrd.jp/e/2007/07/27/1638




FxUG#155 in Osaka


ニーズの多様化Flashなどアニメーションや動画を再生するようになった

Google MapsみたいなAjaxなコンテンツが主流に


FxUG#155 in Osaka


ブラウザ戦争勃発

1990年代・・・Internet Explorer、Netscape Navigator

第一次ブラウザ戦争

第二次ブラウザ戦争

2004年以降・・・Firefox、Safari、Chrome、Opera、IE

独自仕様の乱立


FxUG#155 in Osaka


ブラウザ難民...

http://www.ie6nomore.com/




FxUG#155 in Osaka


HTML5の登場アプリケーションの実行環境としてWebを実現

マシンリーダビリティの向上

表現の幅の拡大

<ruby> <section> <article><header>

<audio> <video> <canvas>

<progress> <input>

Javascript API


FxUG#155 in Osaka


HTML5の位置づけ

HTML4.01

XHTML1.0

DOM2 HTML

HTML5　　　次期バージョン


FxUG#155 in Osaka


HTML5とは？HTML5はマークアップの仕様

http://www.w3.org/TR/html5/




FxUG#155 in Osaka


HTML5の現状

HTML5は現在策定中

現在：Last Call Working Draft　　　ほぼ方向性、仕様が固まった　　　ブラウザが実装するのを待つ

最終：勧告(Recommendation)


FxUG#155 in Osaka


HTML5でできること音声、動画の再生

データのローカル保存

図形描画

サーバとのリアルタイム通信（サーバPush）

WebStorage、オフラインキャッシュ、Indexed DB

video/audioタグ

Canvas、SVG

WebSocket、Server-Sent Events、XHR+HTTP Streaming


FxUG#155 in Osaka


HTML5でできること

他にもいっぱいあるのですが、多すぎて紹介しきれません。。。


FxUG#155 in Osaka


ここまでのまとめ・HTML5は標準化の仕様

・HTML5を使うとマシンリーダブルなコンテンツが作れる

・HTML5のAPIでデスクトップアプリ並みのアプリが作れる


FxUG#155 in Osaka


HTML5のJavaScript API


FxUG#155 in Osaka


HTML5のJavaScript API本日のメニュー

・Canvas・Form API・Text Selection API・Drag&Drop・Web Workers・Local Storage


FxUG#155 in Osaka


Canvas

http://bit.ly/ob3O3J





FxUG#155 in Osaka


Form API

http://bit.ly/qksE7e





FxUG#155 in Osaka


Form API

http://bit.ly/eTwSZmOpera



http://bit.ly/eTwSZm

http://bit.ly/eTwSZm

FxUG#155 in Osaka


Text Selection API

http://bit.ly/oRhQay





FxUG#155 in Osaka


Drag & Drop

http://bit.ly/oan7Fu





FxUG#155 in Osaka


Web Workers

まずはWebWorkersを使用しないパターン

http://bit.ly/pfqeEu





FxUG#155 in Osaka


Web Workers

WebWorkersを使用したパターン

http://bit.ly/rnzByn

http://bit.ly/oQaPtC







FxUG#155 in Osaka


Local Storage

http://bit.ly/nVeKms





FxUG#155 in Osaka


サーバ通信


FxUG#155 in Osaka


サーバ通信もくじ

・Ajaxとクロスドメイン制限

・データPush

・まとめ


FxUG#155 in Osaka


なんで通信が必要なの？

データベースWebサーバ

ユーザの会員情報などを保存する

会員情報などを一つの場所に保存して管理するためデータをサーバに送信する必要がある。


FxUG#155 in Osaka


なんで通信が必要なの？

Webサーバ

チャットで誰かが更新したら、それを他のユーザにも同じ内容を表示したりする(※これを「PUSHする」という)

①データ更新

②全員に通知


FxUG#155 in Osaka


Ajax？

Asynchronous JavaScript + XML

データを非同期で取得・更新

ページを切り替えずに一部分だけ更新したりデータを送信したりする技術


FxUG#155 in Osaka


Ajaxのクロスドメイン制限

表示しているページのドメイン以外のデータは取得できない

悪意あるサイトから攻撃されないように「クロスドメイン制限」というのがある

他ドメインのWebサーバ

自ドメインのWebサーバ


FxUG#155 in Osaka


Ajaxのクロスドメイン制限

他ドメインのデータを取得するには自ドメイン経由でデータ取得必要がある



Web API

※ガジェットは iframe で表示したりする


FxUG#155 in Osaka


XML HTTP Request Level2

HTTPヘッダに Access-Control-Allow-Origin をセットすることにより、クロスドメイン通信が可能になった



Access-Control-Allow-Origin: 自ドメイン


FxUG#155 in Osaka


データPUSH

Webサーバ

①データ更新

②全員に通知

データPUSHの実現方法・Long-polling・HTTP Streaming・Server-Sent Events・WebSocket

他にも古いスタイルとして periodically-polling がある


FxUG#155 in Osaka


Long-polling①

② データが更新されるまで

　レスポンスを返さない

① ユーザからサーバに接続する

②③

③ 誰かがデータを更新した時に

　レスポンスを返す④

④ ①と同じ。サーバに接続する


FxUG#155 in Osaka


HTTP Streaming①

② HTTPのコネクションを張り続ける


③③ 細切れでデータを送信する

④ ③と同じ

④ ②

HTTPヘッダのContent-Typeは text/event-stream でなければいけない

HTTP/1.1で規定されている


FxUG#155 in Osaka


HTTP Streaming

デモ


FxUG#155 in Osaka


Server-Sent Events・基本的にHTTP Streamingと同じ

・JavaScriptの記述が簡素に

if(xhr.readyState > 2 && xhr.readyState < 5){ var message = xhr.responseText.substring(lastSize); var res = message.match(/data:\s?(.+)/);}

eventSource.onmessage = function(e) { var res = e.data;}

Server-Sent Events

HTTP Streaming


FxUG#155 in Osaka


Server-Sent Events

デモ


FxUG#155 in Osaka


WebSocket①

② サブプロトコルの指定


　 WebSocketコネクション確立

③ WebSocketでデータ送受信

③

②

サブプロトコルはチャットとデータ転送などでWebSocketを使い分けたいときなどに使用します

WebSocketプロトコル


FxUG#155 in Osaka


WebSocket

・任意のタイミングで双方向に通信を行える・オーバーヘッドが少なく、ネットワークリソースの　使用を減らせる・クロスドメインが可能

メリット

デメリット・クライアント／サーバとも対応しているのがまちまち


FxUG#155 in Osaka


使用上の注意

・どの方式を使うかはAPIが使えるかどうか調べてから

・リソースの使用が少ないものから選ぼう

・サーバのリソース使う場合はC10K問題とかも注意

When Can I Use http://caniuse.com/

・APIが使用できるかの確認は以下のサイトが便利


http://caniuse.com/#search=server

http://caniuse.com/#search=server

FxUG#155 in Osaka


CSS3について


FxUG#155 in Osaka


CSS3

角丸、アニメーション、WebFont

もくじ

・CSSって何？

・CSSの歴史

・CSS3を書いてみる


FxUG#155 in Osaka


・Cascading Style Sheet の略

CSSって何？

・ページの「見た目」や「スタイル」を書く

HTML

CSS

その”要素”が何を意味するのかを定義する

定義された”セレクタ”毎のスタイルを書く


FxUG#155 in Osaka


CSS3の歴史

CSS level 1

CSS3　　　

CSS level 2

CSS level 2.1

SGML

HTML1.0

HTML4.01

XML1.0

XHTML1.0

HTML5　　　

1996 W3C勧告

1998 W3C勧告

2011.6 W3C勧告

？？


FxUG#155 in Osaka


CSS3の現在・CSS3は「モジュール」と呼ばれる設計思想で策定が　進められている

・セレクタ、フォント、テキスト、カラーなど30以上の　モジュールがそれぞれ個別に勧告になる

http://www.w3.org/Style/CSS/current-work




FxUG#155 in Osaka


CSS3のデモ (1)

CSS3でタブを書いてみよう

http://bit.ly/pZ5RYH




FxUG#155 in Osaka


ベンダープレフィックス

-webkit- Safari, Chrome

-moz- Firefox

-o- Opera

-ms- Internet Explorer

ブラウザ独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に付ける識別子

CSS3のデモ (1)


FxUG#155 in Osaka


ボタンを書くときのポイント

3. borderを書いて輪郭をはっきりさせる

4. box-shadowで立体感をつくる

1. border-radiusで角丸をつける

2. background: linear-gradientでグラデーション

CSS3のデモ (1)


FxUG#155 in Osaka


CSS3でアニメーションを書いてみよう

http://bit.ly/ovpPk2

CSS3のデモ (2)




FxUG#155 in Osaka


メディアクエリーを使ってみよう

http://bit.ly/oAnmaF

CSS3のデモ (3)




FxUG#155 in Osaka


Web Fontを使ってみよう

http://bit.ly/qAmIY3

CSS3のデモ (4)




FxUG#155 in Osaka


・HTMLは元々「電子文書」の規格

・ニーズの多様化・独自実装の乱立

SGML

HTML1.0

HTML4.01

XML1.0

XHTML1.0

HTML5　　　

仕様の作り直し

HTML5誕生

おさらい(1)


FxUG#155 in Osaka


おさらい(2)

・HTML5はマークアップの仕様

HTML5とは・アプリケーションの実行環境・マシンリーダビリティ向上・表現幅の拡大

HTML5の目的　　

・HTML5は絶賛「策定中」

現在：ほぼ仕様が固まった最終：勧告

HTML5の現状　　 HTML5だけで出来ること・ブラウザ上で動作するアプリ・データ通信が必要なものは　サーバサイドの技術が必要

が仕様策定(?)


FxUG#155 in Osaka


おさらい(3)HTML5のJavaScript API　・Form API・Canvas、SVG・Text Selection API・File API（Drag&Drop）・Web Workers・WebStorage、Indexed DB・Offline Cache・WebSocket、Server-Sent Events


FxUG#155 in Osaka


おさらい(4)サーバ通信　

・クロスドメイン制限・JSONP・Access-Control-Allow-Origin・Long Polling・Http Streaming・Server Sent Events・WebSocket

CSS3・モジュール毎に勧告・CSS3だけで表現できることが　多くなった・これまでになかったWebページの　表現方法も増えてきた

http://www.awwwards.com/




ありがとうございました！


fxug html5

Travel

osaka copyright

osaka canvascopyright

osakawebfont copyright

osaka form apicopyright

osaka web workerscopyright

osaka local storagecopyright

osaka html5 api2011