IEで表示されない画像があるのか〜

今まで全く知らなかったのですが、IEはCMYK形式のjpgファイルを認識しないようです。検索するといろんなところでIEの仕様となってますがなんかもやっとします。
確認したのはIE6、IE7、IE8どれもダメで、Macの仮想環境ですがIE9はOKでした。Firefox、Chrome、Safari(どれも最新版)はOK。

下の画像はRGBとCMYKのJPEG画像ですが両方とも表示されてますか?左がRGB形式、右がCMYK形式のJPEGファイルです。


CMYKは印刷用でRGBはスクリーン用と言ってしまえばそれまでですが、やっぱりバグじゃないの?
とりあえずRGBに変換すれば問題なく表示されます。

もう一つ発見!
Macで上の画像2つを見ると(落としてローカルでね)アイコンの見た目がRGBとCMYKで違う表示になります(RGBは縁取りが付く)。Winは未確認です。

Internet Explorer の自動アップグレード

先月末(3月27日)に日本でもインターネットエクスプローラーの自動アップグレードが始まりました。昨年末に発表され、海外では既に1月から順次導入されているものです。

対象の環境と適用

Windows XP SP3 の IE6、IE7 → IE8
Windows Vista SP2 の IE7とIE8 → IE9
Windows 7 RTM の IE8 → IEx9
Windows 7 SP1 の IE8 → IE9
※RTM(Release To Manufacturing)
※Windows Server は適用外

