« 清志郎さんお大事に | トップページ | トラックバックが変! »

2006.07.14

風柳さんの新しい目次のスクリプト

「アーカイブページに目次とページングを付加するJavaScript」という、とても便利でココログの足りない点を補ってくれる絶妙なスクリプトが風柳さんの風柳亭 - 別館:書庫のある庵 にアップされています。
ココログで「ページング機能」が使えず、ずっと不満でしたが、これで実現できます。かなり読みやすくなります!

またもや追記:7/31
スクリプトがまた進化しています。たくさんオプション設定がついて、サイドバーに貼り付ける項目を自分でカスタマイズすることにより、タイトル文字など好みの表示に変更できるようになっています。詳しい説明は風柳さんのブログにてご覧ください。

【ココログ】ページ内目次スクリプトの改修と仕様変更

またまた追記:7/16
このスクリプトが、トラックバックやコメントのページング機能も装備してますます高機能化しているようです。

追記:ここのブログでうまく動かないと下記にありますが、風柳さんが、すばやく対応してくださって、ご覧のとおりページング機能つきの目次ができました。
私のように標準カテゴリーを消して、マイリストのリンクでカテゴリーを出している場合でも、きちんと動きます。

風柳様、いつも感謝感謝です。

ここから後の記事にある問題は解決しました。
--------------------------------------------------

ところが 本当に残念なことに、このブログではちょっと問題があって今は使えていません。わーん・・・
これはスクリプトのせいでなく、私が試行錯誤しすぎていっぱいカテゴリーを各記事に付け加えてしまったため、標準のカテゴリー表示をするととんでもないことになるので、マイリスト機能で各アーカイブのインデックスページにリンクを張ったものをサイドバーに「カテゴリー」として出しているせいです。なぜかリンクを一度通すと、カテゴリー名にアンダーバーやスペースを含むものがNGになってしまうのです。ちゃんと標準のカテゴリー表示をサイドバーに出している場合は、どのカテゴリーも問題ありません。
これからシンプルなカテゴリーわけにちくちくと直して、このスクリプトが使えるようにもって行きたいと思っています。すごく便利だから。

追記:ここから下の記事のスクリプトは、このブログでは上記のスクリプトがうまく動いたために現在は使っておりません。でもこれもとても有用なスクリプトだと思います。

とりあえずそれまで、以前ご紹介した風柳さんの過去のスクリプトの「【ココログ】ページ内記事の目次を作るJavaScript(謎のおまけ付き) 」を無理やりページに埋め込むことにいたしました。勝手な改変すみません。風柳さま。
これも、個別記事には出さないようにしてみました。
ページング機能という目玉が使えないのは残念ですが、こちらのスクリプトも、頁内移動と個別ページへの移動ができて、この頁内移動とTOPへのリンクを合わせて使うと結構快適です。目次のウィンドウの高さを制限して、横にスクロールバーを出すようにしてみました。Google Earthプレイスマーク集のような目次がすごく長くなるときのための対策です。
スクリプトの提供ありがとうございます。
(ページングが要らない方にはとてもおすすめです)

 

個別記事に出さない条件を一つ追加。
pathname が '/blog/''index.html' で終わる場合以外は表示しない、と 想定していましたが、
http://bugsbunny.cocolog-nifty.com/
のようにpathnameが '/' のみの場合もあると気づいたので追加です。
→「TOPへのリンクを個別ページで出さない」 

 

|

« 清志郎さんお大事に | トップページ | トラックバックが変! »

ココログカスタマイズ」カテゴリの記事

コメント

バッグスさん、どうもです。
http://furyu.tea-nifty.com/annex/2006/07/javascript_b0ea.html#c8698304
にコメントを書いておきましたので、ご参照下さい。
標準以外のリンクの場合でも対応する方法が書いて有ります。
※少々面倒ですが……

投稿: 風柳 | 2006.07.14 18:24

ありがとうございました。あちらにコメントいたしました。

投稿: バッグスから風柳さんへ | 2006.07.14 21:38

