Top ＞ ウェブスタンダード ＞ BlogPeople の「List Me!」を valid にする
2005年7月24日

BlogPeople の「List Me!」を valid にする

Posted at July 24,2005 11:55 PM
Category：[BlogPeople, ウェブスタンダード]
Tag：[, , , , ]

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ではページ内の "&" を "&amp;" と記述する必要があります。URLでも同様です（HTML 2.0の時からこの点も明記されていましたが、ブラウザは "&" のままでもきちんと処理するように求められていたこともあり、これでも機能していました *1）。

つまり「List Me!」のリンクは下記のように "&" の後ろに青色の "amp;" を追加するだけで valid になります。リンクをクリックした時のページ内容が元の設定の時と同じことも確認しています。

<a href="javascript:void(bloppop=window.open('http://www.blogpeople.net/addlink.jsp?n=1&amp;u=http%3A%2F%2Fwww.koikikukan.com%2F&amp;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&amp;u=<$MTBlogURL encode_url="1"$>&amp;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の書き方と留意点より引用

Posted by yujiro
関連記事
人気エントリー
トラックバックURL


コメント

オリジナルの方法とlocation.hrefを使う方法ではJavascriptが無効な場合に機能しません。以下のように書くと、ValidでかつJavascriptが有効な場合にはポップアップするようになりますよ。

<a title="Subscribe with BlogPeople"
href="http://member.blogpeople.net/addlink.jsp?n=1&amp;u=<$MTBlogURL encode_url="1"$>&amp;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>

[1] Posted by (o) : July 25, 2005 8:15 AM

こんにちは。
アドバイスありがとうございます。
なるほど、ダイレクトに呼び出して、ポップアップは JavaScript の設定に依存、ということですね。

再掲になりますが、

<a title="Subscribe with BlogPeople" href="http://member.blogpeople.net/addlink.jsp?n=1&amp;u=<$MTBlogURL encode_url="1"$>&amp;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 を仲介させてみましたが期待通りに動作せず、膠着状態です。回避策がございましたらご教示ください。

[2] Posted by yujiro : July 25, 2005 4:26 PM

なるほどなるほど。
blogpeopleではBlogNameをescape/unescapeでエンコード/デコードするのに対し、私の書いた方法ではencodeURIComponent/decodeURIComponentでエンコード/デコードすることを仮定しているというのが文字化けの原因ですね。

素直にencode_urlの代わりになるフィルタをプラグインで実現するか、強引にJavascriptで書き換えるかどちらかが主な解決法になるでしょう。後者は http://as-is.net/blog/ のソースに書いてあるのが一つの実装です。popup_blopというjavascriptの関数でURLの書き換えとポップアップを実現してみました。

[3] Posted by (o) : July 25, 2005 7:46 PM

＞(o)さん
こんばんは。
うまくいきました！
エンコードしたURLを一旦デコードして、escapeを実行、原因の仕組みが分かりました。
相変わらずの鮮やかさに脱帽です。

ということで、追記にてスクリプト含めて改めて紹介させて頂きたいと思います。
どうもありがとうございました！

[4] Posted by yujiro : July 25, 2005 9:01 PM

いつもお世話になっております。この度「blogpeople」に新規登録しまして大変恐縮なのですが小粋空間さんを登録させて頂きました。
勝手でどうもすみませんが宜しくお願い致します。
そこで、この度このエントリーを参考にさせて頂き下記のようにしましたがうまくいきません。

・不具合箇所
１）サイト名欄にサイト名が表示されない
２）登録させて頂き貴様のBlog更新されているにもかかわらずNEW表示しない。（blogpeopleでは表示するように設定したつもりなのですが･･･）
３）無題のリンクサイトと表示されてしまう
４）登録サイトを小粋空間さんのようにスクロール枠に表示させたい

<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&amp;u=<$MTBlogURL encode_url="1"$>&amp;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&amp;u=http%3A%2F%2Fvita.qee.jp%2F&amp;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>

以上お手数おかけしますがサポート宜しくお願い致します

[5] Posted by panser : March 20, 2006 3:38 AM

＞panserさん
こんにちは。
ご返事遅くなってすいません。
大体解消されたと思いますが、４）のスクロールについては、BlogPeopleのリンクリストにスクロールバーをつけるを参照ください。

それではどうぞよろしくお願い致します。

[6] Posted by yujiro : March 24, 2006 12:43 PM
コメントする

*必須



お知らせ：2008年5月現在、多忙のため、7月頃までコメントを速やかに回答できない状態が続きます。ご質問の内容によっては回答が7月以降になる可能性がありますので、予めご了承ください。

太字 イタリック アンダーライン ハイパーリンク 引用

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります（全て半角文字）

Now loading...
Entries of this Category
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
＜ Default ＞
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by：FeedBurner

loading ...
BlogPeople
Now loading...
Syndicate this site
FeedBurner（RSS1.0/RSS2.0/Atom）
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 4.1
 
List Me!