Windows 8.1 Update で追加された Internet Explorer 11 の新機能まとめ

今月初旬、サンフランシスコで行われた開発者向けのイベント Build 2014 で Windows 8.1 Update が発表されました。 このアップデートには Internet Explorer 11 の新機能も含まれており、あとでブログで紹介しようと思っていたら先に本社のブログ、技術情報が先に公開されてしまったので、そちらを紹介したいと思います。 Windows 8.1 Update では Internet Explorer 11 の F12 開発者ツールの機能アップと、旧い Internet Explorer 向けにつくられた Web ページを利用するためのエンタープライズモードという機能が追加されました。 今回のこの記事では、この 2 つのトピックについて紹介したいと思います。   F12 開発者ツールのアップデート Windows 8.1 Update では Internet Explorer 11 の F12 開発者ツールの機能強化がされましたが、これはあくまでも既存の機能を強化するものであり、大きな機能の追加ではありませんでした。しかしながらそのアップデートは、DOM エクスプローラー、デバッガー、コンソール、分析ツール、と、そのほとんどに行われており、各機能はより強力に進化しています。 Windows 8.1 Update で行われた Internet Explorer 11 の F12 開発者ツールの機能強化については以下のドキュメントをご覧ください。…

2

『Internet Explorer 10 移行セミナー』フォローアップ

去る 6 月 6 日 (水) に『Internet Explorer 10 移行セミナー』 が開催されました。 このセミナーは、既存の Web コンテンツを支障なくかつ速やかに、最新の Internet Explorer 10 のドキュメントモードで正しく動作するよう移行していただくことを目的にしたセミナーです。 私も 『最新開発支援ツールを使ったデバッグ対応』というタイトルでセッションを担当し、Internet Explorer F12 開発者ツール、Compat Inspentor、Fiddler の紹介、また、それらを組み合わせて、古い Internet Explorer に合わせて作った Web コンテンツを、最新の Internet Explorer 10 のドキュメントモードで正しく動作するよう検証、修正するための手順を紹介しました。 スライドをシェアしましたので、ご興味のある方はご覧ください。 ※私のセッションは、小粋なデモと楽しいお喋りがメインですので、スライドだけを見てもありよく分からないかもしれませんが。 最新開発支援ツールを使ったデバッグ対応 View more presentations from Osamu Monoe. セッションして紹介しましたツールの情報は以下で入手することができます。   使ってみよう! [F12] IE9 開発者ツール – 検証機能 http://blogs.msdn.com/b/osamum/archive/2011/10/05/hehehe.aspx   F12 開発者ツールで…


使ってみよう! [F12] IE9 開発者ツール – 検証機能

//build/ 参加のための出張やら、MSC2011 の登壇などでずいぶんと間が空いてしまいましたが、引き続き Internet Exloprer 9 付属の F12 開発者ツールの使い方について書きます。 ちなみに今までの関連エントリは以下の通りです。 「使ってみよう! [F12] IE9 開発者ツール」 シリーズ HTMLとJavaScript のデバッグ編 さまざまな情報の表示 http キャプチャ機能 今日は F12 開発者ツールの検証機能について書きます。   [検証] メニュー以外の検証機能 Internet Exloprer 9  F12 開発者ツールにはさまざまな 「検証」 = 「調査して事実を確認する」 機能が搭載されています。 デバッグツール色の濃い F12 開発者ツールなので、そんなこと言ったらなんだってそうだろう、という声もあると思うのですが、まぁ、それはそれとして。 ここでは ユーザーによって行われる可能性のある Web コンテンツの通常動作の確認に使用できる機能を紹介します。   ウィンドウサイズの変更 趣味で HP を作成している人 (まだいらっしゃるのでしょうか?) などは、あまり気にしないと思うのですが、割と大事なのが異なる画面サイズでの表示の確認です。 インターネット上の Web ページは、不特定多数の訪問者によって閲覧されますが、閲覧者の使用している画面のサイズがみな同じというわけではありません。 なぜなら人間には自由意思というものがあって、自らの望む画面サイズを自らが望むように設定でき、そしてその行為は法律で保護されているからです…、というのはある意味本当ではあるのですが、多くの場合、使用しているコンピューターやデバイスのスペックによって変わってくるというのがほとんどでしょう。 かつて、私が現役のプログラマーで、フォームベースのデスクトップ アプリを開発していた時分は、画面サイズの確認というと、わざわざディスプレイドライバーの設定を変え、解像度を変更して見栄えを確認していたものですが、Web…


