サイドバー折り畳み２：状態保持機能付き

サイドバーにあるリストタイトル部分にボタンを付け、リストを開閉できるようにするスクリプトです。今回のスクリプトは、以前公開した「サイドバー折り畳み２」に「状態保持」機能をつけた、ココログやブログ人などのTypepad系ブログ用スクリプトです。

例えば『今回はコメントを書き込んだので、次回は「最近の記事」じゃなくて「最近のコメント」を展開しておいて、そこを一見でチェックしたいなあ』...といったご要望に答えることができるかと思います。

（追記）リストタイトルが画像に置き換わるタイプのもの（ココログの新しいテンプレート（リッチテンプレートやスペシャルテンプレート）の一部）には未対応です。ゴメンナサイ_(._.)_

☆古いブラウザでは動作しない場合があります（たとえば、IE4以前、Opera6以前、Netscape4以前、MacIEなど）。ご了承ください_(._.)_

▼特徴

これまでの「サイドバー折り畳み２」では

- 折り畳みボタンを設置する箇所を、任意に指定できる
- 初期開閉状態（ページ読み込み時にどれを折り畳んで表示するか）を指定できる
- リスト内の項目数を表示できる

という感じでしたが、それに加えて今回は、

- 状態保持ができる（一度でも訪問していただいた人のブラウザに、サイドバーの最後の開閉状態が保持されて、次回訪問時やブログ内ページ移動時に、同じ状態で閲覧開始できる）

という機能をつけてみました。

# 状態保持にはCookieを利用しています。Cookieの効かない環境下のブラウザや、初回訪問時は、ブログオーナーが指定した初期開閉状態が適用されます。

▼設置方法

takoさんが分かりやすい設置方法を書いてくれました（ありがとうございます！）ので、そちらをまずご覧下さい。

初めてのココログフリー・カスタマイズ: 第13回：サイドバーをリストごとに折り畳んでみよう

takoさんの記事の手順で動作しなかった場合には、こちらへご連絡ください。上手く動作しないままの状態でこちらまでお知らせくだされば調査に伺います。

---

◆このサイドバー折り畳みスクリプトを設置するには、下記のコードを、HTMLを記述できる場所（ココログではメモタイプのマイリストのメモ欄など）にコピー＆ペーストして反映させてください。

★ただし、このスクリプトを設置したマイリストは、折り畳みたいリストより下（HTMLソース的に後）に配置する必要がありますので、適宜配置を調整してください。（ココログなどの場合、サイドバーのコンテンツの「並び替え」を使って配置調整できます。）

# 前回のバージョン(foldSidebar02a.js)を設置されている方は、「02a」のところを「02c」に書き換えるだけでOKですが、仕様変更がありますので、御注意下さい。

以上で動作するはずです。

☆わからないよ〜／動作しないよ〜という場合は、原因調査に伺いますのでお気軽にどうぞ(^^)。

# ダメなままの状態でご連絡下されば問題解決が早くなる可能性が高まりますので、もし宜しければ、そのままの状態でご連絡ください。

# 下記のコード例では、日本語版Typepad系ブログに共通してありそうなリストだけに折り畳みボタンが付くようになっています。また、折り畳みボタンの付いたリストのうち「最近の記事」以外が折り畳まれた状態で表示されるようにしてありますので、まずここまでで動作状況をご確認いただければ良いかと思います。

<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/foldSidebar02c.js">
</script>
<script type="text/javascript">
<!--
foldMark = "-";
foldTitle = "close";
unfoldMark = "+";
unfoldTitle = "open";
switchStyle = "float:right;margin:0;width:1.4em;padding:0;height:1.4em;line-height:1em;text-align:center;text-indent:0;";
labelStyle = "letter-spacing:0.1em;";
counterPrefix = "(";
counterPostfix = ")";
counterStyle = "margin-left:2px;letter-spacing:normal;color:silver;";
foldBroadly = true;
//
pattern = "最近の記事|最近のコメント|最近のトラックバック|バックナンバー|カテゴリ|更新|blog";
makeSwitchesBy(pattern);
//
pattern = "最近のコメント|最近のトラックバック|バックナンバー|カテゴリ|更新|blog";
foldContentsBy(pattern); 
//
pattern = "最近の記事|最近のコメント|最近のトラックバック|バックナンバー|カテゴリ|更新";
countItemsBy(pattern);
//-->
</script>

◇なお、このスクリプトは、上述の通り、設置した場所より上にあるリストしか折り畳むことができませんので通常できるだけ下に設置することになると思いますが、折り畳み対象に読み込みの遅いリストがあると折り畳みに時間がかかって使い勝手が悪いと感じる場合があります。この問題に対処するため、上記のコードを複数回に分けて設置するという方法があります。その方法は、また追って記事を書く予定です。詳細は下記のリンク先をご参照ください。

