http://www.illusts.xyz/p/top.html
RSSから情報をとってきて描画しています。
以下のHTMLを最近のX件みたいな感じで描画させたい場所に書いてください。
前半パートのHTMLはどういう形のHTMLにするか、という感じです。自分のBlogに合わせて文言とかを変えてください。
後半パートのscriptは実際にRSSをとってきて描画しています。「//設定」の数字と、「//Tagごとに処理」の「getRSS("[タグ名]");」みたいな部分を自分の環境に合わせれば動くと思います。
よくわからん、って思ったらコメントとかください。
<div id="recent_template1" style="position: absolute; top: -999px; visibility: hidden;">
<div style="clear: both;">
<div id="recent_template_!!tag!!">
<h1>
<a href="!!tag_url!!">!!tag!!</a></h1>
</div>
<div style="clear: both;">
<a href="!!tag_url!!"> ⇒「!!tag!!」のイラストを見る</a></div>
</div>
</div>
<div id="recent_template2" style="position: absolute; top: -999px; visibility: hidden;">
<div style="float: left; padding: 10px;">
<div class="Image thumb">
<a href="!!link!!">
<img alt="!!title!!" class="postthumb" src="!!thumbnail!!" />
</a>
</div>
<a href="!!link!!">!!title!!</a>
</div>
</div>
<div id="recent_workspace">
</div>
<script>
//設定
let item_num = 5;
let image_size = 72;// 72 or 150
let title_length = 7;
//Tagごとに描画
getRSS("全て");
getRSS("人物");
getRSS("IT関連");
getRSS("アバター");
getRSS("動物");
function getRSS(tag_name){
var workspace = document.getElementById("recent_workspace");
var template1 = document.getElementById("recent_template1").innerHTML.replace(/https:\/\/www.blogger.com\//g,"").replace(/!!tag!!/g, tag_name);
template1 = template1.replace(/!!tag_url!!/g, tag_name=="all"||tag_name=="全て"?"/search":"/search/label/"+tag_name);
workspace.innerHTML += template1 ;
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange = function(){
if( this.readyState == 4 && this.status == 200 ){
var xml = this.responseXML;
var items = xml.getElementsByTagName("item");
var workspace2 = document.getElementById("recent_template_"+tag_name);
for(var i=0; i<items.length && i<item_num; ++i ) {
//ここでHTMLを描画
var template2 = document.getElementById("recent_template2").innerHTML.replace(/https:\/\/www.blogger.com\//g,"");
template2 = template2.replace(/!!link!!/g, items[i].getElementsByTagName("link")[0].textContent);
var title = items[i].getElementsByTagName("title")[0].textContent;
title = title.length > title_length?title.substr(0,title_length-1)+"...":title;
template2 = template2.replace(/!!title!!/g,title);
template2 = template2.replace(/!!thumbnail!!/g, items[i].getElementsByTagNameNS("*","thumbnail")[0].getAttribute("url")).replace("s72-c","s"+image_size+"-c");
workspace2.innerHTML += template2;
}
}
}
var url = tag_name=="all"||tag_name=="全て"?"/feeds/posts/default?alt=rss":"/feeds/posts/default/-/"+tag_name+"/?alt=rss";
xmlHttpRequest.open("GET", url);
xmlHttpRequest.send();
}
</script>
<div style="clear: both;">
<div id="recent_template_!!tag!!">
<h1>
<a href="!!tag_url!!">!!tag!!</a></h1>
</div>
<div style="clear: both;">
<a href="!!tag_url!!"> ⇒「!!tag!!」のイラストを見る</a></div>
</div>
</div>
<div id="recent_template2" style="position: absolute; top: -999px; visibility: hidden;">
<div style="float: left; padding: 10px;">
<div class="Image thumb">
<a href="!!link!!">
<img alt="!!title!!" class="postthumb" src="!!thumbnail!!" />
</a>
</div>
<a href="!!link!!">!!title!!</a>
</div>
</div>
<div id="recent_workspace">
</div>
<script>
//設定
let item_num = 5;
let image_size = 72;// 72 or 150
let title_length = 7;
//Tagごとに描画
getRSS("全て");
getRSS("人物");
getRSS("IT関連");
getRSS("アバター");
getRSS("動物");
function getRSS(tag_name){
var workspace = document.getElementById("recent_workspace");
var template1 = document.getElementById("recent_template1").innerHTML.replace(/https:\/\/www.blogger.com\//g,"").replace(/!!tag!!/g, tag_name);
template1 = template1.replace(/!!tag_url!!/g, tag_name=="all"||tag_name=="全て"?"/search":"/search/label/"+tag_name);
workspace.innerHTML += template1 ;
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange = function(){
if( this.readyState == 4 && this.status == 200 ){
var xml = this.responseXML;
var items = xml.getElementsByTagName("item");
var workspace2 = document.getElementById("recent_template_"+tag_name);
for(var i=0; i<items.length && i<item_num; ++i ) {
//ここでHTMLを描画
var template2 = document.getElementById("recent_template2").innerHTML.replace(/https:\/\/www.blogger.com\//g,"");
template2 = template2.replace(/!!link!!/g, items[i].getElementsByTagName("link")[0].textContent);
var title = items[i].getElementsByTagName("title")[0].textContent;
title = title.length > title_length?title.substr(0,title_length-1)+"...":title;
template2 = template2.replace(/!!title!!/g,title);
template2 = template2.replace(/!!thumbnail!!/g, items[i].getElementsByTagNameNS("*","thumbnail")[0].getAttribute("url")).replace("s72-c","s"+image_size+"-c");
workspace2.innerHTML += template2;
}
}
}
var url = tag_name=="all"||tag_name=="全て"?"/feeds/posts/default?alt=rss":"/feeds/posts/default/-/"+tag_name+"/?alt=rss";
xmlHttpRequest.open("GET", url);
xmlHttpRequest.send();
}
</script>
0 件のコメント:
コメントを投稿