Interwikiの調和のとれたデザインの為の新システム

概要

Interwikiは非常に便利なシステムです。しかし、これには1つ欠点があります。それはGOIテーマとの調和が難しいという事です。そこで私達は、Interwikiがより多くのテーマと調和をとる為のシステムを提案します。

Interwikiの特徴

InterwikiはSCP財団の基本的なテーマと調和する様にデザインされています。しかしGOIテーマが適用された記事では調和しません。なぜなら、GOIテーマが適用されたページ内においてはInterwikiのデザインを変更する事ができないからです。

簡単な解決策

Interwikiを格納するIframeにColorFilterをかける事である程度GOIデザインと調和をとらす事が可能です。現在SCP-JPではこの方法でInterwikiのデザインをGOIテーマと調和させるようにしています。
参考: Marshall Carter and Dark hub

しかし、この方法ではBorderの設定が変わるGOIテーマには対応できません。
例: Straight On Till Morning Hub

また、Interwikiの背景色に影響を与えてしまう為、ColorFilterの明度設定は行う事ができません。その為、ColorFilterだけではInterwikiをGOIテーマと調和させる事が難しいのです。

新しい方法

もし、Interwikiを格納するIframeの高さをInterwikiに応じて自動で調整できるのならば、上の問題は解決します。

その方法とはIframe内部に納められているInterwikiからBorderを外し、その代わりにInterwikiを格納しているIframeにBorderを設置するというものです。この方法を用いるとIframeを取り囲むBorderは[[module css]]によってデザインを制御する事ができます。

下にSOTMのテーマを参考にしたサンプルを用意しました。

ボックスに数字を入れ"Interwiki Resize"と書かれたボタンを押してください。

このサンプルに使用したCSSは下記になります。

    .InterWikiContainer iframe{
    border: 5px solid #EFA9A2;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(102,0,0,.5);
        padding: 0px !important;
        /*border: 1px solid #660000 !important;
        border-radius: 10px !important;
        box-shadow: 0 2px 6px rgba(102,0,0,.5) !important;*/
        background: #fff !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        width: 16.25em !important;
    -webkit-filter: hue-rotate(40deg) brightness(110%);
    -moz-filter: hue-rotate(40deg) brightness(110%);
    -ms-filter: hue-rotate(40deg) brightness(110%);
    filter: hue-rotate(40deg) brightness(110%);
/**/
    }
.InterWikiContainer iframe[style="height: 10px;"]{
display:none !important;
border-radius: 0px !imporatant;
}
.InterWikiContainer iframe[style="height: 0px;"]{
display:none !important;
border-radius: 0px !imporatant;
}

Interwikiにiframeサイズを自動調整するスクリプト等が搭載されている場合、Interwikiのデザインをより自由に変更する事が可能になるのです。

Interwiki自動調整に必要なもの

Interwikiに組み込むもの

Interwikiに下記のスクリプトが搭載されている必要があります。

これは親フレームから高さ取得の命令があった場合にInterwikiの現在の高さを送り、また内部のBorder及びBox-shadowを消すスクリプトです。

var isResizeCatch = false;//Trigger
var ParentWindow;//Contain Parent Frame
var mainDiv;
document.addEventListener("DOMContentLoaded",function(){
    //Get Parent Frame
    ParentWindow = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
mainDiv = getMainDiv();
 showChange();
    //Set Event Method that if It catched Message from Parent Frame
    window.addEventListener("message",function(event){
        switch(event.data){
            case "Request your Height":
                //If it receive request,it begin send own heigth to parent frame
                isResizeCatch = false;
                mainDiv.style.border = "none";
                mainDiv.style.boxShadow = "none";
                    //If getting own parent frame was successed,It start to post own height to parent frame
                if (typeof(ParentWindow) != "undefined") {
                    postMyHeight();
                }
            break;
            case "I got your Height":
                //If it receive resize completed message,It stop sending
                isResizeCatch = true;
            break;
        }
    });
 
    //Post Method
    function postMyHeight(){
        //post
        ParentWindow.postMessage(getMyHeight(),"*");
        //Repeated action for transmission failure
        if(!isResizeCatch){
            setTimeout(postMyHeight,5);
        }
    }
 
    function getMyHeight() {
        //Operation to acquire the height according to the browser
        if (document.body.scrollHeight) {
            return document.body.scrollHeight;
        }
        if (document.height) {
            return document.height;
        }
        return document.body.offsetHeight;
    };
 
    function getMainDiv(){
        var divs = document.getElementsByTagName("div");
        var result=divs[0];
        for(var i = 0;i < divs.length;i++){
            if(divs[i].getAttribute("class") == "interwiki"){
                result = divs[i];
                break;
            }
        }
        return result;
 
    }
 
});

