サイドメニュー折りたたみ状態保持スクリプト

サイドメニュー折りたたみ状態保持スクリプト

Posted at September 13,2004 11:56 PM
Tag:[]

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

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

を参照ください。


このblogではサイドバーメニューの折りたたみ機能を利用させて頂いてますが、折りたたみ状態を変更した後で他のページに移動して戻ってきたり、新たにブラウザを起動するとblog管理者(つまり私)が予め設定しているデフォルトの折りたたみ状態に戻ってしまいます。このようにせっかくカスタマイズした折りたたみ状態が一瞬にして水の泡となってしまうのは何となく不便に感じていました。

そういう訳で折りたたみ状態を保持できるようにスクリプトを改造してみました。これにより折りたたみ状態をカスタマイズした訪問者はページを移動しても、別の日にブラウザを起動した時でも、常に直前に行った折りたたみ状態でblogを閲覧することができます。つまりblog管理者が設定したデフォルトの折りたたみ状態に縛られる必要がなくなる訳です。
具体的にどのような動作になるかは、このサイトでメニューの折りたたみ状態を変更して更新ボタンをクリックするか、他のページへ移動して戻ってきてみられるとお分かり頂けると思います(動作の都合上一瞬デフォルト状態になります)。

この機能を有効にするためにはブラウザのcookieが有効になっていること、折りたたみスクリプトは当方が利用させて頂いているJUGEMカスタマイズ講座ナビゲーションの折り畳みを使われていることが前提です。

2004.09.20追記
この機能はcookieを利用しています。id属性名("?name"や"?list"を除いた文字列)がそのままcookie名となりますので他のcookie名と重複しないようなユニークな名称を使用してください。重複している場合、cookieを用いたスクリプトの動作に不具合が生じる場合があります。
またプレビュー画面では正常に動作していません(原因未確認です)。
動作確認済ブラウザはIE6.0およびNC7.1です。

2004.09.24追記
下記のサイトで公開中の折りたたみ用スクリプトに状態保持機能を採用くださいました。ありがとうございます。

以下、スクリプトの修正方法です。

1.cookie取得・設定用スクリプトの追加
メニュー毎の折りたたみ状態をcookieに保持およびcookieから読み出すスクリプトを<head>~</head>の間に追加します。ちなみにこのスクリプトはスタイルシート切り替えのstyleswitcher.jsのcookie用関数の一部を流用しておりますので、そちらを既に使われている方はこの項目をスキップしてください。
注:styleswitcher.jsを利用する場合、状態を保持したいテンプレートに全て指定されている必要があります。

<script type="text/javascript">
function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}
</script>

2.折りたたみ用スクリプトにcookie保持・読み出しスクリプト追加
折りたたみ用スクリプトを設定している各テンプレート(注:サイドバーメニューの折りたたみからの修正であればmenufolder.js)に下記の青色部分を追加します。

function FoldNavigation(idName,initMode,viewNum) {
    :
  if (!dispMode) {
    var cookie_initMode = readCookie(idName);
    if(cookie_initMode){
      initMode = cookie_initMode;
    }
    createCookie(idName, initMode, 365);
  var tmpText = Array('FoldNavigation(',"'",idName,"','chng','');return(false);").join('');
    :
  } else if (initMode == 'chng') {
    :
    objLists.style.display = (dispMode == 'none') ? 'block' : 'none';
    if (dispMode == 'none') {
      createCookie(idName, 'on', 365);
    } else {
      createCookie(idName, 'off', 365);
    }
  }
}
InitFoldNavi();

以上です。

メニューの折りたたみ状態をページ毎に制御したい場合(例えばメインページでたたんでいる「月別アーカイブ一覧」を月別アーカイブのページでは開いた状態にしたい等)は、id属性の名称をそれぞれ異なる名称で設定すればOKです。同じid属性名にしておけばページが変わっても同じ折りたたみ状態が引き継がれます。

2006.04.04 追記
リストから language 属性を削除しました(HTML4.01/XHTMLで非推奨あるいは廃止されているため)。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

とうとうやりました! from life in my style diary
サイドメニューが長ったらしくなってきたので、どうにかして折りたたみたかったんです... [続きを読む]

Tracked on November 21, 2004 8:38 PM

サイドバー折りたたみ from うだうだうだ
ちょっと、bloglistとかが長くなってきたので サイドバー折りたたみ式にしま... [続きを読む]

Tracked on December 4, 2004 3:20 AM

3カラムにテンプレートを変更しました。 from blog・PC・HP奮闘記
念願の3カラムにテンプレートを変更しました。 ぐぐって見るといろいろなテンプレー... [続きを読む]

Tracked on January 9, 2005 10:41 PM

