Post on 22-Apr-2015
description
自己紹介: 森田創
ここで述べられていることは私の個人的な意見に基づくものであり、私の雇用者には一切の関係はありません。
ウェブブラウザ
←仕事
フロントエンド
とエンジン
エンジン +フロントエンド
Gecko Firefox, Thunderbird,...
WebKit Chrome, Safari,Mac Mail...
... ...
アプリ
ページ
レンダラ
ダウンロードしたページを表示するクリックでリンクをたどれる
Rendereron
Browser
プラットホームアプリケーションを動かすAPI を用意する
OS
Browser
API
Platform
プラットホームの機能をプログラムから使う手段
ブラウザ
• ページをレンダリングする仕組みどうやって画面を表示するのか？
• アプリケーションを動かす仕組みどんな機能の API があるのか？
目次
• ページをレンダリングする仕組み
• アプリケーションを動かす仕組み
• ページをレンダリングする仕組み
• アプリケーションを動かす仕組み
操作表示
ページのレンダリング
ダウンロード
解釈
描画
整形
反応
操作表示
ダウンロード
解釈
描画
整形
反応
HTTP:
Hypertext Transfer Protocol
HTTP:
Hypertext Transfer Protocol
Browser Server
Request(URL)
Response(Data)
TCP
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
•GET: データをダウンロードする•POST: 何か変化を起こしたい•データベースを更新するなど
•そのほか: PUT, DELETE, HEAD, ...
HTTP Methods
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
•200: ありました•301: 別のURLに引っ越しました•404: そのURLはありません•500: サーバがなんかエラーですまん
HTTP Status Code
•200: ありました•301: 別のURLに引っ越しました•404: そのURLはありません•500: サーバがなんかエラーですまん
HTTP Status Code
HTTP
• 要求-返信方式
• テキスト
• 単純(高速化しようとすると複雑)
操作表示
ダウンロード
解釈
描画
整形
反応
解釈？
データを読んで
適切なデータ構造=モデルを
つくること
ModelData
<HTML>
CSS {...}
Image Pixelmap
Box
DOM
CSSOM
ModelData
IRAST
*.c
*.h
似ているもの: コンパイラ
MachineCode
<HTML> BoxDOM
HTML:
Hypertext Markup Language
<タグ 属性=”値”>テキスト</タグ><別のタグ> <別のタグ>入れ子にできる</別のタグ></別のタグ>
HTML
• 語彙(タグ/属性名)は決まっている
• それぞれ意味がある(XML とは違う)
• タグごとに標準の見た目がある
Demo
<HTML> BoxDOM
DOM:
Document Object Model
• HTML の抽象構文木
• HTML のパーサが構築する
<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
CSS:Cascading Style Sheet
CSS {...} BoxCSSOM
/* rule */h1, h2 { /* selector */ /* properties */ font-family: monospace; font-size: 12pt;}
CSS
• 表示上のプロパティ（外見）を指定
• 文字色、背景色、フォント
• 装飾(影、角丸、枠線、下線）
• 柔軟なセレクタ
• 特定のタグ、特定の属性名
• 複数セレクタに合致(カスケード)
CSS Object Model
CSS {...} BoxCSSOM
• だいたいDOMと同じような雰囲気
• 入れ子構造、ハッシュテーブル
• 詳細は割愛
CSS Box Model
Box
DOM
CSSOM
Box Model: 入れ子の矩形
Demo
Box
• 表示上の入れ子関係• DOM ツリーと似ているが違う
• スタイル＝表示に関する指定• CSS で指定された色や書体など
• 解決済
Box 毎に自己完結している
• 位置や大きさはあとで決める(整形)
block
block
block
block
inline
inline
block
inline
DOM Box Model
html
body
h1
divspan
span
head
block
block
block
blockinline
inlineblock
inlineCSSOM
Box の種類
• Block (display: block)幅一杯つかい、縦に並べる<div>, <p>, <h1>...
• Inline (display: inline)Block を埋めるテキストの一部可能なら横に並び、改行する<a>, <b>, <span>,...
• 他に整形方法の数だけバリエーション
ModelData
<HTML>
CSS {...}
Image Pixelmap
Box
DOM
CSSOM
データからモデルへモデルから別のモデルへ
解釈？
操作表示
ダウンロード
解釈
描画
整形
反応
整形/レイアウト
• Box の位置と大きさを計算すること
• レイアウトの種類だけ計算方法がある
Flow Float Absolute
Multi-column Table/Grid Flexbox
• 子は自分の大きさを計算する• 親は子の位置を計算する• 親の大きさは子の並びで決まる
整形: 基本的なアイデアblock
block
block
blockinline
inline
block
inline
• 親が条件を指定する• ex. 幅が最大 600 ピクセル• 条件に合うよう子を詰めていく• はみ出したら折り返す
整形: 大きさの計算(Flow)
幅＝指定以内
高さ=累計
整形
• Box の位置と大きさを計算すること
• 子から親の順で再帰的に計算
• バリエーション色々
操作表示
ダウンロード
解釈
描画
整形
反応
描画ツールキット:
OS/サードパーティのライブラリ
• 線を引く
• 多角形を塗りつぶす(単色、画像）
• 文字を書く
• 画像を重ね合わせる
• ...
描画
描画1
2
3
56
4
7
9810
11
• Box を順番に描いていく• ほぼ深さ優先
DFS で書けるようソートしておく
• 画面外は描かない枝刈り
操作表示
ダウンロード
解釈
描画
整形
反応
操作表示
ダウンロード
解釈
描画
整形
反応
反応
• OS のイベントを受け取る
• イベントの種類とページの中身に応じ該当する処理(ハンドラ)を呼び出す
• キーボード打鍵
• マウス操作
• ウィンドウサイズ変更
• ...
イベント: OS からの通知
<a> <input> <textarea>
テキスト編集
リンク先移動
Form投稿
イベントハンドラとDOM
イベントの配信マウスイベントの例
Click!
ScreenBoxDOM
反応 • OS のイベントをうけとる
• イベントをDOMノードに配信する
• ノードのイベントハンドラを呼ぶ
OS
Questions?
•ページをレンダリングする仕組み
• アプリケーションを動かす仕組み
• ページをレンダリングする仕組み
• アプリケーションを動かす仕組み
JavaScript インタプリタ
ウェブアプリケーション
レンダラ
API
アプリケーション
JavaScript インタプリタ
レンダラ
API
アプリケーション
JavaScript
<html><head><script>function hello() { var message = "Hello, " + document.title; window.alert(message);}</script></head><body onload=”hello();”>...
JavaScript
• HTML にテキストを埋め込む/ロードして使う
• プログラマがコンパイルしなくていい• 動的型付け言語 (like:Perl, Ruby, Python, etc)
• 標準機能は少ない
• Object, Function, Number, String, RegExp, Array, Math, Date
JavaScript インタプリタ
レンダラ
API
アプリケーション
API(Application Programming Interface)
ブラウザの機能を JS から使う入り口
• イベントハンドラをカスタマイズしてユーザの操作に反応する
• DOM の構造を書き換えて画面に情報を表示する
• HTTP を呼び出してデータをダウンロード/更新する
Demo
典型的な仕事
• GUIを拡張するタブ, ドロップダウンメニュー, 入力補完,...
• サーバの仕事を肩代わりする入力項目の事前チェック, データの検索
• 画面を部分的に更新(リロードなし)
AJAX と呼ばれる
Demo
HTML5 (a part of)
より多くの機能を使いたい
• HTTP 以外で通信したい: WebSocket
• 描画ツールキットを使いたい: Canvas
• 3D で描きたい: WebGL
• ファイル使いたい: File API, IndexedDB
• ...
JavaScript インタプリタ
レンダラ
アプリケーション
OS, ライブラリ...
API
HTML5 (a part of)
プラットホームとしての
ウェブブラウザ
• JavaScript プログラムを動かす
• レンダラの機能をAPIで公開する
• レンダラになかった機能も用意する
• ページを表示する仕組み
•アプリケーションを動かす仕組み
今日はなさなかった話題
• 標準化
• 様々なブラウザ実装
• セキュリティ
• 性能
• レンダラ以外の機能
そのほか余談
ウェブブラウザの話。ご清聴ありがとうございました
Questions?
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/