Voxのお題に答えたエントリーをjavascriptで表示♪
前に書いた
「Voxのお題に答えたエントリーをMovableTypeで表示♪」
に「PHPじゃ無いから使えなくて残念」と
お言葉をいただいたので、javascriptでも作ってみた
こんな感じ
いやぁ、自分が書いたものに
反応があると嬉しくって調子に乗っちゃいます。
「XML 2 JSON service」を使って
JSONPにして持ってきてます。
↓ソース
<div id="vox"></div>
<script type="text/javascript">
<!--
//ここを書き換えてね
var voxUserID = 'yoshiori'; //VoxのユーザーID
var readCount = 1 //記事をそれぞれ何個呼び込むか;
//ここまで
var qotdURL = 'http://${name}.vox.com/library/posts/tags/qotd/rss.xml';
var huntURL = 'http://${name}.vox.com/library/posts/tags/vox+hunt/rss.xml';
var qotd = new VoxData('qotd');
var hunt = new VoxData('hunt');
loadJavascript('http://app.drk7.jp/xml2json/url=' + encode(qotdURL.replace('${name}', voxUserID)) + '&var=qotd');
loadJavascript('http://app.drk7.jp/xml2json/url=' + encode(huntURL.replace('${name}', voxUserID)) + '&var=hunt');
function VoxData(eName){
this.eName = eName;
};
VoxData.prototype.onload = function(data){
var items = data['channel']['item'];
var html = '\t<div class="' + this.eName + '">\n'
for(var i = 0 ; i < items.length && i < readCount ; i++ ){
html+='\t\t<div class="item">\n'
html+='\t\t\t<div class="title">' + items[i]['title'] + '</div>\n';
html+='\t\t\t<div class="description">' + items[i]['description'] + '</div>\n';
html+='\t\t\t<div class="footers"><a href="' + items[i]['link'] + '">Permalink</a></div>\n';
html+='\t\t</div>\n'
}
html+= '\t</div>\n';
var e = document.getElementById('vox');
e.innerHTML += '\n' + html;
};
function loadJavascript( src ){
var s = document.createElement('script');
s.type = 'text/javascript';
s.charset = 'utf-8';
s.src = src;
document.getElementsByTagName('head')[0].appendChild(s);
}
function encode(text){
if( typeof encodeURIComponent != 'undefined'){
return encodeURIComponent(text);
}
return escape(text);
}
// -->
</script>
voxUserIDのところは自分のIDにしてください。
で、こんな感じでdivにclass付けてるので
適当に好きなようにスタイルシートで加工しちゃってください。
<div id="vox">
<div class="qotd">
<div class="item">
<div class="title">タイトル</div>
<div class="description">内容</div>
<div class="footers">フッター(とりあえずリンクだけ)</div>
</div>
</div>
<div class="hunt">
<div class="item">
<div class="title">タイトル</div>
<div class="description">内容</div>
<div class="footers">フッター(とりあえずリンクだけ)</div>
</div>
</div>
</div>
それぞれのサービスの仕様変更などで
動かなくなっちゃう可能性もあるので
その辺はよろしくお願いします。
すべて表示
閉じる
