てがろぐRSSを自サイト別ページに埋め込むJavascript

てがろぐの出力ログを別ページに埋め込む方法として、公式からは以下の方法が解説されています。

てがろぐCGIが出力した最新の1件を任意の場所にSSIで埋め込む方法 - Sakura scope

当サイトはPHP製のCMSで構成されていてSSIを使うのは面倒だったので

freo（PHP）に「てがろぐ」の投稿を埋め込む

という方法でトップにてがろぐの最新一件を埋め込んでいたのですが、後方互換を使わないSmarty3以降だと{php}{/php}がエラーになるためこの方法は使えませんでした（Smartyプラグインを自作すればよかったのかも…？）。というわけで今回Javascriptを使っててがろぐのRSSを読み込む方法に挑戦したので覚書として置いておきます。一昔前はJSは極力使わないでおこうという気持ちが強かったんですけどももう今どきJSオフでウェブを見てる人も少ないだろうなと。

前提

てがろぐのRSS設定は「内蔵のRSSスキン(抜粋収録)を使う」にしてあります。この設定だと

1行目の30文字目までをタイトルとして
2行目以降、画像や装飾を覗く120文字＋（全文字数）＋Posted by 〇〇を本文として

RSSで出力されます。自分の用途では文字列だけ取得できればよかったのでこうしてますが、画像込みでたとえばツイッターをサイドバーに埋め込むみたいな形で使いたいときとかは別途それ用のRSSスキンを作ってそっちを読み込むようにするなどの工夫が必要かもしれません。

埋め込みたいページに追加するHTML

<div class="tegalog">
</div>

class名は何でもいいのですけどこのclass名がついているタグの間に読み込んだRSSを表示するようにするので同一ページ内で使われていないものにするのが望ましいと思います。

てがろぐRSSを読み込むJavascript

<script>
	$(document).ready(function(){
		$.ajax({
			type:"get",
			url:"てがろぐRSSのURL"
		})
		.done(function(result){
			$(result).find("item").each(function(i, val){
				if(i > 0){
					return true;
				}
				var title = $(this).find('title').text();
				var description = $(this).find('description').text();
				var url = $(this).find('link').text();
				var contents = description.split(' (全', 1);
				var pubDate = $(this).find("pubDate").text();
				var Dates = new Date(pubDate);
				var Dday = Dates.getDate();
				var Dmonth = Dates.getMonth() + 1;
				var Dyear = Dates.getFullYear();
				$(".tegalog").append('<div><div class="title">' + title + '</div><div class="contents">' + contents + '</div><div class="date"><a href="' + url + '">'+ Dyear + '/' + Dmonth + '/' + Dday + '</a></div></div>');
			});
		});
	});
</script>

5行目は読み込みたいRSSのURLをいれてください。読み込むページとてがろぐ設置ドメインが異なる場合はクロスドメインエラーで読み込めないので注意（回避方法はあるんですけど面倒なので…）。

9行目の if(i > 0){ の「0」には表示したい件数ー１の数字を入れてください。「0」の場合は1件表示されます。

上記のスクリプトをそのまま表示したいページに記述するか、外部スクリプトにして読み込むかしてください。

出力されるHTML

<div class="tegalog">
	<div>
		<div class="title"> 1行目30文字まで </div>
		<div class="contents"> 2行目以降120文字まで </div>
		<div class="date"><a href="ポストのURL">20xx/xx/xx</a></div>
	</div>
</div>

2件以上読み込むようにしたときは内側の<div>～</div>が繰り返されます。

装飾はCSSで

一例として

.tegalog {
	border:1px solid #ccc;
}
.tegalog>div {
	border-bottom:1px solid #ccc;
}
.tegalog .title {
	font-weight:bold;
}
.tegalog .contents {
	padding:1em;
}
.tegalog .date {
	font-size:small;
	text-align:right;
}

のような感じで。