Nike+のブログパーツはobjectタグ使っているのにxhtmlには対応していません。今回はXHTML 1.0 Transitionalに対応させつつ、IE6.0やモダンブラウザでも動作するNike+ブログパーツへの変更方法です。
iframeやembedをobjectへ変更する方法は、過去記事のアマゾンアソシエイト、<iframe>を<object>にやStickam、<embed>を<object>にでも解説しています。
実用範囲についての注意
方法は以下に示しますが、その前に注意書きを何点か。
- XHTML 1.0 Transitionalについてのみの解説（Strictでも動くかも
- ブログパーツの表示形式が異なるときはwidthやheightに注意
- &の文字を文字実態参照（&）、もしくは数値文字参照（&）に置き換えること
'08.08.17追記CSSoffの状態で表示されないのを確認しました。原因はわからないです。。
実際の表示
今回は以下の表示形式に対応しています。
テンプレートと使用方法
テンプレートを貼り付けて起きます。
<object data="ここに表示されているurlが入ります" type="application/x-shockwave-flash" width="198" height="182" align="middle"> <param name="movie" value="ここに表示されているurlが入ります" /> <param name="allowScriptAccess" value="sameDomain" /> <param name="wmode" value="transparent" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <param name="FlashVars" value="FlashVarsのvalue値、人によって異なるはず"/> </object>
使用する際には前述した"&"を書き換える注意事項を踏まえたうえで、表示されているurlに同じものを記述してください。ここには表示形式に関する情報が入ります。
FlashVarsのvalue値には、多分個人の識別番号(id)が入っているので、独自の値になるはずです。
変更方法について技術情報
objectにembedが入っていたりでわけのわからない元ソースです。そこでembedについて調べてみるのですが、なかなか的を得た情報が出てきません。もしかすると多くのブラウザに対応させるためにこういった書式なのかも知れませんね。
先ず、objectタグ内のid値について、"+"や" "は出現を許されていないのでidごと消します。
次にembedタグ内のsrc値とtype値をobjectに書きます。このとき、srcはdataの値として、typeはそのままコピペします。本来はこれで動くはずなんですが......あれ、表示できない。
もう一度objectタグに戻ってください。ここのcodebaseとclassidを丸ごと削除します。そうすると表示を確認できましたね。classid値は識別番号かと思いきや、どうやら必要ないようです。
後もう少しで完成です。embedを消すために、必要な値が他には無いか確認しましょう。bgcolorやwidth、heightは既に別に定義されています。そのほかの主要そうなものも定義されてますね。ということでembedと内包された値を丸ごと削除。するとテンプレートと同じになるはずです。
最後に&を記事の冒頭に書いたように、置換して終わりです。
あとがき
無理だと思ってあきらめるところだった今回の置換方法。表示が出来ないのはなかなかに困りました。
それよりもNike+ブログパーツは種類が多すぎるので絞ってもらいたいところです。
