日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2014年5月13日火曜日

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>

結果

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

実行結果


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





関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...
Related Posts Plugin for WordPress, Blogger...