忍者ブログ
[1] [2]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

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

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

●調査結果

すなわち、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が出てくれば、
項目群はないものとすればよい。

●移植の考え方。

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

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

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

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

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

F)忍者blog

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

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

</div>
</div>

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

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

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

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

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

拍手[0回]

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

①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ファイルが簡単になる。

拍手[0回]

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

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

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

拍手[0回]

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

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

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

拍手[0回]

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

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

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

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

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

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

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

拍手[0回]

忍者ブログ [PR]
カレンダー
09 2017/10 11
S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
フリーエリア
[-]最新トラックバック
プロフィール
HN:
7maru
性別:
非公開
自己紹介:

バーコード
ブログ内検索
[+]アーカイブ
アクセス解析