XHTML 1.0 Strictではanchorタグにtarget=”_blank”属性を設けて、新規ウインドウでリンク先を開くことが認められていない。
私自身、いまだにtransitionalを主流にしているのであまり深くは考えてきていなかったのだが、先日、知人から「どうすれば最もシンプルに解決できるのか?」という質問を受けた。
Javascriptを使って新規ウインドウで開くのは手法として当然のことだが、ここで「シンプルに…」と言われて、catswhocode.comの8 awesome JQuery tips and tricksという記事を思い出し、ちょっと手を加えてみた。
手筈は極めて簡単で、anchorタグにrel属性で特定の名前を与えておいて、jQueryを使ってその名前を持つものだけ新規ウインドウで開くというやり方（一応これがデモページ）。jQueryをロードした後、以下のスクリプトを実行させるだけで済む。
<script type=”text/javascript”>// <![CDATA[
$(document).ready(function(){
//-----------
$("a[rel^='extlink']“).click(function(){
this.target = “_blank”;
});
//———–
});
// ]]></script>
ソースにあるとおり、ここではanchorタグのrel属性にextlinkで始まる値を持つものだけを対象にしている。
至ってシンプル。もちろんW3CのMarkup Validationもキチンと通る。デモページではcssにも細工を持たせ、外部リンクを明示的に示すアイコンも表示できるようにしてあるので、興味があれば参照してほしい。
CSVやRSSなど、どこかのデータソースを上手に利用してマッシュアップをしたいと考えているなら、YQLとgetJSON()の組みあわせが、なんとも素敵すぎるくらいにシンプルに物事を解決してくれる。
XMLをそのまま力技でparseしても良いのだろうけど。しかし実際には必要ないデータをクライアント側へ送って帯域を無駄にしてしまうのはやはりエレガントではない。どこかでJSONに畳み込んで非同期でクライアント側へ投げるのが、最低限の今どきのお作法なのだろうと思う。ならば自らのサーバサイドでLLを使ってXMLからJSONへポロリと吐き出そう、と、短絡的に考えてしまうのも悪くないが、なんだか3年前に戻ったようなDéjà vuを覚えなくもないし、せっかくだからもうひとひねりしてみたいと思うのが人情というものだろう。
すこし前に、IBMのdeveloperWorks JapanにJSONP、jQuery、Yahoo! Query Language を使ってREST クエリを使ってマッシュアップを作成すると言うエントリが掲載されていた。それを思い出し、参考にしてYQL（Yahoo! Query Language）を使ってJSONP(JSON with Padding)を生成し、クロスドメインなgetJSON()で遊んでみた。
このブログのトップページの中間カラムにある「Top news@sfgate.com」の内容は、ページがロードされた時点での最新のsfgate.comのトップニュース内容のRSSをYQL側で取り込み、ヘッドラインと記事へのURLという必要な情報だけをもったJSONPへ畳み込んでjQueryのgetJSON()で読み込んでエレメントの追加したもの。
コードは以下のとおり：
var yqlUrl4="http://query.yahooapis.com/v1/public/yql?q=select%20title%2C%20link%20from%20rss%20where%20url%3D%22http%3A%2F%2Fwww.sfgate.com%2Frss%2Ffeeds%2Fnews.xml%22&format=json&callback=?";
jQuery.getJSON(yqlUrl4, function(data){
jQuery.each(data.query.results.item, function(index, item){
$("＜a href='" + item.link + "' target=\"_blank\"/＞")
.html(item.title) .appendTo($('#sfgate'))
.wrap('＜li/＞');
});
});
コード中にもあるように、getJSONで得た値を各々「sfgate」という識別子を持つエレメント（ここではul）に追加している。文字列へのタグの修飾（ここではliとa）も見てのとおり。YQLが生成するRESTクエリはけっして美しいとは言えないが、YQLの書きやすさと柔軟さを考えれば、差し引きしてもじゅうぶんにおつりがくる。このRESTクエリの生成に必要なYQLは以下のとおり。
select title, link from rss where url=”http://www.sfgate.com/rss/feeds/news.xml”
YQLとgetJSON()の組みあわせれは、マッシュアップのアイデアを形にするために必要な時間を大幅に短縮できる。ちょと素敵すぎるくらいに自分好みだ。
P.S.
ちなみにjQueryのドキュメントの例にあるとおり、Flickrのようにデータフォーマット変換用APIオプションが用意されている場合はYQLを通す必要はない。便利になった反面、このあたりのチェックを怠ると「気が利いて、間が抜けてる」状態に陥りかねない。
Comments