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

Blogger用カレンダーガジェット「ウズカレンダー」の解説

Bloggerにはカレンダーのガジェットが無いので、自分で作りました。
Blogger用カレンダーガジェット「ウズカレンダー」です。


ガジェットの導入方法は上記のとおりなのですが、このガジェットっていうかこのソースはガチンコの直球処理ですので、自分で改造したいって人もいるんじゃないかと思います。

別に何てこと無い処理ですので、ぜひやって頂きたいと思います。

ただ、ソースに変なところもあるかもしれないので、改造する人向けに説明記事を書かせて頂きたいと思います。

jQuery

これが分からない人は改造不可能だと思いますが、ウズカレンダーはjQueryを使用しています。
jQueryを使う理由は、マルチブラウザ対応を期待してのものです。

今の時代、パソコン、タブレット、スマホと機種が沢山あり、ブラウザも色々あり、どういう条件でブログが表示されているか分かりません。

JavaScriptというのは、このマルチブラウザ対応というのが非常に問題で、「Windowsのパソコンなら普通に見れるのに、iPadだと見えない」とか、ザラに発生します。

そうしたマルチブラウザの環境差異を吸収してくれることを期待するのが、jQueryを始めとするJSライブラリです。

jQueryの取得元は、当ブログではGoogleのCDN(コンテンツデリバリネットワーク)にあるものを拝借しています。
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>
Blogger自身がGoogleなので、GoogleのCDNを使うのが合理的でしょう。

しかし、GoogleがCDNの公開をやめてしまうと途端に動かなくなってしまうリスクをはらんでいます。
それが嫌な人は、自分で別のどこかに場所を借りてjQueryを設置し、それを読み込むのが良いでしょう。

私自身は、動かなくなったら都度、寄生先のCSNをワープしていくつもりです。

カレンダー構築方法

カレンダーのうち、日付と曜日をマスに入れていく処理は、jQueryを活用しつつ、地道にロジックを組んで頑張っています。

対象月の初日が何曜日かを判定し、そこを起点に1から順に増やしていくだけ。

特記事項は特に無いので、単純にソースを見て貰えれば分かるでしょう。

カレンダー本体にはjQueriy-UIを流用することも考えましたが、シンプルイズベストの方が良いかと思ってやめました。

どうやって記事のある/無いを取っているのか?

一番の特徴。
カレンダーの該当日付に投稿があればその日にリンクが付いて、無ければ単純テキストになっています。

この情報はですね、フィードから取っているんですよ。
以下のURLでフィードが取れます。


「published」は投稿日時という意味で、この範囲を対象月の初日と末尾にセットすることで、対象月の記事の一覧を取得しています。

が、ちょっと問題がありましてね、「published-min」「published-max」に設定する時間って、グリニッジ標準時であって日本時間じゃないんですよ。

HTTPクエリのパラメータでタイムゾーンをセット出来るかとも思ったんですけど、よく分からなくって……。
理論上は、日本時間から+9時間した値を変数としてセットすればOKのはずですが、境界値とかで微妙なことでバグっていたら嫌ですからね。
もう前後丸一日余分に取っちゃってます。それくらい、別に負荷の問題にはならんでしょう。(手抜きスマソ)

日付範囲を余分に広くして回避

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

JavaScriptの判定で対象月外のデータを除去

//時差調整で入って来る範囲外データの除去
if(thisDate.getMonth() != target_date.getMonth()){
   return true;
}

あと、HTTPクエリの「max-results=500」は取得件数の最大値を意味していますが、この500が限度です。
なので1ヵ月に500回以上投稿するとこのカレンダーは不具合を起こしてしまいます。

1ヵ月に500回以上も投稿しているブログはまず無いと思いますが、もしそういう人がいたら、2回に分けて取得するとかで工夫して下さい。

ブログアーカイブは日別にする

このブログの右側にあるブログアーカイブですが、必ず日別にして下さい
そうでないと、リンクが作成されません


上記のURLの日付リンクって、ブログアーカイブを日別にしておかないと存在しないんですよ。
月別とかにしてから同じURLにアクセスしてもnot foundです。

カレンダーの日付についているリンクは上記のURLを指していますので。
必須です。


終わり

こんなところでしょうか。
分からない部分とか、修正した方が良い部分があったらコメント下さい。

0 件のコメント:

コメントを投稿

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