いわゆる「10年日記」的機能を追加する

ずっとtdiaryによるweb日記から日々のTwitterのつぶやきをこのページにまとめているわけですが¹、ふと、日付毎につぶやきはまとまっているのだから、ちょっと見せ方を変えるだけでいわゆる「10年日記」的な機能は簡単に実現出来ることに気が付きました。

そこでぼんやり実現方法を考えていたんですが、今回はhugoレベルに手を入れて10年日記ページを生成させるよりも、すでに日別になっている現在のページをフロントエンドで合成した方がお手軽で早そう、と思い、そっちの方向で実現してみることにしました。

準備

フロントエンドで「過去をさかのぼってカレンダー上の『その日』のエントリを合成」するには、やはりJavaScriptでAjax的にページを読んだりする必要がありますので、今回このページとしては初めてjqueryを導入しました。また合成したページはフローティングポップアップで表示されるようにしてみたかったので、そのためのJS libraryであるところのcolorboxも利用しました。それぞれ下記リンクから入手出来ます。

• jQuery
• Colorbox - a jQuery lightbox

上記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イベントを拾い、関数を適当な引数で呼び出しているだけです。簡単ですな。

おしまい

少しでもお楽しみいただければ幸いでした。