Libertas

サイトの雰囲気を壊さない程度にアマゾンアソシエイトを導入してみました。その際に問題だったのが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からの読み込みは上記と一致しますので。

いずれ調べようと思いますが、こういうこともあるらしいので、同じような状況で問題があったら見直してみてください。

Stickamのブログパーツを持ってくる際に、embedをxhtmlに対応させる必要がありました。そのためにobjectへと変更したのですが、objectはIE6では使えません。そこで今回は以前書いた記事、アマゾンアソシエイト、<iframe>を<object>にを参考に、XHTML 1.0 Transitionalに対応させるための記述方法を書きます。

実用範囲についての注意

方法は以下に示しますが、その前に注意書きを何点か。

• Strictに近づけるように書いたXHTML 1.0 Transitionalであること
• XHTML 1.0 Strict、XHTML 1.1ではないこと
• 僕の使用したブログパーツの表示形式以外にはそのままの流用はできないこと
• &の文字を文字実態参照（&amp;）、もしくは数値文字参照（&#38;）に置き換えること

ここで3番目の流用できないところは、widthだったりheightだったりしますので、そこはにらめっこして考えてください。

実際の表示

今回は以下の表示形式に対応しています。

テンプレートと使用方法

テンプレートを貼り付けて起きます。

<p><!--[if IE]>
<embed src="ここに表示されているurlが入ります" type="application/x-shockwave-flash"
 width="340" height="290" scale="noscale" allowScriptAccess="always"></embed>
<![endif]-->
<!--[if !IE]><-->
<object data="ここに表示されているurlが入ります" width="340" height="290" type="application/x-shockwave-flash">
<param name="movie" value="ここに表示されているurlが入ります" />
<param name="scale" value="noscale" />
<param name="allowScriptAccess" value="always" />
</object>
<!--><![endif]--></p>

使用する際には前述した"&"を書き換える注意事項を踏まえたうえで、url部を２箇所とも同じものを記述してください。これによりIEエンジンのときのみiframeタグ、その他のエンジンではobjectタグが使用され、もう片方はコメントとして扱われます。それと、表示されるurlはStickamのブログパーツに関するページで表示されることと、見た目についても、Stickam側のサービスで変更をするので、くれぐれもhtmlで調整することの無いよう、気をつけてください。

あとがき

前回の記事を流用したものなので、必要以上の動作確認を行っていません。何か疑問などがありましたら、コメントしていただけると幸いです。

それより、このサイズでシンプルな見た目のものはないのかなー...サイトトップから浮いているよ...

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に注意
• &の文字を文字実態参照（&amp;）、もしくは数値文字参照（&#38;）に置き換えること

'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+ブログパーツは種類が多すぎるので絞ってもらいたいところです。

iKnowいいよiKnow。iKnowとは英語の勉強が無料で出来るWebサービス。今回はXHTML 1.0 Transitionalに対応させつつ、IE6.0やモダンブラウザでも動作するiKnowブログパーツへの変更方法です。

iframeやembedをobjectへ変更する方法は、過去記事のNike+、xhtmlに対応したobject要素への書き換え、アマゾンアソシエイト、<iframe>を<object>にやStickam、<embed>を<object>にでも解説しています。

実用範囲についての注意

方法は以下に示しますが、その前に注意書きを何点か。

• XHTML 1.0 Transitionalについてのみの解説（Strictでも動くかも
• ブログパーツの表示形式が異なるときはwidthやheightに注意
• &の文字を文字実態参照（&amp;）、もしくは数値文字参照（&#38;）に置き換えること
• CSSを切ると表示されないようです。執筆時点では原因はわかりません。

実際の表示

今回はJavaScript無しの表示形式に対応しています。

テンプレートと使用方法

テンプレートは以下の通り。３種類とも共通部分が多くあります。

<object data="http://www.iknow.co.jp/widgets/iknow_public_badge.swf"<!--iknow,dectation,brainspeedそれぞれ合わせてください-->
	type="application/x-shockwave-flash" width="150" height="40" id="iknow_badge">
<param name="movie" value="http://www.iknow.co.jp/widgets/iknow_public_badge.swf" />
<param name="wmode" value="transparent" />
<param name="allowScriptAccess" value="always" />
<param name="FlashVars" value="FlashVarsのvalue値。&を&#38;に変更" />
</object>

使用する際には前述した"&"を書き換える注意事項を踏まえたうえで、表示されているurlに同じものを記述してください。ここには表示形式に関する情報が入ります。

注意で示した点。CSSを切ると表示されないのは何故なのかわかりません。失念しているだけのようにも思えますが、注意してください。

最後に、iKnowをこの記事で興味をもたれた方、既にお使いになられている方、よかったら先ほどの表示例から飛んで、フレンド登録してくださいー。それぞれの目的のために共闘しませんか、と宣伝しておきます。

