サイドバーを折り畳むスクリプト
サイドバー(.sidebar)のマイリストのリスト部分を表示したり隠したりできるようにするjavascriptです。長くなる一方のサイドバーを折り畳んで短くしてくれるような効果があります。
これもIE6で動作してくれなかったのですが、またまた山けんさんのコメントのお蔭で解決することができました。山けんさん、本当にありがとうございます。_(._.)_
ということで、サイドバーを折り畳むスクリプト version 01b (foldSidebarUl01b.js)として公開させていただきます。
http://facet.cocolog-nifty.com/divers/foldSidebarUl01b.js
使い方は、サイトバーのリスト型マイリストのメモ欄（テキスト表示設定済み）などに下記のスクリプトを張り付けるだけです。このスクリプトより前にあるリストを折り畳んでくれます。
<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/foldSidebarUl01b.js"></script>
これだけで動作するはずですが、不具合があればお知らせ頂けると幸いです。現在までに、IE6/winXP、(Firebird 0.7, Mozilla 1.1)/Linux[Mandrake9.2]での動作を確認しました。IE5は（ノートパソコンが故障してしまったため）動作確認できてません。
コメントアウトされて見えない名前を持つリストや、カレンダーのように名前(h2)自体がないものは折り畳みません。また、バックナンバーみたいにリストの名前にリンクが張られているものもやはり折り畳んでいません。
# バックナンバーは、だんだん長くなるのが目に見えてますから、折り畳み対象にしてもいいかなあとも思ったんですが、せっかく専用ページがあるので何らかの形でそのページへのリンクを残さないともったいないなあなんて思ったり……。いいアイデアがあれば是非。
# 前回のスクリプトでは、本文の記事内のリスト(ul)も折り畳んでしまっているようです。一応そういう事の無いようにと思って作成してはいたんですが、記事内でh2の直後にulが来ると折り畳んでしまうような設計だったのは確かなので、今回のスクリプトでは少し修正してサイドバーに限定するようにしてみました。うまく働いてくれていればいいんですが。
念のため、以下にダミーリストを表示させておきます。これが開閉しなければ 閉じてしまっていなければOKということで。
ダミーリスト名（h2要素）
- ダミーリストアイテム１
- ダミーリストアイテム２
- ダミーリストアイテム３
*** 追記 2004-02-03 ***
このサイトはいろいろと実験中のことが多いので、もしかしたら上のリストの状態がいろいろと変わってしまっているかも知れません。御了承下さい。_(._.)_
« 日記／フランステレコム | トップページ | 日記／粉雪 »
「ウェブログ・ココログ関連」カテゴリの記事
- [ココログ] 「記事の公開日時変更をもっと簡単に」するBookmarkletを再びIE6でも動くようにしました(2010.01.29)
- [ココログ] 「ウェブページ」のファイル名を index.html にしてみたら…(2008.09.03)
- [ココログ] コメント入力欄に「（任意）」の文字も！(2008.04.01)
- げ。(2008.01.10)
コメント
この記事へのコメントは終了しました。
トラックバック
この記事へのトラックバック一覧です： サイドバーを折り畳むスクリプト:
» サイドバー折りたたみ -- 実装してみる [観測気球]
サイドバーの折りたたみの件、山けんさんのコメントを参考に、挑戦してみました。 できあがった JavaScript [続きを読む]
» サイドバー折りたたみ！ [ぴっくあっぷ。]
今朝方、 facetさん、tsupoさん双方からサイドバーを折りたたむ [続きを読む]
» サイドバーを折りたたむ術。 [あってもなくても猫のしっぽ]
ぴっくあっぷ。さん経由facet-diversさん、並びに観測気球さんより。 [ [続きを読む]
» 「サイドバーを折り畳む」も完成 [あそびをせんとやうまれけむ]
「「折りたたむ」に挑戦中」で紹介したテクニックがとうとう完成したようです。 時系列で関連記事をリストアップ。 facet-divers: サイドバーを折り返す facet-divers: [続きを読む]
» 便利！サイドバー折り畳みスクリプト [未定。]
観測気球さんとfacet-diversさんが、サイドバー折り畳みスクリプトを開発されました。 観測気球:サイドバー折りたたみ -- 実装してみる facet-d... [続きを読む]
» サイドバーを折りたたんでみました [KOROPPYの本棚]
facetさま、二日連続お世話になってます<(_ _)> 今度はサイドバーのコンテンツを折りたたむスクリプトをお借りしてみました。 機能の詳細は、f... [続きを読む]
» ■サイドバー折りたたみ [ごまめのつぶやき]
やったー、出来たー！ facet-diversさんの記事「サイドバーを折り畳むスクリプト」を読んで、あーでもない、こーでもないと試行を続けたんですがどーもうまくいかない。 [続きを読む]
» 世界記録 (長距離版) [検索日記]
ゆめパパさん、たろー。さんからのトラックバックであの「バットでペンギン」が以前より飛ぶようになったことを知りました。今回のはぐぐるまでもなく、1224.1が世界... [続きを読む]
» バックナンバーを折りたたむ！ [てくてく絵日記]
前にも書いたように、facet-divers さんのサイドバーを折り畳むスクリプトを使わせていただいています。（ありがとうございます。） でっ、バックナンバーを... [続きを読む]
» マイリンク項目のリスト折りたたみ、私にでも出来ました！ [白いツバサ]
新着情報を見て気がついたのではなく、なんとなく ぴっくあっぷさんのＨＰを開いてサイドのマイリンクの項目名が一行だけ書いてあり、頭に＋文字が付いていることに気が... [続きを読む]
» バックナンバーは折り畳まず、別の方法で.. [白いツバサ]
前回はサイドバーを折り畳むスクリプトでお世話になりました。私として残された問題は”バックナンバーは、だんだん長くなるのが目に見えている（一ヶ月毎に一行増える）の... [続きを読む]
» とりあえずサイドバー折り畳み２ [facet-divers]
前回から随分と間が開いてしまいましたが、とりあえずサイドバー折り畳みスクリプトの第二弾を暫定公開します。 サイドバーにある任意の（h2要素をもつ）コンテンツにス... [続きを読む]
» サイドバーの項目の折りたたみ [元祖ウェブログ]
サイドバーで、項目数が多いものを折りたたむようにしました。 facet-dive [続きを読む]
» バックナンバーを折りたたむ！ [てくてく絵日記]
前にも書いたように、facet-divers さんのサイドバーを折り畳むスクリプトを使わせていただいています。（ありがとうございます。） でっ、バックナンバーを... [続きを読む]
本文見出し抽出にサイドバー折り畳みと、連日お世話になっています。
このような素晴らしいツールを使わせていただき、感謝の気持で一杯です。
まだまだ、アイデアは湧き出る泉の如く、のご様子なので、これからも楽しみにしています。
投稿: ごまママ | 2004-01-28 01:27
というわけで、この件のコメントを Tiger さんのところに書いております^^;。
というわけで、なびげーしょ～～～ん。
http://tiger.air-nifty.com/tigers_logs/2004/01/post_85.html
要するに、その人が対象とする読者が納得できるUIでありさえすればいいんですけどね^^;。
投稿: Shin | 2004-01-28 03:57
http://watcher.moe-nifty.com/memo/2004/01/post_29.html
こちらに書いた通り、スクリプトをいじれば
折り畳まない箇所を指定するのは簡単なので、
後はそれを利用者が簡単に選べるようにすれば
よさげですね～。
たとえば畳みたくない要素リストをスクリプト
冒頭で変数に入れるような書き方にしておいて、
「ここをカスタマイズしてください」とか。
投稿: Shin | 2004-01-29 06:11
どうやって「利用者が簡単に選べる」ようにするのかが悩ましいところです。個人的には、スクリプト本体をカスタマイズするのは少々敷居が高いように感じています。そこで、マイリストに埋め込む呼び出しスクリプトの方に変数とか呼び出し関数をつけようかなあと考えていたところでした。両者の差なんてないような気もしますが(^^;。
また、「折り畳みたくない」要素を変数にいれるのも考えたんですが、いっそ「折り畳みたい」要素を指定できる方がストレートで分かりやすいかなと思ったりもしてます。
よい案があれば是非。
# というか、改善は私に向いてないかも。Google窓の時もウンウン悩んでましたし……(^^;。
投稿: facet | 2004-01-29 09:40
私も、デフォルトでは折り畳まないほうが好ましいと思います。
折り畳みたいものを指定できるほうがいいですね。
ただ、初期表示で一番折り畳んでおきたいはずの
BlogPeaple/MyBlogList あたりが定型的な構造
じゃないのでユーザに簡易に選択できるようにする
のは面倒ですねぇ。
しょうがないので、良く使われるものを折り畳み対象
にするコードをがりがりと書いて、コメントアウトし
て提供する、というのが一つの線ですね。
コメントアウトするのは「ある特定の項目を折り畳む」
フラグの初期設定行に限定するのがよりよいでしょうね。
で、「最近の記事」などはもう折り畳めないように
しちゃってもいいと思ったり^^;;。
投稿: Shin | 2004-01-29 18:39
うーん。関数化して呼びだし文をマイリスト側に
書くようにする、というのとどっちがいいかは微妙…。
一方はファイルアップロード、一方はコピー＆ペースト
で、間に編集を挟むのがどっちが楽かはなんともですねぇ^^;。
投稿: Shin | 2004-01-29 18:42
＞ごまママさん、レスがすっかり遅れてしまいました。コメント、どうもありがとうございました(^^)。
確かに「こんなの欲しいよなあ」と思うことはまだありますが、それは、ブログを何気なく見てまわっていたり、ココログルの「教えて」や「募集中」コーナーを見ていて「ああ、確かにこういうのがあったらいいよな」と思うことがアイデアの元だったりするので、新規性は全くないというか、はっきりいってパクリなんですよね。しかも、どこで見たのか覚えてないのでさらにタチが悪かったり……。
でも、今回の２つの技は、望外に喜んで貰えているようで、非常に嬉しいというか、舞い上がってます(^^;。
ということで、これからも小技を公開していきたいとは思ってますが、望ましい技を作るのはとても難しいので、そういうのはShinさんらに任せて、私は善悪気にせずに適当に公開していっちゃおうかななんて思ってたりしているところです（笑）。
投稿: facet | 2004-01-29 23:53
Shinさん、
コメントアウトを使うのはいい手ですね。フラグ化して、変更は初期設定部分に絞る、と。なるほど。
＞一方はファイルアップロード、一方はコピー＆ペーストで、間に編集を挟むのがどっちが楽かはなんともですねぇ^^;。
やっぱり、なんとも、ですよね(^^;。
ただ、私が考えているのは（というか、今まで提供してきた２つ共、実は）、本体をダウン＆アップせずにそのまま使って貰って、マイリストに呼び出しスクリプトをコピペして貰うだけで動作するような形だったので、書き換えてもらう部分をつくるとしても、マイリストに埋め込むスクリプトだけにしたいなあというのが当初からの希望ではあります。（というか、全然伝わってないようなので、改めて自分の文章力のなさに呆れてます（笑）。）
自分向けにチョコチョコっと改造したい人はダウン＆アップすればいいし、面倒だからそのまま使いたいという人は、そのまま呼び出し部分だけをマイリストに埋め込んで貰う、と。これ、凹日記の凹さんが「自分で定義したスタイルシートを使う方法@ココログ その５」で使っていた手法で、おお、素晴らしいと思ったんで真似したんですが、やっぱりちゃんとそう書かないと誰も分かりませんね（笑）。
http://zog.cocolog-nifty.com/murmur/2003/12/__8.html">http://zog.cocolog-nifty.com/murmur/2003/12/__8.html
ところで、サイドバー折り畳み、あんまり役にたちませんね、実際使ってみると。ワレナガラ。
そうそう。最近の記事ですが、確かに折り畳めないようにしてもいいかもしれないとは思うんですが、自分的には何故か折り畳みたい項目だったりします。しかも、MyblogListとかは折り畳みたくない項目だったりします。なぜなら、MyblogListはバナーが中にあるので、折り畳んでしまうとMyblogListのフリー性を損なうことになるような気がしてしまうからです。同様に、アクセス解析を折り畳んでいないのもそれが理由です。
検索窓を折り畳んでいるのは、なんででしょうね(^^;。検索窓は本当はブログタイトルの右に入れたいぐらいなので、全く理に反してますね(^^;。たぶん、バックナンバーにより簡単に辿り着いて貰いたいからかなあという気もしています。自分でもはっきりしないのですが。
それならバックナンバーを一番上にもってきたらどうだと言われるとそれはそうなんですが、でも、バックナンバーよりはやっぱり検索や最新の記事／コメントを上に置きたいというジレンマがあり……。だからこそ折り畳みなんてしようと思ったわけでもありますが。
という具合に、折り畳みたい部分って本当に人それぞれだなあと、Shinさんの記事やいただいたコメント、そして折り畳みを導入されているブログを見るたびに思います。
個人的には全部折り畳みたい。それも偽らざる気持ちです。１クリックの大切さということも分かりますが、スクロールしなくてよいことのメリットも私にとっては同じぐらいの価値を占めていたりします。
が、「折り畳み」は、ページ内検索と相性が悪そうなところも悩み所です。
うーん。やっぱりマイリストも見出しを上部に抽出しようかな。当初手動でやってたあのころの方が使いやすかったような……(^^;。
投稿: facet | 2004-01-30 01:09
なるほど、絶対URL でキャッシュ効果を狙うんですね。
それをすると、密かにバージョンアップが全利用サイトに
反映されるという利点(あるいは欠点^^;)がありますね～。
そしたらやっぱり呼び出し部分を
みたいな形にするのがいいかもですね～。
# パラメタを配列にするのは拡張時の互換性確保のため
どれを(デフォルトで)隠したい/隠したくないの話題に
ついては、まぁ結局オーナーの趣向と、各閲覧者の趣向
に応じて、サイト毎にだんだんと決まって行くでしょう
から、私的にはオーナーによるカスタマイズが出来れば、
という方向性が出たところで収束～、ということで^^;;。
投稿: Shin | 2004-01-30 02:42
<script src="http://...">http://... ">doIt(new boolean[] {true, false, false})</script>
と書いたのにタグ消されちゃったぃ^^;;。
投稿: Shin | 2004-01-30 02:46
開閉の対象となる「タイトル」を、特定のファイル名でアップロードして貰うというのは辛いかなぁ。
ファイル中は
最近の記事
最近のコメント
とかだけ入れて貰って、fold.txt という名前で、blogフォルダにアップロードして貰うわけです。これくらいなら、大して敷居は高くないかと。
そのファイルがあるときはそのファイルの指示に従って、そのファイルがないときは、今と動作を変えないということで、上位互換性も確保すると (^^;
投稿: Tiger | 2004-01-30 05:36
Shinさん、
呼び出し関数の引数に配列を使えるんですねぇ。なるほど（…って、私の知識はこの程度です^^;）。これなら変数が増えても減っても使えますね。ふむ。配列か。
フラグにする点は、考えてみたんですが、やめておこうかなと思ってます。「このフラグ、なんだっけ？」ってことになりそうで……めちゃくちゃ記憶力が悪いんです、私(^^;。（なので、変数名やファイル名も冗長。ついでに文も冗長。）
どれを折り畳むか折り畳まないかは、ユーザが選べるといいかもしれませね。デフォルトでは（どうせスクリプトが働く前は全部表示されているわけですから）全て表示しておいて、マイリストの最上部ぐらいに「折り畳む」とかいうボタンを付けておいて（「折り畳む」じゃ分かんないとは思いますが^^;）、あとは自由に使って貰うという感じ？
あと、おはるさん（だったかな）が言っていたように、開閉を記憶してくれると有難いですね。そうなると、Cookieでしょうかね。まあ、この機能は私の希望でもありますが（ああ、もっとサクサクっとつくれたらなあ……）。
デフォルトでどれを開閉しておくかは、……収束します。オーナー任せということで(^^;。
＞Tigerさん、
これ、私的には結構いい感じです。アップロードするというのが何故か抵抗があるんですけど、折り畳み対象のタイトルをベタで（引用符なしで）書けるところがいいですね。単純に列挙するだけというのは賛成です。それが結局は一番明快かなと思っていたところでした。
しかし、考えてみれば、あまり敷居の低さにこだわる必要はないかもしれませんね。そもそも、マイリストに埋め込む時点ですでに十分敷居が高いですからねぇ。
ということで、ちょっと実装の方も少し考え始めてみたいと思います。いろいろと貴重なアイデアをありがとうございます。_(._.)_
# というか、この議論を見た人、誰かサクッと公開してくれないかな。と他力本願。どちらかといえば他の小技を作りたい年頃なのです（笑）。あ。でも、今日の午後から一週間、かなり時間的余裕があるので、またいろいろ試行錯誤してみようかなと思ってはいます。娘がいないと自由〜(^^)。
投稿: facet | 2004-01-30 10:52
初めまして！おきなわといいます。
facetさんのサイドバー折り畳み術をぜひ使わせて頂きたくコメントいたします。
いろいろ初心者な者でして９０パーセント以上はチンプンカンプンですがテストしてみましたらごちゃごちゃした私のココログが少しすっきりしました。
マイクリップと更新順ココログが折り畳めませんでしたが何かミスったのでしょう。あんまり気にもなりませんが・・
よろしくです！
投稿: おきなわ | 2004-08-12 05:28
おきなわさん、いらっしゃいませ。
今、scrapbookの方を拝見させていただいたのですが、折り畳みスクリプトをもう設置していらっしゃらないようなので、どこが問題なのかわかりませんでした。今日からnetに復活していますので、設置してみた状態で改めてご質問いただけたら幸いです。
ただ、ひとつだけ、このスクリプトは、設置した部分より上（HTMLソース的に前）の箇所しか折り畳むことができませんので、もしかしたらそれが原因だったかもしれません。
投稿: facet | 2004-08-15 00:42
facetさん！ご丁寧にありがとうございます。
ココログにもアドバイスのコメントを嬉しいです。
facetさんの許可を頂いてから設置をと思っていました。
許可はＯＫなんですね（笑）？今日中に試してみます。
お墓参りとかいろいろ予定がありますのでたぶん夕方以降に
なると思いますが・・たぶんうまくいくでしょう。
また、いらしてくださいね！楽しみにしております。
投稿: おきなわ | 2004-08-15 01:32
＞facetさんの許可を頂いてから設置をと思っていました。
＞許可はＯＫなんですね（笑）
もちろんOKですよ〜（そもそも公開した時点で既に拒否できないですしね(^^;）。
せっかくのインターネットですから、リンクフリー、コメント＆トラックバックもフリー、スクリプト設置もフリーということで、ご自由に〜。(^^)
こんな拙いスクリプトですが、お役に立てば何よりです。「サイドバー折り畳み2」の方も、ちょっと面倒ですが、もし必要でしたらどうぞ。
http://facet.cocolog-nifty.com/divers/2004/03/post_21.html">http://facet.cocolog-nifty.com/divers/2004/03/post_21.html
投稿: facet | 2004-08-15 10:15
facetさんお元気ですか？
折り畳みできました。なんか成功ぽいです。
一度右のリストを全部左に移動してから試してみようと思いましたが多すぎて移動できませんでしたので右サイドは折り畳まないでもいいリストを並べればいいと逃げました。
あと、デザインを二列にしてみてマイリストをつくりなおしてみようか？とにかくもっとうまく設置できるようになりたいです。
だらだらと長くなる左リストだけでもいいかな？とも思っています。あとはもうちょっとお勉強してオリジナルティを出したいですね。でもこんなの作れるfacetさんてすごい！私にとっては今でもチンプンカンですよ。感謝です。
facetさんはブログ人のほうでも感謝されていますね！
投稿: おきなわ | 2004-08-28 13:37
おきなわさん、コメントありがとうございます。とりあえず折り畳めたようで、何よりです。(^^)
…が、まだ思ったようには折り畳めてない御様子。そこで、HTMLソースを拝見させていただきました。
まず、設置していただいたスクリプトですが、この記事にあるスクリプトではなく、「サイドバー折り畳み２」の方のようですね。
また、スクリプトの設置場所が、右サイドバーの下方にあるマイリスト：「沖縄関係リンク」であることを確認しました。ということは、それ以降に配置されているリスト（「沖縄関係リンク」「よく行く素材屋さん」「My Clip」）以外は全て折り畳めるはずなんですが…。説明が分かりづらくてすみません。_(._.)_
カスタマイズのポイントは、「pattern」で始まる三つの行で、それぞれ以下のような役割があります。
一つ目のpattern：折り畳みボタンを付けるところ
二つ目のpattern：折り畳むところ
三つ目のpattern：リスト内の項目数を表示するところ
ということで、たとえば、以下のようにカスタマイズしてみてください。
pattern = "最近の|バックナンバー|blog|ツール|最近聴いている｜こんなの聴いてきた|沖縄関係リンク|よく行く素材屋さん|My Clip";
makeSwitchesBy(pattern); // （この行より上にあるpatternが、いわゆる一つ目のpatternです）
pattern = "コメント|トラックバック|バックナンバー|blog|最近聴いている｜こんなの聴いてきた|沖縄関係リンク|よく行く素材屋さん|My Clip";
foldContentsBy(pattern); // （同上）
pattern = "最近の|バックナンバー|最近聴いている｜こんなの聴いてきた|沖縄関係リンク|よく行く素材屋さん";
countItemsBy(pattern); // （同上）
また、「沖縄関係リンク」以降も折り畳む場合は、スクリプトを他の場所に移してください。おすすめは、「お役立ちツール」かな？ ここにスクリプトを移して、右サイドバーの一番下に配置してみてください。
長くなりましたが、以上です。もしこれでダメだったら、ダメな状態のまま、どうしたいのかを含めて御連絡いただければ、また改めてうかがいます。
それから、ついでですが、上手く折り畳めたら、「MyblogList」や「BlogPeople」も右サイドバーに配置した方がいいかもしれません。左サイドはできるだけ軽くしたほうが、本文の表示までにかかる時間が短くなって吉ですよ〜(^^)
投稿: facet | 2004-08-28 17:05
faceｔさん、おはようございます。
こんなにご親切にアドバイスを恐縮です。
丸ごとメモ帳にコピーしてゆくっり読んでみます。
投稿: おきなわ | 2004-08-29 01:50
相変わらず長くてすみません。(^^;
投稿: facet | 2004-08-29 10:20