サイドメニュー折りたたみの動作遅延対処
Tag：[]
2004.12.06 追記
サイドメニュー折りたたみのエントリーを書き直しましたので
を参照ください。
以前公開したサイドメニュー折りたたみ（改）でリンクリスト等の表示までに時間がかかるメニューがあると、一時的にメニューが開いた状態になってしまいます。これは折りたたみ状態保持スクリプトを適用している場合も同様で、HTML表示を実行した一番最後に折りたたみ用のJavaScriptを起動し、メニューの折りたたみ状態を追加しているためです。
これを解消するため、HTMLの最後にJavaScriptを実行するのではなく、HTMLの任意の位置で数回に分けてこのJavaScriptを実行するように変更しました。このサイトで更新ボタンをクリックして頂ければ実際の折りたたみ動作をご覧いただけます（メニューが全て閉じた状態であればさらに○）。
これはfacet-diversさんのサイドバー折り畳み２：動作遅延対策のアイデアを元に修正させて頂きました。個人的にはこの記事のおかげでサイドメニュー折りたたみがほぼ完成型になったと思っています。
この場をお借りして改めてお礼申し上げます。本当にありがとうございました。
以下、上記エントリーからの変更手順です。なお万が一に備えて以前の状態に戻せるようmenufolder.jsおよび各テンプレートのバックアップは保存してから作業を行われることをお勧めします。
１．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…という行は後でそのまま使います。またファイルを保存する際には文字コードにお気をつけください。
２．各テンプレートの一番下に配置していた
<script type="text/javascript" src="<$MTBlogURL$>menufolder.js"></script>を <head>～</head> の間に移動
３．各テンプレートの、折りたたみを指定している各メニューの下に下記のスクリプトを追加
<script type="text/javascript">
<!--
FoldNavigation('xxxxx','on',true);
//-->
</script>真中の FoldNavogation? は１項で削除した行をそのまま使います。"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です。
この対処はメニューの途中に遅延するメニューが存在する場合はあまり効果的でありません（遅延するメニュー以降のメニューは遅延します）ので予めご了承ください。
- ListfolderプラグインをMovable Typeに適用する
- サイドメニューの折りたたみ（Movable Type 4.x デフォルトテンプレート用）
- サイドメニューの折りたたみ（定義リスト編）
- サイドメニューの一部を折りたたむ
- サイドメニューの折りたたみマークに画像を使用する
- サイドメニューの折りたたみ（Movable Type デフォルトテンプレート用）
- サイドメニューの折りたたみ（v5.0：ゆっくり折りたたむ）
- サイドメニューの折りたたみに画像を使用する
- サイドメニューの折りたたみ（v4.0）
- menufolder.js 3.01 リリース
- Movable Type ユーザー・マニュアルをサイドメニューに追加
- サブカテゴリーリストの折りたたみ
- サイドメニュー折りたたみスクリプト（cookie等改善版）
- サイドメニューの折りたたみスクリプト改修中
- サイドメニュー折りたたみ状態保持スクリプト
≫ ブログを新設しました。 from やむやむ
スッキリデザインのテンプレートをいただいて、新しいブログをスタートさせました。 ... [続きを読む]
≫ 長くなりすぎたサイドバーを折りたたもうっ！ from 喜怒哀楽
トラックバック・ピープルがかなり長いものになってしまった・・・。 サイドバーの折... [続きを読む]
≫ Link と MyBlogList折りたたみ from 都会の片隅で
このサイトでテンプレートを使わせて頂いているyujiroさんの小粋空間で、サイド... [続きを読む]
≫ サイドメニューを折りたたむ from Hitorigoto？
いろいろなサイトを見てMTを改造しているうちに、右側のメニューがずいぶん縦長になってしまった･･･（^_^;;
なんとかならないかとググッていると、ちょうどイ... [続きを読む]
そういえば、いつの間にやら
メニュー左から読み込むようになってますね・・
テンプレ参考にさせてもらいます。
こんばんはー。
はい、こちらのエントリーで失敗を暴露してから（笑）左からの表示に変えました。
ということでお試しになってみてください。
遅れましたが、トラックバック、ありがとうございました。
しかも、記事中でこんなに丁寧な感謝をいただいていたとは...恐縮です(^^;
ところで、結局、基本的にテンプレートだけで分割設置できるよう変更されたようですね。
これならココログでも応用できそうだと思い、早速、...と思ったんですが、そういえばココログではプロコース以外でテンプレートがいじれないので、苦肉の作として今のようにリストのタイトル名で折り畳み箇所を指定するようにしたのでした（笑）
ただ、分割設置する場合は、やはりこちらのような形の方がわかりやすいので、次回作があれば、そうしたいなと改めて思いました。
折り畳みスクリプトは、需要はあるんですが、設置が難しくてみなさん苦労されてますよね。わたしもずっと、もっと簡単にならないかなーと思いつつ、いいアイデアが浮かばないので、サポートでカバーしている状態です。結局、まだまだ改良の余地があるということでしょうね。
（先程「サイドメニュー折りたたみ（改）」のコメント欄を拝見しました）
ところで、いまごろ気がついたんですが、BlogPeopleとかMyblogListも数えられるようになっていますね。すばらしい！ 参考にさせていただきます(^^)
＞facetさん
こんばんはー。
ご連絡ありがとうございます。
facetさんのスクリプトを拝見して、私の思いついたマヌケなスクリプトを修正しました。（笑）。
ココログはコースによって制約があるのは、カスタマイズ側にとっては厳しいですね。
逆にそういうところから新しいアイデアが生まれるのかもしれませんね。
確かに折りたたみのカスタマイズ、もう少し簡単になるといいですね。
まぁその分できた時の達成感も大きいので、今は取り組んで下さる方と一緒に頑張ってます。（笑）
リンクリストの計算、ご参考になれば幸いです。
こんばんは。はじめまして。
今回、こちらのテンプレートをいただいて、
さらに サイドバー折り畳みも使わせていただきました。
今日、一気に 遅延対策までやっちゃいました。
さっき、この記事にTBしようと思ったら
タイムアウトになっちゃいました。
こちらの解説は初心者にも親切で
すごくわかりやすいです。助かります。
今後とも よろしくお願いいたします。
ごめんなさい、TBとばせてたようですね。
２つもしちゃった。「(^^; ) ごめんなさい。
＞さえらさん
はじめまして。
テンプレートご利用＆コメント・トラックバックありがとうございました。
お褒めの言葉ありがとうございます。サイドメニュー折りたたみを一気にカスタマイズされて驚きました！！
とりあえず両サイトBPに登録させていただきました。
それでは今後ともどうぞよろしくお願い致します。
＃トラックバックの重複は削除しておきました。
素敵な機能の紹介、ありがとうございます。
さて、私のブログでも導入させて頂こうと思い、作業したのですが、なぜかMacのIEでまるで表示されないのです。
最初、動作遅延対処の方を導入して、＜script type=? をhead部分に、サイドバー部分に実際のスクリプトを書いていたのですが、それだと＜script type=? 部分には「無効な文字です」というコンパイルエラーが、サイドバーのスクリプト「FoldNavigation('xxxxx','on',true);」部分には「オブジェクトが必要です」というランタイムエラーが出てたんです。
そこで、jsファイルの方で格納場所を指定する方法に切り替えたところ、ランタイムエラーはなくなったのですが、やはり＜script type=? 部分にはコンパイルエラーが出たままになっています。
WINのIEやNNでは表示されると友達が確認してくれて、MACでもNNなら表示されることは確認できたのですが、MACのIEで表示されないのは、どこが間違えているのでしょう？ 申し訳ありませんが、一度見てみて頂けますでしょうか。どうぞよろしくお願いいたします。
＞四季さん
こんにちは。
思いつきで恐縮ですが、まず menufolder.js の中のコメント
//?
を全て削除していただけますでしょうか｡また、
<!-- insText[insText.length] = objTitle.innerHTML; -->
という行も併せて削除してやってください。
設定自体は（私が見た限りでは）問題ないと思います。
以上です。
それではよろしくお願い致します。
yujiroさん、こんにちは。
ようやくようやく、できましたー！！！
ええと、コメントを全部消したんですけど、それではダメで、結局外部jsファイルを読み込むのをやめて、テンプレートモジュールにして読み込んでみたら、今度はちゃんと出来ました！ サーバーの仕様… なんてことはあるんでしょうかねえ、外部jsファイルの読み込みと相性が悪かったということみたいです。
お騒がせしました＆見て下さってありがとうございました。これからも色々と参考にさせて頂くことになるかと思います。楽しみにブログを拝見させて頂きますので！どうぞよろしくお願いいたします(^^)。
＞四季さん
こんばんはー。
うまくできたようで良かったです！
（お役に立たずすいません）
なおこの事象についてはエントリーに追記させていただきました。今後ご利用になる方の参考になれば幸いです。
恐るべし、MacIE！！
今日は、こちらの記事までを参考にサイドバーの折りたたみまでカスタマイズ完了いたしました！
本当に感謝感激です！
カスタマイズに関する記事は、これからエントリー予定ですのでその時に一緒にトラックバックさせてくださいませ。
取り急ぎ、お礼まで。
＞ミッチさん
続けてのご利用・ご連絡ありがとうございます。
無事にできて良かったです（このカスタマイズは結構手間取りますので）。
こんにちは、
３カラムテンプレート、サイドバー折りたたみも使わせていただきました。
ありがとうございました。
＞わいるどさん
はじめまして。
テンプレートご利用＆ご連絡ありがとうございました！
折りたたみも併せてご利用くださりありがとうございます。
勝手ながらBlogPeopleに登録させて頂きました。
それでは今後ともどうぞよろしくお願い致します。