今回、Carpediem!（注意同人サイト）の製作時にお世話になったエラーやらバグやら、新しい設定についてまとめてみました。これらのおかげで、逐一調べて、悩んで悲鳴を上げていたわけですけど、解決方法の存在自体から疑って一つ一つ調べていくのは時間の無駄です。中には忘れただけできっかけさえあればすぐに思い出せる些細なこともあるでしょう。

以下に書いた注意事項は、Movable Type4で、MTがインストールされているディレクトリとは異なるところに、サブドメインとして新しいサイトを作ったときに引っかかった点からcssなどの一般的なことまで製作に関係した全てです。内容には、慣れている人ならしないであろう簡単なミスや、もっと効率のいいテクニックがあるかもしれません。以下の問題点は、特に僕のようにサイトを作るための(x)html、cssの知識はあるが、経験が少なく、またサーバの知識も少ない人向けであり、バグの特定がニガテだな、と感じている人が躓きそうな点をリストアップしています。素人的なミスにはエスパー回答していますので、頭ごなし的な表現もあります。少し挑戦的なタイトルですが、ありがちなミスをいちいち探す手間を省くために使用できると思います。

アマチュアweb製作者のレベルがよくわからないので、仮に何度もお世話になる内容があったら、どの点が役に立ったかや、省略しすぎで意味がわからないか、または、これは違うだろ等コメントを残してもらえると嬉しいです;)

１～１１：Movable Type4周りの注意事項

一からサイトを作るのが大変です

以前作ったMTのブログ複製を使うと楽かもしれません。ただし、カスタムフィールドが複製されず、しかも「既にあります」等といわれるバグがあります。それを加味して判断してください。

それでも複製するのであれば、カスタムフィールドの名前を変更して、その部分だけコピペすれば良いでしょう。

新しいサイト製作後のarchiveの設定

初期設定だと、rootにarchiveが吐き出されるために、ディレクトリが乱雑になってしまいます。MTの管理画面から変更しておいたほうが良いでしょう。途中から変更した場合は、先に生成したファイルを消しましょう。

MTのスタイルが正常に適用されない

修正方法はわかりませんでした。サブドメインから呼び出すと正常に動かないこともあるようです。このエントリで挙げたことを試しきれば直るかもしれません。

タグ、検索時にエラーが出る

