Blogger:カレンダー(9)Calendar2_Bloggerモジュールの導入方法とその機能

このBloggerのブログに導入したカレンダーの導入方法と機能の解説です。データはすべてフィードから得ているので公開ブログにしか使えません。また当然ながらBloggerのブログにしか使えません。

前の関連記事：Blogger:カレンダー(8)Calendar2_Bloggerモジュールの作成その2

HTML/JavaScritpガジェットにコードをコピペするだけ

導入方法は簡単です。

<div id="calendar2_blogger"></div>
<script>
var Calendar2_Blogger=Calendar2_Blogger||function(){var b={y:null,m:null,em:null,max:150,posts:[],dic:{},order:"published",elem:null,dataPostsID:"datePosts",days:[],init:function(a){b.y=a.getFullYear();b.m=a.getMonth()+1;b.em=(new Date(b.y,b.m,0)).getDate();b.posts=[];b.dic={};b.days=b.L10N?"Sun Mon Tue Wed Thu Fri Sat".split(" "):"\u65e5\u6708\u706b\u6c34\u6728\u91d1\u571f".split("")},L10N:!1,enM:"Jan. Feb. Mar. Apr. May Jun. Jul. Aug. Sept. Oct. Nov. Dec.".split(" ")},f={_holidayC:"rgb(255, 0, 0)",
_SatC:"rgb(0, 51, 255)",getFeed:function(a){b.init(a);a=b.y+"-"+f.fm(b.m)+"-"+f.fm(b.em)+"T23:59:59%2B09:00";f.createURL(a)},createCalendar:function(){var a=g.calflxC();a.appendChild(g.arrowflxI("\u00ab","left_calendar"));var c=b.L10N?"published"==b.order?"":"updated":"published"==b.order?"":"\u66f4\u65b0",c=b.L10N?b.enM[b.m-1]+" "+b.y+" "+c:b.y+"\u5e74"+b.m+"\u6708"+c;a.appendChild(g.titleflxI(c));a.appendChild(g.arrowflxI("\u00bb","right_calendar"));b.days.forEach(function(c,e){var d=g.calflxI(c);
d.s=e;f._getDayC(d);b.L10N&&(d.style.fontSize="80%");a.appendChild(d)});for(var e=(new Date(b.y,b.m-1,1)).getDay(),c=0;c<e;c++)a.appendChild(g.calflxI());for(var h,c=1;c<b.em+1;c++)c in b.dic?(h=g.dateflxIWithPost(c),b.dic[c].forEach(function(a){h.title+=h.title?"\n\u30fb"+a[1]:"\u30fb"+a[1]})):(h=g.calflxI(c),h.className="nopost"),h.s=(e+c-1)%7,f._getDayC(h),a.appendChild(h);e=(e+b.em)%7;if(0<e)for(c=0;c<7-e;c++)a.appendChild(g.calflxI());a.addEventListener("mousedown",d.mouseDown,!1);a.addEventListener("mouseover",
d.mouseOver,!1);a.addEventListener("mouseout",d.mouseOut,!1);b.elem.textContent=null;b.elem.appendChild(a);b.elem.appendChild(g.datePostsNode())},_getDayC:function(a){0==a.s?a.style.color=f._holidayC:6==a.s&&(a.style.color=f._SatC)},_writeScript:function(a){var c=d.createElem("script");c.type="text/javascript";c.src=a;document.getElementsByTagName("head")[0].appendChild(c)},createURL:function(a){a="/feeds/posts/summary?alt=json-in-script&orderby="+b.order+"&"+b.order+"-min="+b.y+"-"+f.fm(b.m)+"-01T00:00:00%2B09:00&"+
b.order+"-max="+a;a+="&callback=Calendar2_Blogger.callback.getArticles&max-results="+b.max;f._writeScript(a)},fm:function(a){return("0"+a).slice(-2)}},g={calflxC:function(){var a=d.createElem("div");a.style.display="flex";a.style.flexWrap="wrap";return a},calflxI:function(a){var c=d.createElem("div");c.textContent=a;c.style.flex="1 0 14%";c.style.textAlign="center";return c},dateflxIWithPost:function(a){var c=g.calflxI();c.className="post";c.textContent=a;c.style.backgroundColor="rgba(128,128,128,.4)";
c.style.borderRadius="50%";c.style.cursor="pointer";return c},datePostsNode:function(){var a=d.createElem("div");a.style.display="flex";a.id=b.dataPostsID;a.style.flexDirection="column";return a},_postflxC:function(){var a=d.createElem("div");a.style.borderTop="dashed 1px rgba(128,128,128,.5)";a.style.paddingTop="5px";return a},_imgflxI:function(a){var c=d.createElem("div"),b=d.createElem("img");b.src=a[2];a=g._a(a);a.appendChild(b);c.appendChild(a);return c},_a:function(a){var b=d.createElem("a");
b.href=a[0];return b},_titleflxI:function(a){var b=d.createElem("div"),e=g._a(a);e.textContent=a[1];b.appendChild(e);return b},postNode:function(a){var b=g._postflxC();if(a[2]){var d=g._imgflxI(a);d.style["float"]="left";d.style.padding="0 5px 5px 0";b.appendChild(d)}a=g._titleflxI(a);b.appendChild(a);return b},arrowflxI:function(a,c){var e=d.createElem("div");e.textContent=a;e.id=c;e.style.flex="0 0 14%";e.style.textAlign="center";e.style.cursor="pointer";e.title=b.L10N?"left_calendar"==c?"Newer":
"Older":"left_calendar"==c?"\u7fcc\u6708\u3078":"\u524d\u6708\u3078";return e},titleflxI:function(a){var c=d.createElem("div");c.textContent=a;c.id="title_calendar";c.style.flex="1 0 72%";c.style.textAlign="center";c.style.cursor="pointer";c.title=b.L10N?"Switching between published and updated":"\u516c\u958b\u65e5\u3068\u66f4\u65b0\u65e5\u3092\u5207\u308a\u66ff\u3048\u308b";return c}},d={_node:null,_timer:null,_rgbaC:null,_fontC:null,mouseDown:function(a){a=a.target;switch(a.className){case "post":d._node&&
(d._node.style.backgroundColor=d._rgbaC,d._node.style.textDecoration=null);d._node=a;var c=document.getElementById(b.dataPostsID);c.textContent=b.L10N?b.order+": "+b.enM[b.m-1]+" "+a.textContent:b.m+"\u6708"+a.textContent+"\u65e5("+b.days[a.s]+") "+("published"==b.order?"\u516c\u958b":"\u66f4\u65b0");c.style.paddingTop="5px";b.dic[a.textContent].forEach(function(a){c.appendChild(g.postNode(a))});break;case "nopost":c=document.getElementById(b.dataPostsID);c.textContent=null;d._node&&(d._node.style.textDecoration=
null,d._node.style.backgroundColor=d._rgbaC,d._node=null);break;default:switch(a.id){case "title_calendar":b.order="published"==b.order?"updated":"published";a=new Date(b.y,b.m-1,1);f.getFeed(a);break;case "left_calendar":a=new Date(b.y,b.m,1);f.getFeed(a);break;case "right_calendar":a=new Date(b.y,b.m-2,1),f.getFeed(a)}}},mouseOver:function(a){var b=a.target;if("post"==b.className){if(b.style.textDecoration="underline",d._fontC=window.getComputedStyle(a.target,"").color,b.style.color="#33aaff",d._rgbaC=
window.getComputedStyle(a.target,"").backgroundColor,a=/\d+\.\d+/.exec(d._rgbaC)){a=Number(a[0]);var e=a+.3;b.style.backgroundColor=d._rgbaC.replace(a,1<e?1:e)}}else switch(b.id){case "title_calendar":case "left_calendar":case "right_calendar":b.style.textDecoration="underline",d._fontC=window.getComputedStyle(a.target,"").color,b.style.color="#33aaff"}},mouseOut:function(a){a=a.target;if("post"==a.className)a.style.color=d._fontC,a!==d._node&&(a.style.textDecoration=null,a.style.backgroundColor=
d._rgbaC);else switch(a.id){case "title_calendar":case "left_calendar":case "right_calendar":a.style.textDecoration=null,a.style.color=d._fontC}},createElem:function(a){return document.createElement(a)}};return{callback:{getArticles:function(a){Array.prototype.push.apply(b.posts,a.feed.entry);if(a.feed.openSearch$totalResults.$t<b.max){var c=/\d\d(?=T\d\d:\d\d:\d\d\.\d\d\d.\d\d:\d\d)/i;b.posts.forEach(function(a){var d=Number(c.exec(a[b.order].$t));b.dic[d]=b.dic[d]||[];b.dic[d].push([a.link[4].href,
a.link[4].title,a.media$thumbnail?a.media$thumbnail.url:null])});f.createCalendar()}else{a=/(\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d)\.\d\d\d(.\d\d:\d\d)/i.exec(a.feed.entry[a.feed.entry.length-1][b.order].$t);var d=new Date;d.setTime((new Date(a[1]+a[2])).getTime()-1E3);b.m==d.getMonth()+1&&(a=b.y+"-"+f.fm(b.m)+"-"+f.fm(d.getDate())+"T"+f.fm(d.getHours())+":"+f.fm(d.getMinutes())+":"+f.fm(d.getSeconds())+"%2B09:00",f.createURL(a))}}},all:function(a){b.elem=document.getElementById(a);b.elem&&(b.L10N=/.jp$/i.test(location.hostname)?
!1:!0,a=/\/(20\d\d)\/([01]\d)\//.exec(document.URL),f.getFeed(a?new Date(a[1],Number(a[2])-1,1):new Date))}}}();Calendar2_Blogger.all("calendar2_blogger");
</script>

HTML/JavaScriptガジェットにこのコードをコピペして保存するだけです。

Calendar2_Blogger/Calendar2_Blogger.js at fc8949a23bd29dd7c891e26db5a70b0abb0f7afa · p--q/Calendar2_Blogger

これは整形したソースコードです。

Bloggerの制限でフィードで一度に取得できる投稿数は150個までなので、月に150個以上の投稿がある場合は、再度フィードを取得しにいきます。

その結果カレンダーの描画に時間がかかることになります。
 

カレンダーの使い方

丸い背景が付いている日が投稿のある日です。

アイテムページ以外ではまず今月のカレンダーが表示されます。

アイテムページではその投稿の月のカレンダーが表示されます。


投稿のある日にマウスポインタを乗せると投稿タイトル一覧がツールチップに表示されます。

title属性を使っているのでマウスポインタを乗せてからツールチップが表示されるまで少し時間がかかります。

また投稿タイトルは新しい投稿のものが先に表示されます。


投稿のある日をクリックするとカレンダーの下に、その月日とその日の投稿のサムネイルあればそれとタイトルが表示されます。

表示している日の背景が濃くなり、また数字の下に下線が表示されます。

投稿のない日をクリックするとこれらの表示は消えます。

 上部にある左右の矢印をクリックすると月が変わります。

左の矢印をクリックすると新しい月、右の矢印をクリックすると古い月を表示します。


カレンダーのタイトルをクリックすると、投稿が更新日の表示に切り替わります。

更新したことのない投稿は公開日が更新日となります。


月の切替と公開日と更新日の切替はそのたびにフィードを取得するので表示に少し時間がかかります。

モバイルサイトでも機能は同じですが、タッチデバイスではtitle属性を使ったツールチップを表示させることは難しいでしょう。

jpドメイン以外では英語版になる

jpドメイン以外の表示では英語版のカレンダーになります。


投稿タイトルの翻訳はできません。

次の関連記事:Blogger:カレンダー(10)祝日データを作成してJSON文字列化する