Home > Diary | Programming > Blockquote を HTML5 っぽく整形

Blockquote を HTML5 っぽく整形

2010-05-15 (土) 18:42
Diary | Programming
JavaScript

<blockquote cite="urn:isbn:8158-0179-7" title="カンティロン『商業一般の本性にかんする試論』">
<p>土地はそこから富が引き出される源泉、あるいは素材である。人間の労働はその富を生み出す形式である。そして富それ自体は食料や日常の便利で快適な品々にほかならない。</p>
</blockquote>

これを HTML5風にマークアップするとこうなる。

<figure>
<blockquote cite="urn:isbn:8158-0179-7" title="カンティロン『商業一般の本性にかんする試論』">
<p>土地はそこから富が引き出される源泉、あるいは素材である。人間の労働はその富を生み出す形式である。そして富それ自体は食料や日常の便利で快適な品々にほかならない。</p>
</blockquote>
<figurecaption>
カンティロン<cite>『商業一般の本性にかんする試論』</cide>より
</figurecaption>
</figure>

メンドクサイである。できたら、最初のようにマークアップするだけで、スクリプトで自動変換できるとありがたいかなぁーとか思った。

// urn:isbn:4003410513
// -> http://www.amazon.co.jp/exec/obidos/ASIN/4003410513/bestylesnet-22/rel=nofollow

function isbn2Amazon(urn) {
    var amazon_url = ‘http://www.amazon.co.jp/exec/obidos/ASIN/’;
    var id = ‘bestylesnet-22′;
    if ( urn.match(/^urn:isbn:(.+)$/i) ) {
        amazon_url += RegExp.$1.replace(/-/g,”) + ‘/’ + id + ‘/rel=nofollow’;
    }
    return amazon_url;
}

$(function(){
$("blockquote").each(function(){

// blockquoteをdivで囲む
$(this).wrap("<figure class=’quote’></figure");

        // title属性とcite属性の値を変数に代入
        var title = $(this).attr("title");
        var cite = $(this).attr("cite");

        // cite属性の値をurlとurn:isbnに分ける
        var url = $("blockquote[cite^=http]").attr("cite");
        var isbn = $("blockquote[cite^=urn:isbn]").attr("cite");
        var tag;
        // cite属性値がurlの場合
        if(cite === url){
            tag = "<figurecaption>引用: <cite><a href=’#1′ target=’_blank’>#2</a></cite></figurecaption>";
            if(title != ""){ // title属性が空じゃない(存在する)場合
                $(this).after(tag.replace("#1", url).replace("#2", title));
            } else {
                $(this).after(tag.replace("#1", url).replace("#2", cite));
            }
        }
        // cite属性値がurn:isbnの場合
        else if(cite === isbn){
            tag = "<figurecaption>引用: <cite><a href=’#1′ target=’_blank’>#2</a></cite></figurecaption>";
            if(title != ""){ // title属性が空じゃない場合
                $(this).after(tag.replace("#1", isbn2Amazon(isbn)).replace("#2", title));
            } else {
                $(this).after(tag.replace("#1", isbn2Amazon(isbn)).replace("#2", cite));
            }
        }

        // cite属性が空、且つ、title属性が空じゃない場合
        else if( (cite === "") && (title != "") ){
            tag = "<figurecaption>引用: <cite>#2</cite></figurecaption>";
            $(this).after(tag.replace("#2", title));
        }
        // cite属性とtitle属性のどちらも存在しない場合は何もしない
    });
});

参照: jQuery を使って blockquote の cite 属性と title 属性でリンクを生成して表示させようとしてみた – Unformed Building

書籍の場合は、Amazon へリンクするようにしている。

M	T	W	T	F	S	S
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29

Blockquote を HTML5 っぽく整形

関連エントリー