Snow-Materia > HTMLのオブジェクト指向思考なマークアップについて


本文

前書き

ちょっと一部の人へ提起。

『我々が求めていたマークアップというのは、言ってみれば実は、 ストリクトで、かつ、 オブジェクト指向的な マークアップだったんじゃないだろうか?!』

な、なんだってー

なんていまさらながらに思ったんだけどどうだろう?(笑)
厳密なオブジェクト指向とまでは言えないのがちょっと残念なのだが。 オブジェクト指向考えてたら思いついたので、思考、うん。

簡単に言うと、 Pとか ULとか DLとかの 意味のあるブロック要素ごとのつながりを わかりやすくグループ化したりツリー化したりする、ってこと。

難しく言うと、 ひとつのオブジェクトの中に、子供のオブジェクトかプロパティを入れていって、 その下にさらに、孫のオブジェクトやプロパティをいれていく、という。

シンプルな形

たとえば、一番シンプルな形ではこう。(下図)

元
    |+ 親 1
        |+ 子 1
    |+ 親 2
        |+ 子 1
        |+ 子 2
            |+ 孫 1
            |+ 孫 2
        |+ 子 3
    |+ 親 3
以下略

具象化した形

上記のものを具象化するとこうなるかと。(下図)

ドラクエ (元)
    |+ オルテガ (親 1)
        |+ ゆうしゃ (子 1)
    |+ パパス (親 2)
        |+ トンヌラ (子 1)
        |+ えにくす (子 2)
            |+ テン (孫 1)
            |+ ソラ (孫 2)
        |+ ゲレゲレ (子 3)
    |+ ムーンブルク (親 3)
以下略

実際の形

上記を踏まえて、各自のプロフィールなどを書くと、(下図)

ドラクエ (元)
    |+ オルテガ (親 1)
        |- 出身: アリアハン
        |- 職業: バラモス討伐隊隊長(隊員1名)
        |- 詳細:
             + 火山の頂上で行方不明
             + キングヒドラと相打ちで死亡
             + カンダタ似
        |+ ゆうしゃ (子 1)
            |- 出身: アリアハン
            |- 職業: DQ3の主人公
            |- 詳細:
                 + 行方不明の父の後を継ぐ
                 + 酒場で出会った仲間たちとバラモス討伐へ
                 + ザコ敵の放った`ザラキ`がパーティ全員に効いてしまい死亡
    |+ パパス (親 2)
        |- 出身: グランバニア
        |- 職業: じつは王様
        |- 詳細:
             + 諸国を放浪
             + ゲマに家族を人質にとられ、攻撃にひたすら耐えたが息絶える
        |+ トンヌラ (子? 1)
            |- 詳細:
                 + パパスの名づけ(そうになっ)た子供
        |+ えにくす (子 2)
            |- 出身: グランバニア
            |- 職業: DQ5の主人公
            |- 詳細:
                 + モンスターと仲良し
                 + ドレイ経験あり
                 + 幼馴染のビアンカと結婚
                 + ゲマに夫婦そろって石にされる
            |+ テン (孫 1)
                |- 職業: えにくすの息子
                |- 詳細:
                     + 勇者装備が使える
                     + ソラと一緒にえにくすの石化をとく
            |+ ソラ (孫 2)
                |- 職業: えにくすの娘
                |- 詳細:
                     + 魔法が得意
                     + テンと一緒にえにくすの石化をとく
        |+ ゲレゲレ (子 3)
            |- 職業: ペット
    |+ ムーンブルク (親 3)
        |- 職業: 犬。
以下略

HTMLでの形

で、もし、これをHTML形式で書くとこうなるのではなかろうか。(下図)

<body>
<h1>ドラクエ</h1>    <!-- 元 -->
    <h2>オルテガ</h2>    <!-- 親 1 -->
    <dl>
        <dt>出身</dt><dd>アリアハン</dd>
        <dt>職業</dt><dd>バラモス討伐隊隊長(隊員1名)</dd>
        <dt>詳細</dt>
        <dd>
            <ul>
                <li>火山の頂上で行方不明</li>
                <li>キングヒドラと相打ちで死亡</li>
                <li>カンダタ似</li>
            </ul>
        </dd>
    </dl>
        <h3>ゆうしゃ</h3>    <!-- 子 1 -->
        <dl>
            <dt>出身</dt><dd>アリアハン</dd>
            <dt>職業</dt><dd>DQ3の主人公</dd>
            <dt>詳細</dt>
            <dd>
                <ul>
                    <li>行方不明の父の後を継ぐ</li>
                    <li>酒場で出会った仲間たちとバラモス討伐へ</li>
                    <li>ザコ敵の放った`ザラキ`がパーティ全員に効いてしまい死亡</li>
                </ul>
            </dd>
        </dl>
    <h2>パパス</h2>    <!-- 親 2 -->
    <dl>
        <dt>出身</dt><dd>グランバニア</dd>
        <dt>職業</dt><dd>じつは王様</dd>
        <dt>詳細</dt>
        <dd>
            <ul>
                <li>諸国を放浪</li>
                <li>ゲマに家族を人質にとられ、攻撃にひたすら耐えたが息絶える</li>
            </ul>
        </dd>
    </dl>
        <h3>トンヌラ</h3>    <!-- 子? 1 -->
        <dl>
            <dt>職業</dt><dd>パパスの名づけ(そうになっ)た子供</dd>
        </dl>
        <h3>えにくす</h3>    <!-- 子 2 -->
        <dl>
            <dt>出身</dt><dd>グランバニア</dd>
            <dt>職業</dt><dd>DQ5の主人公</dd>
            <dt>詳細</dt>
            <dd>
                <ul>
                    <li>モンスターと仲良し</li>
                    <li>ドレイ経験あり</li>
                    <li>幼馴染のビアンカと結婚</li>
                    <li>ゲマに夫婦そろって石にされる</li>
                </ul>
            </dd>
        </dl>
            <h4>テン</h4>    <!-- 孫 1 -->
            <dl>
                <dt>職業</dt><dd>えにくすの息子</dd>
                <dt>詳細</dt>
                <dd>
                    <ul>
                        <li>勇者装備が使える</li>
                        <li>ソラと一緒にえにくすの石化をとく</li>
                    </ul>
                </dd>
            </dl>
            <h4>ソラ</h4>    <!-- 孫 2 -->
            <dl>
                <dt>職業</dt><dd>えにくすの娘</dd>
                <dt>詳細</dt>
                <dd>
                    <ul>
                        <li>魔法が得意</li>
                        <li>テンと一緒にえにくすの石化をとく</li>
                    </ul>
                </dd>
            </dl>
        <h3>ゲレゲレ</h3>    <!-- 子 3 -->
        <dl>
            <dt>職業</dt><dd>ペット</dd>
        </dl>
    <h2>ムーンブルク</h2>    <!-- 親 3 -->
    <dl>
        <dt>職業</dt><dd>犬。</dd>
    </dl>
