【JavaScript】クライアントサイドWiki(PukiWiki風)　その５　ハイライト機能強化　ダイレクトURL機能の強化

2012.08.25

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

・ハイライト機能の複数行対応。

　（一行だとちょっと使いづらかったので、、）

・ダイレクトURLの機能強化

　（file、Notes(ノーツのURL）、\\サーバー名　追加）

・エイリアス機能強化

　（テキストファイル名のエイリアスも可能にした）

<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);
    }

//整形開始
    var html = ‘<pre>’

    //エンドタグを保存変数
    var endTag = "";

    //１行毎に分割してWiki用に整形
    var list = content.replace(/[\n\r][\n\r]?/g, "\n").split("\n");
    for (var i = 0; i < list.length; i++){
       
    //カンマ区切りのデータ（,A,B,C)テーブル表示 複数行にも対応
    if(list[i].match(/(^,.*)/)){
        var resArray = list[i].split(",");
        list[i] = "";
       
        if(endTag != "</table>"){
            //エンドタグなしは、新規のテーブルと判断し<table>ヘッダを付与。
             list[i] += "<table border=’1′ cellspacing=’0′ id=’tbl’><tr>";
     }

        //テーブルに要素を詰める。
        for (var j = 1; j < resArray.length; j++){
            list[i] += "<td>" + resArray[j] + "</td>";
        }
        list[i] += "</tr>";

        //エンドタグを保存
        endTag = "</table>";

    //先頭が半角スペースの空白行 ハイライト表示
} else if (list[i].match(/(^ .*)/)) {
        if ( endTag != "</pre>"){
            //エンドタグなしは、新規のハイライトと判断し<pre>ヘッダを付与。
         list[i] = list[i].replace(/(^ .*)/mg,"<pre>$1");
     }

        //エンドタグを保存
        endTag = "</pre>";

}else{ //整形ルールマッチしていない。
        //前回の行が、整形ルールにマッチしていた。
        if ( endTag != "" ) {
            //行末にエンドタグを付与し、エンドタグを初期化
            html += endTag;
                endTag = "";
            }
        }
     //１行毎の整形
        html += convertLine(list[i]);
        html += "\n";
    }

    //Pukiwiki.ini.phpから移植
    //使用例：SIZE(20){COLOR(red){文字列 }}
    html = html.replace(/COLOR\(([^\(\)]*)\){([^}]*)}/g,"<span style=\"color:$1\">$2</span>");
    html = html.replace(/SIZE\(([^\(\)]*)\){([^}]*)}/g,"<span style=\"font-size:$1px\">$2</span>");
    html = html.replace(/COLOR\(([^\(\)]*)\):((?:(?!COLOR\([^\)]+\)\:).)*)/ig,"<span style=\"color:$1\">$2</span>");
    html = html.replace(/SIZE\(([^\(\)]*)\):((?:(?!SIZE\([^\)]+\)\:).)*)/ig,"<span class=\"size$1\">$2</span>");
    html = html.replace(/%%%(?!%)((?:(?!%%%).)*)%%%?/ig,"<ins>$1</ins>");
    html = html.replace(/%%(?!%)((?:(?!%%).)*)%%/g,"<del>$1</del>");
    html = html.replace(/”'(?!’)((?:(?!”’).)*)”’/g,"<em>$1</em>");
    html = html.replace(/”(?!’)((?:(?!”).)*)”/g,"<strong>$1</strong>");

    html = html + ‘</pre>’;

    //ファイル名、更新日時等を付与
    html = html + getDateCreated(pagename);

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

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

    var filepath = getFilePath(pagename);

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

}
//日時を取得する
function getDate(){
var content = ”;

//&dateで現在時刻を表示
DD = new Date();
DD.getYear();
Year = DD.getYear();
Month = DD.getMonth() + 1;
Day = DD.getDate();

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

function convertLine(content){

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>");
            content = content.replace(/\[\[(\S+?)>((mailto|http|https|ftp|Notes|file).+)\]\]/ig, "<a href=\"$2\" target=\"_blank\" >$1</a>");
            content = content.replace(/\[\[(\S+?)>(\S+?)\]\]/ig, "<a href=’javascript:open(\"$2\")’>$1</a>");

            //URLの解析2[[URL]]
            content = content.replace(/\[\[((mailto|http|https|ftp|Notes|file).+)\]\]/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(/\[\[([^\]\]ihf]+)\]\]/g, "<a href=’javascript:open(\"$1\")’>$1</a>");
} else {
            //ダイレクトURL [[]]が無くても自動的にリンクを張る
            content = content.replace( /(((mailto|http|https|ftp|Notes|file):([^\x00-\x20()<>\x7F-\xFF])*))/g, "<a href=\"$1\" target=\"_blank\" >$1</a>")
            content = content.replace( /(\\\\.+)/g, "<a href=\"$1\" target=\"_blank\" >$1</a>")

}

    //*見出し１ **見出し２　*** 見出し３
    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(){
    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;
    }

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;
/* white-space:pre;
/* color:black;
/* background-color:#F0F8FF;
}

    #headerH1
    {
        width: 500px;
    }
</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>

ちょっとしたメモを残すには、これくらいで十分。

そろそろ、完成かな。だいぶ使いやすくなってきた。

コメント

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