【JavaScript】クライアントサイドWiki(PukiWiki風) その２　機能追加とバグ修正

2012.08.22

クライアントサイドWikiを早速使ってみたが、不具合あったことと、機能的に物足りない感じがしたので修正、

最新版：「index.zip」をダウンロード

index.html

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<html>
<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);
    }

    //ダイレクトURL [[]]が無くても自動的にリンクを張る
    content = content.replace( /([^>]((mailto|http|https|ftp):([^\x00-\x20()<>\x7F-\xFF])*))/g, "<a href=\"$1\" target=\"_blank\" > $1 </a>")

    //画像を解析[[画像名]]
    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>")

    //Pukiwiki.ini.phpから移植
    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>");

    //ファイルを開く
    var html  = ‘<pre>’
              + content.replace(/\[\[([^\]\]ihf]+)\]\]/g, "<a href=’javascript:open(\"$1\")’>$1</a>")
              + ‘</pre>’;

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

//ページ名を指定してページを編集する
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(){
    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"){ // 拡張子が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 = [];
    for (; !enuFiles.atEnd(); enuFiles.moveNext()) {
        var FilePath = enuFiles.item();
        var ExtensionName = fso.GetExtensionName(FilePath); // 拡張子を取得
        var BaseName = fso.GetBaseName(FilePath); // ベースネームを取得

        if (ExtensionName == "txt") { // 拡張子がtxtだったら
            //ファイル名検索
            var database = FilePath;
            var sword = Text1.value;
            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(‘検索結果’ + ‘:’ + Text1.value );
    setContent(‘<pre>’ + content + ‘</pre>’);

    hideEditLink();

}

//ページ名を指定してページを開き、検索文字がヒットしたかチェックする
function openAndSerch(pagename) {
    var content = getContent(pagename);
    if (!content) {
        return edit(pagename);
    }
    //ファイル名検索
    var database = content;
    var sword = Text1.value;
    var check = database.indexOf(sword, 0);
    return check
}

</script>

<style type="text/css">

    #Text1
    {
        width: 79px;
    }

    .style1
    {
        width: 464px;
    }

</style>
               
</head>
<body onload="javascript: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>

変更点：
・ＩＥによってサイトが文字したので、メタタグを追加

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

・検索時のバグを修正

・余計なalertを削除

・ダイレクトURL([[]]が無くてもリンクを張る機能を追加

・PukiWiki風な見出し機能を追加

しかし、正規表現の勉強になるわ。

そして、改めて思う。

こういうの作るの好きだったんだな。。。

コメント

タイトルとURLをコピーしました