Blogger:人気の投稿の表示期間をクリックで切り替え(改良版)

2015年2月21日土曜日

Blogger:人気の投稿の表示期間をクリックで切り替え(改良版)

ラベル: Blogger, Bloggerカスタマイズ, JavaScript, 人気の投稿

イントロダクション

以前、Googleのブログサービス「Blogger」の、人気の投稿ガジェットの期間をクリックで切り替えられる仕組みを作成しました。

Blogger:人気の投稿の表示期間をクリックで切り替えられるようにしてみた - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.com/2014/05/blogger_26.html

このブログでは、その時作成した JavaScript ソースコードをずっと今まで使ってきました。

自分自身、実際に使ってみてこの仕組みはとても便利なものでしたが、JavaScript コードに以下の問題があることがわかってきました。

ページ読み込み時に、人気の投稿の表示期間の切り替え用の要素（期間切り替えナビゲーション）を作成していますが、期間切り替えナビゲーションを人気の投稿の上部に挿入するときに、人気の投稿の HTML コードを全部書き換えてします。

→ 既に解析が終わった人気の投稿の HTML コードを再び解析しなければならないので、ページ表示時の負荷が増えてしまいます。

人気の投稿の表示期間を切り替えるたびに、人気の投稿の HTML コードを全部書き換えるような作りになっています。

→ 人気の投稿の表示期間を切り替えるたびに、既に解析が終わった人気の投稿の HTML コードを再び解析しなければならないので、あまり良い作りとは言えません。

使用している変数がページ全体で有効になっているため、滅多には起こらないとは思いますが、他の JavaScript コードと干渉する可能性があります。

人気の投稿ガジェットを表す id は、すべての Blogger ユーザで一致しない可能性があり、その場合には JavaScript コード中の人気の投稿ガジェットを表す id を各自の人気の投稿ガジェットを表す id に書き換える必要がありますが、どこを書き換えればいいのか分かりづらい作りになっています。

そこで、以上の問題点を改良した JavaScript コードを作成しました。

なお、このコードでは、標準で過去 7 日間がページ表示時には表示されるようになっています。

また、人気の投稿ガジェットの id と、各期間との対応は次のようになっています。

var popular_post_all = {id:"PopularPosts1", name:"全期間"};
var popular_post_30days = {id:"PopularPosts3", name:"過去 30 日間"};
var popular_post_7days = {id:"PopularPosts2", name:"過去 7 日間"};

自身が使っている Blogger の人気の投稿ガジェットの id と、上の id と各期間の対応が異なる場合、ソースコード中のデータを変更する必要があります。

改良後ソースコード

このソースコードを </body> の手前に設置します。

