広告

posted by fanblog

ファンブログで関連記事を表示させるスクリプト2

このエントリーをはてなブックマークに追加
関連記事サムネ
前に関連記事を表示させるためのjavascriptを考えて記事も書いたんですが、実はこのjavascriptには若干ミスがあったりします。
ってのは、一応使い方として複数のページを読み込む方法を説明しているんですが、それが出来たり出来なかったりするんです。普通に使う分には大丈夫なんですが。
そんな訳で、今回スクリプト書き直しました。若干仕様も変更してあります。本当に若干ですが。基本的には前と一緒です。

概要


ファンブログの1記事のページにおいて、その記事のカテゴリーと同じカテゴリーの記事が10個表示される様になる「関連記事表示スクリプト」です。
ほんのちょこっとだけコードを変更する事で、「関連記事表示数」、「表示順がランダムか否か」、とかは変更出来ます。

使い方


javascriptのコードが長めなので、それでも構わない人は下のスクリプトのコードをbodyタグ内のどこかに貼り付けて下さい。短い方が良い方は短かい方のコードを使って下さい。スクリプトのコードを貼り付けたら記事直下に関連記事が表示されると思います。
どちらの場合でもjQueryというjavascriptのライブラリを使っているのでブログにjQueryを設置する方法も参照して下さい。

短かい方のコード



<script type="text/javascript" charset="utf-8" src="http://fanblogs.jp/oands/file/246/a2FucmVuMmpzkRk.jpg"></script>
<script type="text/javascript">
jQuery(function() {
/* kanren */
var curl = jQuery("div.entryInfo a[href*='category']").attr("href");
var ts = "#entries h2.entryTitle";
kanrenkhyoji(curl, 10, 2, ts, true, "div.entryInfo", "<div class='hyojiboxtitle'>関連記事</div>");
});
</script>

注意点


残念ながらファンブログのテンプレートのうち、新しいタイプで、「アーカイブページの記事タイトルがリンクになっているタイプ」でないと使えませんのでご了承ください。

あと、短かい方のコードだと、このファンブログハックにアップロードされているファイルを読み込む事になります。そのため、ファンブログハックが無くなったら動かなくなりますので注意してください。あまり気にしなくても良いかもですが。

カスタマイズ方法


カスタマイズする場合は、以下の行を変更する事になります。

kanrenkhyoji(curl, 10, 2, ts, true, "div.entryInfo", "<div class='hyojiboxtitle'>関連記事</div>");

これです。簡単に説明すると、

kanrenkhyoji(カテゴリのURL, 関連記事表示数, 探索の深さ, 記事リンクのセレクタ, ランダムか否か, 関連記事表示場所, 関連記事直前のテキスト);

って感じで、カンマ( , )で切られて7つの要素があります。1つ1つ簡単に説明していきます。

カテゴリのURL


これは、関連記事を読み込むためにカテゴリーのURLを書く場所です。コピペだけでは表示されない、って時には変更する事もあるかもしれませんが、基本的には変更しないで下さい。

関連記事表示数


表示させる関連記事の数を書いて下さい。初期設定は10個です。ただし、ここの数値だけを増やしても表示数が増えない場合があると思います。その場合は次の「探索の深さ」の数値を増やして下さい。

探索の深さ


「探索の深さ」が1の場合、カテゴリーのアーカイブぺージを新しいページから数えて1つしか探索しない、という事になります。つまり、最も新しい記事10個しか表示されません。「探索の深さ」が2の場合は2ページ目まで探索するので、新しい記事20個のうち、さっき設定した「関連記事表示数」の数まで表示される様になります。

記事リンクのセレクタ


関連記事のリンクを取得する時に使う物です。コピペだけでは表示されない、って時には変更する事もあるかもしれませんが、基本的には変更しないで下さい。

ランダムか否か


関連記事の表示順をランダムにするか、新しい順にするか、を設定できます。「true」の場合はランダム、「false」の場合は新しい順に表示される様になります。

関連記事表示場所


初期設定ではdivタグのentryInfoというclassの直後に表示される様になってます。変更する場合は"div.entryInfo"を"#kanrenkijibox"と書き換え、表示したい場所に

<div id="kanrenkijibox"></div>

と書き込めば、そこに表示される様になります。

関連記事直前のテキスト


関連記事のリストの直前に表示させたいテキストをここに書きます。初期設定だと「関連記事」と表示されると思います。htmlタグを使えますので、自由にカスタマイズして下さい。

エラーメッセージの表示


今回コードをコピペし間違えや、書き換えミスがあった時に、ごく稀に「kanren script has code miss.(curl)」とか書いてあるウィンドウが表示される事があります。
error message pict

基本的には出ませんし、普通にエラーで動かなくても、出ないことの方が多いと思います。ですが、もし表示されて、理由が良く分からん、って場合はコメント下さい。このエラーが表示される場合は何かミスがあって、スクリプトが動きません。
ま、何かミスがあって、スクリプトが動かない場合でも、基本的にはこのエラーメッセージも表示されませんけどね。。www
かなり稀なので、気にしなくて大丈夫ですが、一応書いておきます。

飾り付け方法


これで表示させる関連記事をスタイルシートで飾り付ける方法について記事を書いたので、良ければ参考にして下さい。
ファンブログで関連記事を表示させるスクリプト2を飾り付ける方法

