サイトの雰囲気を壊さない程度にアマゾンアソシエイトを導入してみました。その際に問題だったのがiframeタグを使用していること。これはStrictやxhtml1.1の仕様には沿わないのでobjectタグで代替しなければいけません。今回はその導入方法がなかなか見つからなかったので、少しでも参考になれば、と思っています。
最初にお伝えしておきますが、僕の方法ではxhtml1.0Transitionalまでしか対応させることができません。JavaScriptを使ったりすれば対応させることもできるようですが、そこまでする必要はないのと判断したことと、知識が足りないのか、そもそも無理なのかわかりませんが、IE6のバグが悪さをして無理です。ということで、なるべくxhtml1.1に近づけるように、IEではiframeタグで、それ以外のブラウザではobjectタグで表示させる、という方法をとります。
実用範囲についての注意
上にも書きましたが、万能というわけではないようです。この点に気をつけてください。
- Strictに近づけるように書いたxhtml 1.0 Transitionalであること
- xhtml 1.0 Strict、xthml 1.1ではないこと
- 僕の使用したamazonの表示形式以外にはそのままの流用はできないこと
- &の文字を文字実態参照（&）、もしくは数値文字参照（&）に置き換えること
適用可能な表示形式は以下のものです。異なる場合は多分幅などを変更すれば適用できるのではないかと思います。
テンプレートと使用方法
テンプレートを貼り付けて起きます。
<p><!--[if IE]> <iframe src="ここにamazonから提示されたurl" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"> </iframe> <![endif]--> <!--[if !IE]><--> <object data="ここにamazonから提示されたurl" width="120px" height="240px" type="text/html"> </object> <!--><![endif]--></p>
使用する際には前述した"&"を書き換える注意事項を踏まえたうえで、url部を２箇所とも同じものを記述してください。これによりIEエンジンのときのみiframeタグ、その他のエンジンではobjectタグが使用され、もう片方はコメントとして扱われます。
tips
手法に悩んだ挙句、これに選択して使っていますが、その資料探しの時に２つ今まで知らなかったことを発見しました。折角ですので紹介しようと思います。
文字参照について
先ほどの文字参照に、文字実体参照と数値文字参照がありました。その表記方法は上にも記した通りですが、文字実体参照はアルファベットを用い連想が行いやすく、数値文字参照は数字で指定するために、一見何のことかわかりにくいという印象があります。
CYBER@GARDEN『文字参照一覧 | references』の一覧表を見るとわかりやすいです。
どういった差があるのでしょうか。
- 文字実体参照
- DTD で宣言された名前で指定する方法
- 数値文字参照
- ISO/IEC-10646( Unicode )の文字コード位置を指定する方法
とはいっても具体的に何のことかわかりません。ところが、
NN4 文字実体参照の注意点として、などの HTML4.0 に対応していないブラウザでは、 「マークアップ記号、国際化文字」 のほとんどと 「一般記号、数学記号、ギリシア文字」 のすべてを正しく表示できません。これらのブラウザで表示させたい場合は、 数値文字参照 を用いてください。
とありました。以前、面倒でも全部数値文字参照にしたほうがいいよ。ときいたことがあったのですが、これからきているのですね。納得。
IEobjectのバグ
途中どこかの記事で読んだのですが、objectを使うと起きるIEのバグについて、
正確にはローカルでは動くけどサーバにあげると動かなくなる（ドメインが対象と別になると）。iframe なら可。
といわれていた方がいました。裏を取っていませんが、実際に僕にとってもそのようです。amazonからの読み込みは上記と一致しますので。
いずれ調べようと思いますが、こういうこともあるらしいので、同じような状況で問題があったら見直してみてください。
