Blogger:全投稿数をカウントして表示するJavaScript

イントロダクション

Blogger へ投稿した記事の数を表示できると便利ですよね。

というわけで、Blogger へ投稿した全投稿数を表示する JavaScript を作成してみました。

原理

Blogger へ投稿した全投稿数をカウントするために、ブログアーカイブを参照します。

ブログアーカイブの各年ごとの投稿数をカウントして、全投稿数を計算します。
計算した全投稿数を id="total_archives" の要素に挿入します。

ソースコード

全投稿数を表示したい場所に埋め込む HTML

<span id="total_archives"></span>

bodyタグ内の最後に埋め込む JavaScript

最適化前

<script type='text/javascript'>
//<![CDATA[
<!--

// --- Util ---

/*
タグ名から子要素のみを選択して取得する
*/
function getChildElementsByTagName(obj, tagName) {
    var items = new Array();

    for (var i = 0; i < obj.childNodes.length; i++) {
        if (obj.childNodes[i].tagName !== void 0)          // undefined でなければ処理
        {
            if (obj.childNodes[i].tagName.toLowerCase() == tagName.toLowerCase()) {
                items.push(obj.childNodes[i]);
            }
        }
    }

    return items;
}


// --- Main ---

/*
ブログアーカイブの総数をカウントして、返却する

id_archive : ブログアーカイブの id
戻り値：ブログアーカイブの総数
*/
function getAllArchivesCount(id_archive) {

    var obj_archive = document.getElementById(id_archive);                  // ブログアーカイブ取得
    var obj_year_archives = getChildElementsByTagName(obj_archive, "ul");    // 年毎の ul を取得

    // 年毎のアーカイブを合計する
    var sum = 0;
    for (var i = 0; i < obj_year_archives.length; i++) {

        var obj_year_archive_childs = getChildElementsByTagName(obj_year_archives[i], "li");            // 直下の li 取得
        var obj_year_archive_counts = getChildElementsByTagName(obj_year_archive_childs[0], "span");    // カウント数が納められている span 取得

        var splitCountText = obj_year_archive_counts[0].innerHTML.match(/(\([^\d]*)(\d+)([^\d]*\))/m);  // カウント数のテキスト解析
        var year_archive_count = Number(splitCountText[2]);                                             // カウント数取得

        sum += year_archive_count;
    }

    return sum;
}

/*
ブログアーカイブの総数をカウントして、表示する

id_insert : カウントした総数を表示する要素の id
id_archive : ブログアーカイブの id
*/
function insertArchivesCount(id_insert, id_archive) {

    // 全アーカイブの数を取得
    var count = getAllArchivesCount(id_archive);

    // 全アーカイブの数を表示
    var obj_insert = document.getElementById(id_insert);
    obj_insert.innerHTML = "" + count + " Archives in this.";
}


// --- 実行 ---
insertArchivesCount('total_archives', 'BlogArchive1_ArchiveList');


//-->
//]]>
</script>

最適化後

上記コードを、Closure Compiler（Googleが提供しているコード圧縮・最適化ツール）にて最適化しました。

上記コードを変更せずにそのまま使う場合には、以下のコードをそのまま使用できます。

<script type='text/javascript'>
//<![CDATA[
<!--
function getChildElementsByTagName(a,d){for(var c=[],b=0;b<a.childNodes.length;b++)void 0!==a.childNodes[b].tagName&&a.childNodes[b].tagName.toLowerCase()==d.toLowerCase()&&c.push(a.childNodes[b]);return c}function getAllArchivesCount(a){a=document.getElementById(a);a=getChildElementsByTagName(a,"ul");for(var d=0,c=0;c<a.length;c++)var b=getChildElementsByTagName(a[c],"li"),b=getChildElementsByTagName(b[0],"span")[0].innerHTML.match(/(\([^\d]*)(\d+)([^\d]*\))/m),d=d+Number(b[2]);return d}
function insertArchivesCount(a,d){var c=getAllArchivesCount(d);document.getElementById(a).innerHTML=""+c+" Archives in this."}insertArchivesCount("total_archives","BlogArchive1_ArchiveList");
//-->
//]]>
</script>

結果

以下のように全投稿数をカウントできました。

実行結果

全投稿数が見える化されることで、読者はもっとほかのページも見てみようと思ったりするかもしれません。