汎用型ページクリエイター

サンプル

コード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<meta http-equiv="content-language" content="ja,jp-ja"/>
<meta charset="UTF-8"/>
<title>ページクリエイター</title>
<style type="text/css">
@import url(http://scp-jp.wdfiles.com/local--files/japanese-syntax/scp-WikidotCss.css);
</style>
<script type="text/javascript" src="http://ja.scp-wiki.net/scpmetatitlesearch/code/1"></script>
<script type="text/javascript" src="http://ja.scp-wiki.net/scpmetatitlesearch/code/4"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded",function(){
    var paramNameEntity = {
        pagename:"pagename",
        category:"category",
        parent:"parent",
        tags:"tags",
        tagSelect:"tagselect",
        forcetag:"forcetag",
        pagetitle:"pagetitle",
        createButton:"createButton"
    }
    var displayParamTitle = new Object();
    displayParamTitle[paramNameEntity.category] = "categoryName";
    displayParamTitle[paramNameEntity.pagename] = "PageName";
    displayParamTitle[paramNameEntity.pagetitle] = "PageTitle";
    displayParamTitle[paramNameEntity.tags] = "tagsSet";
    displayParamTitle[paramNameEntity.tagSelect] = "Select Tag: ";
    displayParamTitle[paramNameEntity.createButton] = "ページを作成";
    var isForceTag = false;
    var isSelectBox = false;
    var paramsEntity = function(BooleanDefault){
        var paramsSetting = new Object();
        paramsSetting[paramNameEntity.category] = "string";
        paramsSetting[paramNameEntity.parent] = "string";
        paramsSetting[paramNameEntity.tags] = "string";
        paramsSetting[paramNameEntity.forcetag] = "string";
        paramsSetting[paramNameEntity.pagetitle] = "reverse-boolean";
        paramsSetting[paramNameEntity.tagSelect] = "boolean";
 
            for(var i in paramsSetting){
                if(BooleanDefault){
                    switch(paramsSetting[i]){
                        case "boolean":
                            paramsSetting[i] = false;
                        break;
                        case "string":
                            paramsSetting[i] = "";
                        break;
                        case "number":
                            paramsSetting[i] = 0;
                        break;
                        case "reverse-boolean":
                            paramsSetting[i] = true;
                        break;
                    }
                }else{
                    switch(paramsSetting[i]){
                        case "reverse-boolean":
                            paramsSetting[i] = "boolean";
                        break;
                    }
 
                }
            }
 
        this.paramList = paramsSetting;
    }
    var paramList = (new paramsEntity(false)).paramList;
    var locationH = location.href;
    if(locationH.indexOf("#") < 0)locationH += "#";
    var settingList = locationH.split("#");
 
    var setting = "";
    for(var i = 1;i < settingList.length;i++){
        setting += "#" + settingList[i];
    }
    setting = setting.substring(1,setting.length);
    var params = setting.split(";");
    var paramResult = (new paramsEntity(true)).paramList;
    for(i = 0; i < params.length;i++){
        var singl = params[i];
        if(singl){
            setParam(singl);
        }
    }
 
    var paramDiv = document.createElement("div");
    var paramTitle = document.createElement("b");
    paramTitle.setAttribute("style","display:block;");
    paramTitle.innerHTML = displayParamTitle[paramNameEntity.pagename];
    var categorySpan = document.createElement("span");
    categorySpan.setAttribute("id",displayParamTitle[paramNameEntity.category]);
    categorySpan.innerHTML = "";
 
    if(paramResult[paramNameEntity.category]){
        paramResult[paramNameEntity.category] = replasticPageName(paramResult[paramNameEntity.category]);
        if(paramResult[paramNameEntity.category].match(/\:./))paramResult[paramNameEntity.category] = "";
        if(paramResult[paramNameEntity.category].length > 0){
            if(!paramResult[paramNameEntity.category].match(/$\:/)){
                paramResult[paramNameEntity.category] += ":";
            }
            categorySpan.innerHTML = paramResult[paramNameEntity.category];
        }
    }
    var pageNameInput = document.createElement("input");
    pageNameInput.setAttribute("type","text");
    pageNameInput.setAttribute("name",paramNameEntity.pagename);
    pageNameInput.setAttribute("style","height:1.5em;width:50%;");
    pageNameInput.addEventListener( "keyup" ,function(e){
        var obj = e.currentTarget;
        var objValue = obj.value;
        if(!objValue)return;
        var check = false;
        if(objValue.match(/[^a-zA-Z0-9\-_\:\[\]]/)){
            check = true;    
        }
 
        if(check){
            obj.blur();
            setTimeout(function(){obj.focus();},5)
        }
        while(objValue.match(/[^a-zA-Z0-9\-_\:\[\]]/)){
        objValue=objValue.replace(/[^a-zA-Z0-9\-_\:\[\]]/,function(){
            return "";
        });
        }
        obj.value = objValue;
    });
    pageNameInput.addEventListener( "change" ,function(e){
    var obj = e.currentTarget;
 
    obj.value=replasticPageName(obj.value);
    });
    paramDiv.appendChild(paramTitle);
    paramDiv.appendChild(categorySpan);
    paramDiv.appendChild(pageNameInput);
    pagecreateForm.appendChild(paramDiv);
    if(paramResult[paramNameEntity.pagetitle]){
        paramDiv = document.createElement("div");
        paramTitle = document.createElement("b");
        paramTitle.setAttribute("style","display:block;");
        paramTitle.innerHTML = displayParamTitle[paramNameEntity.pagetitle];
        var pageTitleInput = document.createElement("input");
        pageTitleInput.setAttribute("name",paramNameEntity.pagetitle);
        pageTitleInput.setAttribute("type","text");
        pageTitleInput.setAttribute("style","height:1.5em;width:50%;");
        paramDiv.appendChild(paramTitle);
        paramDiv.appendChild(pageTitleInput);
        pagecreateForm.appendChild(paramDiv);
    }
 
    var createButton = document.createElement("input");
    createButton.setAttribute("type","button");
    createButton.setAttribute("value",displayParamTitle[paramNameEntity.createButton]);
    createButton.setAttribute("style","cursor:pointer;");
    pagecreateForm.appendChild(createButton);
 
    paramResult[paramNameEntity.forcetag] = paramResult[paramNameEntity.forcetag].split(",").join("");
    if(paramResult[paramNameEntity.tagSelect]){
        var baseDiv = document.createElement("div");
        paramTitle = document.createElement("b");
        var selecter = document.createElement("select");
        paramTitle.innerHTML = displayParamTitle[paramNameEntity.tagSelect];
        if(paramResult[paramNameEntity.tags]){
            if(paramResult[paramNameEntity.tags].length > 0){
                paramResult[paramNameEntity.tags] = paramResult[paramNameEntity.tags].split(" ").join(",");
                var tagList = paramResult[paramNameEntity.tags].split(",");
 
                selecter.setAttribute("name",paramNameEntity.tags);
                for(var j = 0;j < tagList.length;j++){
                    if(tagList[j]){
                        if(tagList[j].length > 0){
                            var option = document.createElement("option");
                            option.value = tagList[j];
                            option.innerHTML = decodeURIExtension(tagList[j]);
                            if(j == 0){
                                option.selected = true;
                                isSelectBox = true;
                            }
                            selecter.appendChild(option);
                        }
                    }
                }
            }
        }
        if(isSelectBox){
            baseDiv.appendChild(paramTitle);
            baseDiv.appendChild(selecter);
            baseDiv.appendChild(document.createElement("br"));
            baseDiv.appendChild(document.createElement("br"));
            pagecreateForm.insertBefore(baseDiv,pagecreateForm.firstChild);
            if(paramResult[paramNameEntity.forcetag].length > 0){
                isForceTag = true;
            }
        }
 
    }
 
    if(!isSelectBox){
        if(paramResult[paramNameEntity.forcetag].length > 0){
            paramResult[paramNameEntity.tags] = paramResult[paramNameEntity.forcetag] + "," + paramResult[paramNameEntity.tags];
        }
        createHideParam(paramNameEntity.tags);
    }
    createHideParam(paramNameEntity.parent);
 
    var StringFunction = "(function(elm){elm = elm.parentNode;\n"+
    "elm." + paramNameEntity.pagename + ".value = replasticPageName(elm." + paramNameEntity.pagename + ".value);\n" +
    "if(elm." + paramNameEntity.pagename + ".value.length <= 0){return;}\n"+
    "var url = document.referrer;\n"+
    "url = 'http://' + (url.split('http://').join('').split('/')[0]) + '/';\n"+
    "var category = document.getElementById('" + displayParamTitle[paramNameEntity.category] + "').innerHTML;\n"+
    "url += category + elm." + paramNameEntity.pagename + ".value;\n"+
    "url += '/edit/true';" + createFunction()+ "\n"+
    createForceTag() +
    "if(elm." + paramNameEntity.parent + ".value.length > 0){url += '/parentPage/';\n"+
    "url += elm." + paramNameEntity.parent + ".value;}\n"+
    "window.parent.location.href = url;})(this);";
 
    createButton.setAttribute("onclick",StringFunction);
 
    function setParam(target){
        if(!target)return;
        target = target.trim();
        if(target.indexOf("=") < 0)return;
        var parmName = target.split("=")[0];
        if(!parmName)return;
        parmName = parmName.trim();
        var paramValue = target.split("=")[1];
        if(!paramValue)return;
        paramValue = paramValue.trim();
        for(var i in paramList){
            if(parmName == i){
                switch(paramList[i]){
                    case "string":
                        paramResult[i] = paramValue;
                    break;
                    case "boolean":
                        if(paramValue == "false" || paramValue == "False" || paramValue == "0"){
                            paramResult[i] = false;
                        }else if(paramValue == "true" || paramValue == "True" || paramValue == "1"){
                            paramResult[i] = true;
                        }
                    break;
                    case "number":
                        var checkNum = Number(paramValue);
                        if(isNaN(checkNum))return;
                        paramResult[i] = checkNum;
                    break;
                }
            }
        }
    }
 
    function createHideParam(paramName){
        var UnDisplaySetting = document.createElement("textarea");
        UnDisplaySetting.setAttribute("name",paramName);
        UnDisplaySetting.setAttribute("style","display:none;");
        UnDisplaySetting.value = "";
        if(paramResult[paramName]){
            if(paramResult[paramName].length > 0){
                UnDisplaySetting.value = paramResult[paramName];
                if(paramName == paramNameEntity.tags){
                    UnDisplaySetting.value = UnDisplaySetting.value.split(" ").join(",");
                    var deleteSpace = UnDisplaySetting.value.split(",");
                    UnDisplaySetting.value = "";
                    var isFirst = true;
                    for(var i = 0;i < deleteSpace.length;i++){
                        if(deleteSpace[i].length > 0){
                            UnDisplaySetting.value += ((!isFirst)?",":"") +deleteSpace[i];
                            isFirst = false;
                        }                        
                    }
                }
            }
        }
        pagecreateForm.appendChild(UnDisplaySetting);        
    }
 
    function createFunction(){
        if(!paramResult[paramNameEntity.pagetitle])return "";
        var result = "url += '/title/';if(elm." + paramNameEntity.pagetitle + ".value.length <= 0){"+
        "url += elm."+paramNameEntity.pagename+".value;}else{"+
        "url += elm."+ paramNameEntity.pagetitle + ".value;}";
        return result;
 
    }
 
    function createForceTag(){
        var result =     "if(elm."+ paramNameEntity.tags + ".value.length > 0){\n"+
        "url += '/tags/' + elm." + paramNameEntity.tags + ".value;}\n";
        if(isForceTag){
            result = "url += '/tags/" + paramResult[paramNameEntity.forcetag] + "';\n" +
            "if(elm."+ paramNameEntity.tags + ".value.length > 0){\n"+
            "url += ',' + elm." + paramNameEntity.tags + ".value;}\n";
        }
        return result;
    }
 
});
</script>
</head>
<body>
<form id="pagecreateForm">
</form>
</body>

