on web browsers
DESCRIPTION
TRANSCRIPT
![Page 2: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/2.jpg)
自己紹介: 森田創
![Page 3: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/3.jpg)
ここで述べられていることは私の個人的な意見に基づくものであり、私の雇用者には一切の関係はありません。
![Page 4: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/4.jpg)
ウェブブラウザ
←仕事
![Page 5: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/5.jpg)
フロントエンド
とエンジン
![Page 6: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/6.jpg)
エンジン +フロントエンド
Gecko Firefox, Thunderbird,...
WebKit Chrome, Safari,Mac Mail...
... ...
![Page 7: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/7.jpg)
アプリ
ページ
![Page 8: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/8.jpg)
レンダラ
ダウンロードしたページを表示するクリックでリンクをたどれる
Rendereron
Browser
![Page 9: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/9.jpg)
プラットホームアプリケーションを動かすAPI を用意する
OS
Browser
API
Platform
プラットホームの機能をプログラムから使う手段
![Page 10: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/10.jpg)
ブラウザ
• ページをレンダリングする仕組みどうやって画面を表示するのか?
• アプリケーションを動かす仕組みどんな機能の API があるのか?
![Page 11: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/11.jpg)
目次
• ページをレンダリングする仕組み
• アプリケーションを動かす仕組み
![Page 12: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/12.jpg)
• ページをレンダリングする仕組み
• アプリケーションを動かす仕組み
![Page 13: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/13.jpg)
操作表示
ページのレンダリング
ダウンロード
解釈
描画
整形
反応
![Page 14: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/14.jpg)
操作表示
ダウンロード
解釈
描画
整形
反応
![Page 15: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/15.jpg)
HTTP:
Hypertext Transfer Protocol
![Page 16: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/16.jpg)
HTTP:
Hypertext Transfer Protocol
Browser Server
Request(URL)
Response(Data)
TCP
![Page 17: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/17.jpg)
GET /index.html HTTP/1.1Host: localhostConnection: keep-aliveCache-Control: max-age=0User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_7) ari/535.1Accept: text/html,application/xhtml+xml,application/xml;q=0Accept-Encoding: gzip,deflate,sdchAccept-Language: en-US,en;q=0.8Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3If-None-Match: "13185-2c-3e9564c23b600"If-Modified-Since: Sat, 20 Nov 2004 20:16:24 GMT
Headers
Request-LineHTTP Request
Method URL Version
Demo
![Page 18: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/18.jpg)
•GET: データをダウンロードする•POST: 何か変化を起こしたい•データベースを更新するなど
•そのほか: PUT, DELETE, HEAD, ...
HTTP Methods
![Page 19: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/19.jpg)
HTTP/1.1 200 OKDate: Fri, 08 Jul 2011 14:45:08 GMTServer: Apache/2.2.17 (Unix) mod_ssl/2.2.17Content-Location: index.html.enLast-Modified: Sat, 20 Nov 2004 20:16:24 GMTContent-Length: 44Keep-Alive: timeout=5, max=100Connection: Keep-AliveContent-Type: text/html
<html><body><h1>It works!</h1></body></html>....
Headers
Status-LineHTTP Response
Body
Version Status
Demo
![Page 20: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/20.jpg)
•200: ありました•301: 別のURLに引っ越しました•404: そのURLはありません•500: サーバがなんかエラーですまん
HTTP Status Code
![Page 21: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/21.jpg)
•200: ありました•301: 別のURLに引っ越しました•404: そのURLはありません•500: サーバがなんかエラーですまん
HTTP Status Code
![Page 22: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/22.jpg)
HTTP
• 要求-返信方式
• テキスト
• 単純(高速化しようとすると複雑)
![Page 23: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/23.jpg)
操作表示
ダウンロード
解釈
描画
整形
反応
![Page 24: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/24.jpg)
解釈?
データを読んで
適切なデータ構造=モデルを
つくること
![Page 25: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/25.jpg)
ModelData
<HTML>
CSS {...}
Image Pixelmap
Box
DOM
CSSOM
![Page 26: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/26.jpg)
ModelData
IRAST
*.c
*.h
似ているもの: コンパイラ
MachineCode
![Page 27: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/27.jpg)
<HTML> BoxDOM
HTML:
Hypertext Markup Language
<タグ 属性=”値”>テキスト</タグ><別のタグ> <別のタグ>入れ子にできる</別のタグ></別のタグ>
![Page 28: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/28.jpg)
HTML
• 語彙(タグ/属性名)は決まっている
• それぞれ意味がある(XML とは違う)
• タグごとに標準の見た目がある
Demo
![Page 29: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/29.jpg)
<HTML> BoxDOM
DOM:
Document Object Model
• HTML の抽象構文木
• HTML のパーサが構築する
![Page 30: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/30.jpg)
<html> <head>..</head> <body> <h1>Greet<h1> <div> <span> Hi! </span> How are you? </div> <span> ... </span></html>
入れ子構造のツリー
html
body
h1
divspan
span
head
“Greet”
“Hi!”
“How are you “
Demo
![Page 31: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/31.jpg)
CSS:Cascading Style Sheet
CSS {...} BoxCSSOM
/* rule */h1, h2 { /* selector */ /* properties */ font-family: monospace; font-size: 12pt;}
![Page 32: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/32.jpg)
CSS
• 表示上のプロパティ(外見)を指定
• 文字色、背景色、フォント
• 装飾(影、角丸、枠線、下線)
• 柔軟なセレクタ
• 特定のタグ、特定の属性名
• 複数セレクタに合致(カスケード)
![Page 33: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/33.jpg)
CSS Object Model
CSS {...} BoxCSSOM
• だいたいDOMと同じような雰囲気
• 入れ子構造、ハッシュテーブル
• 詳細は割愛
![Page 34: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/34.jpg)
CSS Box Model
Box
DOM
CSSOM
![Page 35: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/35.jpg)
Box Model: 入れ子の矩形
Demo
![Page 36: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/36.jpg)
Box
• 表示上の入れ子関係• DOM ツリーと似ているが違う
• スタイル=表示に関する指定• CSS で指定された色や書体など
• 解決済
Box 毎に自己完結している
• 位置や大きさはあとで決める(整形)
block
block
block
block
inline
inline
block
inline
![Page 37: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/37.jpg)
DOM Box Model
html
body
h1
divspan
span
head
block
block
block
blockinline
inlineblock
inlineCSSOM
![Page 38: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/38.jpg)
Box の種類
• Block (display: block)幅一杯つかい、縦に並べる<div>, <p>, <h1>...
• Inline (display: inline)Block を埋めるテキストの一部可能なら横に並び、改行する<a>, <b>, <span>,...
• 他に整形方法の数だけバリエーション
![Page 39: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/39.jpg)
ModelData
<HTML>
CSS {...}
Image Pixelmap
Box
DOM
CSSOM
データからモデルへモデルから別のモデルへ
解釈?
![Page 40: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/40.jpg)
操作表示
ダウンロード
解釈
描画
整形
反応
![Page 41: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/41.jpg)
整形/レイアウト
• Box の位置と大きさを計算すること
• レイアウトの種類だけ計算方法がある
![Page 42: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/42.jpg)
Flow Float Absolute
Multi-column Table/Grid Flexbox
![Page 43: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/43.jpg)
• 子は自分の大きさを計算する• 親は子の位置を計算する• 親の大きさは子の並びで決まる
整形: 基本的なアイデアblock
block
block
blockinline
inline
block
inline
![Page 44: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/44.jpg)
• 親が条件を指定する• ex. 幅が最大 600 ピクセル• 条件に合うよう子を詰めていく• はみ出したら折り返す
整形: 大きさの計算(Flow)
幅=指定以内
高さ=累計
![Page 45: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/45.jpg)
整形
• Box の位置と大きさを計算すること
• 子から親の順で再帰的に計算
• バリエーション色々
![Page 46: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/46.jpg)
操作表示
ダウンロード
解釈
描画
整形
反応
![Page 47: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/47.jpg)
描画ツールキット:
OS/サードパーティのライブラリ
• 線を引く
• 多角形を塗りつぶす(単色、画像)
• 文字を書く
• 画像を重ね合わせる
• ...
![Page 48: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/48.jpg)
描画
![Page 49: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/49.jpg)
描画1
2
3
56
4
7
9810
11
• Box を順番に描いていく• ほぼ深さ優先
DFS で書けるようソートしておく
• 画面外は描かない枝刈り
![Page 50: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/50.jpg)
操作表示
ダウンロード
解釈
描画
整形
反応
![Page 51: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/51.jpg)
操作表示
ダウンロード
解釈
描画
整形
反応
![Page 52: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/52.jpg)
反応
• OS のイベントを受け取る
• イベントの種類とページの中身に応じ該当する処理(ハンドラ)を呼び出す
![Page 53: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/53.jpg)
• キーボード打鍵
• マウス操作
• ウィンドウサイズ変更
• ...
イベント: OS からの通知
![Page 54: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/54.jpg)
<a> <input> <textarea>
テキスト編集
リンク先移動
Form投稿
イベントハンドラとDOM
![Page 55: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/55.jpg)
イベントの配信マウスイベントの例
Click!
ScreenBoxDOM
![Page 56: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/56.jpg)
反応 • OS のイベントをうけとる
• イベントをDOMノードに配信する
• ノードのイベントハンドラを呼ぶ
OS
![Page 57: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/57.jpg)
Questions?
•ページをレンダリングする仕組み
• アプリケーションを動かす仕組み
![Page 58: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/58.jpg)
• ページをレンダリングする仕組み
• アプリケーションを動かす仕組み
![Page 59: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/59.jpg)
JavaScript インタプリタ
ウェブアプリケーション
レンダラ
API
アプリケーション
![Page 60: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/60.jpg)
JavaScript インタプリタ
レンダラ
API
アプリケーション
![Page 61: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/61.jpg)
JavaScript
<html><head><script>function hello() { var message = "Hello, " + document.title; window.alert(message);}</script></head><body onload=”hello();”>...
![Page 62: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/62.jpg)
JavaScript
• HTML にテキストを埋め込む/ロードして使う
• プログラマがコンパイルしなくていい• 動的型付け言語 (like:Perl, Ruby, Python, etc)
• 標準機能は少ない
• Object, Function, Number, String, RegExp, Array, Math, Date
![Page 63: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/63.jpg)
JavaScript インタプリタ
レンダラ
API
アプリケーション
![Page 64: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/64.jpg)
API(Application Programming Interface)
ブラウザの機能を JS から使う入り口
• イベントハンドラをカスタマイズしてユーザの操作に反応する
• DOM の構造を書き換えて画面に情報を表示する
• HTTP を呼び出してデータをダウンロード/更新する
Demo
![Page 65: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/65.jpg)
典型的な仕事
• GUIを拡張するタブ, ドロップダウンメニュー, 入力補完,...
• サーバの仕事を肩代わりする入力項目の事前チェック, データの検索
• 画面を部分的に更新(リロードなし)
AJAX と呼ばれる
Demo
![Page 66: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/66.jpg)
HTML5 (a part of)
より多くの機能を使いたい
• HTTP 以外で通信したい: WebSocket
• 描画ツールキットを使いたい: Canvas
• 3D で描きたい: WebGL
• ファイル使いたい: File API, IndexedDB
• ...
![Page 67: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/67.jpg)
JavaScript インタプリタ
レンダラ
アプリケーション
OS, ライブラリ...
API
HTML5 (a part of)
![Page 68: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/68.jpg)
プラットホームとしての
ウェブブラウザ
• JavaScript プログラムを動かす
• レンダラの機能をAPIで公開する
• レンダラになかった機能も用意する
![Page 69: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/69.jpg)
• ページを表示する仕組み
•アプリケーションを動かす仕組み
![Page 70: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/70.jpg)
今日はなさなかった話題
• 標準化
• 様々なブラウザ実装
• セキュリティ
• 性能
• レンダラ以外の機能
![Page 71: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/71.jpg)
そのほか余談
![Page 72: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/72.jpg)
ウェブブラウザの話。ご清聴ありがとうございました
Questions?
![Page 73: On Web Browsers](https://reader034.vdocuments.net/reader034/viewer/2022051400/55389207550346f02f8b4823/html5/thumbnails/73.jpg)
Photo credithttp://www.flickr.com/photos/birdfarm/519230710/http://www.flickr.com/photos/saschaaa/152502539http://www.flickr.com/photos/junnn/4095423137/http://www.flickr.com/photos/ccnz/401169276/sizes/http://www.flickr.com/photos/gilderic/4398769315http://www.flickr.com/photos/wiccked/184616586/http://www.flickr.com/photos/anneh632/4807040595/http://www.flickr.com/photos/mrsenil/2073171323/http://www.flickr.com/photos/afu007/2398217277/http://www.flickr.com/photos/cityhunter12/