BlogPeople の「List Me!」を valid にする
BlogPeople の「List Me!」を XHTML valid にするカスタマイズです。
BlogPeople のサービスのひとつに、他のブログピープル会員が簡単にあなたのサイト情報をリンクリストに追加することができる「List Me!(私を登録)」があります。当サイトでは下記のような形式のリンクになっています。
<a href="javascript:void(bloppop=window.open('http://www.blogpeople.net/addlink.jsp?n=1&u=http%3A%2F%2Fwww.koikikukan.com%2F&ti='+escape('<$MTBlogName encode_html="1"$>'),'blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes'));">List Me!</a>
が、これをページに貼り付けるとThe W3C Markup Validation Serviceで以下のようなエラーと、これと似たようなメッセージが計12個表示されます。つまり「List Me!」を表示することで valid でなくなってしまいます。
Line xxx, column xx: cannot generate system identifier for general entity "u"
...//www.blogpeople.net/addlink.jsp?n=1&u=http%3A%2F%2Fwww.koikikukan.com%2F&ti=
これを回避するため、最初に考えたのは、リンクから一旦空のウィンドウを開き、そこから BlogPeople の JavaScript を起動するという案です(=メインページでエラーにならなければ良い)。
最初のリンクを下記のように書き換えてウィンドウ(ここでは bp.html)を開く
<a href="javascript:void(bloppop=window.open('http://www.koikikukan.com/bp.html','blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes'));">List Me!</a>
↓
新しいインデックステンプレート(bp.html)を作り、この中で自動的に JavaScript を実行するように記述
<body onload="window.location.href = 'http://www.blogpeople.net/addlink.jsp?n=1&u=http%3A%2F%2Fwww.koikikukan.com%2F&ti='+escape('<$MTBlogName encode_html="1"$>');">
こういったテクニックを用いれば valid かつ正常に表示されるようですが、やや面倒です。
さて、The W3C Markup Validation Service のエラーをよくみると、後方に
Line xxx, column xx: entity was defined here
...://www.blogpeople.net/addlink.jsp?n=1&u=http%3A%2F%2Fwww.koikikukan.com%2F&ti
とあります。これが本来のエラーで、XHTMLではページ内の "&" を "&" と記述する必要があります。URLでも同様です(HTML 2.0の時からこの点も明記されていましたが、ブラウザは "&" のままでもきちんと処理するように求められていたこともあり、これでも機能していました *1)。
つまり「List Me!」のリンクは下記のように "&" の後ろに青色の "amp;" を追加するだけで valid になります。リンクをクリックした時のページ内容が元の設定の時と同じことも確認しています。
<a href="javascript:void(bloppop=window.open('http://www.blogpeople.net/addlink.jsp?n=1&u=http%3A%2F%2Fwww.koikikukan.com%2F&ti='+escape('<$MTBlogName encode_html="1"$>'),'blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes'));">List Me!</a>
2005.07.25 追記
コメントでお分かりの通り、Ogawa::Memoranda さんよりアドバイス頂きまして、valid かつ JavaSript がOFFでも使えるスクリプトを提供して頂きました。この場をお借りして改めてお礼申し上げます。
元のスクリプトの代わりに下記のタグを表示したい位置に設定します(「List Me!」の文言以外は教えていただいたものをそのまま掲載させて頂いてます)。nofollow も付与されているというきめ細かさ。
<script type="text/javascript">
function popup_blop(url) {
var c = url.indexOf('ti=');
url = url.substr(0,c+3)+escape(decodeURIComponent(url.substring(c+3,url.length)));
window.open(url,'blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes');
}
</script>
<a title="List Me!" href="http://member.blogpeople.net/addlink.jsp?n=1&u=<$MTBlogURL encode_url="1"$>&ti=<$MTBlogName encode_url="1"$>" onclick="popup_blop(this.href);return false;" onkeypress="popup_blog(this.href);return false;" rel="nofollow">List Me!</a>
*1:The Web KANZAKI:XHTMLの書き方と留意点より引用
- Flash のブログパーツを XHTML valid にする
オリジナルの方法とlocation.hrefを使う方法ではJavascriptが無効な場合に機能しません。以下のように書くと、ValidでかつJavascriptが有効な場合にはポップアップするようになりますよ。
<a title="Subscribe with BlogPeople"
href="http://member.blogpeople.net/addlink.jsp?n=1&u=<$MTBlogURL encode_url="1"$>&ti=<$MTBlogName encode_url="1"$>"
"$>"
onclick="window.open(this.href,'blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes');return false;"
"window.open(this.href,'blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes');return false;"
onkeypress="window.open(this.href,'blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes');return false;">
Subscribe with BlogPeople</a>
こんにちは。
アドバイスありがとうございます。
なるほど、ダイレクトに呼び出して、ポップアップは JavaScript の設定に依存、ということですね。
再掲になりますが、
<a title="Subscribe with BlogPeople" href="http://member.blogpeople.net/addlink.jsp?n=1&u=<$MTBlogURL encode_url="1"$>&ti=<$MTBlogName encode_url="1"$>" onclick="window.open(this.href,'blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes');return false;" onkeypress="window.open(this.href,'blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes');return false;">Subscribe with BlogPeople</a>
で試してみました。
それで MTBlogName の中身が日本語の場合、ポップアップ画面のサイト名欄が文字化けするようです(元の文字コードがUTF-8でポップアップ画面がShift_JISのためでしょうか)。
ちょっと調べて、PHPの mb_convert_encoding + urlencode を仲介させてみましたが期待通りに動作せず、膠着状態です。回避策がございましたらご教示ください。
なるほどなるほど。
blogpeopleではBlogNameをescape/unescapeでエンコード/デコードするのに対し、私の書いた方法ではencodeURIComponent/decodeURIComponentでエンコード/デコードすることを仮定しているというのが文字化けの原因ですね。
素直にencode_urlの代わりになるフィルタをプラグインで実現するか、強引にJavascriptで書き換えるかどちらかが主な解決法になるでしょう。後者は http://as-is.net/blog/ のソースに書いてあるのが一つの実装です。popup_blopというjavascriptの関数でURLの書き換えとポップアップを実現してみました。
>(o)さん
こんばんは。
うまくいきました!
エンコードしたURLを一旦デコードして、escapeを実行、原因の仕組みが分かりました。
相変わらずの鮮やかさに脱帽です。
ということで、追記にてスクリプト含めて改めて紹介させて頂きたいと思います。
どうもありがとうございました!
いつもお世話になっております。この度「blogpeople」に新規登録しまして大変恐縮なのですが小粋空間さんを登録させて頂きました。
勝手でどうもすみませんが宜しくお願い致します。
そこで、この度このエントリーを参考にさせて頂き下記のようにしましたがうまくいきません。
・不具合箇所
1)サイト名欄にサイト名が表示されない
2)登録させて頂き貴様のBlog更新されているにもかかわらずNEW表示しない。(blogpeopleでは表示するように設定したつもりなのですが・・・)
3)無題のリンクサイトと表示されてしまう
4)登録サイトを小粋空間さんのようにスクロール枠に表示させたい
<script type="text/javascript"> function popup_blop(url) { var c = url.indexOf('ti='); url = url.substr(0,c+3)+escape(decodeURIComponent(url.substring(c+3,url.length))); window.open(url,'blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes'); } </script><div class="sidetitle2" id="BlogPeoplename">
BlogPeople
</div>
<div class="side" id="BlogPeoplelist"><script language="javascript" type="text/javascript" src="http://www.blogpeople.net/display/usr/0f0d4b575f5a1912.js"></script>
<a title="List Me!" href="http://member.blogpeople.net/addlink.jsp?n=1&u=<$MTBlogURL encode_url="1"$>&ti=<$MTBlogName encode_url="1"$>" onclick="popup_blop(this.href);return false;" onkeypress="popup_blog(this.href);return false;" rel="nofollow">List Me!</a>
<!--<a href="javascript:void(bloppop=window.open('http://www.blogpeople.net/addlink.jsp?n=1&u=http%3A%2F%2Fvita.qee.jp%2F&ti='+escape('Ricordo'),'blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes'));">List Me!</a>--></div>
<script type="text/javascript">
<!--
FoldNavigation('BlogPeople','off',true);
changeFontSizeById(1, 'BlogPeople','10px');
//-->
</script>
以上お手数おかけしますがサポート宜しくお願い致します
>panserさん
こんにちは。
ご返事遅くなってすいません。
大体解消されたと思いますが、4)のスクロールについては、BlogPeopleのリンクリストにスクロールバーをつけるを参照ください。
それではどうぞよろしくお願い致します。