メニウの折り畳みかつその状態を保持してみたり。 from かえいかえ。
引き続きメニウの折り畳みに挑戦してみまいた。 参考にしたのはこちら↓。 chocolat* BLOG http://chocolatblog.bl... [続きを読む]

Tracked on September 6, 2005 1:49 AM
コメント

うわーい。
素晴らしいですねぇ。^^

私もスクリプト勉強しまーす、そのうち。
って、いつすんのかわからないですが。(苦笑)

[1] Posted by Border. : September 14, 2004 3:08 AM

どうもです。(^_^)/
といっても私は人様のスクリプトに手を入れる位のスキルしかございませんが…。

[2] Posted by yujiro : September 14, 2004 10:59 AM

こんにちは、早速使ってみました

最初に折りたたみを導入する時
どうもうまく動かなくて・・
こちらのソース見てみたら
あ、なんか違うぞ・・と思ってました^^

[3] Posted by Deepsnow : September 15, 2004 5:09 PM

こんにちはー。
ご利用ありがとうございます!
最近ミスを多発してしまっているのでうまく動いてホッとしてます。

[4] Posted by yujiro : September 16, 2004 12:24 PM

こんばんわ、ユキです。
さっそく、スクリプトを拝見しにまいりました!

ただいま、今のデザインをちょこっと改良中です。
スクリプトを導入して、うまく動くといいんですが(笑)

[5] Posted by ユキ : September 16, 2004 10:24 PM

こんばんは?。
お越しくださりありがとうございます。

うまく動作してくれることを願ってますが不具合ありましたらご連絡ください。

[6] Posted by yujiro : September 17, 2004 1:16 AM

facet-diversへのコメント、ありがとうございました。(^^)

こちらに書き込もうと何度も思ったんですが、言いたいことが上手くまとめられなくて迷っているうちに先にお越しいただく形になってしまって恐縮です。

無断借用_(._.)_させていただいた2関数[createCookie(),readCookie()]については、一応、拙作「foldSidebar02c.js」内の関数定義直前に、
/*
functions createCookie() & readCookie() below are made by yujiro,
http://yujiro.dyndns.org/blog/koikikukan/archives/2004/09/13-235641.php
*/
と記させていただいていたんですがが、そんな程度でいいのかな?と悩んでました(悩んでないでさっさとこちらに聞きにくれば良かったです^^;)。

しかも、コメントをいただいた記事の中で「公開を控えた」とかノタマワッテましたが、あれじゃ公開したも同然でしたね。どうもすみません。

公開のご許可をいただき、遅ればせながら、ありがとうございました。何か問題がありましたら、お手数ですが、ご指摘ください。

ところで、余談ですが、この記事にある「プレビュー画面では正常に動作していません」というのは、「コメントの確認」画面でのことでしょうか。それなら、うちのFirefox0.9.1では問題なく状態保持されていますので、ご報告まで。

[7] Posted by facet : September 23, 2004 3:24 AM

>facetさん
こちらへのコメントおよびスクリプトへの表示ありがとうございました。色々と注文つけるようなことになってしまってすいません。
なお該当記事にfacetさんのリンクを貼らせて頂きました。公開スクリプトに機能を盛り込んでくださり、こちらこそありがとうございます。

#プレビュー画面の問題は私の設定誤りでした。ご指摘ありがとございます。
MyBlogListにも登録させて頂きました。それでは今度ともよろしくお願い致します。

[8] Posted by yujiro : September 24, 2004 1:39 PM

こんにちは?。なんだかcookieがおかしいみたいです、折りたたみ状態の保持が一部でできてません。なんだかんだ、サイドバーに詰め込みすぎちゃったかな。html的に下の方にいくほど、保持が鈍いような感じです。例えば トップページでカウンターのところを開いた状態にしておいて、日別アーカイブにとぶと、開いたままなので、おぉ??、状態保持できてる、って喜んで、トップページに戻ると、カウンターのところ、また勝手に閉じてます。状態保持が完全じゃないんです。MTにログインしてるのに、何度もログインしろと出るのとなにか関係があるのかな・・・とか思うんですけど。。。

[9] Posted by さえら : November 16, 2004 2:48 PM

>さえらさん
こんばんは。
ご質問の事象ですがcookieの利用に際しては仕様上の制限がございまして、一つのサーバが同じコンピュータに発行できるcookieは同時に20までです。状態保持スクリプトでは1タイトルにつき1つのcookieを利用しており、さえらさんのサイトはメニューが23ありますので動作保証されず、ご指摘の事象が発生するようです。
ちなみにサイトのメニューを半分に減らして実行したところ、状態は正常に保持されました。
どこまで正常に動作するかは未確認ですので実際にお試しになってください。