こりずに(^^;スクリプトを改修してみましたのでもし宜しければお試しを。
※詳細はあちらにて

投稿: 風柳 | 2006.07.14 22:56

ひとまず動作したようでほっとしました。
ただ……ページの表示~目次の表示間のタイムラグが目立ちますね(^^;。

少しでも表示を速くしたい場合、

■設置用ソースを右サイドバーのなるべく上の方に貼付け
■ソースを次のように変更
cocoPView.init_onload() ;
の部分を、
cocoPView.modifySidebar = false ;
cocoPView.getArchivesRequest() ;
cocoPView.makePages() ;
に修正。

のようにしてみてください。

投稿: 風柳 | 2006.07.15 01:07

何度もありがとうございます。
さっそくやってみました。ちょっと早くなった気がしますがどうでしょう。Google Earthのカテゴリーは基本的に画像も多く重たすぎるですね・・

なるべく上にということで、マイフォト(これもメモリンクなので)の最初の部分に埋め込んでみました。カレンダーが後のほうが良いかと順序を変えてみました。

しかし、確かにAjaxを使うと表示はきれいですね。でも時々TOPへのリンクが消えてしまう。悩ましいです。風柳さんの目次は頁内移動ができるところがとても素敵なので、TOPへのリンクとぜひとも組み合わせて使いたいところ。
わがままですね・・・せっかくの凝ったスクリプトなのに。

投稿: バッグスから風柳さんへ | 2006.07.15 02:23

Ajaxでのページ読込完了時に任意の関数をコールする処理を追加してみました。

先程の箇所を、

cocoPView.loadByAjax = true ;
cocoPView.onloadFunction = "addBackToTop()" ;
cocoPView.modifySidebar = true ;
cocoPView.getArchivesRequest() ;
cocoPView.makePages() ;

のようにして試してみてください。

投稿: 風柳 | 2006.07.15 03:02

おお、TOPへのリンクが問題なくなりました。すごい!この方が描画はスムーズですね。
でも確かにアドレスが不思議なことになるんですね。Ajaxというのが実はよく理解できてはいないのですが、再描画無しにするりと入れ替えているということでしょうか。ブラウザがこうした技術に対応してくればいいのかな。
というか今気がついたけど、IEがへぼみたいですね。
重ね重ね、本当にありがとうございます。

投稿: バッグスから風柳さんへ | 2006.07.15 11:25

前回コメント続き。
訂正するとまたトラックバック送ってしまうので新たに書きます。
IEが変というのはアドレスのことではなく、Ajaxだからブラウザの戻るボタンの挙動が変なのかと思ったら、オペラやFireFoxではちゃんと戻るボタンが働くのでそういう意味でした。それとも、他のブラウザではAjax自体使えていないのでしょうか?

投稿: バッグス | 2006.07.15 12:00

| 再描画無しにするりと入れ替えている
そうですね。
Ajax(Asynchronous JavaScript+XML)はJavaScriptを使って非同期にXMLデータをやり取りする技術のことですが、目次スクリプトでは、

1. リンクで指定されたURLのページデータを取得(XMLHttpRequest)
2. 1. から必要なデータを抜き出し、現在表示しているページの一部を抜き出したデータ(を加工したもの)で置換。

ということをやっています。

通常のアドレスを指定してページの読込&描画を行う場合と違い、サイドバーなどの共通部分は残したまま必要なところだけを書き替えるため、見た目上比較的スムーズに描写出来ます。

デメリットとして、あくまでページの一部だけを勝手に置換しているわけなので、ブラウザ側は『ページ遷移した』という認識がありません。
『戻る』ボタンが効かなくなるのはこのためです。

実は目次スクリプト内では、Ajaxによりページを書換えた後、location.hash というものを設定しなおして、アドレスを変更した、ということをブラウザに教えようと試みています(アドレス欄に変化があるのはこのため)。

この方法だと、Firefox等ではうまく認識して戻るボタンも効くようになるのですが、IEではNGなのです。

IEで戻るボタンに対応しようとすると、大がかりな仕掛けが必要になってしまうため、今回は断念しました。
(ちなみにうちのサイトではほとんどのページ遷移をAjaxで行っていますが、それでも一応戻るボタンが効くのはIE用の対策を施してあるためです)

投稿: 風柳 | 2006.07.15 15:02

丁寧な説明、ありがとうございます。なんとなく判ったような気がします。

先ほどまでAjaxを効かせていましたが、やはり来る方の操作を考えると戻るボタンが効いた方がいいかな、と元に戻しました。せっかく対応してくださったのに申し訳ないです。

でも私はこれで非常に満足しています。この目次があるのと無いのとでは、来てくださる方に内容のわかりやすさがずいぶん違うと思います。いろんなページを見ていただけると思います。

Ajaxもきっとブラウザでうまく対応してくると思いますし、このような技術があるとわかっただけでも大変勉強になりました。

本当に何度も教えていただいて感謝です。

投稿: バッグス | 2006.07.15 15:37

個別記事のコメント/トラックバックもページング出来る機能を追加してみました。

設置用ソースに、

cocoPView.tbPaging = true ;
cocoPView.showMaxTb = 3 ;
cocoPView.commentPaging = true ;
cocoPView.showMaxCmt = 5 ;

というのを(cocoPView.makePages()よりも前に)追加すると有効になりますので、もしよろしければお試し下さい。

投稿: 風柳 | 2006.07.16 06:15

きちんと表示できてます。
あちらでお返事いたしましたのでよろしくお願いします。

投稿: バッグスから風柳さんへ | 2006.07.16 11:36

バッグスさん、どうもです。

ページ内目次スクリプトに結構前からバグがあって、Windows XP SP2+IE6の組合せだとうまく表示されない、という現象が発生していたみたいです。
とりあえず対策した……つもりなのですが、もしなにかお気づきの点等があればご報告いただけると幸いです。
関連記事:
http://furyu.tea-nifty.com/annex/2006/07/winxpsp2_ee4f.html

ご迷惑をおかけしました。

投稿: 風柳 | 2006.07.23 23:56

コメントを書く



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


コメントは記事投稿者が公開するまで表示されません。



トラックバック

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

この記事へのトラックバック一覧です: 風柳さんの新しい目次のスクリプト:

» 【ココログ】個別記事ページのコメント/トラックバックをページング表示 [風柳亭 - 別館:書庫のある庵 -]
個別の記事にたくさんのコメントが付いた場合、縦に長くなりすぎて見難いと常々思っていたので、『【ココログ】アーカイブページに目次とページングを付加するJavaSc... [続きを読む]

受信: 2006.07.16 06:09

« 清志郎さんお大事に | トップページ | トラックバックが変! »