ずっとtdiaryによるweb日記から日々のTwitterのつぶやきをこのページにまとめているわけですが、ふと、日付毎につぶやきはまとまっているのだから、ちょっと見せ方を変えるだけでいわゆる「10年日記」的な機能は簡単に実現出来ることに気が付きました。
そこでぼんやり実現方法を考えていたんですが、今回はhugoレベルに手を入れて10年日記ページを生成させるよりも、すでに日別になっている現在のページをフロントエンドで合成した方がお手軽で早そう、と思い、そっちの方向で実現してみることにしました。
準備
フロントエンドで「過去をさかのぼってカレンダー上の『その日』のエントリを合成」するには、やはりJavaScriptでAjax的にページを読んだりする必要がありますので、今回このページとしては初めてjqueryを導入しました。また合成したページはフローティングポップアップで表示されるようにしてみたかったので、そのためのJS libraryであるところのcolorboxも利用しました。それぞれ下記リンクから入手出来ます。
上記JS libraryを、hugo-home/static/以下に置いておいて、hugo-home/layouts/partials/header.htmlなどで以下のような感じで読み込んでおきます。
<link rel="stylesheet" href="/css/colorbox.css">
:
<script src="/js/jquery-1.12.1.min.js"></script>
<script src="/js/jquery.colorbox-min.js"></script>
実際のコード
最近のJS libraryは高機能なので、以下のようなコードだけでやりたいことが実現出来てしまいます。今回僕はindexページでのみ10年日記機能を有効にしたかったので、hugo-home/layouts/index.htmlのヘッダを読み込んでいる直後に以下のようなコードを追加しました。
<script type="text/javascript">
<!--//
function cyclic(date) {
var year = date.substring(0, 4);
var monthday = date.substring(5, 7) + date.substring(8, 10);
var getmain = function(y, md){
return $.Deferred(function(defer){
$.ajax({url:"/" + y + "/" + md + "/"}).done(function(data){
defer.resolve("<main role='main'>" + $("main", data).html() +"</main>");
}).fail(function(){
defer.resolve("");
});
}).promise();
};
var dfds = [];
for (var i = year; i > 2003; i--)
dfds.push(getmain(i, monthday));
$.when.apply(this, dfds).done(function(){
var h = "";
var resArray = Array.prototype.slice.call(arguments);
$.each(resArray, function(i, res){
if (res != "")
h = h + res + "<hr/>";
});
if (h != "")
$.colorbox({width:"100%", maxWidth:"770px", height:"100%", html:h});
});
}
//-->
</script>
その上で、上記関数を以下のような形で呼び出すようにしました。
<span onclick="cyclic('{{ .Date.Format "2006-01-02" }}');" style="cursor: pointer"><i class="icon-calendar calendar_icon"></i></span>
上記はカレンダー型のicon fontを使っているので若干複雑に見えますが、ようはaタグの代わりにspanタグでclickイベントを拾い、関数を適当な引数で呼び出しているだけです。簡単ですな。
おしまい
少しでもお楽しみいただければ幸いでした。
きょうのつぶやき@digitune
機能追加した◯年日記機能について記録しました＞いわゆる「10年日記」的機能を追加する - Digitune [memo] http://memo.digitune.org/2016/years_diary/ (21:24 Twitter Web Clientから・詳細)
