• 2018-06-12
ウズマスター戦記
ウズマスター戦記 https://www.uzumax.org/2018/06/blogger.html

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ガジェットを設置して下さい。
その中身はこれ!!

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

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

<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>

これで終わり。
ちょっとソースが多いけどちゃんとコピペすれば動くはずです。

所感

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

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

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

開発者向け解説

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

追伸

無事に導入成功したら宣伝して頂けると嬉しいです。v(^_^)

6 件のコメント:

  1. こんにちは。
    Bloggerカレンダーを調べていたとこちらのページへたどり着きました。
    便利なものを共有いただきありがとうございます。

    早速設置手順通りしてみたのですが、記事のある/無いの表示が上手くされず困りました。
    何かやり方が悪かったのでしょうか……。記事のある/無いの設定も何かあるのでしょうか?
    よろしければ教えてください、よろしくお願いします。

    返信削除
  2. ウズマスターRYU2018年6月25日 18:03

    使って頂けて何よりです。ありがとうございます。
    基本的にベタッと張ってしまえば動くはず。。。

    「記事のある/無い」の表示がうまくいかないということは、カレンダー本体は描画されているということだと思います。
    ならばjQueryの作動は正常です。

    アーカイブ日別は「リンク先URLの生成」のために必要な作業であって、「記事のある/無い」には影響しない。

    となると、気がかりな点は以下です。

     ・URLがこのブログの「https://www.uzumax.org/」のままになっている。

    「https://www.uzumax.org/」をご自身のURLに変更されていますでしょうか?

    返信削除
  3. ウズマスターRYU様
    こんなに早くお返事頂けると思っていなかったので嬉しいです。ありがとうございます。

    ご指摘いただいた部分につきましても、自分のURLに変更しております。
    仰る通りカレンダーの表示はできています。
    アーカイブは日別に設定しています。

    これで大丈夫だと思ったのですが……上手くいきませんでした。。(*_*)

    返信削除
    返信
    1. ウズマスターRYU2018年6月26日 11:34

      う~ん。何だろう……。

      症状からすると、記事がある/ないを判断する通信部分に問題が発生しているはずです。

      以下のURLで、自分自身のFeedは取得出来ていますでしょうか?
      これの取得結果に基づいて記事のある/ないを判定しています。


      ・https://www.uzumax.org/feeds/posts/summary?published-min=2018-05-31T00:00:00&published-max=2018-07-01T23:59:59&orderby=published&max-results=500


      ブログ設定次第では「https」ではなく「http」としなければならないかもしれません。
      本体のブログが「https」ならスクリプトも「https」、
      本体のブログが「http」ならスクリプトも「http」です。


      また、カレンダーは同じブログである必要があります。
      2つブログを持っている場合、お互いのカレンダーを呼ぶことは出来ません。

      削除
    2. ウズマスターRYU様

      お返事ありがとうございます。
      やっと原因が解りました。

      個人の日記で非公開にしていた為に、リンクができなくなるようです。
      公開すれば問題なく動いておりました。
      お手数おかけしまして、申し訳ございませんでした。

      削除
  4. ウズマスターRYU2018年6月26日 17:41

    原因が解決して良かったです。
    私としても別のサイトで動いてくれることが分かって安心しました。

    しかし、非公開だと動かないんですね。。。たぶん、Feedが無い作成されないのでしょう。
    Bloggerもなかなか厄介なものです。

    返信削除

お気軽にコメント下さい。