<!-- 以下略 -->
</body>

HTMLで仮想オブジェクト化した形

でも、このままでは見にくいし、ツリーにもなってないので、 これをさらに<DIV>でグループ化してマークアップして、 仮想オブジェクト化してみます。(下図)

<body id="dorakue" class="origin">
<h1>ドラクエ</h1>    <!-- 元 -->
<div id="orutega" class="parent">
    <h2>オルテガ</h2>    <!-- 親 1 -->
    <dl>
        <dt>出身</dt><dd>アリアハン</dd>
        <dt>職業</dt><dd>バラモス討伐隊隊長(隊員1名)</dd>
        <dt>詳細</dt>
        <dd>
            <ul>
                <li>火山の頂上で行方不明</li>
                <li>キングヒドラと相打ちで死亡</li>
                <li>カンダタ似</li>
            </ul>
        </dd>
    </dl>
    <div id="papasu" class="child">
        <h3>ゆうしゃ</h3>    <!-- 子 1 -->
        <dl>
            <dt>出身</dt><dd>アリアハン</dd>
            <dt>職業</dt><dd>DQ3の主人公</dd>
            <dt>詳細</dt>
            <dd>
                <ul>
                    <li>行方不明の父の後を継ぐ</li>
                    <li>酒場で出会った仲間たちとバラモス討伐へ</li>
                    <li>ザコ敵の放った`ザラキ`がパーティ全員に効いてしまい死亡</li>
                </ul>
            </dd>
        </dl>
    </div>
</div>
<div id="papasu" class="parent">
    <h2>パパス</h2>    <!-- 親 2 -->
    <dl>
        <dt>出身</dt><dd>グランバニア</dd>
        <dt>職業</dt><dd>じつは王様</dd>
        <dt>詳細</dt>
        <dd>
            <ul>
                <li>諸国を放浪</li>
                <li>ゲマに家族を人質にとられ、攻撃にひたすら耐えたが息絶える</li>
            </ul>
        </dd>
    </dl>
    <div id="tonnnura" class="child">
        <h3>トンヌラ</h3>    <!-- 子? 1 -->
        <dl>
            <dt>職業</dt><dd>パパスの名づけ(そうになっ)た子供</dd>
        </dl>
    </div>
    <div id="enikusu" class="child">
        <h3>えにくす</h3>    <!-- 子 2 -->
        <dl>
            <dt>出身</dt><dd>グランバニア</dd>
            <dt>職業</dt><dd>DQ5の主人公</dd>
            <dt>詳細</dt>
            <dd>
                <ul>
                    <li>モンスターと仲良し</li>
                    <li>ドレイ経験あり</li>
                    <li>幼馴染のビアンカと結婚</li>
                    <li>ゲマに夫婦そろって石にされる</li>
                </ul>
            </dd>
        </dl>
        <div id="ten" class="grandchild">
            <h4>テン</h4>    <!-- 孫 1 -->
            <dl>
                <dt>職業</dt><dd>えにくすの息子</dd>
                <dt>詳細</dt>
                <dd>
                    <ul>
                        <li>勇者装備が使える</li>
                        <li>ソラと一緒にえにくすの石化をとく</li>
                    </ul>
                </dd>
            </dl>
        </div>
        <div id="sora" class="grandchild">
            <h4>ソラ</h4>    <!-- 孫 2 -->
            <dl>
                <dt>職業</dt><dd>えにくすの娘</dd>
                <dt>詳細</dt>
                <dd>
                    <ul>
                        <li>魔法が得意</li>
                        <li>テンと一緒にえにくすの石化をとく</li>
                    </ul>
                </dd>
            </dl>
        </div>
    </div>
    <div id="geregere" class="child">
        <h3>ゲレゲレ</h3>    <!-- 子 3 -->
        <dl>
            <dt>職業</dt><dd>ペット</dd>
        </dl>
    </div>
</div>
<div id="moon-buruku" class="parent">
    <h2>ムーンブルク</h2>    <!-- 親 3 -->
    <dl>
        <dt>職業</dt><dd>犬。</dd>
    </dl>
</div>
<!-- 以下略 -->
</body>

後書き

終わり。

どうだろう? 自分的には 「ユリイカ!」 みたいに思ったのだけど。(笑)

次回ではもっと詳しく解説することにします。

ページ情報
関連
目次
公開
2005.01.05