管理画面でログイン画面に戻るのは、どちらも同じサーバであり、さえらさんのブログサイトを参照している時にcookieを消費してしまうのでログインのcookie情報が消滅するためと思われます。
なおcookieを20以上使える(ように見せかける)技もあるようですが、現在のところは対応できておりません。

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

[10] Posted by yujiro : November 16, 2004 11:47 PM

なるほどぉ、そうなんですか。よぉ???くわかりました。メチャメチャ納得しました。いくつかをまとめて一つのIDにして数を減らすなどして対処したいと思います。毎日あれこれ勉強になりますぅ、ありがとうございます。

[11] Posted by さえら : November 16, 2004 11:56 PM

>さえらさん
どういたしまして。
私も勉強になりました(ってどこかで書いたような…)。

[12] Posted by yujiro : November 17, 2004 12:36 AM

毎晩あれこれとすみませんです。今、サイドバーをじぃ????っと見つめて考えてたんですけどぉ・・・どれとどれをくっつけようかな、とか。だけどやっぱりどれも一つずつ別々に開閉できたほうがいいし、せっかく載せたのを減らすのもイヤだし・・・あと、折りたたまないままの項目がいくつかあれば、20以内にできるのですが、スッキリ全部たためるようにしてたいんです。(わがまま。。。)ですので、一部で 折りたたみ状態の保持ができてないけど、初期状態ではほとんどが閉じたままの設定にしてますので、各[+]ボタンは 見たい人は押してくれるだろうし、特に用がなければ開かないだけのことだから、このままにしとこうかと思います。やむやむは11月1日からスタートしていて、12月になったら、カレンダーの月移動の状態保持が またできなくて困っちゃうかな、とか思ったんですけど、そのときまたどうするか考えます。自分の覚え書きという意味合いでも、ちょっとこの件を記事にしておきます。

[13] Posted by さえら : November 17, 2004 12:53 AM

>さえらさん
こんばんはー。
記事拝見させて頂きました。
そういえば月送りの状態保持もありましたね…。
cookieを20以上できる方法は(可能であれば)別途考えたいと思います。
期待せずにお待ちください。(笑)

[14] Posted by yujiro : November 18, 2004 12:15 AM

こんばんは?。ありがとうございます。じゃあ ほんのり期待してます。(=ΦωΦ=)キラーン☆

[15] Posted by さえら : November 18, 2004 12:28 AM

Cookieの20個制限の回避方法ですが、開閉状態別にひとつずつのCookieを使うという方法はいかがでしょう?

一つのCookieにしたらscript自体が繁雑になってしまったので、なんとなくそんな気がします。

[16] Posted by facet : November 18, 2004 5:45 AM

>さえらさん
その光った目が怖い…(冗談です)

>facetさん
ごぶさたしてますー。
なるほど、キーと値を逆にして(値は各メニューの名前が区切り文字でずらずらと並ぶ感じでしょうか)保存するということですね。
ナイスなアドバイス、ありがとうございます!

こんなところで何ですが、カウンタ表示もご利用ありがとうございます!

[17] Posted by yujiro : November 19, 2004 12:47 AM

そうそう。そんな感じです。>キーと値を逆

ウチのは、半角縦棒でズ?ラズラずら。(byとのま)^^

カウンタのアイデア、どうもありがとうございました。

私の暫定公開版は、なんだか変な挙動もあるんですが、まあ、offsetで自由度が高いので適当に対処してね[ハート]という感じでしょうか(笑)

[18] Posted by facet : November 19, 2004 6:19 AM

はじめまして。
サイドメニュー折りたたみにしたいと思っているので、ぜひ参考にさせていただきます。

私のほうで勝手にBlogPeopleに登録しにもかかわらず、相互リンクしていただいてありがとうございました。

[19] Posted by トレノ : November 19, 2004 7:33 AM

>facetさん
こんばんはー。
区切り文字の件、了解しました。
私もカウンタのoffsetはプログラムの解説になってしまうのでお任せです(爆)。

>トレノさん
こんばんは。
はじめまして。
折りたたみの件、不明な点がございましたらご連絡ください(記事のコメント等を参照していただければ解消できるかもしれません)。

リンクの件、こちらこそありがとうございました!
では今後ともよろしくお願い致します。

[20] Posted by yujiro : November 20, 2004 12:29 AM

こんばんは、はじめまして!
ありがたく使わせて頂いております!
他にもいろいろお勉強させて頂いております。ありがとうございます!

ところで、、、。
いきなり質問になってしまいますが、どなたか助言して頂けると幸いです。ド素人なりに考えてみたものの、不可能でした。

サブカテゴリー内のエントリーを、その上の階層のサブカテゴリー(もしくはトップカテゴリー)に包括することは可能でしょうか?例えば、、、

