『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 開発者ツールで…

0

IE9 でだけ HTML5 コンテンツが動作しない場合にまず確認すべきこと

HTML5 コンテンツのを作成し、繰り返し Internet Explorer 9 で表示や動作の確認を行っていると、ある日突然、Internet Explorer 9 でだけ HTML5 および CSS3 などの関連技術が突如として動作しなくなるという状況に遭遇することがあるやもしれません。 再インストールを行う前、いやさ、ディスプレイに向かって「使えねんだよ、このポ○コツ野郎が!!」などと容赦のない罵詈雑言を浴びせる前に確認してほしいことがあります。 それは、「互換表示になってやしませんか?」 ということです。   互換表示とは?   賢明なユーザー様であればご存じのとおり、Internet Explorer 9 は古いバージョンの Internet Explorer 用に作られた Web コンテンツとの互換を取るためにドキュメントモードというのを持っております。 具体的には 「Quirks (IE5 相当)」、「Internet Explorer 7 標準」、「Internet Explorer 8 標準」、「Internet Explorer 9 標準」 の 4 つのドキュメントモードを持っており、それぞれのバージョンの Internet Explorer の描画ルールに従ってコンテンツを描画します。 この機能を使用して、古い Internet Explorer 用に作成された Web コンテンツを Internet Explorer…

1

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

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

0

使ってみよう! [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 起動中にキーボードの…

0

HTML5 で Web コンテンツを書くのはまだ時期尚早なのか?

最近、複数の Web 制作会社さんにお邪魔する機会がありまして、そのたびに 「HTML5 でのお仕事って、けっこうありますか?」 と質問するのですが、いただく回答としては「スマートフォン用のものが 1~2 本くらいですかね」というのがほとんどです。 まぁ、HTML5 対応の Web ブラウザーの普及率と、古いブラウザーのサポートを考えるとしょうがないのかな、という気もします。 では、HTML5 を本格的に使うには、まだ時期が早いのか? というと、けっしてそんなことはないと思います。 「そうはいっても HTML5 でできることは今でも JavaScript + Flash でもできるし、それに、HTML5 をサポートしない古い Web ブラウザーにも対応させるための余計な工数がかかる」と考える人も多いでしょう。 しかし、そこでいうところの工数は単なる「コスト」 (出費) ではなく、のちのち回収可能な「投資」と考えていただきたいところです。 なぜならは、古いブラウザーはこれから消えていくばかりですので、それにかかる対応の費用や工数は、単なるコストにすぎません。しかし、HTML5 は将来的な可能性を広げてくれるものだからです。 ではそういった投資をしてまで Web コンテンツを HTML5 で記述するメリットとはなんでしょう?   HTML5 でコンテンツを書くメリット HTML5 のメリットは、「セマンティック Web で、検索エンジンとの親和性が高く SEO に優れる」とか、「『仕様による実装』のため Web ブラウザー間の互換性が高い」とか、「プラグインをインストールすることなくリッチな Web アプリケーションが作成できる」等々、さまざまなメリットが、さまざまなところで述べられていますが、一番のメリットはなにかというと、あたりまえのことなのですが 「最新バージョンの HTML」 であるということでしょう。 HTML5 を使用すれば、それ以前であれば Flash などのプラグインの力を借りなければ実現することができなかったさまざまな機能を…

3

HTML5 コンテンツを古い Internet Explorer に対応させるには?

HTML5 や CSS3 の新機能はすばらしく、その登場は喜ばしいものでありますが、残念な点がひとつだけあります。 それは Internet Explorer 6 のような古い Web ブラウザーでは動作しないということです。 実際のところ HTML5 で記述された Web コンテンツは、Internet Explorer 8 までの HTML5 をサポートしない古い Web ブラウザーでは HTML5 のタグが無視されてしまうので意図したとおりの表示にはなりません。 たとえば、以下のような HTML5 で新しく追加されたタグを使用しているページを、HTML5 をサポートしている Internet Explorer 9 と、サポートしていないそれ以前の  Internet Explorer で読み込んで比較すると明らかな表示の違いがあります。 <!DOCTYPE html> <html> <head>     <title>This is nice Web page.</title>     <style type="text/css">         header{color:blue;}         article{background-color:Aqua;}         aside{background-color:gainsboro;}…

1

Web フォントとハートブレイク・カフェ

前回のブログ記事でお伝えしたとおり、セッションで使用するデモ用に、HTML5 + CSS3 を使った架空の喫茶店のページを作成しております。 その喫茶店の名は「ハートブレイク・カフェ」。 店のコンセプトは、「傷ついた街の天使が羽根を休める….、ということはどうでも良くて、前回の記事から、このサンプルに使用している ”いまどきの” Web 技術について紹介しております。 今日は Web フォントについて書きたいと思います。 「ハートブレイク・カフェ」のロゴは、画像ではなく  Web フォントの 「Lobster」 というフォントを指定して表示しています。 ちなみにこの「Lobster」というフォントは Windows には標準で含まれていませんが、Web フォントをサポートしている Web ブラウザーでアクセスすると、Windows はもちろん、Mac でも Linux でも「Lobster」 フォントが正しく表示されます。(※ コーヒーカップの絵は画像ですよ。)   Web フォントとは Web フォントは、クライアントにインストールされていないフォントであっても、Web からフォント提供することで、指定通りの字体の表示を行わせる技術で、CSS3 でサポートされています。(※) フォントというと、ほとんどの場合機種依存であり、異なるプラットフォームで同じ文字を表示をさせるには、形状が似たフォントを指定するなどの工夫が必要でしたが、 Web フォントを使用すると、こういった面倒はありません。 (※) 実は、Web フォントは CSS3 以前から存在しており、以前より CSS の @font-face から使用することができました。機能自体の実装もけっこう早くて、Internet Explorer では 4 の時代からサポートしていました。Web フォントの指定は CSS2.1 で廃止されていましたが、後方互換のためか多くの…

0