タグ「ブラウザ」が付けられているもの

ObjectタグでIEのリンクが親Window内で開かない

昨日の表示確認で大ポカしているワタシの続き。このサイトの右サイドバーにある、ランキングリンクで使用しているObjectタグの話。現在はIframeに直しました。Object表示サンプルは以下

素材ランキング


このOBJECTタグをFlashの埋め込みに利用している人も多いと思います。
OBJECTタグは、様々な形式のデータをページ内に埋め込むことができるタグで、imgタグ、iframeタグ、bgsoundタグ、embedタグ、appletタグの代わりとして汎用的使用ができる、優れもののタグ・・・・のはずなんですが・・・・

現状では、ブラウザの対応がイマイチで使えねータグと化しているわけです。特にIE。
IEでお越しでない方のためにこのサイトの該当部分をキャプチャ。

IEでの表示

IEでObjectタグを利用するとスクロールバーが

Safariでの表示

SafariでObjectタグを利用するとスクロールバーが

Safariは、Konquererのレンダリングエンジン、KHTMLを元に開発されているので、未確認ですが、Konquererもご同様にスクロールバーがでるのではないかと。

Firefox2/3 Opera7UPでの表示

Firefox,Opera7UpでObjectタグを利用した表示画像

↑これが個人的にあらまほしき表示。Opera6ではスクロールバーはでませんが、フレーム枠がでます。

データの埋め込みは
<object data="データへのパス" type="ファイルタイプ" width="幅" height="高さ"></object>

こんな感じで使用するんですが、IEとSafariで、しょぼい感を増幅するスクロールバーがでてますでしょ。
最初ゲゲっと思ったんですが、でも、適度に目立つ気もする(注:参照)ので、そこは100歩譲ることに。
(注:悪目立ちするので、誰かクリックしてくれるかもしれないというさもしい思惑は見事にはずれてますので、真似しないように(笑))

Objectタグで外部ファイルを読み込んだ時に出るスクロールバーを消したい人はこちら

問題はここから。

IEの場合、このOBJECTタグ内で読み込んだデータ内にある普通にHTMLで書いたリンクをクリックしても、Parent(親であるこのページ)で開かず、子オブジェクト(子フレーム)内で開くのですよ。
子ページの aタグのtarget属性 に_top,_parent どちらを書いてもだめ。javascript等で処理したくない場合、かろうじて、_blank で新規窓立てるしかないんです。そういうわけで、このリンク群は、ターゲット属性が_top、_blank の2種あって、IEでお越しのみなさんがリンクをクリックすると、新規窓が開いたり、子オブジェクト内で開いたり、という情けないことになります。

何でほったらかしになっとったかといいますとね、ハイ!
「忘れてた」
んです。target属性を混在させてみて、「やっぱダメねえ」とか思ったとこで、多分、仕事で急な直しかなんか、入ったんですね。
ワタシは仕事以外でIEを使用しない人で、過去、年間傘を10本以上置き忘れしたことがある程度には忘れっぽいです。(だから、大事なことは目立つとこにメモ貼りします)
ついでに、別のことに集中してる時は、他のことに全然目がいかない、よく言えば一点集中型、普通に言えば、シングルタスクのぶきっちょです。
かくして、このサイドバーのリンク処理は、もずのハヤニエ状態になった、、と。単直に「アホ」ですな。

この件は、IEのバグという意見もありますが、IE5.5、IE6、IE7すべてそうなります。
メジャーVerUPを2回繰り返してもfixされないようなものは、バグというより、もはや仕様では? と個人的には思います。
IE8ではどうなのよ、なんですが、β版のIE8、まだダウンロードしてません。8を早く試したい好奇心限りなくゼロでして。
正式リリースになってからでいいや状態。

このページのDoctypeは、XHTML 1.0 Transitional なので、フツーにiframeを使えるのに、そうしたくなかったのね。
(※XHTML 1.0 StrictやXHTML 1.1では、iframeは廃止)。

そういうわけで、gdgd云ってる間に、とっとと直せよ、おまえ、というのが正しい対処法なんですが、この際、このままにしようかと。
ここが直ったからといって特に影響もなし、ネットでは既出感たっぷりとはいえ、ブログでネタとして使えたことが何より収穫。
IEでObject使うとこーなるのよ、というサンプルとして、このまま置いておきます。

(仕事の関係者がこのサイトを見る確率は低い。ノープロブレムじゃ)

追記:javascriptでのこの不具合解決法を記載するとともに、問題のサイドバーはiframe化しましたので、サンプルはこのページでご覧下さい。