mt-config.cgiはMT4では最初のブログの相対url(/mt/mt-static/)で設定されているので、絶対url(http://最初のドメイン/mt/mt-static/等)で書き換えておきましょう。

テンプレートが表示されない、灰色になる、変更できない

これは２パターンあります。上で設定した値が同じものを示していても、それぞれ異なった記述をしています。一貫性を持たせてください。

２つ目に、管理画面へのブラウザからアクセスのurlも一致さましょう。多分、wwwが欠けている、記述してしまっていることがあるはずなので弄ってみましょう。

テンプレート化を進めよう

headerやfooterは大抵の場合、別のページと互換が取れています。その場合は、グローバルテンプレートとして保存し、呼び出すほうが後々の変更が楽になります。このとき、シンプルに作るよう心がけないと、読みにくくなるので注意。

デザイン周りで何かおかしい

MTでテンプレート化しすぎると、divタグの対応が取れていない事が起こりえます。終了タグとの関係を確認したり、vaildか確かめてください。

cgiなどのディレクトリがサブドメインから指定できない

まずは元のドメインのurlを使って絶対パスで記述しましょう。このとき、ドメインをまたいで呼び出しができないことがあります。そのときは、シンボリックリンクができるサーバであるかを確認し、それの実装を考えてみてください。

MT4でタグクラウドが表示できない

書式も正しいのに、呼び出した結果が空で返ってくることがあります。タグクラウドのプラグインを使用していたらサーバから削除してみてください。呼び出しのタグが干渉している可能性があります。

MT4でgoogleのように、100件中10件表示、次の10件、などの分割表示をしたい

ブログで当たり前の表示ですが、MT4では初期設定では少々手間なようです。MT4.0でページ分割する - Kishunaを参考に、プラグインを入れましょう。

MTだけで設定したいのなら、検索結果ページのページ分割 | Movable Type 4 ドキュメントを読みましょう。

MT4で、検索は動作するが思うように表示できない

設定しだいではMTで管理する全てのブログが検索範囲に該当します。検索結果ページのカスタマイズ | Movable Type 4 ドキュメントを読んでみてください。

１２～１７：html周りの注意事項

設計を先に行おう

どんなに小規模のサイトでも、できる限りどこまでの実装になるのか判断を先に下したほうが絶対に楽になります。

特に気をつけておきたいのは２点。ページごとに異なる表示をするdivがどれだけあるかがひとつ。もうひとつは、MTで共通化できるのはどこまでか、です。上で示したとおり、多分headerとfooterは共通化できるはずです。

まず最初に、雛形をコメントだけで書こう

律儀に実践しきる必要はありませんが、内部のコードが作りきれていない場合、cgiが動くと困る等の理由で後々実装する場合、それらはコメント行で入ることを明記しておきましょう。そうすると忘れずに実装でき、その際にコメントを消すだけでいいのです。

IEでfaviconが表示されない

IEではfaviconの変換過程によっては表示されないこともあるようです。生成サービスなどを変えて作ってみましょう。

Firefox、safariでfaviconが表示されない

一度キャッシュされてしまうと、二度目の読み込みがなかなか行われていないのかもしれません。アップロードしたfaviconをリネームし、ファイルを指定しなおしましょう。

cgiが動作しない

属性を確認してください。また、そのディレクトリの属性も確認してください。

divが多くなってしまう

もしかすると、cssでdisplay:block;と指定することで必要がなくなることもあるかもしれません。

アップロードした画像が読み込めないのですが

localでは読み込めていたものが、webサーバで読み込まれないのは、拡張子の大文字小文字がhtmlの指定と一致していない可能性があります。

１８～３２：css周りの注意事項

cssの変更が楽な書き方

必要以上に親要素から指定すると、優先度が複雑になり後々の変更が大変になります。そのページのbodyにidを振ることで、別のフォーマットのページと干渉しにくくできます。

Style Resetをしよう

初期値ではブラウザのdefault cssで表示に差が出やすくなります。設定しておくと後々表示チェックが楽になります。

grobal.cssを作ろう

aの要素などは、たいていtext-decoration:underline;など、多用するものがあるはずです。そう予想されるものは、最初に指定しておきましょう。

cssがどのブラウザから見てもキャッシュから読み込まれる

キャッシュサーバを使用していることが考えられます。wilcomのMEGAPLUSなどがそれにあたります。

よくわからない人は、面倒かもしれませんが、cssをリネームし、htmlもそれに対応付けてください。

IE6で幅（余白）が狂う

floatで指定した方向へのmarginをやめてください。親要素で余白を確保するか、paddingで代替しましょう。

float以後が狂う

floatしたブロックの次の要素をfloatで右か左か指定してください。そうでなければ、clear:both;

それでも狂う

htmlが間違っているかも。vaildか確認してください。

要素の幅、位置を確認したい

その要素に、outline:1px solid red;と即座に書き込んでください。赤枠が表示されます。

上の通りに書いたけど動かない

!importを;前に書き込んでください。優先的に扱われます。それでも表示されない場合は、htmlの要素値かcssの指定が誤っています。動いたのであれば、現状cssの優先度が低く、他の指定に上書きされています。

フォントがおかしい

メイリオですか？フォントサイズと上下に確保されているピクセルが、従来のフォントと大きく異なります。cssによる装飾の際、border-bottom:1px solid;で不満があるのであれば、text-decoration:underline;で代用してください。

メイリオを使っている

フォントがインストールされていない場合、上の都合で表示されるフォントサイズやマージンが大きく異なる場合があります。確認しておきましょう。

タグクラウドのli要素の回り込みはどうやっているの？

display:inline;です。

fontプロパティは指定できるが、colorが指定できない

div等ではなく、直接aに指定してください。

IEで画像がぶっ飛ぶんですが

position:absolute;をやめてください。それを使わないでどうにかできないか考えてください。

IE6と他のブラウザで画像の色が違うような気がする

pngの色が変わって表示されている可能性があります。jpg、gifなど別の拡張子に変えてください。

３３～３６：その他製作について

cssの表示確認が面倒なのですが

firefoxのアドオンのWebDeveloperを使ってみてください。cssの記述と表示確認を同時に行えます。

たまに別のタブで読み込んでいると、読み込み完了とともに、エディタがリセットされることがあります。頻繁にコピペして保存してください。

画像が表示されないのですが

webで直接編集すると、background-imageが表示されないことが多々あります。ローカルでhtmlごと保存して、変更した後にアップロードしてください。

cssについて

MTでテンプレートとして出力するよりは、直接FFFTP等で保存したほうが早いです。

間違えてhtmlやcssを上書きしてしまいました。

もしあなたが複数のブラウザで表示を確認したり、ページ遷移を繰り返しているのであれば、そのページに戻り、ソースを表示することで復元できるかもしれません。

最後に

webを参考にするときも、それが問題と気がつくまでに時間がかかること、そして一つ一つの解法はあれど、問題と認識するたびに検索しなければいけないこと。それが僕は嫌いです。そのために、素人が素人に贈るテクニックがあってもいいはずと考え、本エントリを起こしました。一人の製作中に頻発するミスが、誰かのミスの答えとなれば幸いです。