2018年6月12日火曜日

Bloggerにカレンダーのガジェットを追加する(自作ガジェット:ウズカレンダー)

このブログを展開するBloggerにはカレンダーのガジェットが無い。
ブログにカレンダーは必須アイテムだと思うのですが、何故無いのでしょうね……。

検索してみたところ、実現しているところもあるようなのですが、導入しても動かなかったり、自分のイメージと違ったり。


THE INTERNET MAN 様のところは、恐らくこのブログが「https」であるのに対し、THE INTERNET MAN 様のアクセス先が「http」であることが原因だと思います。

どうしても思ったようにならん。

こうなったら自分で作るか!!

そして完成した、このウズマスター自作ガジェット「ウズカレンダー」を皆さまにお届けします。




jQuery追加

ウズカレンダーはjQueryプラグインとして開発しています。
「管理画面」⇒「テーマ」⇒「HTMLの編集」より、ブログにjQueyを読み込ませてください。

ヘッダーにjQueryを追加

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>

jQuery無しで実現出来た方が導入も簡単だとは思いましたが、世の中のマルチブラウザ対応を考慮すると、jQueryに乗った方が無難ですからね。
(実はタブレットで見たら動いてなかった、とかあったら嫌でしょ?)

アーカイブを日別にする

「管理画面」⇒「レイアウト」から、ブログ内にアーカイブを日別で設置して下さい。


これね~、私は本当は「月別」でやりたかったんですよ。
だけど、「日別」にしなければ日付で括られるリンク先がBlogger内に作成されません。

ただカレンダーを置くだけなら不要ですが、普通はカレンダーをクリックしたら、その日付の記事に飛びたいですよね?

ここは妥協してアーカイブは「日別」にして下さい。

HTML/JavaScriptガジェットの追加

「管理画面」⇒「レイアウト」から、ブログ内にHTML/JavaScriptガジェットを設置して下さい。
その中身はこれ!!

ウズカレンダー・ソース(コピペ推奨)

<style>

   .uzu_calendar_table{
      padding:0;
      width: 100%;
   }

   .uzu_calendar_table tr td{
      text-align:center;
   }

   .uzu_calendar_table tr td.cell a{
      text-decoration: underline;
   }

</style>

<table class="uzu_calendar_table">
   <thead>
      <tr>
         <td class="cell" style="color: #CC0000;">日</td>
         <td class="cell" style="color: #000000;">月</td>
         <td class="cell" style="color: #000000;">火</td>
         <td class="cell" style="color: #000000;">水</td>
         <td class="cell" style="color: #000000;">木</td>
         <td class="cell" style="color: #000000;">金</td>
         <td class="cell" style="color: #0066CC;">土</td>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
      </tr>
      <tr>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
      </tr>
      <tr>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
      </tr>
      <tr>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
      </tr>
      <tr>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
         <td class="cell calendar-day">&nbsp;</td>
      </tr>
      </tbody>
   <tfoot>
      <tr>
         <td colspan="7">
            <div>
               <span id="calendar_pre_month"><a id="calendar_pre_month_a" href="#">&lt;&lt;</a></span>
               <span id="calendar_this_month"></span>
               <span id="calendar_next_month"><a id="calendar_next_month_a" href="#">&gt;&gt;</a></span>
            </div>
         </td>
      </tr>
   </tfoot>
</table>

<script>

