【JavaScript】クライアントサイドWiki(PukiWiki風)　その３　ハイライト機能追加等

※本記事のコードはInternet ExplorerやHTA環境特有のActiveXObject("Scripting.FileSystemObject")を使用しています。現代のモダンブラウザ（Chrome、Edge等）ではセキュリティ制限のため動作しませんので、過去のアーカイブ資料として参照してください。

クライアントサイドWikiに以下の機能を追加しました。

• PukiWikiのハイライト機能（簡易版）を移植
• スタイルシートもPukiWikiから一部移植
• JScriptの機能を生かして、ファイルの作成日時やファイルパスを出力できるように機能追加

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<HTML lang="ja">
<head>
<script>

//グローバル変数を設定
var fso = new ActiveXObject("Scripting.FileSystemObject");
var oBaseFolder = getBaseFolder();

//このHTMLファイルが置かれているフォルダのパス名を取得する
function getBaseFolder(){
    var FullPath = location.href.replace(/file:\/\/\//, "").replace(/file:\/\//,"//").replace(/%20/g, " ");

    if(fso.fileExists(FullPath)){
        var thisFile = fso.getFile(FullPath);
    }else{
        alert('File not Exists:' + FullPath);
    }

    return thisFile.parentFolder;
}

//ページ名を指定してページを開く
function open(pagename){
    var content = getContent(pagename);
    if(! content){
        return edit(pagename);
    }

    //１行毎に分割してWiki用に整形
    var list = content.replace(/[\n\r][\n\r]?/g, "\n").split("\n");

    var html = '<pre>';
    for (var i = 0; i < list.length; i++){
      html += convert(list[i]);
      html += "\n";
    }
    html = html + '</pre>';
    
    //ファイル名、更新日時等を付与
    html = html + getDateCreated(pagename);

    setPageName(pagename);
    setContent(html);
    showEditLink();
}

//ファイルの更新日時を取得する
function getDateCreated(pagename){
    var s = '';
    var filepath = getFilePath(pagename);

    var f = fso.GetFile(filepath);
    s = f.Path.toUpperCase() + "<br>";
    s += "作成日時:" + f.DateCreated;
    s += "  最終更新日時: " + f.DateLastModified;
    return(s);
}

//日時を取得する
function getDate(){
    var DD = new Date();
    var Year = DD.getFullYear();
    var Month = DD.getMonth() + 1;
    var Day = DD.getDate();

    return Year + "年" + Month + "月" + Day + "日";
}

function convert(content){
    //ハイライト 1行分
    if (content.match(/(^ .*)/)) {
        content = content.replace(/(^ .*)/mg,"<pre>$1</pre>");
    //[[あり
    } else if (content.match(/(\[\[.*)/)) {
        //画像を解析[[画像名]]
        var pattern = /\[\[([-_.!~*'()a-zA-Z0-9;\/?:\@&=+\$,%#]+\.(gif|jpe?g|png|bmp))\]\]/ig;
        content = content.replace(pattern, "<img src='$1'>");

        //URLの解析1　エイリアス[[エイリアス名>URL]]
        content = content.replace(/\[\[(\S+?)>(\S+?)\]\]/ig, "<a href=\"$2\" target=\"_blank\">$1</a>");
        //URLの解析2[[URL]]
        content = content.replace(/\[\[((http|https).+)\]\]/ig, "<a href=\"$1\" target=\"_blank\">$1</a>");
        //ハイパーリンクの解析[[エイリアス名>\\サーバー名\XXX]]
        content = content.replace(/\[\[(\S+?)>(\\\\.+)\]\]/ig, "<a href=\"$2\" target=\"_blank\">$1</a>");
        //ハイパーリンクの解析[[\\サーバー名\XXX]]
        content = content.replace(/\[\[(\\\\.+)\]\]/ig, "<a href=\"$1\" target=\"_blank\">$1</a>");
        //ファイルを開く
        content = content.replace(/\[\[([^\]]+)\]\]/g, "<a href='javascript:open(\"$1\")'>$1</a>");
    //以外
    } else {
        content = content.replace(/(((mailto|http|https|ftp):([^\x00-\x20()<>\x7F-\xFF])*))/g, "<a href=\"$1\" target=\"_blank\">$1</a>");

        //Pukiwiki構文移植
        content = content.replace(/COLOR\(([^\(\)]*)\){([^}]*)}/g,"<span style=\"color:$1\">$2</span>");
        content = content.replace(/SIZE\(([^\(\)]*)\){([^}]*)}/g,"<span style=\"font-size:$1px\">$2</span>");
        content = content.replace(/COLOR\(([^\(\)]*)\):((?:(?!COLOR\([^\)]+\)\:).)*)/ig,"<span style=\"color:$1\">$2</span>");
        content = content.replace(/SIZE\(([^\(\)]*)\):((?:(?!SIZE\([^\)]+\)\:).)*)/ig,"<span class=\"size$1\">$2</span>");
        content = content.replace(/%%%(?!%)((?:(?!%%%).)*)%%%?/ig,"<ins>$1</ins>");
        content = content.replace(/%%(?!%)((?:(?!%%).)*)%%/g,"<del>$1</del>");
        content = content.replace(/'''(?!')((?:(?!''').)*)'''/g,"<em>$1</em>");
        content = content.replace(/''(?!')((?:(?!'').)*)''/g,"<strong>$1</strong>");

        //*見出し１ **見出し２　*** 見出し３
        content = content.replace(/(\*\*\*)(.*)/g,"<h4>$2</h4>");
        content = content.replace(/(\*\*)(.*)/g,"<h3>$2</h3>");
        content = content.replace(/(\*)(.*)/g,"<h2>$2</h2>");
    }

    return content;
}

//ページ名を指定してページを編集する
function edit(pagename){
    var content = getContent(pagename);

    var html =
          "<form onsubmit='save(\"" + pagename + "\"); return false;'>"
        + "<textarea cols='120' rows='30' id='textarea' wrap='off'>" + content + "</textarea><br />"
        + "<input type='submit' value='保存'><br />"
        + "</form>";

    setPageName(pagename);
    setContent(html);
    hideEditLink();
}

//いま見ているページを編集する
function editCurrentPage(){
    var pagename = id('headerH1').innerText;
    edit(pagename);
}

//フォームのテキストエリアの中身を、指定したページのコンテンツとして保存する
function save(pagename){
    var content = id('textarea').value;
    var filepath = getFilePath(pagename);
    var file = fso.createTextFile(filepath);
    file.write(content);
    file.Close();

    open(pagename);
}

//ページ一覧画面を表示する
function openIndexPage(){
    var enuFiles = new Enumerator(oBaseFolder.Files);
    var myFiles = [];
    for (; !enuFiles.atEnd(); enuFiles.moveNext() ){ 
        var FilePath = enuFiles.item(); 
        var ExtensionName = fso.GetExtensionName(FilePath);
        var BaseName = fso.GetBaseName(FilePath);
        if(ExtensionName == "txt"){ 
            myFiles.push(BaseName);
        }
    } 

    var list = [];
    for(var i = 0; i < myFiles.length; i++){
        list.push('<li><a href="javascript:open(\'' + myFiles[i] + '\');">' + myFiles[i] + '</a></li>');
    }

    var content = list.join("\n");
    setPageName('ページ一覧');
    setContent('<pre>' + content + '</pre>');
    hideEditLink();
}

//ページ名を指定して、該当するテキストファイルのパス名を取得する
function getFilePath(pagename){
    var filename = pagename + ".txt";
    return oBaseFolder.Path + "\\" + filename;
}

//ページ名を指定して、該当するテキストファイルの中身を取得する
function getContent(pagename){
    var content = '';
    var filepath = getFilePath(pagename);

    if(fso.fileExists(filepath)){
        var file = fso.openTextFile(filepath);
        if(! file.atEndOfStream){
            content = file.readAll();
        }
        file.Close();
    }
    return content;
}

//メニューの「編集」リンクを表示する
function showEditLink() {
    id('editLink').style.display = "inline";
}

//メニューの「編集」リンクを非表示にする
function hideEditLink() {
    id('editLink').style.display = "none";
}

//コンテンツを画面に表示する
function setContent(html) {
    id('content').innerHTML = html;
}

//ページ名を画面に表示する
function setPageName(pagename) {
    if(pagename){
        id('headerH1').innerText = pagename;
    }
}

//HTMLの要素を取得する
function id(s) {
    return document.getElementById(s);
}

//検索にヒットしたページの一覧画面を表示する
function FindIndexPage() {
    var enuFiles = new Enumerator(oBaseFolder.Files);
    var myFiles = [];
    var sword = id('Text1').value;
    for (; !enuFiles.atEnd(); enuFiles.moveNext()) {
        var FilePath = enuFiles.item();
        var ExtensionName = fso.GetExtensionName(FilePath);
        var BaseName = fso.GetBaseName(FilePath);

        if (ExtensionName == "txt") {
            var check = BaseName.indexOf(sword, 0);
            if (0 <= check) {
                myFiles.push(BaseName);
            } else if (0 <= openAndSerch(BaseName)) {
                myFiles.push(BaseName);
            }
        }
    }
    
    var list = [];
    for (var i = 0; i < myFiles.length; i++) {
        list.push('<li><a href="javascript:open(\'' + myFiles[i] + '\');">' + myFiles[i] + '</a></li>');
    }

    var content = list.join("\n");
    setPageName('検索結果:' + sword);
    setContent('<pre>' + content + '</pre>');
    hideEditLink();
}

//ページ名を指定してページを開き、検索文字がヒットしたかチェックする
function openAndSerch(pagename) {
    var content = getContent(pagename);
    if (!content) {
        return -1;
    }
    var sword = id('Text1').value;
    return content.indexOf(sword, 0);
}
</script>

<style type="text/css">
    #Text1 {
        width: 79px;
    }
    .style1 {
        width: 464px;
    }
    h2 {
        font-family: verdana, arial, helvetica, Sans-Serif;
        color: inherit;
        background-color: #DDEEFF;
        padding: .3em;
        border: 0px;
        margin: 0px 0px .5em 0px;
    }
    h3 {
        font-family: verdana, arial, helvetica, Sans-Serif;
        border-bottom: 3px solid #DDEEFF;
        border-top: 1px solid #DDEEFF;
        border-left: 10px solid #DDEEFF;
        border-right: 5px solid #DDEEFF;
        color: inherit;
        background-color: #FFFFFF;
        padding: .3em;
        margin: 0px 0px .5em 0px;
    }
    h4 {
        font-family: verdana, arial, helvetica, Sans-Serif;
        border-left: 18px solid #DDEEFF;
        color: inherit;
        background-color: #FFFFFF;
        padding: .3em;
        margin: 0px 0px .5em 0px;
    }
    pre {
        border-top: #DDDDEE 1px solid;
        border-bottom: #888899 1px solid;
        border-left: #DDDDEE 1px solid;
        border-right: #888899 1px solid;
        padding: .5em;
        margin-left: 1em;
        margin-right: 2em;
    }
</style>
</head>
<body onload="open('トップページ')">
    <table width="100%" border="0">
        <tr valign="top">
            <td class="style1">
                <h1 id="headerH1">トップページ</h1>
            </td>
            <td align="right">
                <a href="javascript:open('トップページ')">トップページ</a> |
                <span id="editLink"><a href="javascript:editCurrentPage()">編集</a> | </span>
                <a href="javascript:openIndexPage()">ページ一覧</a> |
                <input id="Text1" type="text" /> <a href="javascript:FindIndexPage()">検索</a>&nbsp;
            </td>
        </tr>
    </table>
    <hr id="br1" />
    <div id="content"></div>
</body>
</html>

だんだん趣味っぽくなってきましたが、自分の思い通りに拡張できるのは楽しいところです。