Internet Explorer 8 開発者向け技術概要 2009年3月22日 野良 info [at] poop.jp

Apresentação em tema: "Internet Explorer 8 開発者向け技術概要 2009年3月22日 野良 info [at] poop.jp"— Transcrição da apresentação:

1 Internet Explorer 8 開発者向け技術概要 2009年3月22日 野良 info [at] poop.jp http://techbank.jp/nora/

2 免責条項 『Internet Explorer 8 開発者向け技術概要』をもとに作成してい ます。 http://msdn.microsoft.com/ja-jp/ie/dd550608.aspx 情報提供を目的としてマイクロソフトによって作成されたドキュメン トを私が個人的にまとめ直したものです。 この資料に記載されている内容により発生しうるあらゆる問題、損 害に対して一切の保障はいたしません。 あくまでも情報提供を目的として作成されたドキュメントをもとに、 情報提供を目的に個人が作成したものであることをご理解の上、ご 利用ください。 この資料は、私の個人的な見解であり、私の勤務先の見解ではあり ません。 上記を理解していただけましたら、再利用・プレゼン使用などに自 由に使用して頂いて構いません。 本資料が何らかの事情で公開することがまずい場合は、連絡をいた だけましたらすみやかに公開を停止いたします。 2

3 目次 1. IE8概要 2. 実現可能な相互運用性と互換性 3. 迅速で簡単な Web 開発 4. 参考情報 3

4 INTERNET EXPLORER 8概要 第零章 4

5 IE8 2009年3月20日リリース Windows XP、Vista、2008対応 32bit、64bit版 自動アップデートはされない Internet Explorer 8 ブロッカー ツールキットが提供されている 5

6 実現可能な相互運用性と互換性 第壱章 6

7 過去との互換性 以前のIEの動作モデルのサポート ページ単位でレンダリングモードを選 択できるようになった 以前の動作をサポートするか、WEB標 準に準拠するか選択できる 7

8 IE8で選択できる レンダリングモードの種類 Quirks (クワークス) モード IE5.5の頃のレンダリングモード？ IE7標準準拠モード IE８標準モード 8

9 IE8の既定のレンダリングモード IE8標準モードでレンダリングをする 9

10 レンダリングモードの切替え方法 X-UA-Compatibleヘッダー HTTP応答ヘッダー headタグ – metaタグによる設定はHTTPヘッダーの設定に 優先する – meta互換性タグは!DOCTYPEに関わらず必要 なレイアウトモードを指定できる 10

11 IE8レンダリングモード切替設定値 互換モード値レンダリング動作 IE=5Quirks(クワークス)モード IE=7IE7標準準拠モード IE=EmulateIE7!DOCTYPE宣言によりモードが決定する Quirksモードの宣言：Quirksモード 標準モードの宣言 ：IE7標準準拠モード IE=8IE8標準準拠モード IE=EmulateIE8!DOCTYPE宣言によりモードが決定する Quirksモードの宣言：Quirksモード 標準モードの宣言 ：IE8標準準拠モード IE=edgeIE8と将来の全てのバージョンのブラウザーがサポートす る最新の標準を使用。実稼働サイトには非推奨。 11

12 レイアウトモード 複数のレイアウトモードを搭載 12 Page Content Declarationレイアウトモード 既知の標準の !DOCTYPE と未知 の !DOCTYPE IE8 標準 IE=7 IE=EmulateIE7を宣言している場合 IE7標準準拠モード public識別子 "-//W3C//DTD XHTML 1.0 Transitional//EN" public 識別子 "-//W3C//DTD XHTML 1.0 Frameset//EN" public 識別子 "-//W3C//DTD HTML 4.01 Transitional//EN" (システム識別子を伴う) public 識別子 "-//W3C//DTD HTML 4.01 Frameset//EN" (システム識別子を伴う) “ほぼ” 標準 行の高さを除いてすべてのコンテンツは IE8標準 モード 行の高さは、テーブルのセルにイメージが含まれ、 かつイメージの周囲には余白が無いことを想定し ている古い動作のサイトにとっては特に重要です。 IE=7 IE=EmulateIE7を宣言している場合 IE7標準準拠モード Quirks モードの !DOCTYPE (!DOCTYPE の無い場合を含む) Quirks モード

13 ActiveX ActiveXコントロール管理機能の向上 読み込み場所、方法、許可するユーザの指 定 管理者権限無しでユーザのプロファイル内 へインストールできるようにパッケージす る機能 ユーザが悪意のあるActiveXをインストー ルしたとしても影響は、そのユーザのプロ ファイル内に限定される ほとんどの既存のActiveXコントロールは コードを書き直さずに活用できる 13

14 ユーザごとのActiveX 権限 管理者権限の無い標準ユーザ ユーザ自身のプロファイル内 メリット アカウント制御の効率化 悪意のあるActiveXの影響範囲の最小化 使用するには？ ほとんどの既存のActiveXは修正の必要無し ActiveXコントロールのCAVに含まれるINIファイルの変 更のみ 挙動 ActiveXが必要なページ：IE7のように情報バーの表示 インストール範囲：PC全体か自分自身に限定 14

