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

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

Posted at October 26,2004 12:50 AM
Tag:[]

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

サイドメニュー折りたたみスクリプト(cookie等改善版)

を参照ください。


以前公開したサイドメニュー折りたたみ(改)でリンクリスト等の表示までに時間がかかるメニューがあると、一時的にメニューが開いた状態になってしまいます。これは折りたたみ状態保持スクリプトを適用している場合も同様で、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です。

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

関連記事
トラックバックURL


トラックバック

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

Tracked on November 1, 2004 11:55 PM

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

Tracked on November 12, 2004 10:32 AM

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

Tracked on November 14, 2004 2:31 PM

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

Tracked on November 16, 2004 7:30 PM

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

Tracked on November 28, 2004 7:37 PM
コメント

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

[1] Posted by Deepsnow : October 26, 2004 9:59 PM

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

[2] Posted by yujiro : October 27, 2004 12:08 AM

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

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

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

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

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

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

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

[3] Posted by facet : October 29, 2004 6:59 AM

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

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

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

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

[4] Posted by yujiro : October 29, 2004 9:21 PM

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

[5] Posted by さえら : November 1, 2004 11:38 PM

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

[6] Posted by さえら : November 2, 2004 12:01 AM

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

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

[7] Posted by yujiro : November 2, 2004 1:11 AM

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

[8] Posted by 四季 : November 2, 2004 7:19 AM

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

  //?

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

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

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

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

[9] Posted by yujiro : November 2, 2004 10:12 AM

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

[10] Posted by 四季 : November 2, 2004 4:08 PM

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

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

恐るべし、MacIE!!

[11] Posted by yujiro : November 2, 2004 11:39 PM

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

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

取り急ぎ、お礼まで。

[12] Posted by ミッチ : November 11, 2004 5:07 PM

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

[13] Posted by yujiro : November 12, 2004 1:04 AM

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

[14] Posted by わいるど : November 21, 2004 1:57 AM

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

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

[15] Posted by yujiro : November 22, 2004 9:16 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)