他のブログにも本腰で移植

　BLOCKBLOGがサービスを停止すると突然公知したので、
他のブログに引越ししないといけなくなったが、
BLOCKBLOGで作ってきたブログツールを他のブログに移植を本格的に
考えてみた。

以前考えていたことは、ソフトメニューを途中までは作り、そこで未完のまま
放置していたので、ライブドアブログで作ってみた。

●調査結果

すなわち、BLOCKBLOGでは、必要とするところは以下。
<div id="menu">
<dl id="b_xxx_xxx">
<dt>メニュー名</dt>
<dd>項目１</dd>
<dd>項目２</dd>
：
</dl>
：
</div>

Ａ）livedoor blog

①、③が可能。
以下に示す。
<div id=links>
<div class=sidetitle>メニュー名</div>　　　：menuObj
<div class=side> 　　　　　　　　　　　　　：elementBlockObj
<div class=sidebody>項目１</div> 　　　：elementObj
<div class=sidebody>項目２</div>
：
</div>
：
</div>

この構造であれば、問題なく可能だろう。
メニュー名ブロックを探すには、
id名でなく「メニュー名」文字列を指定してもらい、
「links」の子ノードでclass名=sidetitleを検索し、
該当するオブジェクトの値を指定した「メニュー名」と比較すればよい。

その対象となる項目群は、求めたノードの次に位置するノードを
探していき、それがＤＩＶ領域でclass名=sideを対象とする。
なお、次のノードがないか、次のsidetitleが出てくれば、
項目群はないものとすればよい。

●移植の考え方。

元の構造から内容を抜き出してBLOCKBLOGの構造に替えてしまう方法。
あとは、BLOCKBLOGの処理をそのまま使えるので、移植作業が簡単になる。

この考え方だと、最初のjs7initSoftMenu関数内を
変更するだけでＯＫ。あとは、ＣＳＳをいじるだけ。

このＣＳＳもメニュー名や項目は、ＣＳＳのセレクタをｉｄで指定するのではなく、
新規にBLOCKBLOGのclass名も挿入して、そのクラス名で指定するように替えることで、
ＣＳＳファイルが簡単になる。

ということで、Ａ）を作ってみたら出来ました。^^)

ところが、その後、移植先ブログを調査していたら、
ライブドアブログは、現在の内容をそのまま移植するには不適切ということで、
一番有力は忍者ブログになってるので、再度、忍者ブログに作り変えた。

Ｆ）忍者blog

①，②、③は可能
以下に示す。

<div class="PluginInnerBlock">
<div class="PluginTitle left">メニュー名</div>
<div class="PluginExplanation left">　</div>
<div class="PluginContents left">
<div class="plugin_data"><a href="　">項目１</a></div>
<div class="plugin_data"><a href="　">項目２</a></div>
：
</div>
</div>

ということで殆どライブドアと構造は同じであるが、
問題は、id名もしくはname名がなく、クラス名のみである。
従って、IEは、DIVタグからメニュー名を求めるようにしないと出来ない。
プログラムを同じにしたいので、DOMもそれにあわせて作るしかない。

ということで、なんとかクラス名を元に探し当てることに成功し、
サーバーにアップしたら、なんか表示しない。。。。

問題の箇所のソース見たら、なんか変。。。。。。

ということで昔のソースでなんでこんな記述をしたのか
考えたが分からない。。。。
で、よく考えたら、　　　　バグでした。。。。。
昔は、プルダウンの個数が少ないことはなかったためたまたまセーフだった。。

ということで、その他のブログツールも含め2008/09/17深夜にやっと完成しました。

他のブログに移植可能か調査してみた。

●移植する為の最低限必要な機能

①jsファイルが指定可能。
②もしくは、ＨＴＭＬファイルが編集可能。
③スタイルシートが編集可能、もしくはＣＳＳファイルが指定可能。

１）スライド表示　　　　　　　　　　　　　　①または②が可能
２）階層（折り畳み）メニュー　　　　　　　　①または②が可能
３）ソフト（ポップアップ）メニュー　　　　　①かつ③が可能、または②が可能
４）カテゴリ毎のスタイルシート自動切替　　　①かつ③が可能、または②が可能

●詳細調査の条件

１）は、移植する為の条件がＯＫなら、基本的に可能。
２）は、メニュー文字列の構造に依存する。
３）は、メニュー文字列の構造に依存する。
４）は、スタイルシートを切替判断材料が存在するかに依存。

●詳細調査

２）と３）のメニュー文字列の構造を調査。
これは、対象となるブロック領域を割り出せるかに掛かってくる。
もし割り出せないのであれば、対処しようなし。
すなわち、対象となるブロック領域にid名とか、決まった名称とかが
存在すれば、なんとかなる。

すなわち、BLOCKBLOGでは、必要とするところは以下。
<div id="menu">
<dl id="b_xxx_xxx">
<dt>メニュー名</dt>
<dd>項目１</dd>
<dd>項目２</dd>
：
</dl>
：
</div>

Ａ）livedoor blog

