ページ作成コンポーネント

まて!これは孔明の罠だ!

ここはSCP Wiki内部で使われているテンプレートページです。

スタッフの許可なしに
このページを触れないでください


1.新しい下書きを作成
CC3.0 BY-SA

<!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>
    <title>Auto Numbering Draft Creater</title>
</head>
<style>
@import url(http://scp-jp.wdfiles.com/local--files/japanese-syntax/scp-WikidotCss.css);
 
body{
padding:0;
background-color: transparent !important;
}
 
.fake-link{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
height:100%;
width:100%;
}
 
#LinkSentence {
    display: flex;
    justify-content: center;
    align-items: center;
}
 
@media (max-width: 580px) { 
#LinkSentence {
    font-size: 0.7em;
}
}
 
@media (min-width: 581px) { 
#LinkSentence {
    font-size: 27px;
}
}
 
</style>
<script type="text/javascript" src="http://scp-jp-sandbox3.wikidot.com/component:user-page-manager/code/6"></script>
<script type="text/javascript" src="http://ja.scp-wiki.net/scpmetatitlesearch/code/4"></script>
<script type="text/javascript">
 
var mySite = "http://scp-jp-sandbox3.wikidot.com/"
var userName = "";
window.onload = function(){
    var showLinkArea = document.getElementById("link");
    var checkWidthElm = document.getElementById("LinkSentence");
    var ElmLen = checkWidthElm.innerHTML.length;
    if(userTerminalData.Os == "iOS"){
    ElmLen++;
    }
    var defaultFontSize = Math.floor(getSentenceWidth()/ElmLen);
    showLinkArea.style.fontSize = defaultFontSize + "px";
    resizeLinkSentence();
    var myURL= location.href;
    var settingParamName = {
        name:"name=",
        createdBy:"createdBy="
    }
    var settingParam = {
        name:"",
        createdBy:""
    }
 
    if(myURL.indexOf("#") > 0){
        var tmpURLArray = ((myURL.split("#"))[1]).split(",");
        for(var i = 0; i < tmpURLArray.length;i++){
            for(var j in settingParam){
                if(tmpURLArray[i].indexOf(settingParamName[j]) == 0){
                    settingParam[j] = decodeURIExtension(tmpURLArray[i].split(settingParamName[j]).join(""));
                    delete settingParamName[j];
                    break;
                }
            }
        } 
    }
    var pageName = settingParam.name;
    pageName = pageName.toLowerCase();
    var baseName = settingParam.createdBy;
    baseName = baseName.toLowerCase();
    baseName = baseName.replace(/[^a-z0-9:\]\[]/g, "-");
    while(baseName.indexOf("--") >= 0){
        baseName = baseName.replace( /--/g , "-" ) ;
    }
    userName = baseName;
    baseName = baseName + "-";
    var nowNo = pageName.replace(baseName, "").toString();
    if(nowNo.indexOf("-") >= 0){
        nowNo = (nowNo.split("-"))[0];
    }else{
    nowNo = "1";
    }
    nowNo = parseInt(nowNo);
    if(isNaN(nowNo)){
        nowNo = "";
    }else{
        nowNo++;
        nowNo += "-";
    }
    var unique = "";
    var digit = 0;
    for(var i = 0;i < 4;i++){
        digit = Math.floor(Math.random() * 16);
        unique += digit.toString(16);
    }
    var Links = document.createElement("span");
    Links.setAttribute("onclick","GoToLink('"+mySite+"draft:" + baseName + nowNo + unique + "/tags/_null/parentPage/portal:"+settingParam.name+"#_editpage');");
    Links.setAttribute("class","fake-link");
    Links.setAttribute("id",checkWidthElm.getAttribute("id"));
    Links.innerHTML = checkWidthElm.innerHTML;
    showLinkArea.replaceChild(Links,checkWidthElm);
    checkWidthElm = Links;
    window.addEventListener('resize', function (event) {
        resizeLinkSentence();
    });
 
    function getSentenceWidth(){
        var left = checkWidthElm.getBoundingClientRect().left;
        var right = checkWidthElm.getBoundingClientRect().right;
        return (right-left);
    }
 
    function resizeLinkSentence(){
 
        var pageWidth = window.innerWidth;
 
        var fontSize = 0;
        fontSize = Math.floor(pageWidth/ElmLen);
        if(fontSize > defaultFontSize){
            fontSize = defaultFontSize;
        }
        showLinkArea.style.fontSize = fontSize+"px";
        var fontHeight = fontSize;
        if(userTerminalData.Os == "iOS"){
            fontHeight = Math.floor(pageWidth/(ElmLen-1));
            if(fontHeight > defaultFontSize){
                fontHeight = defaultFontSize;
            }
            fontHeight += 5;
        }
        var inHeight = window.innerHeight;
        inHeight -= (fontHeight+5);
 
    }
 
}
function GoToLink(url){
    var userNameL;
    try{
        userNameL = window.parent.getName.UserName;
    }catch(e){
        alert("サインイン未取得");
        return;
    }
    if(userName == userNameL){
        window.parent.location.href = url;
    }else{
        alert("自分のポータルからページを作成してください");
console.log("pageCreate:"+userName + " , RequestUser:" + userNameL);
    }
}
 
