広告

posted by fanblog
「ここにブログの名前を入れます」は更新を終了しました。記事はすべて新ブログ「Big Bang」に移転済みです。記事のタイトルをクリックすると新ブログの該当記事に移動します。そちらでお楽しみください。

記事一覧ナビモジュール

ファンブログ

この記事のカテゴリーは「スクリプト置き場」という名前です。
下は、この記事のカテゴリーを自動で調べて、そのカテゴリーの記事一覧を表示しています。

カテゴリーでなく、公開順の記事一覧を表示する事も出来ます。
自分のブログでなくても大丈夫です。下は、かこさんの最新記事一覧です。

高負荷でサーバーアカウントをサスペンドされました。
現在、対処の途中のため、アナウンスするまで
この記事のスクリプトは使わないでください。

注意:ファンブログにしか対応していません。

使い方

設置には3つの作業が必要です。

1. 表示したい場所に <div id="navi_print_area"></div> と書く。

2.それより後のどこかに次のように書く。

<script type="text/javascript">
var action='category';
var category_title='カテゴリアーカイブ';

var rest='http://api.dwm.me/fanblog/navigation/';

rest+='?url='+encodeURIComponent(window.location.href)
	+'&action='+action+'&category_title='
	+encodeURIComponent(category_title);

var script=document.createElement('script');
script.setAttribute('type','text/javascript');
script.setAttribute('src',rest);

var head=document.getElementsByTagName('head');
head[0].appendChild(script);
</script>

3.自分でスタイルシートを書く。

詳細説明

作業2に出てくる、カテゴリアーカイブという文字は、サイドバーのカテゴリを表示している部分の
タイトルと同じにしないと動きません(このブログの場合はカテゴリーです)。違う場合は
カテゴリアーカイブの文字を変更して書き込んでください。

1に書いたdivタグのidは変更可能です。
その場合は、作業2のrestに次の赤字部分を追加します

rest+='?url='+encodeURIComponent(window.location.href)
	'&action='+action+'&category_title='
	+encodeURIComponent(category_title)
	+'&print_id=id名';

id名がhogeなら、最後の行は+'&print_id=hoge';となります。

この記事のように1ページに複数表示させたいときは、idを変更するだけでなく、次のようにします。

rest+='?url='+encodeURIComponent(window.location.href)
	'&action='+action+'&category_title='
	+encodeURIComponent(category_title)
	+'&print_id=id名&callback=重複しない英数字の列';

重複しない英数字の列は、重複さえしなければ何でもいいです。たとえば、こんな感じです。

一つ目には&print_id=id1&callback=callback1
二つ目<には&print_id=id2&callback=callback2

重複すると同じ場所に上書きされてしまいます。重複さえしなければ、あとは自動でやります。

var action='category';の部分をvar action='all';にすると、すべての記事公開順表示になります。
categoryはカテゴリー記事一覧表示)

ただし、このall設定はトップページのURLでのみ有効です。1記事ページやアーカイブページで
allを指定すると、何も表示せずに終了します。

var action='category';のままだと、表示中のページの最初の記事が属しているカテゴリーの
記事一覧を表示します。ですから、1記事の時と、カテゴリーページの場合はcategoryに、
トップページの時はallに設定してください。

トップページ以外でallを指定したい、または他のブログの一覧を表示したい場合は、encodeURIComponent(window.location.href)のwindow.location.hrefをトップページの
URL、または表示したいブログのURLに変更します。

window.location.href以外のURLを指定する場合は、URLをシングルクオート '
ダブルクオート " で囲んでください。

JSONPで使うこともできます。その場合はrestにtype=json&callback=callback名
パラメーターを追加してください。フォーマットは後述します。

スタイルシートは自分で書いてください。下が生成されるHTMLのフォーマット、
さらにその下がこのページで使っているスタイルシートです。

HTML

<div id="navi_print_area">
<h3>カテゴリー「<a href="">スクリプト置き場</a>」の記事一覧</h3>
<ul>
<li><a title="" href="">記事一覧ナビモジュール</a></li>
<li><a title="" href="">サイドバーにもサムネイルモジュール</a></li>
<li><a title="" href="">別ブログの最新記事を自動でリンクして紹介</a></li>
</ul>
<p><span class="left">
<a title="ページ2へ" onclick="" href="">&lt;&lt; 古い記事</a>
</span>1/2<span class="right">新しい記事 &gt;&gt;</span></p>
<br>
</div>

スタイルシート

div#navi_print_area{
 clear:both;
 border:1px solid #00ff00;
 background:#ccffcc;
 padding:1em 1em 0 1em;
}

div#navi_print_area a,
div#navi_print_area a:hover{
 background:transparent;
}

div#navi_print_area a{
 color:#ff6699;
}

div#navi_print_area a:hover{
 color:#ff4477;
}

div#navi_print_area h3{
 border:none;
 background:transparent;
 margin:0;
 text-align:center;
 color:#00cc00;
}

div#navi_print_area ul{
 list-style-type:none;
 margin:1em;
 padding:0;
}

div#navi_print_area li{
 list-style-type:none;
 padding:0 0 0 5em;
}

div#navi_print_area p{
 line-height:1em;
 margin:0 6em;
 padding:0;
 text-align:center;
 color:#00cc00;
}

div#navi_print_area span.left{
 float:left;
 color:#aaaaaa;
}

div#navi_print_area span.right{
 float:right;
 color:#aaaaaa;
}

div#navi_print_area dl{
 margin-left:3em;
}

div#navi_print_area br{
 clear:both;
}

JSONPで使う

スタイルシートで直せない部分、例えばタイトルの文章を変えたいとか、HTMLの構造を
変えたい場合はJSONPで読み込んでください。コールバックは1個のオブジェクトを渡されます。

オブジェクトのフォーマットはcategoryとallで違います。
また、コールバックの冒頭でevalは必須です。

category

{
	"category":{
		"title":"カテゴリー名",
		"url":"カテゴリートップのURL",
		"page":カテゴリーの何頁目か(int),
		"len":カテゴリーの総ページ数(int)
	},
	"values":[
		{"title":"記事タイトル",
		 "url":"記事URL",
		 "value":"記事概要"
		}
	]
}

all

{
	"page":一覧の何頁目か(int),
	"len":一覧の総ページ数(int),
	"url":"トップページのURL",
	"values":[
		{"title":"記事タイトル",
		 "url":"記事URL",
		 "value":"記事概要"
		}
	]
}

使用条件

プログラムの中心は個人で使っているサーバーにあります。そのサーバーが落ちていれば
使えません。また、公開を止める場合もありえます。そのことは了承の上で使うこと。

設置方法に関して質問されても答えません。完全ノーサポートです。

このページのコメント欄に使用する旨、書き残すこと。

自ブログに設置、動作確認後、下のブログランキングと、ぶろぐ村の投票ボタンを
両方押すこと。

以上の条件に合意できる方は、お使いください。

新ブログ「Big Bang」で続きを読む