Contenu connexe Similaire à JavaScript And Keywords (20) 6. • Browser Components
• ブラウザはコンポーネントで構成されている
全体を見れば複雑だが、個々のコンポーネントは基
礎部品の積み重ねで出来ており、相応の時間をかけ
てブラウザのコードを読めば細部まで理解が可能
• WebKit,Firefox,最新ブラウザの内部構造
• http://www.html5rocks.com/ja/tutorials/internals/
howbrowserswork/
7. • WebKit
• 主にAppleが開発中のレンダリングエンジン
• Android BrowserはWebKit
• ChromeもVer. 27まではWebKit → 28からは Blink へ
• WebKit2
• WebKitをマルチプロセス化したもの
• Safari, MobileSafari, Tizen(?) が WebKit2 を採用
• Blink
• Google が WebKit からフォークし開発中のエンジン
• Chrome (for Android), Opera.Next が Blink を採用
9. • WebKit::WebCore
• WebKitのコアコンポーネント。レンダリング担当
• プラットフォームに依存しない(共通部品)
• WebKit::WebCore/platform
• 各プラットフォームごとの実装
• WebKit::Android WebKit
• Android Browser用の実装
• Chrome for Android では使われていない
• {root}/framework/base/core/java/android/webkit
• {root}/external/webkit
10. • WebKit::JavaScript Core
• WebKit デフォルトの JavaScript エンジン
• Nitro
• Apple の JavaScript エンジン
• MobileSafari で利用されている
• V8
• Google の JavaScript エンジン
• Chrome, Chrome for Android,
Android 4.1以上, Adobe Air, Node.jsで利用されている
11. • JIT (Just-In-Time compiler)
• 実行時にコンパイルを行い、ネイティブコードを直
接生成するコンパイラ
• Nitro, TraceMonkey,V8 などは JIT コンパイラ
• JIT毎に特性が異なり、あるブラウザで高速なコード
でも、他のブラウザも同じ結果になるとは限らない
• 現在は正しくても、未来では不正解になることも
よくある。疑問を感じたらベンチマークで比較
• V8::Crankshaft
• V8 を更に高速化する技術
• 頻繁に繰り返し実行する部分は徹底的に最適化を行い、そう
でもない部分には最適化を施さない
13. • Rhino
• Javaで実装された組み込み用の JavaScript エンジン
• SpiderMonkey,TraceMonkey, IonMonkey,
JaegerMonkey
• Mozilla の JavaScript エンジン
• Cairo
• グラフィックライブラリ、
Firefoxが使用している
• Skia
• Googleのグラフィックライブラリ、
ChromeとAndroid が使用している
14. • Chromium
• 主にGoogleが開発しているChromeのベースブラウザ
• 実験的な機能を多数搭載している
• http://www.chromestatus.com/features
• Firefox OS (Boot to Gecko)
• Mozilla が開発している Web OS
• デバイスの機能をブラウザから利用するWeb***APIを
多数策定している
• https://wiki.mozilla.org/WebAPI
16. • HTML5
• WebAppを実現する技術や仕様の総称
• 影響範囲はHTML,CSS,DOM,SVG,Canvas,Video,Audio
と多岐に渡り、必要とされる知識量も膨大
• 2012年に仕様策定が完了済み
http://www.w3.org/2012/12/html5-cr.html.ja
• 2014年中に実験フェーズを終え、最終勧告が公開さ
れる予定
• 最終勧告に到達するまでには、2種類以上のブラウザ
で仕様が十分に実証される必要がある
17. <canvas>
<details>
<summary>
<a download>
<iframe sandbox srcdoc>
<style scoped>
<datalist>
<track>
<input type=”***”>
date, month, number, datetime, week, time,
url, color, range, search, email, tel, file(mobile)
<audio>
<video>
<dialog>
<svg>
<svg2>
<inline svg>
<link rel=”import”>
<picture><source>
<img srcset>
HTML5 (HTML)
<script async defer>
18. Shadow DOM
Template Elements
Custom Elements
mouseenter
mouseleaveFormVaridation
Encrypted Media
MutationObserver
Drag and Drop
Content Security Policy
Keyboad Events
Pointer Events
HTML5 (DOM)
TouchEvents
GestureEvents
Pointer Lock
Microdata
DOM Lv4
22. Canvas 2D Blending (blend-mode)
Canvas 2D Text Decoration
Canvas rendering from Workers
Canvas context “alpha” attribute
screen.canvasResolution
HTML5 (Canvas)
normal | multiply | screen | overlay
| darken | lighten
| color-dodge | color-burn
| hard-light | soft-light | difference
| exclusion | hue | saturation
| color | luminosity
WebGL
28. • DOM Lv0
• 仕様が存在しないレガシーな HTML/CSS/JS の挙動の
ことをDOM Lv0 と呼ぶ
• 最新のブラウザでもある程度は動作するが無保証
• CSSOM
• DOM Lv0 の一部(CSS)を
仕様として(無理やり)文章化したもの
• 古いブラウザはこの仕様通りに実装されていない
• window.innerWidth, pageXOffset, screenX, outerWidth
• Element.elementFromPoint, getClientRect
• HTMLElement.clientTop, offsetTop
• MouseEvent.xxx
30. • ECMAScript
• ECMA(国際標準化団体)で標準化された JavaScript
• ES 3 (ECMAScript-262 3rd edition)
• ES 5 (ECMAScript-262 5th edition)
• ES 3 に StrictMode, JSON, getter/setter などを追加
• ES 5.1 は ES 5 の Errata (誤字修正版)
• ES 6 (ES.next, harmony)
• ES 5.1 をベースに策定中の新仕様
• JScript
• IE 3∼8 に搭載されたJavaScript互換言語(ちょっと違う)
38. • AltJS
• コンパイルしてJavaScriptを生成する言語の総称
• Haxe, CoffeeScript, JSX, TypeScript などがある
• Haxe
• ActionScript 3とほぼ同じ構文を持つ
静的型付け言語(動的型付けも可能)
• Haxeのコードは、Flash,ActionScript 3, C++, C#,
Java, PHP, Neko にもコンパイル可能
• CoffeeScript
• Rubyに似た独自の構文を持つ動的型付け言語
39. • JSX
• Java に似た構文をもつ静的型付け言語
• (将来はC++にもコンパイルが可能になるらしい)
• TypeScript
• ES 6の構文を先取りした静的型付け言語
• JavaScriptのソースコードをそのままコンパイル可能
40. Feature Haxe CoffeeScript JSX TypeScript
静的型 ⃝ --- ⃝ ⃝
動的型 ⃝ ⃝ ⃝ ⃝
類似言語 AS3 Ruby Java? C#
型推論/型チェック ⃝ --- ⃝ ⃝
オーバーロード --- --- ⃝ △
力点 汎用性 Ruby風 最適化 ES6先取
41. Feature Haxe CoffeeScript JSX TypeScript
開発規模 中∼大 小 中∼大 小∼大
手引書 十分 十分 不足 不足
導入実績 少ない 多い 多少 多少
開発ツールの
アシスト
◎ △ △ ◎
既存Libraryの活用 可能 --- --- 可能
Google Trend
検索ボリューム
30 89 ??? 49
43. • W3C (World Wide Web Consortium)
• Webの技術仕様の標準化を推進する非営利団体。
W3Cで承認された仕様が標準となる
• 検討結果をTechnical Report(TR)として公開する
• W3Cの勧告フェーズ
• Working Draft (WD, 草案) - 3ヶ月で次のステップへ
• Last Call Working Draft (LC, 最終草案) - レビュークリ
アで次のステップへ
• Candidate Recommendation (CR, 勧告候補) - 試験的実
装開始。問題があればWDに差し戻し
• Proposed Recommendation (PR, 勧告案) - 2つ以上のブ
ラウザで実装を確認すると次のステップへ
• Recommendation (REC, 勧告) - 正式な規格として承認
44. • 標準化作業中のWebAPI
• http://www.w3.org/2012/sysapps/
• Bluetooth, Calender, Device, Idle, Network, Secure...
• ベンダー独自のWebAPI
• Chrome API
• Chrome WebStore, Chrome Extension, Google Apps で
利用可能な特別なAPI
• http://developer.chrome.com/apps/api_index.html
• Mozilla WebAPI
• Firefox, Firefox OS などで利用可能な特別なAPI
• https://wiki.mozilla.org/WebAPI
45. • Venvor Prefix
• 仕様策定中の実験的機能に付与されるプリフィクス
• 仕様策定後にはプリフィクスは除去される
Browser CSS Prefix Method Prefix
-webkit-***
webkitCamelCase
WebKitCamelCase
-webkit-***
webkitCamelCase
WebKitCamelCase
-ms-*** msCamelCase
-moz-***
mozCamelCase
MozCamelCase
47. • Browser Share
• IE が著しい減少トレンド = デスクトップの減少
• Chrome が急成長している
• http://gs.statcounter.com/ http://www.w3counter.com/trends
48. • Mobile Carrier Share
• Docomoが減少トレンド
• http://www.tca.or.jp/database/
• https://sites.google.com/site/mobilemarketshare/japan-volume
• docomo: 46.23%, au: 28.79%, softbank: 24.98%
52. • Grunt
• アセットビルドパイプライン自動化ツール
• タスクを登録しCoffeeScriptやSassのコンパイル、
ファイルの変更をwatchしリビルド・リロード
• Bower
• フロントエンド用のパッケージ管理ツール
• % npm install -g bower
• Yeoman
• Webフロントエンドの構成管理ツール
• % npm insall -g yo grunt-cli bower
• Bower と Grunt と連携して動作する
53. • PhantomJS
• 画面を持たない Safari (WebKit)
• コンソールからテストを実行可能
• SlimerJS
• PhantomJSのGecko版
• CaspserJS
• PhantomJS(SlimerJS)と連携動作するライブラリ
• 簡単な記述で複雑なテストを実行できる
• スクレイピングなどにも応用可能
54. • Validation Service
• チェックを行ってくれるサービスの一覧
• MarkupValidation Service - http://validator.w3.org/
• HTML5lint - http://www.htmllint.net/html-lint/htmllint.html
• CSS Lint - http://csslint.net/
• JS Hint - http://www.jshint.com/
• JSON Editot - http://braincast.nl/samples/jsoneditor/
• BenchMark
• jsPerf - http://jsperf.com/
• Test Bed
• jsFiddle - http://jsfiddle.net/
• Chrome DevTools の Snippets も利用できる
55. • Generator
• CSS系
• Google.search(“CSS ジェネレーター まとめ”)
• 例: http://matome.naver.jp/odai/2132750704946539001
• 例: http://matome.naver.jp/odai/2135014007678440101
• グリッドレイアウト系
• Google.search(“レイアウト ジェネレーター まとめ”)
• 例: http://w3q.jp/t/1947
• 例: http://e0166.blog89.fc2.com/blog-entry-862.html
57. • MDN - https://developer.mozilla.org/ja/
• Google.search(“MDN keyword”) で検索するとWebに関
する仕様を調べることができる
• HTML5 Rocks - http://www.html5rocks.com/ja/
• Googleの中の人が執筆と翻訳
• Dush - http://kapeli.com/dash
• ドキュメントビューアアプリ
• AngularJS, BackboneJS, CSS, Git, HTML, jQuery, Less,
NodeJS, Sass など、多種多様なドキュメントをインク
リメンタルサーチ(串刺し検索)ができる
58. • Stack Overflow - http://stackoverflow.com/
• 圧倒的な情報量
• Qiita - http://qiita.com/
• 日本語で探す場合に
• can i use - http://caniuse.com/
• HTML5 API のブラウザサポート状況が分かる
• 不具合情報までは得られない
• HTML5 TEST - http://html5test.com/
• HTML5 系のAPIの実装状況を点数で表示する
• ブラウザ毎の比較もできる
• 不具合情報までは得られない
60. • Browser Cache (または単に Cache)
• ブラウザがサーバから取得したアセットを自動的に
保持する仕組み
• Cache を OFFにする
• 設定を変更し、キャッシュを無効にすることで、修
正がリアルタイムで反映される状態にする(キャッシ
ュの有無による混乱を回避するため)
61. • about:about (chrome://about)
• ブラウザの隠し機能一覧。一部だけ紹介
• chrome://appcache-internals - ApplicationCacheを使った
開発で必ず知っておきたい画面。制御が難しい
AppCacheのキャッシュをクリアできる
• chrome://blob-internals - Blobを使った開発でお世話に
なる画面。Blob URLの一覧を確認できる
• chrome://dns - DNSやDNSプリフェッチ結果の一覧
• chrome://flags - 試験運用機能のON/OFF
• chrome://flash - ChromeがロードしているFlashモジュ
ールとバージョンなど
• chrome://gpu - GPU情報。ハードウェアアクセラレー
ションがONなのかOFFなのか確認ができる
62. • chrome://inspect - 開いているページの一覧と直接
DevToolsを起動することが可能。Chrome for Android
のリモートデバッグでお世話になるページ
• chrome://media-internals - 現在開いているメディアス
トリーム(Video,Audio)の情報一覧。音が鳴らないと
きなどにAudioストリームを開きすぎていないかなど
の問題切り分けに使える
• chrome://memory-internals - chrome://memory よりも詳
しい情報が取得できる
• chrome://net-internals - Chrome経由のネットワークア
クセスをキャプチャしたり一覧でみたりと、とても
重宝する
• その他にも便利な機能が沢山あります