概要

ページ作成時に下記要素について任意の値を初期値とするページ作成フォームを作る事ができます。

  • ページカテゴリ
  • タグ
  • 親ページ

使い方

下記の呼び出しコードを使用します。

[[iframe http://shitake-crude-production.wikidot.com/extension:pagecreate/code/1 width="100%" height="120px"]]

上記のコードでは通常のページ作成フォームと機能的に変わりありません。

呼び出しするURLの後ろにハッシュ(#)を付け、その後に各パラメータを設定する事でページ作成時の初期値を設定できます。

カテゴリ初期値を設定

ハッシュの後に下記のコードを記述します。

category=<カテゴリ名>

カテゴリは必ずwikidotのページ名規則に則ったものを使用してください。

カテゴリの設定が適切である場合はページ名入力欄の左にカテゴリ名が表示されます。

コード例

[[iframe http://shitake-crude-production.wikidot.com/extension:pagecreate/code/1#category=sample width="100%" height="120px"]]


タグの初期値を設定

ハッシュの後に下記のコードを記述します。

tags=<タグ名>

半角カンマ区切り(,)で複数のタグを設定できます。

tags=<タグA>,<タグB>

また[[iframe ~]]の場合は[[iframe ~ ]]自体の仕様の為不可能ですが、[[embed]]タグを用いた場合は、半角スペース区切りでタグを複数指定する事もできます。

tags=<タグA> <タグB>

コード例

[[embed]]
<iframe src="http://shitake-crude-production.wikidot.com/extension:pagecreate/code/1#tags=sample tags" style="width:100%;height:120px;" frameborder="no"></iframe>
[[/embed]]

親ページ初期値を設定

ハッシュの後に下記のコードを記述します。

parent=<親ページ名>

親ページ名はカテゴリを含めたfullnameで指定してください。

複数のパラメータの設定

パラメータの後にセミコロンをつけ、そこから続けて他のパラメーターを設定します。

category=<カテゴリ名>;tags=<タグA>,<タグB>;parent=<親ページ名>

パラメーターを設定する順番は問いません。

1度のURLで同一のパラメーターを複数回設定できますが、その場合、最後におこなった設定が適用されます。

その他設定

ページタイトルフォーム非表示

下記のパラメーターを渡す事でページタイトル入力フォームを非表示にできます。

pagetitle=false

コード例

[[iframe http://shitake-crude-production.wikidot.com/extension:pagecreate/code/1#pagetitle=false width="100%" height="80px"]]

このパラメーターもセミコロンを使う事によって他のパラメーターと同時に設定する事が可能です。

タグセレクターの表示

下記のパラメーターを設定するとタグセレクターが表示されます。

tagselect=true

タグセレクターはtagsで設定したタグの内、どれを初期値として設定するかユーザに選択させるコンボボックスです。この設定においては作成されたページに初期値として複数のタグを設定する事はできません。

コード例

[[iframe http://shitake-crude-production.wikidot.com/extension:pagecreate/code/1#tags=タグa,タグb,タグc;tagselect=true width="100%" height="160px"]]

このパラメータも半角カンマを用いる事で他のパラメータと合わせて設定する事ができます。

強制タグ

上記のタグセレクター設定をtrueにした場合のみ有効です。下記パラメータによって強制的に初期設定されるタグを設定する事ができます。

forcetag=<タグ名>

この設定を付与した場合、ページ作成によって作られるページのタグはユーザが選択したタグと上記で設定タグの2つが初期設定として付与されます。

[[iframe http://shitake-crude-production.wikidot.com/extension:pagecreate/code/1#tags=タグa,タグb,タグc;tagselect=true;forcetag=強制タグ width="100%" height="160px"]]

Wikidotモジュールとの連携

WikidotのListPagesから取得した値をパラメータに渡す事もできます。例えば下記のコードだとこのフォームを設置したページの子ページでなおかつカテゴリとタグが親ページと同一であるページを作る事ができます。

[[module ListPages rage="." separate="yes"]]
[[embed]]
<iframe src="http://shitake-crude-production.wikidot.com/extension:pagecreate/code/1#tags=%%tags%%;category=%%category%%;parent=%%fullname%%" style="width:100%;height:120px;" frameborder="no"></iframe>
[[/embed]]
[[/module]]

その他機能

ページ名入力フォームは特定の半角文字のみ受け付けます。またフォーカスを外した際は、入力された文字を自動でWikidotのpagenameの規則に沿った形で加工します。

特に指定がない限り、このサイトのコンテンツには次のライセンスが適用されます: Creative Commons Attribution-ShareAlike 3.0 License