fxug html5
TRANSCRIPT
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
出身 :京都
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
HTML5のAPIをひとまわり
・HTMLの歴史・HTML5のJavaScriptAPI・サーバ通信・CSSの歴史・CSS3
もくじ
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
HTMLの歴史
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
HTMLとはHyperText Markup Language
Webページを記述するためのマークアップ言語簡単に言えばハイパーリンク付きの文章ファイルSGML(Standard Generalized Markup Language)を元にしてできている
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
HTMLの歴史
http://web-tan.forum.impressrd.jp/e/2007/07/27/1638
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
ニーズの多様化Flashなどアニメーションや動画を再生するようになった
Google MapsみたいなAjaxなコンテンツが主流に
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
ブラウザ戦争勃発
1990年代・・・Internet Explorer、Netscape Navigator
第一次ブラウザ戦争
第二次ブラウザ戦争
2004年以降・・・Firefox、Safari、Chrome、Opera、IE
独自仕様の乱立
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
ブラウザ難民...
http://www.ie6nomore.com/
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
HTML5の登場アプリケーションの実行環境としてWebを実現
マシンリーダビリティの向上
表現の幅の拡大
<ruby> <section> <article><header>
<audio> <video> <canvas>
<progress> <input>
Javascript API
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
HTML5の位置づけ
HTML4.01
XHTML1.0
DOM2 HTML
HTML5 次期バージョン
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
HTML5とは?HTML5はマークアップの仕様
http://www.w3.org/TR/html5/
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
HTML5の現状
HTML5は現在策定中
現在:Last Call Working Draft ほぼ方向性、仕様が固まった ブラウザが実装するのを待つ
最終:勧告(Recommendation)
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
HTML5でできること音声、動画の再生
データのローカル保存
図形描画
サーバとのリアルタイム通信(サーバPush)
WebStorage、 オフラインキャッシュ、Indexed DB
video/audioタグ
Canvas、SVG
WebSocket、Server-Sent Events、XHR+HTTP Streaming
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
HTML5でできること
他にもいっぱいあるのですが、多すぎて紹介しきれません。。。
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
ここまでのまとめ・HTML5は標準化の仕様
・HTML5を使うとマシンリーダブルなコンテンツが作れる
・HTML5のAPIでデスクトップアプリ並みのアプリが作れる
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
HTML5のJavaScript API
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
HTML5のJavaScript API本日のメニュー
・Canvas・Form API・Text Selection API・Drag&Drop・Web Workers・Local Storage
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
Canvas
http://bit.ly/ob3O3J
HTML5のJavaScript API
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
Form API
http://bit.ly/qksE7e
HTML5のJavaScript API
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
Form API
http://bit.ly/eTwSZmOpera
HTML5のJavaScript API
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
Text Selection API
http://bit.ly/oRhQay
HTML5のJavaScript API
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
Drag & Drop
http://bit.ly/oan7Fu
HTML5のJavaScript API
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
Web Workers
まずはWebWorkersを使用しないパターン
http://bit.ly/pfqeEu
HTML5のJavaScript API
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
Web Workers
WebWorkersを使用したパターン
http://bit.ly/rnzByn
http://bit.ly/oQaPtC
HTML5のJavaScript API
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
Local Storage
http://bit.ly/nVeKms
HTML5のJavaScript API
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
サーバ通信
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
サーバ通信もくじ
・Ajaxとクロスドメイン制限
・データPush
・まとめ
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
なんで通信が必要なの?
データベースWebサーバ
ユーザの会員情報などを保存する
会員情報などを一つの場所に保存して管理するためデータをサーバに送信する必要がある。
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
なんで通信が必要なの?
Webサーバ
チャットで誰かが更新したら、それを他のユーザにも同じ内容を表示したりする(※これを「PUSHする」という)
①データ更新
②全員に通知
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
Ajax?
Asynchronous JavaScript + XML
データを非同期で取得・更新
ページを切り替えずに一部分だけ更新したりデータを送信したりする技術
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
Ajaxのクロスドメイン制限
表示しているページのドメイン以外のデータは取得できない
悪意あるサイトから攻撃されないように「クロスドメイン制限」というのがある
他ドメインのWebサーバ
自ドメインのWebサーバ
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
Ajaxのクロスドメイン制限
他ドメインのデータを取得するには自ドメイン経由でデータ取得必要がある
他ドメインのWebサーバ
自ドメインのWebサーバ
Web API
※ガジェットは iframe で表示したりする
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
XML HTTP Request Level2
HTTPヘッダに Access-Control-Allow-Origin をセットすることにより、クロスドメイン通信が可能になった
他ドメインのWebサーバ
自ドメインのWebサーバ
Access-Control-Allow-Origin: 自ドメイン
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
データPUSH
Webサーバ
①データ更新
②全員に通知
データPUSHの実現方法・Long-polling・HTTP Streaming・Server-Sent Events・WebSocket
他にも古いスタイルとして periodically-polling がある
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
Long-polling①
② データが更新されるまで
レスポンスを返さない
① ユーザからサーバに接続する
②③
③ 誰かがデータを更新した時に
レスポンスを返す④
④ ①と同じ。サーバに接続する
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
HTTP Streaming①
② HTTPのコネクションを張り続ける
① ユーザからサーバに接続する
③③ 細切れでデータを送信する
④ ③と同じ
④ ②
HTTPヘッダのContent-Typeは text/event-stream でなければいけない
HTTP/1.1で規定されている
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
HTTP Streaming
デモ
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
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
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
Server-Sent Events
デモ
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
WebSocket①
② サブプロトコルの指定
① ユーザからサーバに接続する
WebSocketコネクション確立
③ WebSocketでデータ送受信
③
②
サブプロトコルはチャットとデータ転送などでWebSocketを使い分けたいときなどに使用します
WebSocketプロトコル
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
WebSocket
・任意のタイミングで双方向に通信を行える・オーバーヘッドが少なく、ネットワークリソースの 使用を減らせる・クロスドメインが可能
メリット
デメリット・クライアント/サーバとも対応しているのがまちまち
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
使用上の注意
・どの方式を使うかはAPIが使えるかどうか調べてから
・リソースの使用が少ないものから選ぼう
・サーバのリソース使う場合はC10K問題とかも注意
When Can I Use http://caniuse.com/
・APIが使用できるかの確認は以下のサイトが便利
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
CSS3について
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
CSS3
角丸、アニメーション、WebFont
もくじ
・CSSって何?
・CSSの歴史
・CSS3を書いてみる
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
・Cascading Style Sheet の略
CSSって何?
・ページの「見た目」や「スタイル」を書く
HTML
CSS
その”要素”が何を意味するのかを定義する
定義された”セレクタ”毎のスタイルを書く
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
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勧告
??
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
CSS3の現在・CSS3は「モジュール」と呼ばれる設計思想で策定が 進められている
・セレクタ、フォント、テキスト、カラーなど30以上の モジュールがそれぞれ個別に勧告になる
http://www.w3.org/Style/CSS/current-work
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
CSS3のデモ (1)
CSS3でタブを書いてみよう
http://bit.ly/pZ5RYH
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
ベンダープレフィックス
-webkit- Safari, Chrome
-moz- Firefox
-o- Opera
-ms- Internet Explorer
ブラウザ独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に付ける識別子
CSS3のデモ (1)
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
ボタンを書くときのポイント
3. borderを書いて輪郭をはっきりさせる
4. box-shadowで立体感をつくる
1. border-radiusで角丸をつける
2. background: linear-gradientでグラデーション
CSS3のデモ (1)
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
CSS3でアニメーションを書いてみよう
http://bit.ly/ovpPk2
CSS3のデモ (2)
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
メディアクエリーを使ってみよう
http://bit.ly/oAnmaF
CSS3のデモ (3)
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
Web Fontを使ってみよう
http://bit.ly/qAmIY3
CSS3のデモ (4)
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
・HTMLは元々「電子文書」の規格
・ニーズの多様化・独自実装の乱立
SGML
HTML1.0
HTML4.01
XML1.0
XHTML1.0
HTML5
仕様の作り直し
HTML5誕生
おさらい(1)
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
おさらい(2)
・HTML5はマークアップの仕様
HTML5とは・アプリケーションの実行環境・マシンリーダビリティ向上・表現幅の拡大
HTML5の目的
・HTML5は絶賛「策定中」
現在:ほぼ仕様が固まった最終:勧告
HTML5の現状 HTML5だけで出来ること・ブラウザ上で動作するアプリ・データ通信が必要なものは サーバサイドの技術が必要
が仕様策定(?)
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
おさらい(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
2011年10月22日土曜日
FxUG#155 in Osaka
COPYRIGHT 2011 PLUGRAM, INC.
おさらい(4)サーバ通信
・クロスドメイン制限・JSONP・Access-Control-Allow-Origin・Long Polling・Http Streaming・Server Sent Events・WebSocket
CSS3・モジュール毎に勧告・CSS3だけで表現できることが 多くなった・これまでになかったWebページの 表現方法も増えてきた
http://www.awwwards.com/
2011年10月22日土曜日
ありがとうございました!
2011年10月22日土曜日