2007年03月11日

ココログで長くなったカテゴリーページを分割するプログラム

ココログを長く使って記事がたまってくると、いちばん困るのはカテゴリーページがどんどん長くなっていくこと。そこで、JavaScriptを使ってページ分割するプログラムを作りました。たぶん、ココログだけでなくTypePadとか、MovableTypeベースのブログなら動くと思います。

このプログラムは、実際に僕の本家ブログ「投資信託のブログ|ファンドの海」で使っています。このブログのカテゴリーページにはすべて導入しているので、そこで動作を実際に確認できます。たとえば「よもやま投資信託」カテゴリーページは140個ほどのエントリが含まれているため、20エントリずつ7ページに分割されています。

このプログラムはココログのようなPerlやPHPのようなサーバ側で動作するスクリプトが使えないブログで利用できるように作ったため、JavaScriptだけでできています。ただし、JavaScriptを呼び出すためにブログのHTMLを多少書き換える必要があるため、テンプレートの書き換えができる「ココログプロ」を選んでいる必要があります。

では導入方法を紹介しましょう。導入方法はおおまかに次のとおりです。

1)JavaScript「paginate4cocolog.js」をココログにアップロードする
2)JavaScriptを呼び出すコードを、テンプレートに書き込む

です。テンプレートの変更などによるトラブルやミスは自己責任でよろしくおねがいします。

では、それぞれの手順を少し詳しく。

■JavaScriptをアップロード

まず、JavaScript「paginate4cocolog.js」を僕のブログからダウンロードしてください。(文字コードはUTF-8です)

それを、ご自分のブログのお好きなところにアップロードしてください。アップロードは、ココログの「コントロール」→「ファイル」を開くと、右側に「新規ファイルのアップロード」のボタンがあります。ここから行います。僕は、“javascript”フォルダを作成し、この下に“paginate4javascript.js”というファイル名で保存しています。

■テンプレートの書き換え

続いてはブログのテンプレートを書き換えます。テンプレートを書き換えるには、そのブログが上級者テンプレートでなければなりませんので、ここでは上級者テンプレートを前提に説明します。

コントロールパネルの「デザインの編集」で表れたテンプレートの一覧から「バックナンバーテンプレート」の中の「Category Archives」を選んでください(カテゴリー以外のアーカイブページを分割したいときは、同じことをそのテンプレートに対して行ってください)。

書き換えるのは2箇所です。
(1) paginate4cocolog.jsを外部ファイルとして呼び出す。
僕のブログの場合は下記のように書きました。場所は<head></head>のあいだが適切だと思います。

<script type="text/javascript"
src="http://www.fund-no-umi.com/javascript/paginate4cocolog.js">
</script>

(2)ページの表示後にmain()関数を呼び出す。
<body>を書き換えて、
<body onLoad="main()">
にします。これで、このページが表示されると自動的にJavaScriptが呼び出されてページ分割表示が行われます。

手順は以上です。これで動くと思うのですが、自分の環境でしか試していないので、ほかの方で「うまくいった」「ここがだめだった」というコメントをいただけると幸いです。

次のエントリでは、このスクリプトの内部動作を紹介します。

[ ] 長いページを分割する

次 >>  paginate4cocolog.jpの仕組はシンプル
前 <<  ココログをもっと活用したい!


トラックバック http://app.cocolog-nifty.com/t/trackback/36569/14224772

長いカテゴリページの分割とはてなランキングの導入 [投資信託のブログ|ファンドの海から]

受信: 2007/03/12 0:26:37

ううー、分割できにゃい。 [ICOCO.から]

受信: 2007/05/26 22:28:36

長くなったカテゴリなどを分割するスクリプト [DCN Blog 研究所から]

受信: 2008/01/10 7:50:52

コメント

はじめまして。
検索からお邪魔しました。
当方のココログプロでこちらのスクリプトを試してみたのですが、動作しませんでした。

ページの注意点をチェックしてみたのですが・・・何か、ここは特別に注意しましょうという点はありますか?

投稿者: ICOCO (2007/05/26 22:33:17)

まさに探しておりましたとても便利なスクリプトに感謝感激です。
TypePadのOEMのDCNブログさんで運用しているものに導入させていただき、無事動作しました。
http://blog.2525.net/

