前の関連記事：Blogger:カレンダー(8)Calendar2_Bloggerモジュールの作成その2
HTML/JavaScritpガジェットにコードをコピペするだけ
導入方法は簡単です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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> |
Calendar2_Blogger/Calendar2_Blogger.js at fc8949a23bd29dd7c891e26db5a70b0abb0f7afa · p--q/Calendar2_Blogger
これは整形したソースコードです。
Bloggerの制限でフィードで一度に取得できる投稿数は150個までなので、月に150個以上の投稿がある場合は、再度フィードを取得しにいきます。
その結果カレンダーの描画に時間がかかることになります。
カレンダーの使い方
丸い背景が付いている日が投稿のある日です。
アイテムページ以外ではまず今月のカレンダーが表示されます。
アイテムページではその投稿の月のカレンダーが表示されます。
投稿のある日にマウスポインタを乗せると投稿タイトル一覧がツールチップに表示されます。
title属性を使っているのでマウスポインタを乗せてからツールチップが表示されるまで少し時間がかかります。
また投稿タイトルは新しい投稿のものが先に表示されます。
投稿のある日をクリックするとカレンダーの下に、その月日とその日の投稿のサムネイルあればそれとタイトルが表示されます。
表示している日の背景が濃くなり、また数字の下に下線が表示されます。
投稿のない日をクリックするとこれらの表示は消えます。
上部にある左右の矢印をクリックすると月が変わります。
左の矢印をクリックすると新しい月、右の矢印をクリックすると古い月を表示します。
カレンダーのタイトルをクリックすると、投稿が更新日の表示に切り替わります。
更新したことのない投稿は公開日が更新日となります。
月の切替と公開日と更新日の切替はそのたびにフィードを取得するので表示に少し時間がかかります。
モバイルサイトでも機能は同じですが、タッチデバイスではtitle属性を使ったツールチップを表示させることは難しいでしょう。
jpドメイン以外では英語版になる
jpドメイン以外の表示では英語版のカレンダーになります。
投稿タイトルの翻訳はできません。
はじめまして、こんにちは。
返信削除カレンダーを利用させていただきました。
使い勝手が良くて、可愛くて素敵ですね。
カレンダー機能が無くて困っていたので助かりました。
ありがとうございました(ﾟ▽＾)ﾉ
ありがとうございます。
削除そのうちもうちょっとスマートなコードにしようと思っています。