</script>
<body>
<div id="link" style='font-size:200%; text-align: center;'>
<span id="LinkSentence">新しい下書きを作成する</span>
</div>
<div style="width:100%;height;1px"></div>
</body>
</html>

2.下書き表示用パラメータ取得Js

    //親ページのURLを解析する
    var PageSetting = new Object();
    PageSetting.getParent = true;
    PageSetting.currentParam = decodeURIExtension(document.referrer);
    if(!PageSetting.currentParam){
        PageSetting.currentParam = "http://scp-jp-sandbox3.wikidot.com/draft-list";
    }
    PageSetting.myPage = (function(){var tmpURL = PageSetting.currentParam.split("http://").join("").split("/");
        return "http://"+tmpURL[0]+"/"+tmpURL[1];
    })();
    PageSetting.currentParam = PageSetting.currentParam.split(PageSetting.myPage).join("");
    PageSetting.OrderParam = "";
    if(PageSetting.currentParam.indexOf("/order/") >= 0){
        PageSetting.OrderParam = PageSetting.currentParam.substring(PageSetting.currentParam.indexOf("/order/") ,PageSetting.currentParam.length);
    }    
    //親ページのURLを解析する
    var PageSetting = new Object();
    PageSetting.currentParam = decodeURIExtension(document.referrer);
    if(!PageSetting.currentParam){
        PageSetting.currentParam = "http://scp-jp-sandbox3.wikidot.com/draft-list";
        PageSetting.getParent = false;
    }
    PageSetting.myPage = (function(){var tmpURL = PageSetting.currentParam.split("http://").join("").split("/");
        return "http://"+tmpURL[0]+"/"+tmpURL[1];
    })();
    PageSetting.currentParam = PageSetting.currentParam.split(PageSetting.myPage).join("");
    PageSetting.OrderParam = "";
    if(PageSetting.currentParam.indexOf("/order/") >= 0){
        PageSetting.OrderParam = PageSetting.currentParam.substring(PageSetting.currentParam.indexOf("/order/") ,PageSetting.currentParam.length);
    }    
    PageSetting.TagsParam = "";
    if(PageSetting.currentParam.indexOf("/tag/") >= 0){
        var tmpCurrentParam = PageSetting.currentParam;
        if(PageSetting.OrderParam.length > 0){
            tmpCurrentParam = tmpCurrentParam.split(PageSetting.OrderParam).join("");
        }
        PageSetting.TagsParam = tmpCurrentParam;
        if(PageSetting.TagsParam.charAt(PageSetting.TagsParam.length-1) == "/"){
            PageSetting.TagsParam = PageSetting.TagsParam.substring(0,PageSetting.TagsParam.length-1);
        }
    }

3.カスタム検索jsコード

/*検索選択肢の生成用オブジェクト*/
// <表示>:<タグ>
 