各サイトに組み込むもの

Interwikiを格納するframeとして下記のローカルコードが必要です。これはInterwikiを埋め込む各サイトの任意のページに作られている必要があります。

このローカルコードはInterwikiに高さ取得の命令を出し、またhtmlブロックが使用しているのと同じ、iframeの高さを自動調整するスクリプトを呼び出す機能を持っています。

<!DOCTYPE html>
<html>
<head>
<title>InterWikiContainer</title>
<style>
body{
padding:0;
}
iframe{
margin:0;
padding:0;
}
</style>
<script type="text/javascript">
var isResized = false;
var Container;
var mySite;
document.addEventListener("DOMContentLoaded",function(){
mySite = document.referrer;
mySite = mySite.split("http://").join("");
mySite = "http://" + mySite.split("/")[0] + "/";
 
//InterWiki埋め込み部分
var MyURL = location.href;
var MyURLArray = MyURL.split("#");
Container = document.createElement("iframe");
Container.src = "http://scpnet.org/interwiki/scp-jp/?" + MyURLArray[1];
Container.allowtransparency="true";
Container.frameborder="0";
Container.scrolling="no";
ContainerContainer.appendChild(Container);
 
window.addEventListener("message",function(event){
Container.contentWindow.postMessage("I got your Height","*");
if(!isResized){
var Height = Number(event.data);
Container.height = String(Height);
isResized = true;
setTimeout(createResizeIframe,5);
}
 
function createResizeIframe(){
var Height = getMyHeight();
var iframe = document.createElement("iframe");
iframe.src = mySite + "common--javascript/resize-iframe.html" + "?" +"InterwikiResize"+ "#" + Height + "/1";
iframe.style.display = "none";
iframeSet.appendChild(iframe);
}
 
    function getMyHeight() {
        if (document.body.scrollHeight) {
            return document.body.scrollHeight;
        }
        if (document.height) {
            return document.height;
        }
        return document.body.offsetHeight;
    };
});
});
</script>
</head>
<body>
<div id="ContainerContainer">
</div>
<div id="iframeSet"></div>
</body>
</html>

上記のローカルコードは下記の様に呼び出します。

例: "lab:interwiki"というページに上のローカルコードを作った場合。

[[div class="InterWikiContainer"]]
[[module ListPages range="." limit="1"]]
[[%%content{0}%%embed]]
<iframe class="html-block-iframe" src="/lab:interwiki/code/1#lang=jp&page=%%category%%:%%name%%" allowtransparency="true" style="height: 0px;" frameborder="0" scrolling="no"></iframe>
[[/embed]]
[[/module]]
[[/div]]

このローカルコードを呼び出す際はサイトのURLを記述してはいけません。サイトのURLを省略した書き方によって本来ならばhtmlブロックにしか作動しない高さ調整スクリプトを、このローカルコードが格納されたiframeに対し誤作動させます。

またhtmlブロックはURLの末尾が1桁の数字になる事はない為、上記のローカルコードを適用させてもhtmlブロックそのものが誤作動を起こすという事はありません。

CSS

Inerwikiへのスクリプト適用及びサイトへのローカルコードを適用した後、それに合わせたCSSを組む事でより自由にInterwikiのデザインを変更する事が可能です。

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