①、③が可能。
以下に示す。
<div id=links>
<div class=sidetitle>メニュー名</div>　　　：menuObj
<div class=side> 　　　　　　　　　　　　　：elementBlockObj
<div class=sidebody>項目１</div> 　　　：elementObj
<div class=sidebody>項目２</div>
：
</div>
：
</div>

この構造であれば、問題なく可能だろう。
メニュー名ブロックを探すには、
id名でなく「メニュー名」文字列を指定してもらい、
「links」の子ノードでclass名=sidetitleを検索し、
該当するオブジェクトの値を指定した「メニュー名」と比較すればよい。

その対象となる項目群は、求めたノードの次に位置するノードを
探していき、それがＤＩＶ領域でclass名=sideを対象とする。
なお、次のノードがないか、次のsidetitleが出てくれば、
項目群はないものとすればよい。


Ｂ）fc2 blog

②、③が可能。
以下に示す。

<DIV id=right>  ←右メニューの場合
<H3>メニュー名</H3>
<UL>
<LI>項目１</LI>
<LI>項目２</LI>
：
</UL>
：
</div>

この構造の場合は、自動的に上記構造を判断してもいいが、
両メニューとかだと対応できないし、ユーザに<DIV id=xxxxx>のxxxxxを
指定させるのが無難かもね。
あとは、上記構造のみ対象とするように処理すればＯＫね。


Ｃ）Doblog

③は可能。①、②は不明
以下に示す。

<DIV id=menu>
<DIV class=menu-header>メニュー名</DIV>
<DIV class=menu-contents>
<P>項目１</P>　　　　　　　　　　←Pタグ以外もある。
<P>項目２</P>
：
</DIV>
：
</DIV>

livedoorと同じような構造なので、可能だろう。


Ｄ）Seesaa blog

①，②、③は不明
以下に示す。

<DIV id=links>
<DIV class=sidetitle>メニュー名</DIV>
<DIV class=side>
<A>項目１</A><BR>
<A>項目２</A><BR>
：
</DIV>
：
</DIV>

livedoorとそっくりな構造なので、可能だろう。


Ｅ）はてな blog

①，②、③は不明
以下に示す。

<DIV class=sidebar>
<DIV class=hatena-module>
<DIV class=hatena-moduletitle>メニュー名</DIV>
<DIV class=hatena-modulebody>
<UL class=hatena-xxxxxxx>
<LI>項目１
<LI>項目２
：
</UL>
</DIV>
：
</DIV>

この構造なら問題ないだろう。

●移植の考え方。

まずはＡ）で、単純にBLOCKBLOGのものから移植してみた。
BLOCKBLOGとの根本的な違いは、階層構造の違いがすべて。
この違いでプログラムは、メニュー名と項目を探す個所が
全然違う状態に。修正個所も多い。

他のブログでも、同じように移植するとなると、
この部分を替えるわけだが、ちょっと大変かな。

そこで、考え方を替えて、元の構造をそのままコピーして
使うのではなく、元の構造から内容を抜き出して、
BLOCKBLOGの構造に替えてしまえば、あとは、BLOCKBLOGの
処理をそのまま使えるので、移植作業が簡単になる。

ということで、この考え方だと、最初のjs7initSoftMenu関数内を
変更するだけでＯＫ。あとは、ＣＳＳをいじるだけ。

このＣＳＳもメニュー名や項目は、ＣＳＳのセレクタをｉｄで指定するのではなく、
新規にclass名を挿入して、そのクラス名で指定するように替えることで、
ＣＳＳファイルが簡単になる。

ソフトメニューを各ページの先頭に表示したい

　階層メニューが出来たので、、今度は本来の目的であったソフトメニュー
（ポップアップメニューとも言うらしい）を表示出来ないかを考えてみた。

ソフトメニューは、自分のＨＰでも各ページに付けているが、
BLOCKBLOGでは、自分のＨＰにつけている物とは、違ったもので実現するしかない。
それは、階層メニューでも書いたが、なにしろＨＴＭＬ文が直接書けないので、
BLOCKBLOGのHTML文内にある情報を用いて、実現するしかないためである。

じゃ、どうやって実現するか？

階層型メニューであるビヘビア機能が使いたい

　左側のメニューで例えばバックナンバー。これ、縦に長すぎ。
これを必要な時は、見えるようにして、必要でなければ隠しておきたい。

すなわち、Windowsのエクスプローラなどのファイル一覧で、フォルダをクリックすると、
その下にぶら下がっているフォルダが表示される機能。

これをこのBLOCKBLOGでも実現してみたい。
ではどうやって？

カテゴリ毎に違ったデザインに自動で変えちゃおう計画

　デザインが、まあ思うように変更できたので、

今度はさらにカテゴリ表示毎にデザインを自動的に変更してみたーーーーーい！！

まあ、デザイン変更するより、こっちが本来の目的だったんだけど、
JavaScriptというのは、なぜか新しいことを自分がやろうとすると、
いろいろな問題が、いつも起こる。

というより仕様を知らないで作るので、いろいろブラウザから懲らしめられるんだけど、
それを解決しながら、作るのが、大変なんだよね。

今回も同じでした。T T);;

ということで、その奮闘記を書いてみた。

でも、結論は簡単なんだけど、そこまで辿り付くのがかなり大回りしたみたい。^^);;