15 サイトごとのActiveX 悪意のあるActiveXの再利用を防止する 防御メカニズム サイトごとのActiveX コントロールが実行を許可されている場所 かどうかの判定 ActiveXは自身をインストールしたドメ インだけで実行可能 インストール済みのActiveX 許可されていないWebで実行する  情報バーの表示 15

16 適応型ページズーム ページのレイアウトを維持したまま コンテンツの大きさを変更できる レイアウト前に各要素を拡大、縮小 する テキストとイメージのサイズの変更 ページの再構成 水平スクロールが非表示になりやすい 16

17 ズームの影響 フォントとテキスト フォントサイズの変更 フォントサイズは丸められる  12pxを110％にすると13.2pxだが13pxに Fixed、auto、relativeサイズ 絶対単位(in、cm、mm) デバイスやフォント依存(px、ex、em)  従来通りのサイズ変更 – 拡大率200％：100pxは200px コンテンツに依存する寸法(パーセントやauto)  サイズは変更されるレイアウトの際に再計算 17

18 ズーム・例 18

19 ズーム・デモ 19

20 印刷機能の向上 印刷媒体に対する機能と制御の拡張 コンテンツの印刷状態を制御できる page-braek-after・page-break-before プロパティのavoid、left、right値に対す る正しい動作 page-break-insideプロパティ widowsプロパティ orphansプロパティ マージン領域や分割すべきでないコンテ ンツ、その他の指定が可能 20

21 ファイル アップロードコントロール input type=file 読取り専用に変更 参照ダイアログボックスの使用が必須 ファイル名のみの送信 「サーバにファイルをアップロードす るときにローカルディレクトリのパス を加える」の無効 21

22 ファイルアップロード・デモ 22

23 迅速で簡単な WEB 開発 第弐章 23

24 開発ツール 組み込み型の統合開発者ツール F12 ツールメニューの開発者ツール CSSとHTMLの編集・デバッグ スクリプトのテスト・デバッグ パフォーマンス解析 DOMの表示と変更 レイアウトモードの変更 24

25 開発者ツール・デモ 25

26 Ajaxナビゲーション Ajax ページナビゲーションを使用しなくて もページのコンテンツを更新できる 戻る、進むなど履歴系に問題  window.location.hashプロパティで記録 26

27 Ajaxナビゲーション・デモ 27

28 接続イベント ネットワーク接続の確認 HTML5ドラフト NW接続の変化をシームレスに処理でき る NWが切断されたらローカルキャッシュ NWに接続したら更新 28

29 接続イベント・デモ 29

30 サニタイジング tostaticHTML 潜在的に実行可能なスクリプトを校正する部分 が存在しないか走査 存在する場合は、その文字列を削除 JSONメソッド ネイティブ動作 パフォーマンス向上 JSON.stringfy scriptオブジェクトをJSONストリングに変換 JSON.parse JSONストリングを安全に復元 30

31 MIME処理の変更 MIME sniffing機能 ダウンロードしたファイルのContent- Typeを特定する機能 互換性維持に必要  標準に準拠しないサーバ対応 脆弱性への対応 Upsniff処理の制限  (Content-type : image/* が付与されている ファイルを HTMLや Script として処理しない 31

32 迅速で簡単な WEB 開発 第参章 32

33 アクセラレータ 外部サイトのサービスに任意の Web ページから即座にアクセスできるコ ンテキスト サービス 現在の Web ページ内のデータと関連し た情報を "参照" 現在の Web ページから別のアプリ ケーションにコンテンツを "送信" 33

34 アクセラレータ・例 ページを移動せずにWebページ上に 重ねて表示できる 34

35 アクセラレータ 35

36 ウェブスライス HTML注釈を使用 WEBページ内で利用頻度の高いコン テンツを直接購読できる機能 コンテンツが変更されると更新通知を 受信できる 一定間隔でポーリングされる 推奨の更新間隔を設定できる  メールの受信箱、オークション 36

37 ウェブスライス 37

38 拡張されたクイック検索 検索キーワード候補の表示 検索結果の直接表示 画像検索 オープン仕様 自社サービスの検索も組み込める  自社ポータルの検索 38

39 ドメインのハイライト表示 訪問中のサイトが目的のサイトかの 確認が容易 不正サイト Extended Validation (EV) SSL 証明 書を持つセキュアなサイト 39

40 参考情報 第四章 40

41 参考情報 Internet Explorer デベロッパー センター http://msdn.microsoft.com/ja-jp/ie/default.aspx Internet Explorer 8 開発者向け技術概要 http://msdn.microsoft.com/ja-jp/ie/dd550608.aspx Ajax Hands-on Lab http://code.msdn.microsoft.com/ie8b2ajaxhol Ajax関係のデモに使用 Internet Explorer 開発チーム ブログ (日本語翻訳版) http://msdn.microsoft.com/ja-jp/ie/cc709374.aspx 41