・トップカテゴリー (10)
  ・カテゴリーA (2)
    ・カテゴリーa (2)
  ・カテゴリーB (8)
    ・カテゴリーb (3)
    ・カテゴリーc (5)

このような感じにです。
このような質問をお許しください。
宜しくお願い致します。

[21] Posted by mhe : January 6, 2005 3:16 AM

>mheさん
はじめまして。
記事参照ありがとうございます!
MTが壊れてしまったようで…復旧作業お疲れさまです。

ご質問の件につきましては、確かにこれがあると便利なんですよね。
サブカテゴリー数を親カテゴリーに包括することは技術的に不可能ではないと思いますが、今のところ実現案が浮かんでまいりません。

ということで申し訳ありませんが、全く期待せずにお待ちください。

[22] Posted by yujiro : January 6, 2005 7:02 PM

はじめまして。いつも参考にさせて頂いています。テンプレートも使用させて頂いておりましてお世話になりっぱなしです。

そこで唐突に質問で申し訳ありません。
言葉にするのがとても難しいのですが、カテゴリーのリンクがなにかおかしいのです。
リンク先が
ブログ/archives/_/_/index.php
となってしまうのです。当然カテゴリで分別しているエントリーには飛びません。全部こんなおかしな状態なら1からやりなおすのですが、きちっとリンクを示すカテゴリーもあるのです…。カテゴリーを削除して作り直してもダメでした。どこでどう質問していいか分からず場違い承知でご教授願いたく思いまして投稿しました。

申し訳ありません。よろしくお願い致します。

[23] Posted by 部長 : January 6, 2005 7:02 PM

>部長さん
はじめまして。
テンプレートご利用ありがとうございます。

ご質問の件ですが、管理画面の「ウェブログの設定」クリック→次ページ右上の「アーカイブの設定」クリック→次ページのアーカイブ欄の「アーカイブの種類」が「個別」と表示された行の「テンプレート」欄には「個別エントリーアーカイブ(またはIndividual Entry Archive)」のひとつのみが表示されていますでしょうか?

もしその部分に「カテゴリー・アーカイブ(またはCategory Archive)」が存在している場合は、その「カテゴリー・アーカイブ」の右端にあるチェックボックスの「削除」をチェックして、下の削除ボタンをクリックして再構築してください(個別エントリーアーカイブは残しておいてください)。

設定状態が上記のようでない場合はお手数ですが再度ご連絡頂けますでしょうか。

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

[24] Posted by yujiro : January 6, 2005 8:11 PM

お返事ありがとうございます!
確認してみたのですが「個別」の行には「個別エントリーアーカイブ」のひとつのみが表示されていました。
「日別」「週別」「月別」「カテゴリー」の行は削除しなくて良いのですね?

本当にお手数おかけします。よろしくお願いします。

[25] Posted by 部長 : January 6, 2005 11:09 PM

>yujiroさん

お返事ありがとうごあいます?!
すばらしいレスポンスに驚いております。

そうですか、、、技術的には可能なのですね。yujiroさんに思い浮かばないモノが私に思い浮かぶはずもございませんが、お勉強してみます。それでは(心の中で期待しつつ)気長に待たせてもらいまーす。

これからもよろしくです!!

[26] Posted by mhe : January 7, 2005 12:01 AM

>yujiro様

昨日投稿致しました部長と申します。
質問の件ですが、解決致しました!
お手数をおかけして申し訳ありませんでした。

「アーカイブの設定」にて「カテゴリーのアーカイブファイルのテンプレート」欄に cat_<$MTCategoryID$>.php を記述すると何故か全てのカテゴリーのリンクがうまくいきました。

謎です。自分が無知なだけかも知れませんが…。

ありがとうございました。これからも楽しく拝見させて頂きます。

[27] Posted by 部長 : January 7, 2005 6:14 PM

>mheさん
こんばんは。
いえいえ、こちらこそ。
プラグインがサクッと作れる人なら造作もないことなんでしょうけどね…。

>部長さん
こんばんは。
解決できたようで良かったです!(その部分の確認をさせて頂こうと思っていました)。
それで直ったのが私にもよく分かりませんが…。

また何かございましたらご連絡ください。
それでは今後ともどうぞよろしくお願い致します。

[28] Posted by yujiro : January 8, 2005 12:28 AM

はじめまして。
こちらのスクリプトを利用させて頂き、折りたたみ状態保持をさせることができました。
ありがとうございます。

[29] Posted by かりん : May 14, 2005 9:14 PM

>かりんさん
はじめまして。
ご利用&ご連絡ありがとうございました。
うまくできたようでよかったです。

それでは今後ともどうぞよろしくお願い致します。

[30] Posted by yujiro : May 15, 2005 2:07 AM
コメントする
greeting

*必須

*必須(非表示)


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

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

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

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