「タイトルと概要を表示するJavaScrip」の拡張

こんにちは。マダム でんでん♪でございます。

「暴想」さんから頂いてきた、「タイトルと概要を表示するJavaScript」、便利に使わせていただいてます。が、

先日、「タイトルと概要を表示するJavaScrip」と「@nifty 投票」の同時使用でIEでアンケートが表示されない件についてで書いたとおり、このスクリプトを使うとIEで見たときに@nifty 投票のアンケートが表示されないという問題がありまして。

いじってるうちに、タイトルの隣に日付を表示するようにしたり、一覧表示の順序を切り替えられるようにしたりと、いろいろ機能を追加してしまい、まったく別のスクリプトになってしまいました。

一覧表示画面に「powered by cocolog_archive_extention.js」を貼ったままにしておいて、うちの一覧表示を見て、「暴想」さんのところに同じようにならないという質問が行ってしまうと申し訳ないので、改造したスクリプトを配布してしまうことにします。

スクリプト本体
http://blog.denden-cafe.com/archive/js/denden-cafe.com.cocolog_archive_extention.js

このスクリプトを持っていって、改造してもらったり、再配布してもらってもOKです。

↓一応、機能紹介とか使い方とか。続きを読むをクリックしてどうぞ。

  ← 続きを読む前にクリック！

機能
基本機能は、「暴想」さんの「タイトルと概要を表示するJavaScript」と同様です。追加されている機能は、

1. 全文表示に戻る操作をJavaScript関数の呼び出しにするか、元ページのリロードにするかを選択できる
2. 一覧表示の表示順序を変更できる（古い順、新しい順）
3. タイトル一覧、タイトルと概要一覧の画面で、タイトルの隣に投稿日が表示される
4. 表示モード変更のためのボタン（リンク）が右サイドバーの一番上に表示される

1.はInternet Explorerで見たときに@nifty 投票の アンケートが表示されなくなってしまう問題に対応するためにつけたものです。関数呼び出しをOFFにすると、「全文表示に戻す」をクリックしたときに元の ページを再読込みする動作になります。再読込みなので、オリジナルの「元に戻す」のようにスグに全文表示に戻ることはできなくなりますが、IEでアンケー トが表示できなくて困っている場合は、このオプションを利用します。

2.と3.は読んでそのままの機能。2.については、最初にタイトル一覧表示、タイトルと一覧表示モードにしたときの動作をカスタマイズできるほか、オリジナルの「タイトルと概要を表示するJavaScript」で、'#type=title'をURLに付与することでいきなりタイトル一覧を表示できるのと同じように、'order=descending'、'order=ascending'を指定することでリンクURLで昇順、降順を指定することができます。たとえば、URLに'#type=title&order=descending'を付けると日付の古い順に一覧を表示します。

4.はちょっとびみょ～（人によっては余計なお世話？）な機能ですが、ブログの右サイドバーの一番上に表示モード切替用のボタン（リンク）が勝手に作成されます。その代わり、オリジナルの「タイトルと概要を表示するJavaScript」ですべてのページの上部に表示されていた、表示を切り替えるリンクは表示されなくなってます。本文領域のHTMLを動的に書き換えるとIEで@nifty 投票の アンケートが表示されなくなってしまうため、苦肉の回避策です。

なお、4.のモード切替メニューは個別ページ（たとえばこのページとか→タイトルと概要を表示するJavaScrip」の拡張）の場合には表示されません。また、URLに'#type=title'のような引数を付けてもタイトル一覧表示にはなりません。個別ページの場合はタイトル一覧表示の意味がないので、スクリプトが呼び出された直後にチェック（ページのパス名location.pathnameから個別ページかどうかを判別）して実行を終了するようにしてます。

設置方法
右サイドバーに表示している既存のマイリスト（メモリストまたはリンクリスト）のメモに、以下のようなコードを記述してください。

（window.onloadだとタイミング的に困ることが多いみたいなので、貼り付け用のコードを少し変更しました。参考ページ: facet-divers: 暴想: タイトルと概要を表示するJavaScript -- 2007/07/28）

<!-- タイトル一覧表示用スクリプトstart -->
<script type="text/javascript" src="http://blog.denden-cafe.com/archive/js/denden-cafe.com.cocolog_archive_extention.js"></script>
<script type="text/javascript">
    window.onload = function init() {
    function init() {
        initStyle();
        description_length = 100; // 概要の文字数を変更する場合
        use_function = false;     // 全文表示に戻すを元ページ再読込みにする場合
        is_reverse = false;       // デフォルトの順序を古い順にする場合
        cocolog_archive_extention();
    }
    init();
</script>
<!-- タイトル一覧表示用スクリプト end -->
（右端が切れて読みにくいのでメモ帳にコピペして読んでください）

"initStyle();"から"cocolog_archive_extention();"までの3行は必要に応じて記述します。デフォルト動作でよい場合は、その行を削除してください。デフォルト動作は、概要の文字数は60文字、全文表示に戻すのは関数呼び出し、表示順序は日付降順（新しい順）です。

「暴想」さんの「カテゴリ別バックナンバーをプルダウンメニューにするJavaScript」に書いてある方法で、「タイトルと概要を表示するJavaScrip」を利用されている場合は、最初のほうにあるスクリプトのURL指定（scriptタグのsrc要素の値）を"http://blog.denden-cafe.com/archive/js/denden-cafe.com.cocolog_archive_extention.js"に変更して、デフォルト動作を変更する行を必要に応じて追加してもらえば、こちらのスクリプトに差し替えることができます。

なお、リンクリストのメモを利用する場合は、当該リストの設定画面で「メモをテキストとして表示」を選択するようにしてください。

制限事項

• スクリプト貼り付けたマイリストを右サイドバーに貼り付けないと動作しない（オリジナルと同様）
• 「ココログ最強カレンダー」が右サイドバーにあると正しく動作しない
• バックナンバーを非同期で読み込むスクリプト暴想: ココログをAjax化するJavaScript(再掲)と一緒に使うと、表示切替のメニューがどんどん増えていく。サイドバーが再読込みされないのにスクリプトが実行されてしまうからですな（笑。。。（2007/07/28 追記）

「ココログ最強カレンダー」の問題は、このスクリプトが右サイドバーを書き換えてるせいだと思うんですが。スクリプトが実行されるタイミングの問題なのか、スクリプトが吐き出しているHTMLに問題があるのか不明です。もうちょっと調べますが、分かる方いらっしゃいましたらご教示いただけたらと思います（スクリプトの初期化関数のwindow.onloadによるロード後起動をやめたら大丈夫のようです -- 2007/07/28 追記）。

不明点、動作がおかしな点などありましたら、お気軽にコメントどうぞ。

  ← まだの方はこっちをクリック！！