var SearchTags = {
    Category:{
        "SCP-JP":"_scp-jp",
        "Tale-JP":"_tale-jp",
        "GOI-JP":"_goi-format-jp",
        "翻訳(英語)":"_en",
        "翻訳(その他)":"_ru,_ko,_cn,_fr,_pl,_es,_th,_de,_it",
        "その他":"_others",
        "未定義":"_null"
    },
 
    /*ジャンル設定*/
    Genre:{
        "Joke":"_joke",
        "ホラー":"_horror",
        "SF":"_sf",
        "オカルト・都市伝説":"_occult",
        "サスペンス":"_suspense",
        "感動系":"_excitement",
        "シュール":"_sur",
        "メタフィクション":"_metafiction",
        "コミカル":"_comical",
"既存記事改稿":"_reforming-g",
 
        "コンテスト":"_contest",
        "その他":"_others-g"
    }
}
 
/*ジャンル、カテゴリ選択用要素格納*/
var SettingAreaObj = {
    Category:[],
    Genre:[]
}
 
/*ジャンルカテゴリ選択用クラス格納*/
var SelectedClassNames = {
    Category:{
        Base:"CategoryBase",
        Default:"CDefault",
        Selected:"CSelected"
    },
    Genre:{
        Base:"GenreBase",
        Default:"GDefault",
        Or:"GOrSelected",
        And:"GSelected"
 
    }
}
 
var searchForm;
 
document.addEventListener("DOMContentLoaded",function(){
    searchForm=document.getElementById("searchsetting");
    setSelecters("Category");
    setSelecters("Genre");
    SearchTags["MinusCategory"]=new Object();
    var tmpValue = "";
    var minusValue = "";
    for(var i in SearchTags.Category){
        tmpValue = SearchTags.Category[i].split(",");
        minusValue = "";
        for(var j=0;j < tmpValue.length;j++){
        minusValue += (((j > 0)?",":"")+ "-" + tmpValue[j]);
        }
        SearchTags.MinusCategory[i] = minusValue;
    }
 
    //URLの状態からカスタム検索の状態を復帰させる
    if(PageSetting.TagsParam.length > 0){
        var tmpParam = PageSetting.TagsParam;
        //カテゴリ復帰
        var tmpMinus = new Object();
        var categoryFlag = false;
        var targetClass;
        for(var i in SearchTags.MinusCategory){
        tmpMinus[i] = SearchTags.MinusCategory[i];
        }
        for(var i in tmpMinus){
        if(tmpParam.indexOf(tmpMinus[i]) >= 0){
        categoryFlag = true;
        tmpParam = tmpParam.split(tmpMinus[i]).join("");
        delete tmpMinus[i];
        }
        }
        if(categoryFlag){
        targetClass = SelectedClassNames.Category;
        for(var i = 0; i < SettingAreaObj.Category.length;i++){
        for(var j in tmpMinus){
        if(SettingAreaObj.Category[i].innerHTML == j){
        SettingAreaObj.Category[i].removeAttribute("class");
        SettingAreaObj.Category[i].setAttribute("class",targetClass.Base + " " + targetClass.Selected);
        delete tmpMinus[j];
        }
        }
        }
        }
        tmpMinus = undefined;//dispose
 
        //ジャンル復帰
        var tmpGenre = new Object();
        for(var i in SearchTags.Genre){
        tmpGenre[i] = SearchTags.Genre[i];
        }
        targetClass = SelectedClassNames.Genre;
        var tmpParamArray = tmpParam.split(",");
        tmpParamArray[0] = tmpParamArray[0].split("/tag/").join("");
        for(var i = 0;i < tmpParamArray.length;i++){
        for(var j in tmpGenre){
        if(tmpParamArray[i] == tmpGenre[j]){
        restoreGenre(j,targetClass.Or);
        delete tmpGenre[j];
        }else if(tmpParamArray[i] == ("%2b"+tmpGenre[j])){
        restoreGenre(j,targetClass.And);
        delete tmpGenre[j];
        }
 
        }
        }
        tmpGenre = undefined;//dispose
        tmpParamArray = undefined;//dispose
        tmpParam = undefined;//dispose
    }
 
    function setSelecters(typeName){
        var newSelecter;
        //カテゴリ選択欄生成
        var targetBase = document.getElementById(typeName + "Area");
        var classN = SelectedClassNames[typeName];
        var targetSetting = SearchTags[typeName];
        for(var i in targetSetting){
        if(targetSetting[i] == "_null")continue;
        newSelecter = document.createElement("span");
        newSelecter.setAttribute("class",classN.Base + " " + classN.Default);
        newSelecter.setAttribute("onclick","changeState(this,'"+typeName+"');");
        newSelecter.innerHTML = i;
        targetBase.appendChild(newSelecter);
        SettingAreaObj[typeName].push(newSelecter);
 
        }    
 
    }
 
    function restoreGenre(keyName,applyClass){
        for(var i = 0;i < SettingAreaObj.Genre.length;i++){
        if(SettingAreaObj.Genre[i].innerHTML == keyName){
        SettingAreaObj.Genre[i].removeAttribute("class");
        SettingAreaObj.Genre[i].setAttribute("class",SelectedClassNames.Genre.Base + " " + applyClass);
        break;
        }
        }
    }
 
});
 
