2004年10月26日

●サイドメニュー折りたたみの動作遅延対処

2004.12.06 追記
サイドメニュー折りたたみのエントリーを書き直しましたので

を参照ください。

以前公開したサイドメニュー折りたたみ(改)でリンクリスト等の表示までに時間がかかるメニューがあると、一時的にメニューが開いた状態になってしまいます。これは折りたたみ状態保持スクリプトを適用している場合も同様で、HTML表示を実行した一番最後に折りたたみ用のJavaScriptを起動し、メニューの折りたたみ状態を追加しているためです。
これを解消するため、HTMLの最後にJavaScriptを実行するのではなく、HTMLの任意の位置で数回に分けてこのJavaScriptを実行するように変更しました。このサイトで更新ボタンをクリックして頂ければ実際の折りたたみ動作をご覧いただけます(メニューが全て閉じた状態であればさらに○)。


これはfacet-diversさんのサイドバー折り畳み2:動作遅延対策のアイデアを元に修正させて頂きました。個人的にはこの記事のおかげでサイドメニュー折りたたみがほぼ完成型になったと思っています。
この場をお借りして改めてお礼申し上げます。本当にありがとうございました。


以下、上記エントリーからの変更手順です。なお万が一に備えて以前の状態に戻せるようmenufolder.jsおよび各テンプレートのバックアップは保存してから作業を行われることをお勧めします。


1.menufolder.jsより下記の赤字部分(InitFlodNaviとその起動箇所)を削除

function InitFoldNavi() {
    FoldNavigation('newentry','off',true); // 最新エントリー
    FoldNavigation('monthly','off',true); // 月別アーカイブ
    FoldNavigation('category','on',true); // カテゴリー別アーカイブ
    FoldNavigation('comment','on',true); // 最新コメント
    FoldNavigation('trackback','on',true); // 最新トラックバック
    FoldNavigation('link','on',true); // リンク
}

function FoldNavigation(idName,initMode,viewNum) {
    var openMark = '[+]'; /* 閉じている場合に開くためのマーク */
    var closeMark = '[-]'; /* 開いている場合に閉じるためのマーク */
            :
          (省略)
            :
}
InitFoldNavi(); // ナビゲーションの折り畳み

削除部分のFoldNavigation…という行は後でそのまま使います。またファイルを保存する際には文字コードにお気をつけください。


2.各テンプレートの一番下に配置していた

<script type="text/javascript" src="<$MTBlogURL$>menufolder.js"></script>

を <head>~</head> の間に移動


3.各テンプレートの、折りたたみを指定している各メニューの下に下記のスクリプトを追加

<script type="text/javascript">
<!--
FoldNavigation('xxxxx','on',true);
//-->
</script>

真中の FoldNavogation~ は1項で削除した行をそのまま使います。"xxxxx"の部分に直前のメニューに指定したid属性のものが割り当てられるようにします。例えば、カテゴリーリストメニュー用のid属性に"category"を指定している場合、カテゴリリストメニューの直下には、
<script type="text/javascript">
<!--
FoldNavigation('category','on',true);
//-->
</script>

を配置してください。
なお上記のスクリプトはメニュー対し1対1に細かく分割しなくても構いません。要するに遅延しないメニュー用と遅延するメニュー用のJavaScriptに分割できればよいので、例えばBlogPeople等のリンクリストの直前までの(遅延しない)メニュー分をまとめてリンクリスト(タイトル)の直前に、
<script type="text/javascript">
<!--
FoldNavigation('category','on',true);
FoldNavigation('monthly','on',true);
FoldNavigation('newentry','off',true);
//-->
</script>

と記述して配置し、BlogPeopleやMyBlogList等のリンクリスト用のJavaScriptのみを
<script type="text/javascript">
<!--
FoldNavigation('link1','on',true);
//-->
</script>

と書いてリンクリストの直下にそれぞれ配置してもOKです。


この対処はメニューの途中に遅延するメニューが存在する場合はあまり効果的でありません(遅延するメニュー以降のメニューは遅延します)ので予めご了承ください。

Posted by yujiro at 2004年10月26日 00:50
トラックバックURL

このエントリーのトラックバックURL:
http://yujiro.dyndns.org/blog/koikikukan/mt-tb.cgi/330

トラックバック実行後、タイムアウトした旨のメッセージが表示されることがありますが、トラックバック先の処理は(これまでの経験上)正常に終了しています。正常に送信されたかどうかはトラックバック先の個別アーカイブページ等をご確認ください(タイムアウトについてはこちらの記事を参照ください)。
また同一のトラックバックが重複してしまった場合、こちらで気がついた時に適宜削除しておりますので削除のご連絡は不要です。ただし期間が空いている場合(数日とか)は気がつかない場合がありますのでご連絡ください。

