blockquote要素単体から引用元を視覚化する

blockquote要素単体から引用元を視覚化できるように、引用元へのリンク、及び引用元を示すテキストを生成するためのスクリプトです（jQuery使用）。引用元が書籍でISBNコードが示されている場合は、Amazonのリンク（アソシエイトID付き）へと変換します。

@ub_pnrさんがjQueryプラグイン版を公開されました。「jQuery.prettyQuote.js」おすすめです！

諸背景と実現したいこと

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>

引用元が書籍の場合に`cite`属性に指定する`urn:isbn:ISBNコード`について

書籍はWWW上における「所在(URL)」という概念で結びつけることができないので、リソースを永続的な名前によって識別するURNとしてISBNコードを使用します。ISBNコードは、世界共通で用いられており10桁(2006年以前の規格でISBN-10という)、または13桁（2007年以降の規格でISBN-13という）の数字で国籍・出版社・製品を示します。書籍のISBNコードをamazon.co.jpへのリンクへと変換するにあたって、ASINコードがISBN-10のコードとイコールの関係になっているので、amazon.co.jpのASINコードをそのままISBNコードとして入力すれば良いと考えてもらえるとわかりやすいのではないかと思います。urn:isbn:ISBNコードの形式です。

CSSによる装飾のサンプル

CSSによる装飾例を示します。引用元を視覚化した部分が最後に表示されるような装飾にしています。引用部分をわかりやすくするためにクォーテーションマークを模した背景画像を利用します。

この装飾例の画像を含むサンプル一式はこちらよりダウンロードして利用してください。

dl.quote{
margin:1em 0;
}
dl.quote dd{
margin:0;
}
dl.quote,
dl.quote dd{
padding:0;
position:relative;
}
blockquote {
border:1px solid #f9f9f9;
background:#eee;
padding:0 25px;
margin:1em 10px;
color:#666;
quotes:none;
display:block;
position:static;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
dl.quote dd blockquote{
padding:0 25px 25px 25px;
margin:0 10px;
background:#eee url(/img/blockquote_start.gif) no-repeat 10px 15px;
}
blockquote h1{
font-size:115%;
font-weight:100;
border-bottom:1px dotted #0f527d;
color:#0f527d;
margin:1em 0 .5em 0;
padding:0 0 4px 0;
text-shadow:0 1px 1px #d0d0d0;
}
dl.quote dt{
background:transparent url(/img/blockquote_end.gif) no-repeat 100% 0;
position:absolute;
bottom:10px;
right:20px;
clear:none;
float:none;
border:0 none;
margin:0;
padding:15px 10px 0 0;
display:block;
z-index:10;
}

なお、IEにおいては、IE9未満のバージョンでborder-radiusをサポートしていないため角丸の装飾は反映されません。