使ってみよう! [F12] IE9 開発者ツール – HTTP キャプチャ機能

今回も前々回の記事に引き続き、Internet Exloprer 9 付属の F12 開発者ツールの使い方についてです。 (※1) 「F12 開発者ツールって、なによ..。」 という方はぜひ、前々回の記事をご覧いただければと思います。 (※2) Internet Explorer 9 ( IE9 ) をお使いの方は、ぜひ [F12] キーを押下して、実際に [F12 開発者ツール] を動かしながら本記事をご覧になってくださいませ。 今回は、F12 開発者ツールに搭載されている、IE9 と Web サーバー間を流れる HTTP をキャプチャする機能について紹介します。   [ネットワーク] タブでの HTTP のキャプチャ IE9 の F12 開発者ツールには、IE9 と Web サーバーの間でやり取りされる HTTP の情報を確認するためのネットワークキャプチャ機能が搭載されています。 この機能を使用すると、Web ブラウザーからのリクエスト、Web サーバーからのレスポンスの内容はもちろんのこと、ページが含んでいる画像やプラグインオブジェクトといった外部ファイルのラウンドトリップに要した細かな時間なども確認することができます。 F12 開発者ツールのネットワークキャプチャ機能を使用するには、[ネットワーク] タブをアクティブにし、[キャプチャの開始] ボタンをクリックします。 キャプチャが開始されたら、目的のページに移動するか、既にページを表示している場合は、IE9 の更新ボタンをクリックするか [F5] キーを押下してページを更新します。…

1

使ってみよう! [F12] IE9 開発者ツール – さまざまな情報の表示

前回の記事に引き続き、Internet Exloprer 9 付属の F12 開発者ツールの使い方について書きます。 ※「F12 開発者ツールって、なんじゃい?」 という方はぜひ、前回の記事をご覧いただければと思います。 今回は、Internet Explorer 9 のコンテンツ表示画面への、さまざまな情報の表示方法について紹介します。   エレメント情報の表示 JavaScript や CSS で Web ページのエレメント を操作する場合、エレメントの id 属性や class 属性を使用します。 こういったエレメントの持つ情報の確認は、一般的に HTML ソースで行いますが、ブラウザーのコンテンツ表示画面に実際に描画されたエレメント上で確認できたほうがイメージが湧きやすい場合があります。 IE9 の F12 開発者ツールの [表示] メニューを使用すると、Web ブラウザーで表示されている Web ページ上に、そのページを構成しているエレメントの ID やクラス名、リンク パスやその他の情報を表示させることができます。 表示の仕方は、[表示] メニュー内の目的にあったメニューを選択していくだけです。 (F12 開発者ツールの[表示]メニューの内容) (エレメントの ID とクラス名を表示したところ) [表示] メニュー内の [リンク レポート]を選択すると、ページ内の全てのリンクの一覧を Web ページとして表示します。 (リンク…

3

使ってみよう! [F12] IE9 開発者ツール – HTMLとJavaScript のデバッグ編

IE8 以降の Internet Explorer をお使いの方であれば、うすうすお気づきのことと思いますが、Internet Explorer 8 からは Web ページをデバッグするための開発者ツールが搭載されています。 「え、おれ IE9 使ってっけど、そんなの知らねーよ!」 という方は、IE9 を起動してキーボードの [F12] キーを押下していただければと思います。 以下のようなウィンドウが表示されると思います。    F12  開発者ツール これが Internet Explorer 9 に搭載されている [F12 開発者ツール] です。 お察しの通り、ツール名の 「F12」 は、起動のために押下するキーを表しています。親切ですね。 起動してきた [F 12 開発者ツール] のウィンドウ内には、さまざまなメニューやツールバー、そして機能名が書かれたタブが整然と並んでおり、その様子から、「なにかやってくれそう」な感がぷんぷんと漂ってきますが、いきおい期待は高まるものの、ぱっと見、「どう使っていいのかわからない」というのが大半の方の感想でしょう。 そこで今回から数回に別けて Internet Explorer 9 の基本的かつ特徴的な機能について、簡単に機能をご紹介させていただきます。   Internet Explorer 9  [F12 開発者ツール] の起動 [F12 開発者ツール] を起動するには、Internet Explorer 9 起動中にキーボードの…