Bonjour!

« サイドバー折り畳み2:状態保持機能付き | トップページ | 折り畳みで「続きを読む」(軽量化版):差し替えました »

2004-10-12

サイドバー折り畳み2:動作遅延対策

ようやく修正が一段落しました(^^;ので、「サイドバー折り畳み2」の動作遅延対策について書きたいと思います。

このスクリプトは、折り畳みたいリストよりに設置する必要があるのですが、読み込みに時間がかかるコンテンツがあると、折り畳まれるまでに時間がかかってしまって使いづらくなることがあります。

そこで、そういう重いコンテンツの前と後に合計二回とか、左サイドの一番下&右サイドの真中&一番下に合計三回、という風に、複数回に分けて設置できるようになっています。

複数回設置する場合でも本記事にあるコピー&ペースト用のコードをそのまま数回使っていただければ折り畳み自体は動作するようですが、ちょっとだけ問題が残ってしまいますので、それが気になる場合は以下の方法に沿ってお試し下さい。

具体例から書かせていただくと、このブログでは、三回、つまり、左サイドバーの一番下(マイリスト名「<!-- script-LZ -->」のメモ欄)と、右サイドバーの「MY UTILS」の前(リスト「script-R0」)と一番下(リスト「<!-- script-RZ -->」)の三箇所に分けてスクリプトを書いてあり、それぞれ以下の様な感じになっています。

#このコードは生地作成当時のもので、現在はこうなっていませんが、手法自体は同じです。

◆最初の設置箇所のコード例:
リスト「<!-- @bottom left -->」
(隠れてますが、左の一番下)

<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/foldSidebar02c.js">
</script>
<script type="text/javascript">
<!--
foldMark = "-";
unfoldMark = "+";
switchStyle = "float:right;padding:0px;margin:0px;width:1.4em;height:1.4em;line-height:1em;text-align:center;";
labelStyle = "letter-spacing:0em;";
counterPrefix = "";
counterPostfix = "";
counterStyle = "letter-spacing:normal;color:white;margin-left:0.1em";
foldBroadly = true;
//
pattern = "最近の記事|contact|最近のコメント|最近のトラックバック|カテゴリ|バックナンバー|scripts";
makeSwitchesBy(pattern);
//
pattern = "contact|最近のコメント|最近のトラックバック|カテゴリ|バックナンバー|scripts";
foldContentsBy(pattern,"continued"); 
//
pattern = "最近の記事|contact|最近のコメント|最近のトラックバック|カテゴリ|バックナンバー|scripts";
countItemsBy(pattern);
//-->
</script>

◆二番目の設置箇所のコード例:
リスト「スクリプト(JavaScript)」
(右の真中あたり)

<script type="text/javascript">
<!--
pattern = "FYI|検索|カレンダー|scripts|更新";
makeSwitchesBy(pattern);
//
pattern = "検索|カレンダー|scripts|更新";
foldContentsBy(pattern,"continued"); 
//
pattern = "FYI|検索|scripts";
countItemsBy(pattern);
//-->
</script>

◆3番目の設置箇所のコード例:
リスト「<!-- @bottom right -->」
(非表示ですが、実際は右下にあります。)

<script type="text/javascript">
<!--
pattern = "scripts-R0|utils|banners";
makeSwitchesBy(pattern);
//
pattern = "scripts-R0";
foldContentsBy(pattern);
//
pattern = "scripts-R0|utils|banners";
countItemsBy(pattern);
//
//-->
</script>

要点をまとめると、一回だけの設置と違うのは以下の二点です。

まず、最初以外では、コピー&ペースト用の頭にある(myFunctions01a.jsとfoldSidebar02c.jsを呼び出している)二つのscriptタグは不要ということ。これは、ページの読み込み時間の改善に役立つでしょうか...。よくわかっていません(^^;

それから、最後以外で、 foldContentsBy(pattern); の行を foldContentsBy(pattern,"continued"); に変更するということ。これは、最初以外で指定しているリストの開閉状態を保持をさせるためには必須になってしまいました。よろしくお願いします_(._.)_

# したがって、以前の状態保持機能のないバージョン(foldSidebar02a.js)を設置されている方は、"continued"という引数は全く不要です。

----

以上ですが、いかがでしょうか。ご質問下は、お気軽に。

# 他にもまだ細かい機能がついているので、順次記事にしていきたいと思ってます。リクエストも大歓迎です(^^)

« サイドバー折り畳み2:状態保持機能付き | トップページ | 折り畳みで「続きを読む」(軽量化版):差し替えました »

ウェブログ・ココログ関連」カテゴリの記事

コメント

facetさん 今晩は

わざわざ,コメントにてお知らせ頂き
ありがとう。早速ファイルを入れ替えて
使用させて頂きます。

(感想)
スクリプト導入当初より自分の環境においては,2台のPC共に(WIN;Linux)スクリプトに問題も生じず,動作も機敏です,もっとも重たい処理をさせるものは何も使用してないので当たり前ですが,どちらにしても快適に動く以上申し分有りません,開発ご苦労様でした,此からも,ちょこちょことお邪魔しては色々な事を学ばせて貰います‥‥
 (有り難う御座いました)

早速の適用、ありがとうございました。

straycatさんのところは、再アップの必要はあまりなさそうでしたけど、この先、いつ必要になるかわかりませんし、その時に、何が原因で不具合が起こっているのかわからないと私も辛いので、あえてお知らせさせていただきました。

修正追加とともにスクリプトがどんどん大きくなっていて、少し不安だったんですが、快適と聞いて一安心です(^^)

こんばんはー。
今度は私の方がこのアイデア、頂く番になりました。
表示が遅延する事象、何とかならないかな~と悩んでいたので大助かりです。

自サイトの方は現在のJavaScriptを分割して各メニューリストの直下から個別に起動するよう変更したのですが(バッチリ動作しています!)、エントリーにカスタマイズ方法を記載する際はこちらのサイトのご紹介とスクリプトへのURL表示でよろしいでしょうか?
何かございましたらコメント頂ければと思います。
それではよろしくお願い致します。

yujiroさん、こんにちは。

リンクの方は、こちらでOKです。ありがとうございます(^^)

同じ分割設置と言ってもかなり雰囲気がちがいますから、スクリプトへのURL表示は不要です。

リンクも、していただくまでも無さそうですが...(^^;...これはしていただけるなら喜んで。

# 分割、全部外部JSにされたんですね。その方が便利なんですか? これだとテンプレと外部JSの両方をメンテしないといけなくなりませんか? MTをほとんどいじったことがないので的を外しているかもしれませんが。

アドバイスありがとうございます。
出直してきます。(笑)

ココログは、テンプレートをいじれるのがプロコースだけだし(私はベーシックコース)、アップロードもブラウザじゃないとできないので、沢山のファイルをアップするは結構面倒なんですよ。

MTなら、FTPでさくっとアップロードできそうだし、確かにその方が便利かもなあ、と思っただけなんです。

XHTMLだと、外部ファイルの方がよさそうですし。

そんな感じで、外部JSにした決め手はなんだったのかなあ...という単なる素朴な疑問でした。アドバイスだなんて(^^;

なるほど。色々コースがあるのですね。了解しました。
思いたって、しかもよくわかってない状態でしたので、最初に思いついた方法を選びました。
私の場合、自宅サーバなのでアップロードの手順すらなく。(笑)

なるほど。dyndnsですもんね、そういえば。それなら外部ファイルでも全然ハードルが高くないですね。

# 私も自宅サーバはあるんですが、上り128kbps(下り1Mbps)の貧弱ADSLなので、LANではいいですけど、公開Webサーバとしてはちょっと使えない状況(T_T)

facetさん、はじめましてこんにちは。
mieと申します。
サイドバーの折り畳み方法を詳しく書いていただき、
ありがとうございました。
私のblogで早速実践させていただき、なんとか設置でき、
見栄えもそれなりにスッキリしてとても満足です。
私はこういったものに対してほとんど素人=初心者ですので、
これからもfacetさんのところで、いろいろと勉強させていただきます。
本当にありがとうございました。

mieさん、お役にたてたようで何よりです(^^)

ところで、たまにあって、何故だか分からないんですが、入力していただいたURLが http:///.../ だけになってしまってますので、気になる場合は再度ご連絡ください。

# メールアドレスの方は問題ないです。

こんばんは。
サイドバーおりたたみ、ちょうだいしました。
ありがとうございました。
それと今日、こちらの遅延対策を施してみました。
まだ、遅延するほど、内容がないので
あまり意味がなかったかも。。。なのですが。

さえらさん、コメントどうもです。

早速、ぴぃかぶぅの方、拝見させていただきました。

blog listやこうさぎなどの外部サービスを使ってらっしゃるので、遅延対策の意味は十分あったと思いますよ(^^)

小粋空間のyujiroさんのスクリプトが使えると、MyblogListとかの項目数も数えられてもっとよかったんでしょうけどね。

...ん?...って!!!

さえらさん、MTじゃないですか!!!!

いつからMTで使えるようになったんですか!

これは大事件ですよ、お客さん!

...落ち着け>自分(笑)

いや、ホント、このスクリプト、MTにも対応できるようにしたいとずっと思っていて、優先順位が低くて、まだ取り掛かってないだけだったんです。

拙作スクリプトが使えるのは、さえらさんちのMTが新しい(Movable Type 3.11-ja)からでしょうか?

それとも、右サイドバーのdivのidを変更されました?

是非教えてください。_(._.)_

なお、MyblogListなどの項目数表示には、そのうち対応する予定ですのでお楽しみに。

# 忘れてたら催促してください(笑)

こんにちは。先日はブログのほうにコメント&アドバイスありがとうございました。
こちらの記事を参考にやってみました。多分今度は大丈夫だと思います。
頂いたコメントのレスもしてありますので、お時間ある時にでも良かったらいらしてくださいね。
今回はお世話になりました。ありがとうございました。

→佳音さん、こんにちは。
アドバイスというほどのものじゃなくて、スクリプトを公開している身として当然のサポートといった程度ですので。
コメントのレスも早速ありがとうございました。こちらもまた長々とレスしてしまいました…(^^;

facetさん、サポートありがとうございます。早速やってみたのですが、表示されません…。
私がちゃんと理解できていないのかな?ちょっと確認させてくださいね。

・サイドバー折り畳みスクリプトを仕込んである最初のマイリスト
→マイリストを表示したときに(3つのスクリプトを仕込んである中の)一番下に位置しているリストが「最初」とみなしていいのでしょうか。

・メモ欄に、以下のスタイルを追記してみてください
既に書いてあるメモ欄のすぐあとに書けばいいのでしょうか。/scriptのあとstyle type~と続けたのですが違っていますか?

わかりにくい表現になってしまいました(汗)が、よろしくお願いします。

ありゃ、ダメでしたか。今からそっちへ伺います。

facetさ~ん、ありがとうございました!
コメントどおりにやってみたところ、+、-と項目数がきれいに表示されました!
素晴らしいですね~。今回は色々と勉強になりました。お世話になりました(^^)

あ、上手くいきましたか。良かった(^^)
また何かあったらいつでもお気軽に。

こんにちは、私もfacetさんの記事を見て自分のブログに早速折り畳み機能追加してみました。遅延対策も。javascriptって色んなことができるんですね・・・・・。有難うございました。今後もちょくちょく遊びに来たいと思います。

ココログの場合全文が一気に表示されちゃうので、どこかのブログみたいに一部表示で「続きを見る」といった形になったらいいんですが・・・余談でした(笑)

MH-Lotus(Rusty)さん、こんにちは(^^)

『折り畳みで「続きを読む」』ってのも作ってますので、よろしければどうぞ。
http://facet.cocolog-nifty.com/divers/2004/12/html.html

フリーやプロコースだと「続きを読む」が普通に使えるんですけどね。プラスはどうだったかな…。ウチみたいなベーシックはダメですが。

ただ、ベーシックも、3月にフリー並みになるという話もでているので、もしかしたら3月になったら使えるようになっているかもしれません。[どうなることやら]

facet様
随分前にお世話になったmieです。
前回は、ブログURLがなく申し訳ありませんでした。
ところで、今回ブログの模様替えをしたのですが、
どうしても再度バーの折りたたみ部分で、
バックナンバーと最近のコメントの欄にふたつも
数字が出てしまいます(涙)。
何をどうすればいいのかわからないので、
教えていただけないでしょうか?

mieさん、おはようございます。URLの件は全然お構いなく(^^)

さて。

ご質問の件ですが、数字が二つ出ているのだから、スクリプトが二つあるはずです。マイリストをもう少しよく調べてみてください。

メモ欄が小さくて分かり辛いということならば、メモ帳へ貼り付けすればいいだけの話です。

個人的には一目瞭然だと思うのですが、万が一それで解決できなければ、改めてまたご質問ください。

facetさん、コメントありがとうございます。
いろいろと調べたところ、facetさんのおっしゃるとおり、
スクリプトが二つありました。
一覧表示でひとつひとつ確認ところ、発見できました。
いろいろとご迷惑をおかけしました。
そして、アドバイスありがとうございました。
これからもよろしくお願いします。

mieさん、無事解決できたようで良かったです(^^)

マイリストって、見通しが悪くて、結構使い辛いですものね。

結局、何処に何を書いたかを忘れないよう、自分なりに工夫して管理するしかないというわけです。ブログも簡単じゃありませんね。

ところで、せっかくなので、今回は珍しくアドバイスらしいアドバイスなどを以下に。

マイリストの項目を追加する時、リスト項目のタイトルを入れる部分があるはずなので、サイドバー折り畳みスクリプトを置いた項目のタイトル名を

<!-- サイドバー折り畳みスクリプト -->

などとしてみてはいかがでしょうか。そうすると、書いたタイトルがブログには表示されないけれども、管理画面では見られるので、一つ一つクリックして探さなくても良くなり、管理がしやすくなります。お試しください(^^)

# ↑の「<」と「>」は全角になっていますので、半角にしてください。ここのコメント欄では「<!--」の半角が使えないので、しかたなくそう書いています。お手数ですが_(._.)_

では、引き続き、楽しいブログライフを!

PS
今度はメールアドレスが晒されまくってますけど、よろしかったですか?

# このブログのコメント欄のデータって、何故かよく消えてしまうのです。申し訳ありません。

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/1941/1663668

この記事へのトラックバック一覧です: サイドバー折り畳み2:動作遅延対策:

» サイドバーのお片づけ [銀の龍を追いかけて]
サイドバーが長~くなっちゃったので「facet-divers」さんのサイドバーの [続きを読む]

» facet-divers: サイドバー折り畳み2:動作遅延対策 [此処録ANNEX:ココログTIPS]
facet-divers: サイドバー折り畳み2:動作遅延対策 [続きを読む]

» サイドメニュー折りたたみ状態保持の動作遅延対処 [小粋空間]
以前公開したサイドメニュー折りたたみ(改)で折りたたみ状態保持スクリプトを適用し... [続きを読む]

» To Fold Navigations [The Hog's Head]
ナビゲーションの折り畳みを実行しました。 読み込みはやっぱりつけない時よりは遅く [続きを読む]

» サイドバー折りたたみ [ヘタつぎ管理人3号 at リアルタイム雑記]
まず最初に、ココログ( ベーシックプランで以降説明 )もブログ人も TypePa [続きを読む]

» 立秋 [言葉野遊戯]
ついに秋。暦では。 季節の便り、まだ書き終わっていない(T-T)。。 ボケ~っとしていたらすぐに冬が来そう(溜息)。 [続きを読む]

« サイドバー折り畳み2:状態保持機能付き | トップページ | 折り畳みで「続きを読む」(軽量化版):差し替えました »

contact

検索

無料ブログはココログ
2017年11月
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30    

BANNERS