W3G

諸背景と実現したいこと

UAが処理するにあたっては、blockquoteやq要素のcite属性に引用元のURI（リソースの所在や名前）と、title属性に引用元の説明情報があれば、適切に解釈されることになっていようとは思うのですが、残念ながら主要な視覚環境のUAにおいてcite属性、title属性で示された情報が視覚的に表され、それをハイパーリンク等で利用できるようにはなっていません。

そこで、利用者にとってもblockquote, q要素で示されている引用元の情報が視覚化され、ハイパーリンクで利用できるようになっている方が便利なはずであろうということで、スクリプトを利用して、今回は利用頻度が多いであろうblockquote要素のみに対象を絞り、引用元へのリンク、及び引用元を示すテキストを生成するためのスクリプトを考えてみたいと思います。

今回実現したいことは次のようなスクリプトです。

• blockquote要素のcite属性に指定された引用元のリソースの所在(URL)、title属性に指定された引用元の説明情報をそれぞれリンク先とリンクタイトルに置き換わるようにする。
• もし、引用元のリソースの所在が書籍のためにURLでない場合は、URNとしてISBNが与えられていれば、オンラインショッピングサイトのamazon.co.jpへのリンクへ変換するなど、できるだけハイパーリンクを通して情報を得られる機会を工夫する。

サンプルコード

スクリプトを自分で書こうと思ったのですが、他にも似たようなスクリプトがないか探してみたところ、Unformed Buildingさんにて、今回実現したいことのほとんど完成形がすでにあったので、基本となるスクリプトには公開されていたものを利用させて頂きました(@ub_pnrさんにお礼申し上げます)。jQueryのライブラリを利用しています。

jQuery(function ($) {
$('blockquote').each(function(){
var trakingID = 'w3g-22';
var title = $(this).attr('title');
var cite = $(this).attr('cite');
var url = $(this).filter('[cite^=http]').attr('cite');
var isbn = $(this).filter('[cite^=urn:isbn]').attr('cite');
$(this).wrap('<dl class="quote"><dd></dd></dl>');
if (cite === url) {
if (title != '') {
$(this).parent('dd').before('<dt><cite><a href="' + cite + '">' + title + '</a></cite>より</dt>');
} else {
$(this).parent('dd').before('<dt><cite><a href="' + cite + '">' + cite + '</a></cite>より</dt>');
}
} else if (cite === isbn) {
isbn = isbn.replace(/^urn:isbn:/i,'').replace(/-/g,'');
if(trakingID != ''){
isbn = 'http://www.amazon.co.jp/o/ASIN/' + isbn + '/' + trakingID + '/rel=nofollow';
}else{
isbn = 'http://www.amazon.co.jp/o/ASIN/' + isbn;
}
if (title != '') {
$(this).parent('dd').before('<dt><cite><a href="' + isbn + '">' + title + '</a></cite>より</dt>');
} else {
$(this).parent('dd').before('<dt><cite><a href="' + isbn + '">' + cite + '</a></cite>より</dt>');
}
} else if ((cite === '') && (title != '')) {
$(this).parent('dd').before('<dt><cite>' + title + '</cite>より</dt>');
}
});
});

変数trakingIDの値に入っているw3g-22の部分は適宜、自分のAmazonアソシエイトIDに変更してください。もし、AmazonアソシエイトIDをお持ちでない場合は、var trakingID = '';と、値を空(undefined)で利用してください。後ほど、AmazonアソシエイトIDを取得されることがあったら、後日埋められると良いかと思います。

たとえば、次のようなblockquote要素でマークアップしたものがあったとします。

<blockquote cite="urn:isbn:4873114683" title="jQueryクックブック">
<h1>1章　jQueryの基礎</h1>
<ul>
<li>レシピ1.1   HTMLページでjQueryライブラリコードをインクルードする</li>
<li>レシピ1.2   ページの読み込みが完了する前にjQuery/JavaScriptコードを実行する</li>
<li>レシピ1.3   セレクタとjQuery関数を使ってDOM要素を選択する</li>
<li>レシピ1.4   指定されたコンテキストでDOM要素を選択する</li>
<li>レシピ1.5   DOM要素のラッパーセットのフィルタリング</li>
</ul>
</blockquote>

上記のソースコードがスクリプトを通すことで、引用元を視覚化できるようにHTMLを追加生成します。ここでは、引用元を示すcite要素と組み合わせて、できるだけ引用元のブロックとの対応が関連づけられるようなマークアップを出力するようにしています。

<dl class="quote">
<dt><cite><a href="http://www.amazon.co.jp/o/ASIN/4873114683/w3g-22/rel=nofollow">jQueryクックブック</a></cite>より</dt>
<dd><blockquote cite="urn:isbn:4873114683" title="jQueryクックブック">
<h1>1章　jQueryの基礎</h1>
<ul>
<li>レシピ1.1   HTMLページでjQueryライブラリコードをインクルードする</li>
<li>レシピ1.2   ページの読み込みが完了する前にjQuery/JavaScriptコードを実行する</li>
<li>レシピ1.3   セレクタとjQuery関数を使ってDOM要素を選択する</li>
<li>レシピ1.4   指定されたコンテキストでDOM要素を選択する</li>
<li>レシピ1.5   DOM要素のラッパーセットのフィルタリング</li>
</ul>
</blockquote></dd>
</dl>