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

2012.08.23

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

さらに機能を追加

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

   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 convert(content){

    //処理なし
    if (content.match(/(^ .*)/)) {
     //ハイライト 1行分
     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(/\[\[([^\]\]ihf]+)\]\]/g, "<a href=’javascript:open(\"$1\")’>$1</a>");
    //以外
    } else {

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

    }

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

</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をコピーしました