ただ、ページ指定なしでアクセスした場合、1ページ目ではなく最終ページが表示されるので、不具合かな…と思ったところ、よもやま投資信託さんのところでも最終ページが表示されてらっしゃるので、仕様のようですね。
なので、
//URLの最後に#3などのページ数が指定されているか? 指定がなければ1ページ目
この部分を強引に、
i = isNaN(i) ? 1 : i ;
を外して、
i = 1;
にして、1ページ目を表示させるようにしましたが、いかんせん素人の急場しのぎの方法なので、直接のURL入力でページ指定できなくなっちゃうのが、唯一にして最大の欠点でした。

それでは、御礼のご報告コメントということで、失礼させていただきます。
ぜひ、これからも素晴らしいサイト、頑張ってください!

投稿者: かぶー@にこにこネット (2008/01/10 5:01:42)

その後、試行錯誤した結果、直接のURL入力もできるようになりました。
ただ、いかんせん素人なので、
 i = isNaN(i) ? 1 : i ;
を外しても動作したので外しちゃったのですが、
もしかしたら、何か不具合があるかも知れません?

============
▼管理人様のオリジナル
============
//URLの最後に#3などのページ数が指定されているか? 指定がなければ1ページ目
document.URL.match("#");
i = parseInt(RegExp.rightContext);
i = isNaN(i) ? 1 : i ;

//特定ページへ移動
gotoPage(i);
============
▼素人の改造
============
//URLの最後に#3などのページ数が指定されているか? 指定がなければ1ページ目
if (document.URL.match("#")) {
i = parseInt(RegExp.rightContext);
} else {
i = 1; }
gotoPage(i);
============

投稿者: かぶー@にこにこネット (2008/01/10 7:33:59)

ファンドの海管理人様、この度はお忙しい中、
わざわざDCN Blog 研究所までお越しいただいた上に、
コメントまでいただき、ありがとうございます m(_ _)m
お陰様で快調に利用させていただいております。
末永く活用させていただこうと思っておりますので、
今後とも何卒、よろしくお願い申し上げます。
(ちなみに上に動作しないとのコメントがありましたが、
 プロを利用されてらっしゃる場合、
 <div class="entry">を削除してしまったり、
 あるいは、正しいdiv設定になっていないのが、
 動作しない原因ではないかな…と思いました。
 私の方も、別のブログで動作しなかったので、
 divタグを見直したところ、正常に動作しました!)

投稿者: かぶー@にこにこネット (2008/01/12 2:49:56)

はじめまして。
カテゴリ分割。
ココログではできないもの、とあきらめていたところ、
Googleでこちらのサイトに気付き、感謝感激!
です。

早速サイトに反映させて頂きました。

ただ、ひとつ、こちらのスクリプトの問題では
なく、こちらの設定の問題だとは思うのですが、
何ぶん本当になにもわからず、全て対処療法
でその場をしのいでいる素人なので、以下の
症例で原因がすっとわかるものならお教え頂きたくコメントさせて頂きました。

症状:
カテゴリごとに20件ずつ記事が分割表示され
た後に続いて、今まで記事をアップした日付
の羅列が続き、その後にようやく、分割され
た他のページへのリンク(1>2>3>4>5>6)
が表示されます。

改善したい点:
記事アップの日付の羅列を表示したくない。

貴サイトではそのような表示には
なっていないのでこちら側の原因だとは
思いますが、助けて頂ければ幸いです。


何卒よろしくお願いします。

投稿者: Anonymous (2008/02/23 2:35:15)

何度も申し訳ありません。
先ほどコメントのこさせて頂いた件ですが、

日付の羅列表示は

前後のページの20件をアップした日付の
羅列になっていました。

20件分のアップした日付が羅列されているようです。


ちなみに

<body>を書き換えて、
<body onLoad="main()">

部分は

ココログの
MTタグがいくつかbodyタグのなかに入り込んでいたので

<body onLoad="main()"<MTWeblogIfExternalJavascript><$MTWeblogExternalJavascriptInitialize$></MTWeblogIfExternalJavascript>>


として変更させてもらっています。

*上記<>は英数半角だとコメントに反映されないので
便宜的に全角で記載しました。

よろしくお願いします。

投稿者: Anonymous (2008/02/23 2:53:54)

はじめまして。

まさに、この問題で頭を悩ませておりました!
ありがたく拝借させていただきます。

私はココログフリーなので、
マイリストに無理矢理書き込みましたが
サクサク動いて快適に表示されました。

ありがとうございます。

投稿者: chimaki (2009/01/29 23:18:19)

コメントを書く