//カテゴリ及びジャンルを選択した時の表示切替
function changeState(elm,selectType){
    //html要素のクラスを切り替える
    var oldClass = elm.getAttribute("class");
    elm.removeAttribute("class");
    var BaseClass = SelectedClassNames[selectType]["Base"] + " ";
    oldClass = oldClass.split(BaseClass).join("");
    switch(selectType){
        case "Category":
        switch(oldClass){
        case SelectedClassNames.Category.Default:
        elm.setAttribute("class",BaseClass+SelectedClassNames.Category.Selected);
 
        break;
        case BaseClass+SelectedClassNames.Category.Selected:
        elm.setAttribute("class",BaseClass+SelectedClassNames.Category.Default);
        break;
        default :
        //万が一のバグ時救済
        elm.setAttribute("class",BaseClass+SelectedClassNames.Category.Default);
        break;
        }
        break;
        case "Genre":
        switch(oldClass){
        case SelectedClassNames.Genre.Default:
        elm.setAttribute("class",BaseClass+SelectedClassNames.Genre.And);
        break;
        case SelectedClassNames.Genre.And:
        elm.setAttribute("class",BaseClass+SelectedClassNames.Genre.Or);
        break;
        case SelectedClassNames.Genre.Or:
        elm.setAttribute("class",BaseClass+SelectedClassNames.Genre.Default);
        break;
        default:
        //万が一のバグ時救済
        elm.setAttribute("class",BaseClass+SelectedClassNames.Genre.Default);
        break;
        }
        break;
    }
}
 
function search(){
    var StateClass = "";
    var isSelectCategory = false;
    var BaseClass = "";
    var keyName = "";
    var tagParam = "";
 
    /*ジャンル検索設定*/
    BaseClass = SelectedClassNames.Genre.Base + " ";
    var andParam = "%2b_criticism-in";
    var orParam = "";
    var cunma = "";
    for(var i = 0;i < SettingAreaObj.Genre.length;i++){
        StateClass = (SettingAreaObj.Genre[i].getAttribute("class")).split(BaseClass).join("");
        keyName = SettingAreaObj.Genre[i].innerHTML;
        switch(StateClass){
        case SelectedClassNames.Genre.And:
        andParam += ("," + "%2b" + SearchTags.Genre[keyName]);
 
        break;
        case SelectedClassNames.Genre.Or:
        cunma = ((orParam.length > 0)?",":"");
        orParam += (cunma + SearchTags.Genre[keyName]);
        break;
        }
    }
    addTagParam(andParam);
    addTagParam(orParam);
 
        /*カテゴリ検索設定生成*/
    var CategoryClone = new Object();
    for(var i in SearchTags.Category){
        CategoryClone[i] = SearchTags.Category[i];
    }
 
    BaseClass = SelectedClassNames.Category.Base + " ";
 
    for(var i = 0; i < SettingAreaObj.Category.length;i++){
        StateClass = (SettingAreaObj.Category[i].getAttribute("class")).split(BaseClass).join("");
        if(StateClass == SelectedClassNames.Category.Selected){
        keyName = SettingAreaObj.Category[i].innerHTML;
        isSelectCategory = true;
        delete CategoryClone[keyName];
        }
        keyName = "";
    }
    if(isSelectCategory){
        var MinusValue = "";
        var MinusValueArray;
        for(var i in CategoryClone){
        addTagParam(SearchTags.MinusCategory[i]);
        MinusValue = "";
        }
    }
 
    if(tagParam.length > 0){
        tagParam = "/tag/"+tagParam;
    }
    window.parent.location = PageSetting.myPage + tagParam + PageSetting.OrderParam;
 
    function addTagParam(addState){
        if(addState.length <= 0){
        return;
        }
        var cunma = ((tagParam.length > 0)?",":"");
        tagParam += (cunma+addState);
    }
}

