とりあえずサイドバー折り畳み２

※ この版はもうメンテしていません。
以下の「状態保持」機能付きの版をご利用ください。
# 状態保持機能をOFF(*)にすれば、同じ動作になりますので。

----

* こんなの↓も作ってみました。

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

----

前回から随分と間が開いてしまいましたが、とりあえずサイドバー折り畳みスクリプトの第二弾を暫定公開します。

サイドバーにある任意の（h2要素をもつ）コンテンツにスイッチボタンを付け、折り畳みができるようになります。折り畳むか展開したままにするかといった初期状態も選べます。

* 特徴

今回の変更点は、以下のような感じです。

• 折り畳みスイッチを設置する箇所を指定できるようにした
• 初期状態を折り畳みにする箇所を指定できるようにした
• 折り畳みスイッチとしてbutton要素を採用してみた
• 呼び出しスクリプト側でスタイルを指定できるようにしてみた（不具合あり）
• 呼び出しスクリプトを分割して複数回呼び出せるようにしてみた（遅延対策）
• リスト内の項目数を数えて表示してくれるようにしてみた（別スクリプトとして分離したので別記事で書きます）（やっぱり戻して統合しました：2004-03-15）

* 動作状況

InternetExplorer6 & Opera7.23 /[Windows XP], Firebird0.7 & Netscape7.1 /[Linux (Mandrake 9.2)]で動作を確認しました。（h2要素のスタイル指定がうまく反映されていなかったり、Opera7.23でスイッチがボタンじゃなく小さくなったりしてますが、動作自体は問題ないようです。）

（追記 2004-05-23）
Safari 1.1 [Mac 10.3]でも動いているそうです。Konquerorでは、相変わらずボタンさえでてきてくれません（どうもスクリプト本体最初の方にあるdocument.getElementsByTagName("H2").lengthが0になってしまっていて、それ以降の処理が全くできていない様子）。

Opera 6.05 [Win] や Mac IE もダメだそうです。

* 設置方法

設置は、マイリストです。テキスト表示に設定した任意のマイリストのメモ欄に、以下のスクリプトをコピー＆ペーストし、ご自分の好みやテンプレートに合わせて適宜カスタマイズしてください。

（追記 2004-05-09）
このスクリプトは、設置したマイリストより（HTML的に）前にあるコンテンツしか折り畳むことができません。なので、なるべく最後の方に設置してください。
　
ただし、読み込みが遅い項目の後に設置してしまうと使いづらくなってしまうことがありますので、読み込みが遅いコンテンツの前後に分けて呼び出しスクリプトを設置することで対応できるようにしています。詳しくは、後述の動作遅延対策を御参照ください。

<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/myFunctions01a.js">
</script>
<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/foldSidebar02a.js">
</script>
<script type="text/javascript">
<!--
foldMark = "-";
unfoldMark = "+";
switchStyle = "padding:0px;margin:0px;width:1.4em;height:1.4em;line-height:1em;text-align:center;float:right;";
labelStyle = "letter-spacing:0.1em;";
//
pattern = "最近の|カレンダー|バックナンバー|カテゴリ|contact|検索|scripts|blog";
makeSwitchesBy(pattern);
//
pattern = "コメント|トラックバック|カレンダー|バックナンバー|カテゴリ|contact|scripts|blog";
foldContentsBy(pattern);  
//
counterPrefix = "(";
counterPostfix = ")";
counterStyle = "letter-spacing:normal;color:silver;";
//
pattern = "最近の|バックナンバー|カテゴリ|contact|検索|Recently Updated Weblogs|ココログ|scripts";
countItemsBy(pattern);
//-->
</script>

（追記 2004-06-19）
上記のswitchStyleの部分が間違っていたので修正しました。

一つめのpatternで折り畳みスイッチを設置する箇所を指定し、二つめのpatternでページ読み込み時に折り畳み状態にしたい箇所を指定、三つめのpatternでリスト項目の数を数えたい箇所をします。

patternは、コンテンツの名前（もしくはその一部）を半角縦棒(|)で区切って指定します。patternの行を記述しないと、この呼び出しスクリプトを埋め込んだマイリストより前にある、H2要素をもつコンテンツ全てにスイッチがついたり折り畳まれたりします。

設置自体は以上で完了です。

なお、リストの名前がコメントアウトされたマイリストは、折り畳み対象外になっています。

また、例えば、「カレンダー」という文字を含むリスト名（例えば「今月のカレンダー」）をもつマイリストを創ってカレンダーの直前に配置し、上記のようにpatternにカレンダーを含めることで、カレンダーも折り畳めるようになります。

----

* カスタマイズ

