←前のエントリ |  ↑↑Blog |  ↑Category |  ↓Comment |  ↓Trackback |  次のエントリ→

HaloScanのコメントによるエセ掲示板の作り方


このサイト(PiyoFeeds blog )にて右側に表示されている掲示板もどきの作成方法です。

HaloScan は最近のコメントの情報をRSSで提供してくれています。
こちらを利用することは、PiyoFeeds を利用することの動機となっている方も多くいるかと思います。

掲示板の要件を
  • 書いた人がわかる
  • 書いた内容がわかる
  • コメントを登録できる

であるとすると、HaloScanのRSSとPiyoFeedsを組み合わせることでエセ掲示板を作成することができます。
#Javascriptのオブジェクトを利用します。ちょっと上級者向けかもしれません。

[必要な物]
  1. HaloScanのアカウント
  2. PiyoFeedsのアカウント(=開発版、NB版を利用できること)
  3. エセ掲示板用のエントリ

それぞれ準備ください。最後のエントリは、このサイトではこちらこちら だったりします。

[作り方]
1.PiyoFeedsにHaloScanのコメントを読み込む新しいFeedを追加する。マニュアルを参照ください(開発版NB版 )。
その際、以下に注意して下さい。
  • (iBlog+HaloScan)Entry Linkの部分については、「Entryへのリンクを作成しない」で大丈夫です。
  • 「Javascriptのオブジェクトとして作成する」をオンにする。



2.Javascriptのオブジェクトを利用するための準備をする。

利用するページのテンプレートのheadタグ内に以下を入れて下さい。
<script
  language="JavaScript1.2"
  src="http://www.piyosystems.com/kuki/js/PiyoFeedsCommon1.2.js" 
  type="text/javascript">
</script>
<script 
  language="JavaScript1.2" 
  src="http://www.piyosystems.com/cgi-bin/WebObjects/PiyoFeedsNB.woa/wa/piyoFeeds?userId=test&feedId=atitall" 
  type="text/javascript">
</script>

2つめのscriptタグ内については上記の値はサンプルですので以下の変更をして下さい。
  • PiyoFeedsNB.woa :利用しているPiyoFeedsに対応するものに変更して下さい。開発版ならば、PiyoFeedsAlpha.woa です。NB版ならば PiyoFeedsNB.woa です。安定版は現在この機能は利用できません。
  • userIdの値(test) :利用しているPiyoFeedsのユーザIDに変更して下さい。
  • feedIdの値(atitall) :上記1で作成したPiyoFeedsのFeed IDに変更して下さい。


3.表示したいところにエセ掲示板を表示するJavascriptを埋め込む。

例えば iBlog ではナビゲーションエディタなどで表示する場所を用意します。
そこに以下のものを埋め込みます。
    <script type="text/javascript">
	var bbsEntryID = "E436895237";
       var rss = createRSSFor_kuki_pfcomm2();
       var item;
       var i = 0;
	var k = 0;
       var len = rss.items.length;
	var entryIDFromHaloScan;
	while ((i < len)&&(k < 5)) {
          item = rss.items[i];
	   entryIDFromHaloScan = getPfEntryUUIDFromHaloScanUrl(item.link);
	   if (bbsEntryID == entryIDFromHaloScan) {
	      k++;
	      document.write('<div class="bbs">');
             document.write(item.title+":");
             document.write(item.description);
	      document.write('</div>');
	   }
	   i++;
	}
	if (k == 0) {
	   document.write('<div class="bbs">一件もありません</div>');
	}
    </script>

こちらはサンプルですので以下の変更をしてください。
  • 2行目の「var bbsEntryID = "E436895237";」の[Exxxx]の部分はエセ掲示板のために作成したエントリのIDです。自分のエントリIDに変更してください。
  • 3行目の「var rss = createRSSFor_kuki_pfcomm2();」の[createRSSFor_kuki_pfcomm2();]の部分は、ユーザID(userId)とFeed ID(feedId)により変更してください。このサンプルではユーザIDがkuki、Feed IDがpfcomm2となっています。


4.CSSを変更する

上記3のスクリプトでは、bbsクラスを使っていますので、これに対応するスタイルをCSSに追記ください。もし、bbsという名前がすでに存在している場合は、上記3においてbbsを違う名前に変更してください。

例えば
.bbs {
	color:#000;
	background:#fff;
	font-size:small;
	margin: 3px;
	padding: 2px;
}

などです。

以上です。落とし穴はそこら中にありますので結構大変かもしれません・・。


投稿時間: 2005年02月06日 (日) at 11:50     

←前  |  ↑↑Blog |  ↑Category |  ↑Entry top |  ↑Comment |  次→
←前  |  ↑↑Blog |  ↑Category |  ↑Entry top |  ↑Comment |  次→