GitLabの芝をブログに表示する方法

ブログに書いたコードが動かなかったのでこちらにも書いておきます。

findを使ってたのですが、filterを使わないと動かなくなってた。GitLab側の変更かも。

<script src="/bower_components/jquery.ajax/jquery.min.js"></script>
<script src="/bower_components/jquery.xdomainajax/jquery.xdomainajax.js"></script>
<script src="/bower_components/d3/d3.min.js" charset="utf-8"></script>
<script src="/bower_components/cal-heatmap/cal-heatmap.min.js"></script>
<link rel="stylesheet" href="/bower_components/cal-heatmap/cal-heatmap.css" />

<h3>Calendar Activities</h3>
<div id="cal-heatmap"></div>
<div id="example-heatmap"></div>

<script>
jQuery(function ($) {
    var json;
        $.ajax({
        type: 'GET',
        url: 'https://gitlab.com/u/syui/calendar',
        dataType: 'html',
        async: false,
        cache: false,
        success: function(data) {
        var content = $(data.responseText).filter('script').html();
        var tmp = content.replace("<![CDATA[", "").replace("]]>", "");
        var s = tmp.indexOf( "{" );
        var e = tmp.indexOf( "}" );
        json = tmp.substring( s, e+1 );
        $('#gitlab-calendar-activities').text(json);
        }
    });
    setTimeout( $('#example-heatmap').each(function () {
    //setTimeout( function() {
        if( json != null ){
        var obj = $.parseJSON(json);
        var now = new Date();
        new CalHeatMap().init({
          data: obj,
          domain: 'month',
          domainLabelFormat: '%Y-%m',
          itemSelector: '#example-heatmap',
          legend: [1, 3, 5, 7],
          legendColors: {
            min: "#efefef",
            max: "steelblue",
            empty: "#efefef"
          },
              tooltip: true,
          start: new Date(now.getFullYear(), now.getMonth() - 9)
        });
        } else {
            setTimeout( arguments.callee, 100 );
        }
    }));
});
</script>

<!--
<div id="gitlab-calendar-activities" style="display:none;"></div>
-->

こんな感じで使えます。

簡単に説明すると、クロスドメイン経由でGitLabのカレンダー情報(HTML)をスクレイピングして、JSONに変換し、それをcal-heatmapで表示するというものです。