トラックバック

ブログを新設しました。 from やむやむ
スッキリデザインのテンプレートをいただいて、新しいブログをスタートさせました。 ... [続きを読む]

トラックバック時刻: 2004年11月01日 23:55

長くなりすぎたサイドバーを折りたたもうっ! from 喜怒哀楽
トラックバック・ピープルがかなり長いものになってしまった・・・。 サイドバーの折... [続きを読む]

トラックバック時刻: 2004年11月12日 10:32

Link と MyBlogList折りたたみ from 都会の片隅で
このサイトでテンプレートを使わせて頂いているyujiroさんの小粋空間で、サイド... [続きを読む]

トラックバック時刻: 2004年11月14日 14:31

サイドメニューを折りたたむ from Hitorigoto?
いろいろなサイトを見てMTを改造しているうちに、右側のメニューがずいぶん縦長になってしまった・・・(^_^;; なんとかならないかとググッていると、ちょうどイ... [続きを読む]

トラックバック時刻: 2004年11月16日 19:30

弄り中 from Bamkero.net
ウォー (丿 ̄ο ̄)丿アタシのやりたかったことだ~~~!!! 頑張って弄ってみます。 [続きを読む]

トラックバック時刻: 2004年11月28日 19:37
コメント

そういえば、いつの間にやら
メニュー左から読み込むようになってますね・・
テンプレ参考にさせてもらいます。

投稿者 Deepsnow [TypeKey Profile Page] : 2004年10月26日 21:59

こんばんはー。
はい、こちらのエントリーで失敗を暴露してから(笑)左からの表示に変えました。
ということでお試しになってみてください。

投稿者 yujiro : 2004年10月27日 00:08

遅れましたが、トラックバック、ありがとうございました。

しかも、記事中でこんなに丁寧な感謝をいただいていたとは...恐縮です(^^;

ところで、結局、基本的にテンプレートだけで分割設置できるよう変更されたようですね。

これならココログでも応用できそうだと思い、早速、...と思ったんですが、そういえばココログではプロコース以外でテンプレートがいじれないので、苦肉の作として今のようにリストのタイトル名で折り畳み箇所を指定するようにしたのでした(笑)

ただ、分割設置する場合は、やはりこちらのような形の方がわかりやすいので、次回作があれば、そうしたいなと改めて思いました。

折り畳みスクリプトは、需要はあるんですが、設置が難しくてみなさん苦労されてますよね。わたしもずっと、もっと簡単にならないかなーと思いつつ、いいアイデアが浮かばないので、サポートでカバーしている状態です。結局、まだまだ改良の余地があるということでしょうね。
(先程「サイドメニュー折りたたみ(改)」のコメント欄を拝見しました)

ところで、いまごろ気がついたんですが、BlogPeopleとかMyblogListも数えられるようになっていますね。すばらしい! 参考にさせていただきます(^^)

投稿者 facet : 2004年10月29日 06:59

>facetさん
こんばんはー。
ご連絡ありがとうございます。
facetさんのスクリプトを拝見して、私の思いついたマヌケなスクリプトを修正しました。(笑)。

ココログはコースによって制約があるのは、カスタマイズ側にとっては厳しいですね。
逆にそういうところから新しいアイデアが生まれるのかもしれませんね。

確かに折りたたみのカスタマイズ、もう少し簡単になるといいですね。
まぁその分できた時の達成感も大きいので、今は取り組んで下さる方と一緒に頑張ってます。(笑)

リンクリストの計算、ご参考になれば幸いです。

投稿者 yujiro : 2004年10月29日 21:21

こんばんは。はじめまして。
今回、こちらのテンプレートをいただいて、
さらに サイドバー折り畳みも使わせていただきました。
今日、一気に 遅延対策までやっちゃいました。
さっき、この記事にTBしようと思ったら
タイムアウトになっちゃいました。
こちらの解説は初心者にも親切で
すごくわかりやすいです。助かります。
今後とも よろしくお願いいたします。

投稿者 さえら : 2004年11月01日 23:38

ごめんなさい、TBとばせてたようですね。
2つもしちゃった。「(^^; ) ごめんなさい。

投稿者 さえら : 2004年11月02日 00:01

>さえらさん
はじめまして。
テンプレートご利用&コメント・トラックバックありがとうございました。
お褒めの言葉ありがとうございます。サイドメニュー折りたたみを一気にカスタマイズされて驚きました!!

とりあえず両サイトBPに登録させていただきました。
それでは今後ともどうぞよろしくお願い致します。
#トラックバックの重複は削除しておきました。

投稿者 yujiro : 2004年11月02日 01:11

素敵な機能の紹介、ありがとうございます。
さて、私のブログでも導入させて頂こうと思い、作業したのですが、なぜかMacのIEでまるで表示されないのです。
最初、動作遅延対処の方を導入して、<script type=〜 をhead部分に、サイドバー部分に実際のスクリプトを書いていたのですが、それだと<script type=〜 部分には「無効な文字です」というコンパイルエラーが、サイドバーのスクリプト「FoldNavigation('xxxxx','on',true);」部分には「オブジェクトが必要です」というランタイムエラーが出てたんです。
そこで、jsファイルの方で格納場所を指定する方法に切り替えたところ、ランタイムエラーはなくなったのですが、やはり<script type=〜 部分にはコンパイルエラーが出たままになっています。
WINのIEやNNでは表示されると友達が確認してくれて、MACでもNNなら表示されることは確認できたのですが、MACのIEで表示されないのは、どこが間違えているのでしょう? 申し訳ありませんが、一度見てみて頂けますでしょうか。どうぞよろしくお願いいたします。

投稿者 四季 [TypeKey Profile Page] : 2004年11月02日 07:19

>四季さん
こんにちは。
思いつきで恐縮ですが、まず menufolder.js の中のコメント

  //~

を全て削除していただけますでしょうか。また、

  <!-- insText[insText.length] = objTitle.innerHTML; -->

という行も併せて削除してやってください。
設定自体は(私が見た限りでは)問題ないと思います。

以上です。
それではよろしくお願い致します。

投稿者 yujiro : 2004年11月02日 10:12

yujiroさん、こんにちは。
ようやくようやく、できましたー!!!
ええと、コメントを全部消したんですけど、それではダメで、結局外部jsファイルを読み込むのをやめて、テンプレートモジュールにして読み込んでみたら、今度はちゃんと出来ました! サーバーの仕様… なんてことはあるんでしょうかねえ、外部jsファイルの読み込みと相性が悪かったということみたいです。
お騒がせしました&見て下さってありがとうございました。これからも色々と参考にさせて頂くことになるかと思います。楽しみにブログを拝見させて頂きますので!どうぞよろしくお願いいたします(^^)。

投稿者 四季 [TypeKey Profile Page] : 2004年11月02日 16:08

>四季さん
こんばんはー。
うまくできたようで良かったです!
(お役に立たずすいません)

なおこの事象についてはエントリーに追記させていただきました。今後ご利用になる方の参考になれば幸いです。

恐るべし、MacIE!!

投稿者 yujiro : 2004年11月02日 23:39

今日は、こちらの記事までを参考にサイドバーの折りたたみまでカスタマイズ完了いたしました!

本当に感謝感激です!
カスタマイズに関する記事は、これからエントリー予定ですのでその時に一緒にトラックバックさせてくださいませ。

取り急ぎ、お礼まで。

投稿者 ミッチ [TypeKey Profile Page] : 2004年11月11日 17:07

>ミッチさん
続けてのご利用・ご連絡ありがとうございます。
無事にできて良かったです(このカスタマイズは結構手間取りますので)。

投稿者 yujiro : 2004年11月12日 01:04

こんにちは、
3カラムテンプレート、サイドバー折りたたみも使わせていただきました。
ありがとうございました。

投稿者 わいるど : 2004年11月21日 01:57

>わいるどさん
はじめまして。
テンプレートご利用&ご連絡ありがとうございました!
折りたたみも併せてご利用くださりありがとうございます。

勝手ながらBlogPeopleに登録させて頂きました。
それでは今後ともどうぞよろしくお願い致します。

投稿者 yujiro : 2004年11月22日 09:16
コメントする




保存しますか?

(書式を変更するような一部のHTMLタグを使うことができます)

コメントありがとうございます。投稿が反映されるまでに時間がかかる場合がありますが「投稿」ボタンを続けてクリックされないようお願い致します。またコメント投稿処理が終了しない場合、トップページに反映されない場合がありますがコメントは正常に投稿されています(サーバ側の不具合のようです。こちらで操作してページに反映させています)。また1回のクリックでも重複してしまう場合がありますが適宜削除しておりますのでご連絡は不要です。