同じ内容のHTMLをファイル名で判別して別のページに仕立てる

最近、複数のHTMLファイルを、書き換えずに変更する必要があった時に使った方法。共通のJavaScriptファイルがあって助かりました。なければ新しく埋め込まなければならなかったところです。
ポイントは、「後付け」で処理するところです。
実際には、イベント処理やsetTimeoutを駆使したり、もっとスパゲッティな感じでしたが、この方法でなんとかできました。
IE7.0、Firefox3.0、Safari3.2（いずれもWindowsXP）で確認。JavaScript1.5相当です。（参照：バージョンとブラウザ対応関係-Wikipedia）

注意：この方法は、邪道なやりかたです。いまから作る人は、ちゃんと設計して作りましょう。

最初に、以下のHTMLファイルを作り、必要な分コピー（A1.html〜C3.html）します。なお、HTMLとして正しいかどうかは、ここでは触れません。

<html>
<body id="main"></body>
<script src="common-script.js"></script>
</html>

これが、最終的にこうなります。画像はIE7.0のクイックタブのものを使用しています。

コードは、common-script.jsファイルの末尾に追加していきます。

まず最初に、基本部分のコードを書きます。

var main = document.getElementById("main");
var top = document.createElement("div");
var bottom = document.createElement("div");
main.appendChild(top);
main.appendChild(bottom);

var url = document.location.href;

var id = "";
var id1 = "";
var id2 = "";
if (url.match(/\/(.)(.)\.html$/)) {
    id1 = RegExp.$1;
    id2 = RegExp.$2;
    id = id1 + id2;
    document.title = "page: " + id;
}
with (main.style) {
    height = "600px";
    fontSize = "96pt";
    textAlign = "center";
}
with (top.style) {
    height = "400px";
    paddingTop = "1em";
}
with (bottom.style) {
    height = "200px";
}

top.appendChild(document.createTextNode(id1));
bottom.appendChild(document.createTextNode(id2));

タイトルやページ内容に、ファイル名が反映されています。

次に、グループごとに共通のスタイルを適用します。特定のページだけのスタイルも追加してみます。

if (id1 == "A") {
    with (top.style) {
        color = "white";
        backgroundColor = "#35c";
    }
}
if (id2 == "2") {
    with (bottom.style) {
        color = "white";
        backgroundColor = "orange";
    }
}
if (id2 == "3") {
    with (top.style) {
        border = "32px dashed #e76";
    }
}
if (id1 == "B") {
    if (id2 != "1") {
        main.removeChild(bottom);
        main.insertBefore(bottom, top);
    }
    var button = document.createElement("button");
    main.appendChild(button);
    button.appendChild(document.createTextNode("NEXT"));
    with (button.style) {
        width = "320px";
        height = "100px";
        backgroundColor = "#ff6";
        border = "10px ridge black";
        fontSize = "60pt";
    }
    button.onclick = function() {
        var nextId = "C" + id2;
        window.open(nextId + ".html", nextId);
    };
}
if (id == "C2") {
    var div = document.createElement("div");
    div.appendChild(document.createTextNode("12345"));
    main.appendChild(div);
}

Bnのボタンを押すと、Cnが新しいウィンドウで開きます。

最後に、A1だけはトップページのメニューにします。

var contentList = {
    A2: "blue and orange",
    A3: "blue and dotted border",
    B1: "button",
    B2: "orange and button",
    B3: "button and dotted border",
    C1: "default",
    C2: "orange and text",
    C3: "dotted border"
};
if (id == "A1") {
    var td = document.createElement("td");
    var tr = document.createElement("tr");
    var tbody = document.createElement("tbody");
    var table = document.createElement("table");
    with (table.style) {
        backgroundColor = "orange";
        width = "100%";
        height = "100%";
    }
    with (td.style) {
        color = "white";
        fontFamily = "Lucida Console";
        fontSize = "32pt";
        textAlign = "left";
    }
    var ul = document.createElement("ul");
    for (var contentId in contentList) {
        var anchor = document.createElement("a");
        anchor.href = contentId + ".html";
        anchor.style.color = "white";
        var label = contentId + ": " + contentList[contentId];
        anchor.appendChild(document.createTextNode(label));
        var li = document.createElement("li");
        li.appendChild(anchor);
        ul.appendChild(li);
    }
    td.appendChild(document.createTextNode("- MAIN MENU -"));
    td.appendChild(ul);
    tr.appendChild(td);
    tbody.appendChild(tr);
    table.appendChild(tbody);
    main.insertBefore(table, top);
    main.removeChild(top);
    main.removeChild(bottom);
}

メニューページはこうなりました。

ここで注目していただきたいのは、ファイルが増えたとしても、同じルールが適用できるというところです。D〜Z、4〜9を追加すると、A2〜Z2の"2"は背景オレンジになりますし、B1〜B9にはすべてボタンが付いて、B9からはC9へジャンプできます。メニューは手動で追加する必要はありますが、連想配列のところだけ追加すればOKです。

邪道ではありますが、今回のように、後付けでも何とかできるJavaScript（というかDOM？）の柔軟性もJavaScriptの強みかと思います。

argius note

プログラミング関連

同じ内容のHTMLをファイル名で判別して別のページに仕立てる