var UzuCalenderUtils = new function() {

   //ドメインに応じて任意に書き換える
   this.domain_url = "https://www.uzumax.org/";

   //カレンダー構築処理起動
   //画面描画をスムーズにする為に僅かに非同期にしています。
   this.buildCalendar = function(target_date) {
      setTimeout(function(){
         UzuCalenderUtils._buildCalendar(target_date);
      },1);
   };

   //該当月のカレンダーの構築
   this._buildCalendar = function(target_date) {
   
      $("#calendar_this_month").html(UzuCalenderUtils.formatDate(target_date,"YYYY年MM月"));
      
      $("#calendar_pre_month_a").off("click");
      $("#calendar_pre_month_a").click(function() {
         UzuCalenderUtils.buildCalendar((new Date(target_date.getFullYear(), target_date.getMonth() - 1, 1)));
         return false;
      }); 
   
      $("#calendar_next_month_a").off("click");
      $("#calendar_next_month_a").click(function() {
         UzuCalenderUtils.buildCalendar((new Date(target_date.getFullYear(), target_date.getMonth() + 1, 1)));
         return false;
      }); 

      var firstDate = (new Date(target_date.getFullYear(), target_date.getMonth(), 1));
      var lastDate  = (new Date(target_date.getFullYear(), target_date.getMonth() + 1, 0));

      var firstWeek = firstDate.getDay();
      var lastDay = lastDate.getDate();

      var count = -firstWeek;

      $(".calendar-day").each(function() {

         ++count;
         if(count>0 && count <= lastDay){
            $(this).text(count)
         }else{
            $(this).text(" ")
         }
      
      });
      
      UzuCalenderUtils._create_archive_link(target_date)
      
   };

   //Feedから記事の存在チェックを行い、存在すればリンクを作成する。
   //Blogger自身にリンク先のURLを作成するため、画面内の「アーカイブ」を「日毎」に設定すること。
   this._create_archive_link = function(target_date) {

      //日本時間との時差調整のため、前後1日分多く取得する。
      var firstDate = (new Date(target_date.getFullYear(), target_date.getMonth(), 0));
      var lastDate  = (new Date(target_date.getFullYear(), target_date.getMonth() + 1, 1));

      var firstWeek = (new Date(target_date.getFullYear(), target_date.getMonth(), 1)).getDay();

      var sendUrl = UzuCalenderUtils.domain_url +'feeds/posts/summary?published-min=';
      sendUrl = sendUrl + UzuCalenderUtils.formatDate(firstDate);
      sendUrl = sendUrl + 'T00:00:00&published-max=';
      sendUrl = sendUrl + UzuCalenderUtils.formatDate(lastDate);
      sendUrl = sendUrl + 'T23:59:59&orderby=published&max-results=500';

      $.ajax({
         url: sendUrl,
         type:'GET',
         dataType:'xml',
         timeout:10000,
         success:function(xml){
      
            $(xml).find("entry").find("published").each(function() {
              var thisDate = new Date($(this).text())
              var targetDayPos = thisDate.getDate() + firstWeek - 1;
              
              //時差調整で入って来る範囲外データの除去
              if(thisDate.getMonth() != target_date.getMonth()){
                 return true;
              }

              var linkUrl = UzuCalenderUtils.domain_url + UzuCalenderUtils.formatDate(thisDate,"YYYY_MM_DD") + "_archive.html"

              $(".calendar-day:eq(" + targetDayPos + ")").html("<a href='" + linkUrl + "'>" + thisDate.getDate() + "</a>")

            });
         }
      });
   
   };

   //日付型を任意の文字列に書き換える
   this.formatDate = function(date, format) {
      if (!format) format = 'YYYY-MM-DD';
      format = format.replace(/YYYY/g, date.getFullYear());
      format = format.replace(/MM/g, ('0' + (date.getMonth() + 1)).slice(-2));
      format = format.replace(/DD/g, ('0' + date.getDate()).slice(-2));
      return format;
   };
   
}

$(function(){

   //画面初期表示時の構築起動
   UzuCalenderUtils.buildCalendar(new Date());

});

</script>

「https://www.uzumax.org/」となっている所はこのブログのドメインですので、転用する時は各自で書き換えて下さい。

所感

直球のJavaScript処理で実現しています。
私のようなプログラマーでない人は上の長文ソースを見て萎えるかもしれませんが、コピペしてドメインを変えるだけで動くはずですので、ぜひ持って行ってください。

また、本当に直球処理ですので、私のようなプログラマーブロガーであれば自身でちょっと覗けばデザインを書き換えちゃうことも容易だと思います。

カレンダーが無くて困っている皆さまのお役に立てれば幸いです。

開発者向け解説

カレンダーを改造したいプログラマー向け。
ソースの意味はこっちを参考にして下さい。


0 件のコメント:

コメントを投稿