上記の呼び出しスクリプトは、今わたしが使っているTypepad風テンプレートに合わせてスタイルを調整してあります。折り畳みスイッチを小さくして正方形にしたり、右寄せしたり、下線の表示を状態のスイッチに伴って変化させたりしてます。テンプレートによっては不具合があるかも知れませんので、適当にいじってカスタマイズしてください。

カスタマイズ方法は二つです。

一つ目は、上記の呼び出しスクリプトのpattern以外の変数を調整する方法です。

変数switch...は、スイッチボタン（button要素／.switch）に対する指定、label...は文字の部分（「最近の記事」など。label要素/.switch-label）に対する指定、heading...はそれらを包含している見出し要素（h2要素）に対する指定です。

ついでに折り畳みスイッチの記号（+/-）もカスタマイズできるようにしておきました。

（追記 2004-03-16）
リスト名の部分（h2）のスタイルを定義していた下記の３行は当面はずすことにしました。初期状態でのスタイルの反映がうまくいかないためです。
headingStyleFolded = "border-bottom:none;";
headingStyleUnfolded = "border-bottom:solid thin gray;";
headingStyleCommentedOut = "border:none;";

また、counter...が項目数を数える部分の指定で、Prefixが前置記号、Postfixが後置記号、StyleがCSSです。

countBroadlyというのは、li要素を持たないコンテンツ（メールを送信、XML連携、ブックマークに加える等々）を折り畳んだ場合に、それらを数えるかどうかの指定で、trueにすると数え、falseにすると数えません。

（追記 2004-07-08）
あまり役にたたないので
countBroadly = true;
の行もはずすことにしました。(^^;

二つ目はstylesheet（styles.cssなど)に手を加える方法ですが、この方法を使うためには、上記の...Style...という文字が含まれる変数の行を消去してからCSSに下記のような感じで追加してください（確認してませんが、たぶんそれでOKだと思います）。こちらは、スイッチ記号や項目数前後の記号の変更や、コメントアウトされたコンテンツ見出しのスタイル変更などには対応していません。

.sidebar h2 .switch {
	padding: 0px;
	margin: 0px;
	width: 1.4em;
	height: 1.4em;
	line-height: 1em;
	text-align: center;
	float: right;
}
.sidebar h2 .switch-label {
	letter-spacing: 0.2em;
}
.sidebar h2 {
	letter-spacing: normal;
	border-bottom: none;
}
.sidebar h2.folded {
	border-bottom: none;
}
.sidebar h2.unfolded {
	border-bottom: solid thin gray;
}

----

* 動作遅延対策

前回の折り畳みスクリプトでは、読み込みに時間がかかるコンテンツの後に呼び出しスクリプトを置くと、ページを読んだ時しばらくしてからパタパタと折り畳まれてしまい、せっかくクリックしようとしたリスト項目が消えてなくなってしまってハラダタシイことがありました。

そこで、今回は、そういう遅延の原因となっているコンテンツの前後に分割して呼び出しスクリプトを配置できるようにしました。たとえば、私のサイトの場合、最初の呼び出しスクリプトが上記のような感じになっていて、最後の方でもう一度、下記のような呼び出しスクリプトを書いています。

<script type="text/javascript">
<!--
pattern = "Recently|ココログ|List|scripts";
makeSwitchesBy(pattern);
foldContentsBy(pattern);
//-->
</script>

----

* 注意点

予想外のものまで折り畳んでしまうことがあるかもしれませんが、その場合は、折り畳みたくないコンテンツの直前にダミーのマイリストを配置してみてください。

# これは、カレンダーなどのH2要素を持たないコンテンツも折り畳めるようにしたかったので、「次にH2要素が現れるまでの全てを折り畳み対象とする」という仕様にしたためです。

* 補足

myFunctions.jsというスクリプトの呼び出しは部分は、foldSidebar02a.jsを呼び出すより前であればどこに設置してもOKです。

# myFunctions.jsは、私のスクリプトで何度も使いそうな関数を抜き出してみたものです。今回はこれを改良することでIE6でもCSSがうまく反映されるようになったんですが、まだまだ改良の余地がありそうです。

外部スクリプト本体(foldSidebar02a.js)は、ダウンロードして改変し、ご自分のサイトにアップロードして使っていただいても結構です。もちろん、ダウンロードせずに呼び出しスクリプトだけを使用していただいても結構です。後者の方が設置は楽ですが、もしかしたら私がファイルを修正したり、このココログが消えてしまったりすることもないとは言えませんので、その点はあらかじめ御承知ください。

----

不具合などの情報やご意見、ご感想はいつでも募集中＆大歓迎です。_(._.)_