→サイドバー折り畳み２：動作遅延対策

▼注意事項

★TypePadのバージョンアップに対応するため、今回のバージョンから、複数回設置する場合は最後に設置したコード以外の foldContentsBy(pattern); の所を foldContentsBy(pattern,"continued"); と書かなければならなくなってしまいました。申し訳ありませんが、ご了承ください。_(._.)_

★2005-12`にブログ人にて仕様変更があったため、ブログ人での設置方法が変更になりました。以下のリンクをご覧下さい。

→[f-] 「サイドバー折り畳み２」の、ブログ人2005-12版HTMLへの対応方法？

☆上記のコードでは、簡便のため、当ブログにアップロードしたスクリプト本体（foldSidebar02c.js）に直接リンクして使用するようになっていますが、ココログ以外の場合で、ココログのサーバの稼働状況の影響を受けることを懸念される場合には、その二つのファイルをダウンロード＆アップロードしてお使いください。

# その場合は、上記のコードの最初の二つのscriptタグのsrc属性値を、アップロード先に変更することもお忘れなく。

☆「ファイルマネージャー」を使ってアップロードするとファイル名が全て小文字になってしまう場合があるようです。その場合は、src属性値内のファイル名も小文字に変更してください。

foldSidebar02c.js → foldsidebar02c.js

▼カスタマイズのしかた

上記コードのコピペだけでご希望通りにならなくて、御自分のブログにあわせてカスタマイズしたい場合は、三つの「pattern="...";」という行がポイントです。

◆一つ目の、makeSwitchesBy(pattern); の上にある pattern="..."; の...部分で、折り畳みボタンを付けたいリスト名を指定しています。

ボタンを追加したいリストがある場合は、そのリスト名を半角縦棒(|)で区切りつつ書き加えてください。
逆に、不要なリストがある場合は、該当のリスト名と余分な半角縦棒を消してください。

リスト名の代わりに一部にマッチするキーワード（例：「更新」、「blog」）を使うこともできますが、お薦めはしません。

# 例えば、blogというキーワードで、MyblogListとBlogPeopleの両方のリストに折り畳みボタンが付くようになっています。不要な場合は、この最後の「blog」というキーワードと区切りで使っていた半角縦棒を消します。また、どちらかだけ、例えばMyBlogListだけを折り畳みたい場合は、blogというキーワードをMyblogListに変更します。...という風にちょっとややこしいかもしれません。

☆引用符内に改行が含まれていると、動作しませんのでご注意ください。（この制限は、全ての引用符において適用されます）

☆半角縦棒は、二つ重なったり、最初と最後に残らないようにしてください。これが残っている場合は、全てがボタン設置対象になってしまいます。

☆リスト名に半角記号が含まれている場合、稀に上手く動作しない時があります。その場合は、コメントいただければ幸いです。

# 今回のバージョンから、半角記号の扱いを変更しましたため、patternに正規表現は使えなくなりました。御了承下さい。

◇patternの上にある foldMark=〜とunfoldMark=〜の部分で開閉ボタンのマーク(+/-)を指定しています。お好みでどうぞ。

◇開閉ボタンのtitile属性に open/close を設定してみました。上記コード内の foldTitle/unfoldTitle の部分を編集することでカスタマイズ可能です。

◇また、switchStyle=〜 や labelStyle=〜 の部分で、ボタンやリスト名のスタイルを設定しています。

例えば、折り畳みボタンは、本当はリスト名の頭（左）についているのですが、デフォルトでは右にfloatさせるようにしています。ここは、CSS記法ですので、お好みにあわせてどうぞ。

# switchStyleでfloat:rightを指定して右に飛ばすと、リスト名のスタイルが変わって（左寄せに）なってしまうので、ボタンだけじゃなくてリスト名自体のスタイルも変更で切るように、labelStyleも設けてみた、という感じです。

# 今回のバージョンから、switchStyleの部分を変更して border: outset 1px silver; にしてあります。これは、ウチのOpera 7.5ではボタンの枠が見えず分かり辛かった事に対する対応です。

◇ボタンやリスト名などのスタイルを外部ファイルやカスタムCSSなどの独自CSSでまとめて管理することもできます。セレクタは、.sidebar h2 button や .sidebar h2 label です。

☆ただし、switchStyleやlabelStyleで指定したプロパティは優先されてしまいますますので、外部ファイルやカスタムCSSなどを用いる場合は、switchStyle = ""; または/かつ labelStyle = ""; としてください。

◆二つ目の、foldContentsBy(pattern); の上にある pattern="..."; の...部分で、ページを読み込んだ時に折り畳んでおきたい箇所を指定します。

書き方は、一つ目のpatternと同様です。

◇スタイルは、一つ目のpatternの上で設定した通りですが、外部CSSファイルやstyle要素を使えば、ボタンやリスト名のスタイルを開閉状態にあわせて変化させることも可能です。

CSSセレクタは、

-　折り畳み状態： .sidebar h2.folded button
-　展開した状態： .sidebar h2.unfolded button

等です。

★規約改正により、ココログのベーシックコースではロゴの改変が認められない旨が追加されています（→2006-03-28の規約）。ベーシックコースの方は、「ココログからのお知らせ」をこの二つ目のpatternに指定しないよう、ご注意ください。また、フリーの方も、広告を消してはいけないので、ここは隠さないようにしてください。

◆三つ目の、countItemsBy(pattern); の上にある pattern-"..."; の...の部分で、リスト内の項目数をカウントして表示させたい箇所を指定します。

ここも書き方は同様です。

折り畳みボタンを付けていないところでも指定することができます。

この機能が不要な場合は、countItemsBy(pattern);の行頭に // を追加すれば無効にできます。

カウント数は、リスト名の直後に (10) という感じで追加されます。

◇このカウント表示部分の前後の記号やスタイルも変更できます。それぞれ、counterPrefix, counterPostfix, counterStyleで始まる行で指定しています。

◇counterStyleに対応するセレクタは、.sidebar h2 span.counter です。

☆ただし、外部ファイルやカスタムCSSによる独自CSSをご利用の場合は、counterStyle = ""; としてください。

★「最近のコメント」のツリー化スクリプト（「ふろむにぅじぃ 」のtakkyunさん作）を設置されている場合、「最近のコメント」が上手くカウントできていない場合があります。正しく「(10)」とカウントさせるには、ツリー化スクリプトの設置場所を本スクリプトより下になるよう、管理画面で調整してみてください。# 難しい場合は、コメントいただければ。

----

...という感じでやっと正式公開にこぎつけました。相変わらず記事が長くてスミマセン(^^;

今回のfoldSidebar02c.jsは、公開前の最後の段階でCookie周りに大きな不具合が見つかってしまって大幅な変更を加えたため、まだ十分に検証できていないこともあるかもしれません。不具合の御報告や御意見、御感想など、いただければ幸いです。

また、前回の動作検証以来バージョンでは「pattern2FoldSidebar」という名称のCookieを残すようにしていたのですが、最終的に「unfoldPattern」という名称に変更しています。公開後に、大きな不具合が見付かったため、結局、「pattern2FoldSidebar」という名称のCookieを使用することになりました。それに伴い、動作確認にご協力いただいた方々のブラウザにはpattern2FoldSidebarunfoldPatternという名称のCookieが残ってしまっていることがありますが、有効期限を30日に設定してあったことと、たった一つであるということから、それを消すためのスクリプトはあえて組み込みませんでした。一ヶ月間、不要なCookieが残ってしまいますが、御了承いただければ幸いです。

----

最後になりましたが、今回の状態保持機能を付加することができたのは、「小粋空間」のyujiroさんの記事のお蔭です。再掲しつつ、感謝の意を表したいと思います。本当にありがとうございました(^^)

→小粋空間: サイドメニュー折りたたみ状態保持スクリプト

また、著作権に関して、yujiroさんとのやりとりがありましたので、今回のバージョンは、それについても一応明記しておきたいと思います。ただ、これも不十分な記述ですので、修正していきたいと思っています。アドバイスいただければ幸いです。

▼スクリプトの著作権について

foldSidebar02c.jsに関しては、「スクリプト内に他の方の作であると明記してある部分以外のだいたい」と「全体」としてはfacet作ということでお願いします。

というのも、どこかで見掛けたようなスクリプトが何箇所か混じっていることかと思いますので(^^;。自分でももう出処がよくわかりませんので、もしご存知の方がいらっしゃいましたら、是非ご連絡ください。

著作者人格権だけは保持しようと思っていますが、この02cの改変は、ご自由にどうぞ。

# そもそも、まともな中身ではありませんので、もっといいスクリプトにして教えてくださいと言いたいぐらいなものです(^^;

myFunctions01a.jsの方は、ライブラリみたいなものなので、著作権は放棄しますす。というか、すでにあるでしょう。特に、_getInnerText()という関数の部分は、明らかにどこかで貰って来たものです。出所が不明なので、分かり次第明記する予定です。ご連絡いただけても非常に有り難いです。

また、foldSidebar02c.jsを含むこの「サイドバー折り畳み」を再配布するようなことがもしありましたら、再配布するためのページおよびスクリプト内に、この記事のURLかスクリプトのURLを書いておいてください。ご連絡は不要ですが、いただければもちろん嬉しいです。改変バージョンを再配布する場合は、参考にさせていただきたいので(^^;)、是非ご連絡を。