2週間ほど経過した本日時点で調べてみると・・・。
IE利用者の中で、IE6、IE7いずれも8%前後だった数字が、4月に入ってからIE6が6%ちょっと、IE7がほぼ横ばい(若干増えてる)。まぁ結果は微妙だけど意外と世界標準値に近いかも。一番気になるのはIE10が数セッションある事w
ちなみに自動更新のインストールを拒否する事も出来るし、インストール後に削除して元に戻す事も出来るようです。
無効化キットもあります(IE8用 / IE9用

もう既にIE6の見た目を揃える労力が大変だから切り捨てるとかそういう時代じゃないですね。端末によってそれぞれにあったレスポンシブルな物を作る時代です。

なんとぉぉぉ〜IEでFirebugが使える!と思ったら?

ウェブサイト作成時に欠かせないデバッガー、Firebug。これがあるからFirefoxを手放せいない。Chromeのディベロッパーツールは、とても良さそうですがいまだ食わず嫌いです^^;慣れとは恐ろしいですね。

先日、ウェブ開発者必携の「Firebug」をiPhone, iPadで利用する方法をみてiPhoneにFirebugの設定して、へぇ〜と自己満足してたのですが、ブックマークレットなら他のでもつかえるんじゃね?という事で試してみると、IE6、IE7、safari5.1.2で動きました。通常のFirebugのすべての機能が使えるわけではありませんが、確認するには十分かなって思います。

導入方法は、どのページでもいいのでブラウザのブックマークに登録し(名前はFirebugなど好みで)、参照先を以下のjavascriptに変更して保存するだけです。あとは見たいページを表示した状態で、ブックマークを開く(javascriptを実行する)とFirebugが使えます。

グレー部分は転載です。オリジナルはこちらへ。

javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');

でも、よく見たら以前からあるFirebug Liteと同じじゃないか。
こっちも食わず嫌いだったので、今まで知らず。
どうせIEなんてと思いながら調べもしなかったので、、、

ということで、Firebug Liteの配布ページの中程のStable channelと言う所にあるFirebug LiteをブックマークすればOKです。
http://getfirebug.com/firebuglite

まぁ、Firebugでなくてもいいという方は、DebugBarとか、Internet Explorer Developer Toolbarとか幾つかありますね。

最近は分かりませんが、昔のDebugBarの挙動は酷かった印象があるのと、Internet Explorer Developer ToolbarはIE8に入れると標準のツールと干渉するようなので気をつけましょ。

ブラウザの違いによる表示確認

過去に何度かIE5.5、IE6、IE7、IE8の表示を確認するためのIETester(フリーソフト)の事を書いたのですが、久しぶりに配布元を確認すると随分バージョンが上がっていたので最新版を入れてみると・・・あからさまに調子が悪い。何かと干渉してるらしく、うちの環境ではCPU使用率が100%のままだったりする。

各種ブラウザ

そんな訳で、幾つか気になっていたツールがあるので確認してみました。

Microsoft Expression Web SuperPreview for Windows Internet Explorer

これは今年の3月くらいにマイクロソフトが公開したツールで、Expression Web3.0に搭載された機能を抜き出した物です。インストールされているIE以下のIE(IE8が入っていれば、IE8とIE7とIE6)のレンダリングが確認できます。Expression Web3.0に含まれている物は Firefox や Safari などのブラウザも設定できるようですが、SuperPreview 単体ではIEのみです。
かなり詳細にズレを確認できるのですが、遅い・・・。おそらくExpression Webに含まれているのも同じじゃないかな。

Expression Web 3.0
Expression Web 3.0
posted with amazlet at 09.12.25
マイクロソフト (2009-11-06)
売り上げランキング: 366

ダウンロードはこちら:Expression Web SuperPreview

Adobe BrowserLab

これは以前に一度紹介した、アドビが公開しているWebツールで、Adobe IDでログインすればいつでも使えます。
詳細は前回のエントリで。相変わらず遅いです・・・。
Dreamweaver用のExtensionはまだLabsの中だけですが、更新はしているようで、Firefox3.5、IE8、Safari4、Chrome3に対応したようです。

Adobe Dreamweaver CS4 (V10.0) 日本語版 Windows版
アドビシステムズ (2008-12-19)
売り上げランキング: 663
おすすめ度の平均: 3.0

3 完全なるプロフェッショナル向けになった

サイトはこちら:Adobe BrowserLab

他にもWeb上で確認できるツールはあるけど、どれも満足いくものはないかな。スクリーンショットとかじゃなんともならん。

Multiple IE

このソフトはIE3、IE4.01、IE5.01、IE5.5、IE6の確認が出来ます。タブではなくそれぞれが個別に開きます。IE6の確認であれば十分使えますね。とっても快調です。
ダウンロードはこちら:Install multiple versions of IE on your PC

スタンドアロンのIE6

これは使ってないので詳細は分かりませんが、名前の通りのIE6です。問題なく動けばこれでもいいのですが、不明です。
ダウンロードはこちら:evolt.org


やっぱりタブで切り替えられてIE8まで確認できる IETester が一番好みなんですけど、当面は Multiple IE を使うことになりそうです。IE6が消える日を願って。。。

Adobe BrowserLab(主要ブラウザの表示確認)

Adobe Labsで各ブラウザの表示確認が出来るサービス(BrowserLab)がリリースされてます。今日付けのようなので出来たてほやほや!ですね。
今現在、確認できるブラウザは次のようになっています。

  • Firefox2、Firefox3 (Windows XP and Mac OS X)
  • IE6、IE7 (Windows XP)
  • Safari3 (Mac OS X)

browserlab-1

browserlab-2
Adobe BrowserLabの緑色の枠内にあるTry BrowserLab nowから入ってAdobe IDを入力するとWEB版が利用できます。
ただ・・・あまりにも重過ぎます。ちょと使い物にならないorz
環境とか時間帯にもよるんでしょうけどね。
Onion Skin Viewを選ぶと中央にあるスライドバーでブラウザ間の変化が滑らかに切り替わります。たまねぎの皮???とか思ったんですけど、Onion Skinって言うのはFLASH関連の言葉みたいです。

あとDreamweaverCS4用のExtensionも置いてあります。
ざっと見たところ、Extension Manager CS4 2.1 patchがあたっている状態で、part1とpart2の2つのExtensionをインストールする必要があるようです。
インストールしてないので動作は分かりませんが、Exchange(ファイルの詳細ページを日本語化してほしー)の方で正式に配布されるといいですね。