<!-- 人気の投稿-期間変更 START -->
<script type='text/javascript'>
    //<![CDATA[
    <!--
    (function () {
     
        /*
        Blogger ブログの状況に応じた設定
        必要に応じて、この部分を自身の Blogger の設定に書き換える必要があります
        */
        var popular_post_all = {id:"PopularPosts1", name:"全期間"};
        var popular_post_30days = {id:"PopularPosts3", name:"過去 30 日間"};
        var popular_post_7days = {id:"PopularPosts2", name:"過去 7 日間"};

        var top_popular_post_id = popular_post_all.id;                  // 人気の投稿ガジェット群の先頭の要素の id
        var default_popular_post_id = popular_post_7days.id;            // 最初に表示する人気の投稿の id
        /* Blogger ブログの状況に応じた設定 ここまで */

        /*
        その他リソース
        */
        var chage_popular_post_navi_id = "change-popular-post-navi";    // 人気の投稿の期間変更用ナビゲーションの id
        var display_popular_post_id = default_popular_post_id;          // 現在表示されている人気の投稿の id


        // 人気の投稿の切り替え
        function changePopularPost(id) {
         
            if ( display_popular_post_id != id ) {

                var obj_old = document.getElementById(display_popular_post_id);
                var obj_new = document.getElementById(id);

                obj_old.style.display = "none";
                obj_new.style.display = "block"

                // ナビゲーション更新
                var obj_navi = document.getElementById(chage_popular_post_navi_id);
                obj_navi.innerHTML = "";
                obj_navi.appendChild(getPopularPostNavigationObject(id));

                display_popular_post_id = id;
            }
        }

        // 人気の投稿の切り替えナビゲーションを取得
        function getPopularPostNavigationObject(id) {
      
            // ナビゲーションの要素を作成
            function createNaviItem(id, select, title) {
                var obj_item = document.createElement("a");
                obj_item.setAttribute("href", "javascript:void(0);");
                obj_item.innerHTML = title;
                if ( select ) {
                    obj_item.setAttribute("style", "background-color:#ffffcc;");
                }

                obj_item.onclick = function() {
                    changePopularPost(id);
                };

                return obj_item;
            }

            // ナビゲーションの要素を要素へ追加
            function appendNaviItem(obj, id_select, id_this, title) {
                obj.appendChild(createNaviItem(id_this, id_select == id_this, title));
            }

            var obj_navi = document.createElement("span");
            appendNaviItem(obj_navi, id, popular_post_all.id, popular_post_all.name);
            obj_navi.appendChild(document.createTextNode(" | "));
            appendNaviItem(obj_navi, id, popular_post_30days.id, popular_post_30days.name);
            obj_navi.appendChild(document.createTextNode(" | "));
            appendNaviItem(obj_navi, id, popular_post_7days.id, popular_post_7days.name);

            return obj_navi;
        }

        // 切り替え可能な人気の投稿の準備
        function initChangePopularPost() {
         
            // 先頭の人気の投稿を取得し、上部にナビゲーションを設定
            var obj_popular_post_top = document.getElementById(top_popular_post_id);
         
            var obj_navi = document.createElement("div");
            obj_navi.setAttribute("id", chage_popular_post_navi_id);
            obj_navi.appendChild(getPopularPostNavigationObject(default_popular_post_id));
            obj_popular_post_top.parentNode.insertBefore(obj_navi, obj_popular_post_top);
        }

        // 遅延して実行
        setTimeout(initChangePopularPost, 0);
    })();

    //-->
    //]]>
</script>
<!-- 人気の投稿-期間変更 END -->

改良後CSS

以下の CSS を設定する必要があります。

設定は、Blogger のテンプレートのカスタマイズの、上級者向けの CSS を追加に張り付けることで行うことができます。

#change-popular-post-navi {
font-size: 18px;
}

/* 切り替えのために使用する人気の投稿データは非表示にする */
#PopularPosts1 {
display:none;
}
#PopularPosts3 {
display:none;
}

事前準備

前回のときと同じように、人気の投稿ガジェットの期間を変えたものを 3 つ、連続で用意しておく必要があります。

人気の投稿ガジェットを３つの積算期間分用意

最適化したソースコード

なお、上記の人気の投稿の id 設定が、現在お使いの Blogger の id 設定と同じ場合、最適化した以下のソースコードをそのまま使用することができます。

<!-- 人気の投稿-期間変更 START -->
<script type='text/javascript'>
    //<![CDATA[
    <!--
(function(){function k(b){function c(b,a,c){var d=document.createElement("a");d.setAttribute("href","javascript:void(0);");d.innerHTML=c;a&&d.setAttribute("style","background-color:#ffffcc;");d.onclick=function(){if(e!=b){var a=document.getElementById(e),c=document.getElementById(b);a.style.display="none";c.style.display="block";a=document.getElementById(l);a.innerHTML="";a.appendChild(k(b));e=b}};return d}function f(a,b,e,d){a.appendChild(c(e,b==e,d))}var a=document.createElement("span");f(a,b,g.id,
g.name);a.appendChild(document.createTextNode(" | "));f(a,b,m.id,m.name);a.appendChild(document.createTextNode(" | "));f(a,b,h.id,h.name);return a}var g={id:"PopularPosts1",name:"全期間"},m={id:"PopularPosts3",name:"過去 30 日間"},h={id:"PopularPosts2",name:"過去 7 日間"},p=g.id,n=h.id,l="change-popular-post-navi",e=n;setTimeout(function(){var b=document.getElementById(p),c=document.createElement("div");c.setAttribute("id",l);c.appendChild(k(n));b.parentNode.insertBefore(c,b)},0)})();
    //-->
    //]]>
</script>
<!-- 人気の投稿-期間変更 END -->