●移植する為の最低限必要な機能
①jsファイルが指定可能。
②もしくは、HTMLファイルが編集可能。
③スタイルシートが編集可能、もしくはCSSファイルが指定可能。
1)スライド表示 ①または②が可能
2)階層(折り畳み)メニュー ①または②が可能
3)ソフト(ポップアップ)メニュー ①かつ③が可能、または②が可能
4)カテゴリ毎のスタイルシート自動切替 ①かつ③が可能、または②が可能
●詳細調査の条件
1)は、移植する為の条件がOKなら、基本的に可能。
2)は、メニュー文字列の構造に依存する。
3)は、メニュー文字列の構造に依存する。
4)は、スタイルシートを切替判断材料が存在するかに依存。
●詳細調査
2)と3)のメニュー文字列の構造を調査。
これは、対象となるブロック領域を割り出せるかに掛かってくる。
もし割り出せないのであれば、対処しようなし。
すなわち、対象となるブロック領域にid名とか、決まった名称とかが
存在すれば、なんとかなる。
すなわち、BLOCKBLOGでは、必要とするところは以下。
<div id="menu">
<dl id="b_xxx_xxx">
<dt>メニュー名</dt>
<dd>項目1</dd>
<dd>項目2</dd>
:
</dl>
:
</div>
A)livedoor blog
①、③が可能。
以下に示す。
<div id=links>
<div class=sidetitle>メニュー名</div> :menuObj
<div class=side> :elementBlockObj
<div class=sidebody>項目1</div> :elementObj
<div class=sidebody>項目2</div>
:
</div>
:
</div>
この構造であれば、問題なく可能だろう。
メニュー名ブロックを探すには、
id名でなく「メニュー名」文字列を指定してもらい、
「links」の子ノードでclass名=sidetitleを検索し、
該当するオブジェクトの値を指定した「メニュー名」と比較すればよい。
その対象となる項目群は、求めたノードの次に位置するノードを
探していき、それがDIV領域でclass名=sideを対象とする。
なお、次のノードがないか、次のsidetitleが出てくれば、
項目群はないものとすればよい。
B)fc2 blog
②、③が可能。
以下に示す。
<DIV id=right> ←右メニューの場合
<H3>メニュー名</H3>
<UL>
<LI>項目1</LI>
<LI>項目2</LI>
:
</UL>
:
</div>
この構造の場合は、自動的に上記構造を判断してもいいが、
両メニューとかだと対応できないし、ユーザに<DIV id=xxxxx>のxxxxxを
指定させるのが無難かもね。
あとは、上記構造のみ対象とするように処理すればOKね。
C)Doblog
③は可能。①、②は不明
以下に示す。
<DIV id=menu>
<DIV class=menu-header>メニュー名</DIV>
<DIV class=menu-contents>
<P>項目1</P> ←Pタグ以外もある。
<P>項目2</P>
:
</DIV>
:
</DIV>
livedoorと同じような構造なので、可能だろう。
D)Seesaa blog
①,②、③は不明
以下に示す。
<DIV id=links>
<DIV class=sidetitle>メニュー名</DIV>
<DIV class=side>
<A>項目1</A><BR>
<A>項目2</A><BR>
:
</DIV>
:
</DIV>
livedoorとそっくりな構造なので、可能だろう。
E)はてな blog
①,②、③は不明
以下に示す。
<DIV class=sidebar>
<DIV class=hatena-module>
<DIV class=hatena-moduletitle>メニュー名</DIV>
<DIV class=hatena-modulebody>
<UL class=hatena-xxxxxxx>
<LI>項目1
<LI>項目2
:
</UL>
</DIV>
:
</DIV>
この構造なら問題ないだろう。
●移植の考え方。
まずはA)で、単純にBLOCKBLOGのものから移植してみた。
BLOCKBLOGとの根本的な違いは、階層構造の違いがすべて。
この違いでプログラムは、メニュー名と項目を探す個所が
全然違う状態に。修正個所も多い。
他のブログでも、同じように移植するとなると、
この部分を替えるわけだが、ちょっと大変かな。
そこで、考え方を替えて、元の構造をそのままコピーして
使うのではなく、元の構造から内容を抜き出して、
BLOCKBLOGの構造に替えてしまえば、あとは、BLOCKBLOGの
処理をそのまま使えるので、移植作業が簡単になる。
ということで、この考え方だと、最初のjs7initSoftMenu関数内を
変更するだけでOK。あとは、CSSをいじるだけ。
このCSSもメニュー名や項目は、CSSのセレクタをidで指定するのではなく、
新規にclass名を挿入して、そのクラス名で指定するように替えることで、
CSSファイルが簡単になる。
①jsファイルが指定可能。
②もしくは、HTMLファイルが編集可能。
③スタイルシートが編集可能、もしくはCSSファイルが指定可能。
1)スライド表示 ①または②が可能
2)階層(折り畳み)メニュー ①または②が可能
3)ソフト(ポップアップ)メニュー ①かつ③が可能、または②が可能
4)カテゴリ毎のスタイルシート自動切替 ①かつ③が可能、または②が可能
●詳細調査の条件
1)は、移植する為の条件がOKなら、基本的に可能。
2)は、メニュー文字列の構造に依存する。
3)は、メニュー文字列の構造に依存する。
4)は、スタイルシートを切替判断材料が存在するかに依存。
●詳細調査
2)と3)のメニュー文字列の構造を調査。
これは、対象となるブロック領域を割り出せるかに掛かってくる。
もし割り出せないのであれば、対処しようなし。
すなわち、対象となるブロック領域にid名とか、決まった名称とかが
存在すれば、なんとかなる。
すなわち、BLOCKBLOGでは、必要とするところは以下。
<div id="menu">
<dl id="b_xxx_xxx">
<dt>メニュー名</dt>
<dd>項目1</dd>
<dd>項目2</dd>
:
</dl>
:
</div>
A)livedoor blog
①、③が可能。
以下に示す。
<div id=links>
<div class=sidetitle>メニュー名</div> :menuObj
<div class=side> :elementBlockObj
<div class=sidebody>項目1</div> :elementObj
<div class=sidebody>項目2</div>
:
</div>
:
</div>
この構造であれば、問題なく可能だろう。
メニュー名ブロックを探すには、
id名でなく「メニュー名」文字列を指定してもらい、
「links」の子ノードでclass名=sidetitleを検索し、
該当するオブジェクトの値を指定した「メニュー名」と比較すればよい。
その対象となる項目群は、求めたノードの次に位置するノードを
探していき、それがDIV領域でclass名=sideを対象とする。
なお、次のノードがないか、次のsidetitleが出てくれば、
項目群はないものとすればよい。
B)fc2 blog
②、③が可能。
以下に示す。
<DIV id=right> ←右メニューの場合
<H3>メニュー名</H3>
<UL>
<LI>項目1</LI>
<LI>項目2</LI>
:
</UL>
:
</div>
この構造の場合は、自動的に上記構造を判断してもいいが、
両メニューとかだと対応できないし、ユーザに<DIV id=xxxxx>のxxxxxを
指定させるのが無難かもね。
あとは、上記構造のみ対象とするように処理すればOKね。
C)Doblog
③は可能。①、②は不明
以下に示す。
<DIV id=menu>
<DIV class=menu-header>メニュー名</DIV>
<DIV class=menu-contents>
<P>項目1</P> ←Pタグ以外もある。
<P>項目2</P>
:
</DIV>
:
</DIV>
livedoorと同じような構造なので、可能だろう。
D)Seesaa blog
①,②、③は不明
以下に示す。
<DIV id=links>
<DIV class=sidetitle>メニュー名</DIV>
<DIV class=side>
<A>項目1</A><BR>
<A>項目2</A><BR>
:
</DIV>
:
</DIV>
livedoorとそっくりな構造なので、可能だろう。
E)はてな blog
①,②、③は不明
以下に示す。
<DIV class=sidebar>
<DIV class=hatena-module>
<DIV class=hatena-moduletitle>メニュー名</DIV>
<DIV class=hatena-modulebody>
<UL class=hatena-xxxxxxx>
<LI>項目1
<LI>項目2
:
</UL>
</DIV>
:
</DIV>
この構造なら問題ないだろう。
●移植の考え方。
まずはA)で、単純にBLOCKBLOGのものから移植してみた。
BLOCKBLOGとの根本的な違いは、階層構造の違いがすべて。
この違いでプログラムは、メニュー名と項目を探す個所が
全然違う状態に。修正個所も多い。
他のブログでも、同じように移植するとなると、
この部分を替えるわけだが、ちょっと大変かな。
そこで、考え方を替えて、元の構造をそのままコピーして
使うのではなく、元の構造から内容を抜き出して、
BLOCKBLOGの構造に替えてしまえば、あとは、BLOCKBLOGの
処理をそのまま使えるので、移植作業が簡単になる。
ということで、この考え方だと、最初のjs7initSoftMenu関数内を
変更するだけでOK。あとは、CSSをいじるだけ。
このCSSもメニュー名や項目は、CSSのセレクタをidで指定するのではなく、
新規にclass名を挿入して、そのクラス名で指定するように替えることで、
CSSファイルが簡単になる。
PR