Webブラウザ

Webブラウザとは †

• Web上のWebページ（ホームページ）を閲覧するツール。
• Web標準 -モダンブラウザ

ブラウザの構造 †

• UI
• ブラウザエンジン
• レンダリングエンジン
• ネットワーキング
• UIバックエンド
• JavaScriptインタプリタ
• データストレージ

ブラウザの種類 †

PC版 †

• Chrome
• Edge
• Firefox
• Internet Explorer
• Opera
• Safari
• Microsoft Edge
• Netscape Navigator
• Lunascape
• Sleipni
• UC Browser -中国産
• ACRI -音声ブラウザ
• Flock -マッシュアップブラウザ
• Brave
• SRWare Iron
• Tor
• Vivaldi
• Sleipnir
• Maxthon

スマホ専用 †

• Smooz

携帯版フルブラウザ †

アプリケーション型 †

• jigブラウザ
• ibisBrowser
• サイトスニーカー
• Scope

組み込み型 †

• NetFront
• Opera
• iモードブラウザ

HTMLレンダリングエンジン †

• WebKit
  • Safari

• Gecko
  • Firefox

• Blink
  • Chrome
  • Brave

• EdgeHTML
  • Edge

• Trident

ブラウザ対応 †

ブラウザディテクション †

• ブラウザの種類を判別する技法
  • ユーザエージェント-navigator.userAgent
  • ActiveXObject

クロスブラウザ †

フィーチャー・ディテクション †

• 機能を利用できるか判別する技法
  • Modernizr

グレースフル・デグレデーション †

• 新しいブラウザの機能実装を採用
• 古いブラウザは最低限の対応
• 耐故障設計

プログレッシブ・エンハンスメント †

• 最低限の機能を定義する
• 定義に則り全てのブラウザに対応できるようにする
• 新しいブラウザの新しい機能も拡張的に対応する

ポリフィル †

• 新しいブラウザを基準
• 古いブラウザも技術の限りを尽くして対応する
• ツール
  • htnl5siv
  • css3pie
  • respond

ブラウザの対応状況 †

• http://www.browserscope.org/

セーフブラウジング †

• Google
  https://safebrowsing.google.com/

関連サイト †

• How Browsers Work: Behind the scenes of modern web browsers (2011.8.5)
  • https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

• フロントエンジニアなら知っておきたいブラウザレンダリングの仕組みをわかりやすく解説！ (2019.3.19)
  • https://leap-in.com/ja/lets-learn-how-to-browser-works/

• Inside look at modern web browser (2018.9)
  • https://developers.google.com/web/updates/2018/09/inside-browser-part1
  • https://developers.google.com/web/updates/2018/09/inside-browser-part2
  • https://developers.google.com/web/updates/2018/09/inside-browser-part3
  • https://developers.google.com/web/updates/2018/09/inside-browser-part4

• PrivacyTests.org
  https://privacytests.org/

関連用語 †

• CA/Browser Forum
• Chromium
• CSS
• DOM
• HTML
• JavaScript
• SOP -Same Origin Policy -同一生成元ポリシー
• URL
• URI
• サンドボックス
• マルチデバイス
• モバイルコード