他にも、実はモズのハヤニエ状態なことはあるんですが。


追記:
Objectタグ使用の際に出現するスクロールバーを消すには、読み込ませる外部ページがHTMLなら、その子ページのBODYに以下のスタイルを適用すると消えます。
body{
margin:0;
padding:0;
overflow:hidden;
border:none
}

IE・Firefox他バージョン違いのブラウザ共存+携帯サイトのPC一括表示確認ツール まとめで、各種ブラウザ用、表示確認ツールに関する記事を書いておきながら、私はずっとこのサイトの表示においてブログ開設当時から大ポカをやらかしている。一番シェアの多いWIN IEでお越しの方に、一目瞭然なんですが、わかります? よね。

記事を書きながらタグを閉じ忘れたとかで、表示が変!とか、そういうのは、趣味サイトで逐一したくないという、ワタシの注意散漫およびズボラであるので、気づくまでせせら笑っといてくれればよいのだけれど、実は文法的には正しくても、ブラウザによってかなり解釈が違っているようなのでウォッチングしているものがあります。

それは、OBJECTタグ。
このサイトの右サイドメニューのランキング検索に使用しています。

続きは次回。

グーグルが独自最速ブラウザーGoogle_Crome発表の記事内でも、ちょっと嘆いてますが、WEBデザイナーに限らず、WEB制作に携わる人にとっては、お仕事の一環として、サイトが対象とする各種ブラウザでの表示確認作業に時間をさかざるをえません。
マイナーバージョンまで含む全部確認まではいかずとも、泣きそう OR 吐きそうになった経験がある人は1人以上は確実にいるはず(1人は私)です。
というわけで、PC・携帯の表示確認をなるだけ楽にしてくれるツール・エミュレータ・アドオンと、表示+CSS編集ツールのまとめ。Windows用。

※インストールは自己の責任においてお願いします。

IE各バージョン一括表示確認ツール

MultipleIEs

インストーラはWindows XPのみ。Win Vistaは非対応。
IE3.0,4.01,5.01,5.5,6.0 が一気確認可能に。フリーウェア。

[tredosoft]Multiple_IEs Download
http://tredosoft.com/Multiple_IE

※インストール後にIE6の挙動がおかしくなる場合等があるので、ココも一緒にご一読を。
IE6とIE7を共存させる(stand aloneで起動する)には。
Internet Explorer 7 running side by side with IE6. (standalone)
上記記載の、IE7-WindowsXP-x86-enu.exeでは、英語環境になりますんで、下記で日本語版をDL後、@kazuhi.toさんを参考に。
IE7-WindowsXP-x86-jpn.exe download
続・スタンドアローン版IE7

より安全にIE6/7を動かしたい向きには、
Microsoft配布の、Vircual PC 日本語版ダウンロード して、Windows上でもう1つWindowsを動かします。

でもMacIE5はMacのみ。
アンド、すでにIE8 Betaも出てる(←号泣)

IE tester

IE testerは、IE5.5 IE6 IE7 IE8beta でのレンダリングを確認できるブラウザ。現在α版
動作環境 Win Vista / XP。

IE tester Download

ひとりごと:個人的にはもうIE VerUPしなくていいデス。どこまで続くぬかるみぞ状態です。

FireFox1 と Firefox 2 とFirefox 3の共存

おそえの日誌
Mozilla.jp:Firefox 2 と Firefox 3 の併用
小粋空間:Firefox 1.5 と Firefox 2.0 を共存させる
現在のFirefoxを終了→新しいプロファイル (ブックマーク等の個人用データ一式) を作成→別ディレクトリにFire Foxインストールという流れです。

Opera バージョン違いの共存

違うディレクトリに素直にインストールすれば、共存できる。
Operaは、最新版でも OS Win95~からインストール可。WinならOSのバージョンはほとんど問いません。
※うちでは6~9が共存中ですが、Opera9.27 とOpera9.52 のようなマイナーバージョンアップの場合は、これではダメ。

SafariをWinOSで

Safari for Windows

SafariのWinヴァージョン
(Macとは画像の色合い等の表示が若干異なります。Winの方が濃い目というか鮮やか感に欠けます)
Safari for Windows DownLoad

MacOSX Panther/Tigerは、Multi-Safari、LeopardはSafari 2.0.4 for Leopardで複数インストール可。
Snow Leopard (MacOS 10.6) /Win+Safari でバージョン違いを共存する方法はわかりません。

WindowsにSafariを入れる際の注意事項