4.UserNameGet

<!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>
    <title>GetUser</title>
<script type="text/javascript" src="http://ja.scp-wiki.net/scpmetatitlesearch/code/4"></script>
<script type="text/javascript">
 
var UserName = decodeURIExtension((window.location.href.split("#"))[1]);
console.log(UserName);
</script>
</head>
<body>
 
</body>
</html>

5.ID指定 単一ターゲット型 iframeワンライン調整スクリプト

var ctrlLineWidth = {
    value:"",
    actualValue:"",
    baseFontSize:16,
    baseActualFontSize:0,
    translateSize:100,
    targetFontSize:0,
    targetId:"",
    targetElement:undefined,
    ctrlFontSize:(function(){}),
    overValue:undefined,
    setup:undefined
}
 
//フォントサイズ調整実行
ctrlLineWidth.ctrlFontSize = function(){
    //デフォルト設定付与
    ctrlLineWidth.actualValue = ctrlLineWidth.value;
    ctrlLineWidth.targetElement.innerHTML = ctrlLineWidth.actualValue;
    ctrlLineWidth.targetElement.style.fontSize = ctrlLineWidth.baseActualFontSize + "px";
    var actualFont = ctrlLineWidth.baseActualFontSize;
    var stringWidth = strLength(ctrlLineWidth.actualValue) * actualFont;
    var pageWidth = window.innerWidth;
    //文章横幅がWindowを超過していた場合
    if(stringWidth > pageWidth){
        //超過時に内容を変えるメソッドが用意されていた場合
        if(ctrlLineWidth.overValue){
            ctrlLineWidth.actualValue = ctrlLineWidth.overValue();
            ctrlLineWidth.targetElement.innerHTML = ctrlLineWidth.actualValue;
            stringWidth = strLength(ctrlLineWidth.actualValue) * actualFont;
            if(ctrlLineWidth.overValue){
                changeFontSize();
            }
            return;
        }
        changeFontSize();
    }
    //適切なフォントサイズを計算し、付与
    function changeFontSize(){
        var smartsize = Math.floor(pageWidth/strLength(ctrlLineWidth.actualValue));
        ctrlLineWidth.targetElement.style.fontSize = smartsize + "px";    
 
    }
 
    //全角/半角を区別してカウントする
    function strLength(strSrc){
        len = 0;
        strSrc = escape(strSrc);
        for(i = 0; i < strSrc.length; i++, len++){
            if(strSrc.charAt(i) == "%"){
                if(strSrc.charAt(++i) == "u"){
                    i += 3;
                    len++;
                }
                i++;
            }
        }
        len = Math.ceil(len.toString() / 2);
        return len;
    }
 
}
 
//フォントサイズ調整及びイベント紐付け
ctrlLineWidth.setup = function(){
    if(ctrlLineWidth.targetId.lenth == 0){
        return;
    }
    ctrlLineWidth.targetElement = document.getElementById(ctrlLineWidth.targetId);
    ctrlLineWidth.baseActualFontSize = Math.floor(ctrlLineWidth.baseFontSize * (ctrlLineWidth.translateSize/100));
    ctrlLineWidth.ctrlFontSize();
    window.addEventListener('resize', function (event) {
        ctrlLineWidth.ctrlFontSize();
    });
 
};