最後に


スクリプト全文はこの下に載せますが、一応ここで最後です。前回のスクリプトにミスがあったのは、今回で言うところの「探索の深さ」が2以上になった時に挙動が安定しない、っていう物です。
今回、それが直ったので、おそらく50個とかでも表示できる様になりました。表示順はランダムか、新しい順のみですが、ランダムにして、深さを深くすれば、過去の記事も関連記事として表示される様になります。
あと、明日にでも、この関連記事が多少は良い感じに表示される様にするcss(スタイルシート)を考えて記事を書く予定です。よろしければそちらもご覧下さい。
では、長ーーーーいコードを下に貼っておきます。

スクリプトのコード


コードをコピーする時はダブルクリックをすれば全て選択されるかと思います。
<script type="text/javascript">
/* ajax */
var optionArray3 = [];

function doOrderGuaranteedAjax(ajaxOptionArray, allCompleteHandler) {
var defaults = {
type: "GET",
complete: function() {
// 最初の要素を削除
ajaxOptionArray.shift();
// すべての通信が完了した場合
if (ajaxOptionArray.length === 0) {
// コールバックが設定された場合
if (allCompleteHandler) {
allCompleteHandler();
}
} else {
// 通信配列にまだ通信が残っている場合
option = ajaxOptionArray[0];
// ajaxのオプションを次の通信に切り替え
opts = jQuery.extend({}, defaults, option);
// 通信を開始
jQuery.ajax(opts);
}
}
};

// 初期指定
var option = ajaxOptionArray[0];
var opts = jQuery.extend({}, defaults, option);
// 一回のみ実行
jQuery.ajax(opts);

} /* /ajax */

/* kanren */

function listShuffle(slist) {
var loop = slist.length - 1;
while (loop > 0) {
var j = Math.floor(Math.random() * loop);
var t = slist[loop];
slist[loop] = slist[j];
slist[j] = t;
loop--;
}
return slist;
}

function makekanrenko(aurl, list, selector) {
var option = {
url: aurl,
success: function(html) {
var linkt = jQuery(html).find(selector).html();
for (var i = 0, len = list.length; i < len; i++) {
if (linkt.indexOf(list[i]) != -1) {
return false;
}
}
jQuery(html).find(selector).each(function() {
var tsrc = jQuery(this).html();
list.push(tsrc);
});
}
};
optionArray3.push(option);
return true;
}

function kanrenkhyoji(curl, hyojisu, hukasa, tselector, randomumu, hyojiarea, boxmemo) {
if (curl === null || typeof curl != 'string') {
alert("kanren script has code miss.(curl)");
return false;
} else if (hyojisu === null || typeof hyojisu != 'number') {
alert("kanren script has code miss.(hyojisu)");
return false;
} else if (hukasa === null || typeof hukasa != 'number') {
alert("kanren script has code miss.(hukasa)");
return false;
} else if (randomumu === null || typeof randomumu != 'boolean') {
alert("kanren script has code miss.(randomumu)");
return false;
} else if (hyojiarea === null || typeof hyojiarea != 'string') {
alert("kanren script has code miss.(hyojiarea)");
return false;
} else if (boxmemo === null || typeof boxmemo != 'string') {
alert("kanren script has code miss.(boxmemo)");
return false;
}
var kanrenklist = [];
var kklisth = [];
makekanrenko(curl, kanrenklist, tselector);
var wcheck = false;
for (var i = 2; i < hukasa + 1; i++) {
wcheck = makekanrenko(curl + i, kanrenklist, tselector);
if (!wcheck) {
break;
}
}

doOrderGuaranteedAjax(optionArray3, function() {
var htmltext = '<div class="kanrenkbox">';
if (boxmemo.length !== 0) {
htmltext += boxmemo;
}
for (var i = 0, len = kanrenklist.length; i < len; i++) {
if (kanrenklist[i].indexOf(document.URL) == -1) {
kklisth.push(kanrenklist[i]);
}
}
if (kklisth.length !== 0) {
if (randomumu) {
listShuffle(kklisth);
}
htmltext += "<ul>";
for (i = 0; i < hyojisu; i++) {
if (kklisth.length <= i) {
break;
}
else if (i % 10 === 0 && i !== 0) {
htmltext += "</ul><ul>";
}
htmltext += "<li>" + kklisth[i] + "</li>";
}
htmltext += "</ul>";
}
else {
htmltext += '<div class="kboxmemo">関連記事は見つかりませんでした。</div>';
}
htmltext += "</div>";

jQuery(hyojiarea).append(htmltext);
});
} /* /kanren */

jQuery(function() {
/* kanren */
var curl = jQuery("div.entryInfo a[href*='category']").attr("href");
var ts = "#entries h2.entryTitle";
kanrenkhyoji(curl, 10, 2, ts, true, "div.entryInfo", "<div class='hyojiboxtitle'>関連記事</div>");
});
</script>

このブログの更新情報は TwitterRSS でチェック出来ます。是非、フォロー、またはRSSの購読をよろしくお願いします。
「RSSの購読って何?」って人は、 ブラウザ毎のRSS購読方法の簡単なまとめ を読んでみて下さい。

このエントリーをはてなブックマークに追加
人気記事

PAGE TOP

×

この広告は30日以上新しい記事の更新がないブログに表示されております。