米Microsoftは5月30日、Appleの「Safari」ブラウザがWindows Vista/XPにインストールされていると複合的な脅威が発生し、許可なくファイルが実行されてしまう可能性があると警告した。この情報は、 Microsoftのセキュリティアドバイザリ「953818」として公開されている。

【対策】
・AppleとMicrosoftから適切な更新プログラムが提供されるまでの間、SafariをWebブラウザとして使用することを控える
・Safariの設定メニューにおいて、ダウンロードするコンテンツの保存先を、ローカルディスクの"デスクトップ以外の場所に変更"する
マイクロソフト セキュリティ アドバイザリ (953818)
Appleのサポートアナウンス:About the security content of Safari 3.1.2 for Windows

IE/FireFox CSS表示確認・編集ツール

CSSVista

CSSVista は、IE・Firefoxで同時に表示確認しながら、サイドバーでCSS編集ができるフリーソフト。
動作環境:Windows XPのみ。

Litmus:CSSVista download

携帯サイトをPCで表示確認

docomo:iモードHTMLシミュレータ・iモードHTMLシミュレータⅡ

iモードHTMLシミュレータは、900iシリーズ以前のiモード対応HTML、Flashのiモード対応ページをシミュレート。
iモードHTMLシミュレータⅡは、900iシリーズ以降をシミュレート。

iモードHTMLシミュレータⅠ・Ⅱダウンロード

※上記ページから、J2ME Wireless SDK for the DoJa,iαppli Development Kit各バージョンなどのiアプリコンテンツ作成ツール、その他もダウンロードできます。

au:Openwave SDK 6.2K,

Openwave SDK 6.2Kは、XHTML, CSSにて記述されたコンテンツのプレビューが可能、Openwave SDK 3.3.1JはHDMLコンテンツ向けのSDK。
動作環境
Openwave SDK 6.2K:Windows98, 98SE, Me, 2000, NT, XP +Microsoft InternetExplorer 5.5以上
Openwave SDK 3.3.1J:Windows95/98/NT/2000

Openwave SDK 6.2K ダウンロード
Openwave SDK 3.3.1J ダウンロード

※詳しい使用法はOpenwave Developer Network

FireMobileSimulator

Firefoxでモバイル端末をシミュレートする独自アドオン。モバイル端末のHTTPリクエストや絵文字表示をシミュレートすることができます

FireMobileSimulator download

グーグルが独自ブラウザ「グーグル・クロム」を発表した。

米国時間で、2008/9/2から、世界100カ国、43言語を対象としたβ版も提供する。Google Crome(グーグル・クロム)はネット閲覧をより高速化するとともに、安全性や安定性も高めたブラウザとのことである。

http://sozai.7gates.net/dlpage_lg.jpg

スピードベンチマーク

5種類のJavaScriptベンチマーク

Google Cromeが制作者に与える影響

早くて使い勝手のよいブラウザの登場は一般ユーザーとしては、大歓迎である。が、一方、WEB制作者にとっては、頭痛の種がまた1つ増えるともいえまいか? つまり、表示対策しなければならない仕様の異なるブラウザがまた1つ増えるわけだ。

制作者のみなさん、これまで、バグのないブラウザって見たことある?(バグでなくて、それが仕様と云う名であってもね)

クロスブラウザは、IEとネスケがほぼ一騎打ちのガチでシェア争いしている頃から、WEBデザイナーをはじめ、制作に携わる人の頭痛の種であり、CSSを始め多くのHackを生み出してきた。個人的にはまりにはまって、何とかやりとげた後の達成感というものも確かにあった。

20世紀末頃、JavaScriptを使用して、いかにブラウザ(Flashのバージョンも)を判別し、振り分けるか、一生懸命に情報を探しながら、自力でスクリプトを書いていたことを思い出す。何とか思い通りに動くと、嬉しかったし、1つ知識が増える喜びも感じた。

しかし、今、本音のところで、

「いいかげん、ブラウザ1つに統一しない?」

無理とは知りつつ、言ってみる。かなりの制作者が、感涙にむせぶ、と思うんだけどな。いったい、いくつ確認用のブラウザをインストールさせるつもりなんだろう? (ブラウザにはメジャーバージョンだけじゃなくて、マイナーなコンマなんぼのアップデートがあるし、携帯サイト作る人は携帯用エミュレータだっているでしょ)

ともあれ、ダウンロードして、試してみよ。

Google Crome ダウンロード

現在は、Win Vista/XP版のみ Linux,Mac版もリリース予定

ITMedia
「Googleの全ビジネスはブラウザから始まる」――「Chrome」開発の理由