6:端末判定
var userTerminalData = (function(){
    var os, ua = navigator.userAgent;
 
    if (ua.match(/Win(dows )?NT 10\.0/)) {
        os = "Windows 10";                // Windows 10 の処理
    }else if (ua.match(/Win(dows )?NT 6\.3/)) {
        os = "Windows 8.1";                // Windows 8.1 の処理
    }else if (ua.match(/Win(dows )?NT 6\.2/)) {
        os = "Windows 8";                // Windows 8 の処理
    }else if (ua.match(/Win(dows )?NT 6\.1/)) {
        os = "Windows 7";                // Windows 7 の処理
    }else if (ua.match(/Win(dows )?NT 6\.0/)) {
        os = "Windows Vista";                // Windows Vista の処理
    }else if (ua.match(/Win(dows )?NT 5\.2/)) {
        os = "Windows Server 2003";            // Windows Server 2003 の処理
    }else if (ua.match(/Win(dows )?(NT 5\.1|XP)/)) {
        os = "Windows XP";                // Windows XP の処理
    }else if (ua.match(/Win(dows)? (9x 4\.90|ME)/)) {
        os = "Windows ME";                // Windows ME の処理
    }else if (ua.match(/Win(dows )?(NT 5\.0|2000)/)) {
        os = "Windows 2000";                // Windows 2000 の処理
    }else if (ua.match(/Win(dows )?98/)) {
        os = "Windows 98";                // Windows 98 の処理
    }else if (ua.match(/Win(dows )?NT( 4\.0)?/)) {
        os = "Windows NT";                // Windows NT の処理
    }else if (ua.match(/Win(dows )?95/)) {
        os = "Windows 95";                // Windows 95 の処理
    }else if (ua.match(/Windows Phone/)) {
        os = "Windows Phone";                // Windows Phone (Windows 10 Mobile) の処理
    }else if (ua.match(/iPhone|iPad/)) {
        os = "iOS";                    // iOS (iPhone, iPod touch, iPad) の処理
    }else if (ua.match(/Mac|PPC/)) {
        os = "Mac OS";                    // Macintosh の処理
    }else if (ua.match(/Android ([\.\d]+)/)) {
        os = "Android " + RegExp.$1;            // Android の処理
    }else if (ua.match(/Linux/)) {
        os = "Linux";                    // Linux の処理
    }else if (ua.match(/^.*\s([A-Za-z]+BSD)/)) {
        os = RegExp.$1;                    // BSD 系の処理
    }else if (ua.match(/SunOS/)) {
        os = "Solaris";                    // Solaris の処理
    }else {
        os = "N/A";                    // 上記以外 OS の処理
    }
    var smartPhone = false;
    smartPhone = ((ua.indexOf('iPhone') > 0 && ua.indexOf('iPad') == -1) || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0);
 
    var browser = 'unknown';
    if ( ua.indexOf('Edge') !== -1 ) {
        browser = 'edge';
    } else if ( ua.indexOf('Chrome') !== -1 ) {
        browser = 'chrome';
    } else if ( ua.indexOf('Safari') !== -1 ) {
        browser = 'safari';
    }
    if ( ua.indexOf('Firefox') !== -1 ) {
        browser = 'firefox';
    }
    if ( ua.indexOf('MSIE 8') !== -1 ) {
        browser = 'ie8';
    } else if ( ua.indexOf('MSIE 9') !== -1 ) {
        browser = 'ie9';
    } else if ( ua.indexOf('MSIE 10') !== -1 ) {
        browser = 'ie10';
    } else if ( ua.indexOf('Trident') !== -1 ) {
        browser = 'ie11';
    }
    return {
                Os:os,
                SmartPhone:smartPhone,
                Browser:browser
            };
})();
特に指定がない限り、このサイトのコンテンツには次のライセンスが適用されます: Creative Commons Attribution-ShareAlike 3.0 License