HTMLのクライアントサイドマークアップ

さて、最近は『電脳コイル規格書』( http://www.xanxys.net/dc/ )というちょっとしたコメンタリを書いていたのですが、10パラグラフ以上あるような文章だとHTMLを完全に手書きするのは見通しも悪く、ちょっと面倒です。

もちろん十分長いものや続き物であれば、wikiのようなCMSを導入したり、ローカルで変換スクリプトを書いたりするのがまっとうな方法でしょうが、前者は明らかに面倒ですし後者も公開用の静的ファイル群とは別に管理する必要があります。

そこで、静的ファイルだけで完結するような方法で、かつjavascriptに対応していないであろう検索エンジンにもそこそこ拾われるような方法が求められます。

そこでちょっとしたスクリプトを書いてみました。


例えば

作中の人物は頻繁に浮かんでいる画面とキーボードを操作しているが、
中には現在使われている文書作成ソフトやブラウザのようなものも見られる。
このような「古い」ものが登場するのには、もちろん制作上の都合やわかりやすさという理由もあるだろうが、
作中世界での理由を考えられないだろうか。

[眼鏡]が普及する前は今我々が使っているような情報機器が使われていたのだろう。
そして[眼鏡]や[空間]の開発は、少なくとも初期にはそれらの機器を使って行われただろう。

のようなテキストを

<p>作中の・・・ないだろうか。</p>
<p><span class="keyword">眼鏡</span>が普及する前は・・・ただろう。</p>

のように、

  1. 改行をまとめてパラグラフをpタグで囲み
  2. キーワードをspanで囲む

処理をしたいとします。

これは次のように書けます。

function markup_line(text){
    // apply: [keyword] -> span class:keyword
    text=text.replace(/\[([^\]]+)\]/g,'<span class="keyword">$1</span>');
    
    return text;
}

function markup_block(text){
    var i;
    var ls=text.split('\n');
    
    text='';
    var in_para=false;
    
    for(i=0;i<ls.length;i++){
        if(ls[i].length==0){
            if(in_para) text+='</p>';
            in_para=false;
        }
        else{
            if(!in_para) text+='<p>';
            in_para=true;
            
            text+=markup_line(ls[i]);
        }
    }
    
    return text;
}

markup_lineを分けることでちょっと見通しが良くなりますし、括弧の閉じ忘れなどで思いがけない変換を防げます。

これを例えばjQueryを使って、class="markup"全体に適用するのは次のように書けます。

function markup_all(){
    $('.markup').each(function(i){
        $(this).html(markup_block($(this).html()));
    });
}

$(document).ready(marukup_all);

テキストが長い場合は表示を工夫したほうがいいかもしれません。

新しいマークアップ、例えばURLのリンクはmarkup_lineに次のようなコードを追加するだけで
処理できます。

text=text.replace(/{([^}]+)}/g,'<a href="$1">$1</a>');

いろいろ応用もききますし結構便利なので機会があれば使ってみてはいかがでしょうか。