Blogger:JavaScript:新着情報を表示するガジェットを作成(6)-記事の投稿日を追加

2015年3月20日金曜日

Blogger:JavaScript:新着情報を表示するガジェットを作成(6)-記事の投稿日を追加

ラベル: Blogger, Bloggerカスタマイズ, JavaScript, 新着情報ガジェット作成

イントロダクション

Google のブログサービス「Blogger」にて、サムネイル付きの新着情報の一覧を任意の件数表示できる「新着情報ガジェット」を作成していくことにしました。

前回：
Blogger:JavaScript:新着情報を表示するガジェットを作成(5)-サムネイル画像を追加
http://upa-pc.blogspot.com/2015/03/blogger-new-post-list-gadget-javascript-5.html

今回は、記事の投稿日を新着記事一覧へ追加します。

新着情報を表示するガジェットを作成(6)-記事の投稿日を追加

記事の投稿日は、フィードのエントリーの published の $t から取得します。

記事の投稿日は、記事タイトルの下に、デフォルトでグレー色・右寄せで配置します。

スタイルシート：

    /* 新着記事の項目 */
    .new-post-list-item
    {
        clear:both;
    }
    
    /* 新着記事の最下部 */
    .new-post-list-items-end
    {
        clear:both;
    }
    
    /* 新着記事のサムネイル画像 */
    .new-post-list-item-img 
    {
        width:100px;
        height:100px;
        float:left;
        margin-right:1em;
    }
    
    /* 新着記事の投稿日 */
    .new-post-list-item-post-date
    {
        text-align:right;
        color:#999999;
    }

HTML/JavaScript コード：

<div id="new-post-list-container">
新着読み込み中...
</div>

<script type="text/javascript">
<!--
    setTimeout(function () {
        // --- Util ---

        // JavaScript動的挿入
        function addScript(src) {

            var script = document.createElement("script");
            script.setAttribute("type", "text/javascript");
            script.setAttribute("src", src);

            header_setChild(script);
        }

        // <head>取得
        function getHeader() {
            return document.getElementsByTagName("head")[0];
        }

        // <head>に子要素を追加
        function header_setChild(child) {
            var head = getHeader();
            head.appendChild(child);
        }


        // --- Main ---

        // *** 設定可能なパラメータ (Feed 関連) ここから ***

        // 新着記事を表示する件数
        // 上限は 500 件です
        var max_results = 5;


        // *** 設定可能なパラメータ (Feed 関連) ここまで ***


        // 記事一覧作成のトリガー
        loadFeed();

        // Feed の読み込み
        function loadFeed() {
            var blogger_url = location.protocol + "//" + location.host;
            addScript(blogger_url +
            "/feeds/posts/summary?alt=json-in-script&callback=newpost_loader&max-results=" + max_results +
            "&start-index=1&redirect=false");
        }

    }, 2000);        // 遅延実行(ミリ秒)
    
    function newpost_loader(data) {

        // *** 設定可能なパラメータ (見た目 関連) ここから ***

        // サムネイル画像を表示するかどうか
        var show_thumbnail = true;

        // サムネイルがない場合に使用するイメージ
        // デフォルト：1x1 の透明png画像(base64エンコード)
        var not_thumbnail_img_src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAAEElEQVR42mL4//8/A0CAAQAI/AL+26JNFgAAAABJRU5ErkJggg==";


        // 投稿日を表示するかどうか
        var show_post_date = true;

        // 投稿日のラベル
        var post_date_label = "post : ";


        // *** 設定可能なパラメータ (見た目 関連) ここまで ***


        // エントリーがある場合は、新着記事一覧の生成開始
        if (data.feed.entry) {
            if (data.feed.entry.length > 0) {
                createNewPostsList(data);
            }
        }

        // 新着記事一覧生成
        function createNewPostsList(data) {

            var obj_newPostList = document.createElement("div");
            obj_newPostList.setAttribute("class", "new-post-list-items");

            for (var i = 0; i < data.feed.entry.length; i++) {

                // リンク先の探索
                var href = "javascript:void(0);";
                for (var j = 0; j < data.feed.entry[i].link.length; j++) {
                    if (data.feed.entry[i].link[j].rel == "alternate") {
                        href = data.feed.entry[i].link[j].href;
                    }
                }


                // 全体の要素作成
                var obj_item = document.createElement("div");
                obj_item.setAttribute("class", "new-post-list-item");


                // 全体のリンク要素
                var obj_link = document.createElement("a");
                obj_link.setAttribute("href", href);
                obj_link.setAttribute("class", "new-post-list-item-link");
                obj_item.appendChild(obj_link);


                if (show_thumbnail) {
                    // サムネイル用イメージ要素作成
                    var obj_img = document.createElement("img");
                    obj_img.setAttribute("class", "new-post-list-item-img");

                    var img_src = not_thumbnail_img_src;    // サムネイル画像
                    if (data.feed.entry[i].media$thumbnail) {
                        if (data.feed.entry[i].media$thumbnail.url) {
                            img_src = data.feed.entry[i].media$thumbnail.url;
                        }
                    }
                    obj_img.setAttribute("src", img_src);
                    obj_link.appendChild(obj_img);
                }
                

                // 記事タイトル用要素作成
                var obj_title = document.createElement("div");
                obj_title.appendChild(document.createTextNode(data.feed.entry[i].title.$t));
                obj_title.setAttribute("class", "new-post-list-item-title");
                obj_link.appendChild(obj_title);


                if (show_post_date) {
                    // 投稿日時
                    var post_date = new Date(data.feed.entry[i].published.$t);
                    var post_date_text = post_date_label + post_date.getFullYear() + "/" +
                    (post_date.getMonth() + 1) + "/" +
                    post_date.getDate() + "";

                    var obj_post_date = document.createElement("div");
                    obj_post_date.setAttribute("class", "new-post-list-item-post-date");
                    obj_post_date.appendChild(document.createTextNode(post_date_text));

                    obj_link.appendChild(obj_post_date);
                }


                // 項目を連結
                obj_newPostList.appendChild(obj_item);
            }

            // 最下部の要素
            obj_end = document.createElement("div");
            obj_end.setAttribute("class", "new-post-list-items-end");
            obj_newPostList.appendChild(obj_end);


            // 画面上へ反映
            var obj_output = document.getElementById("new-post-list-container");
            obj_output.innerHTML = "";
            obj_output.appendChild(obj_newPostList);
        }
    }

//-->
</script>

HTML/JavaScript コード（配布版）：

今回で、この「新着情報を表示するガジェットを作成」シリーズは一つの区切りを迎えるので、配布版の圧縮・効率化したコードもここに記載します。

上記の HTML/JavaScript コードを改造せずそのまま使う場合には、コードサイズが小さくなるように最適化した以下のHTML/JavaScript コードを使用すると、ページの読み込み負荷を軽減することができます。

<div id="new-post-list-container">
新着読み込み中...
</div>

<script type="text/javascript">
<!--
setTimeout(function(){var a=location.protocol+"//"+location.host+"/feeds/posts/summary?alt=json-in-script&callback=newpost_loader&max-results=5&start-index=1&redirect=false",d=document.createElement("script");d.setAttribute("type","text/javascript");d.setAttribute("src",a);document.getElementsByTagName("head")[0].appendChild(d)},2E3);
function newpost_loader(a){if(a.feed.entry&&0<a.feed.entry.length){var d=document.createElement("div");d.setAttribute("class","new-post-list-items");for(var c=0;c<a.feed.entry.length;c++){for(var b="javascript:void(0);",e=0;e<a.feed.entry[c].link.length;e++)"alternate"==a.feed.entry[c].link[e].rel&&(b=a.feed.entry[c].link[e].href);e=document.createElement("div");e.setAttribute("class","new-post-list-item");var f=document.createElement("a");f.setAttribute("href",b);f.setAttribute("class","new-post-list-item-link");
e.appendChild(f);b=document.createElement("img");b.setAttribute("class","new-post-list-item-img");var g="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAAEElEQVR42mL4//8/A0CAAQAI/AL+26JNFgAAAABJRU5ErkJggg==";a.feed.entry[c].media$thumbnail&&a.feed.entry[c].media$thumbnail.url&&(g=a.feed.entry[c].media$thumbnail.url);b.setAttribute("src",g);f.appendChild(b);b=document.createElement("div");
b.appendChild(document.createTextNode(a.feed.entry[c].title.$t));b.setAttribute("class","new-post-list-item-title");f.appendChild(b);b=new Date(a.feed.entry[c].published.$t);b="post : "+b.getFullYear()+"/"+(b.getMonth()+1)+"/"+b.getDate()+"";g=document.createElement("div");g.setAttribute("class","new-post-list-item-post-date");g.appendChild(document.createTextNode(b));f.appendChild(g);d.appendChild(e)}obj_end=document.createElement("div");obj_end.setAttribute("class","new-post-list-items-end");d.appendChild(obj_end);
a=document.getElementById("new-post-list-container");a.innerHTML="";a.appendChild(d)}};
//-->
</script>

JavaScript のコード部のサイズは、次のように元々のサイズの半分以下になっています。

圧縮前：
5.12 KB (5,245 バイト)

圧縮後：
1.94 KB (1,989 バイト)

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

実行結果：

解説

記事の投稿日の取得

記事の投稿日の取得、表示処理は次のコードで行っています。

                if (show_post_date) {
                    // 投稿日時
                    var post_date = new Date(data.feed.entry[i].published.$t);
                    var post_date_text = post_date_label + post_date.getFullYear() + "/" +
                    (post_date.getMonth() + 1) + "/" +
                    post_date.getDate() + "";

                    var obj_post_date = document.createElement("div");
                    obj_post_date.setAttribute("class", "new-post-list-item-post-date");
                    obj_post_date.appendChild(document.createTextNode(post_date_text));

                    obj_link.appendChild(obj_post_date);
                }

data.feed.entry[i].published.$t に入っている投稿日時を解析するために、Date オブジェクトを用いています。

その後、"ラベル年/月/日" というフォーマットで、表示用の文字列を作成しています。

設置方法

スタイルシートの設置：

(1) Blogger の設定のテンプレートにて、「カスタマイズ」をクリックします。
(2) Blogger テンプレートデザイナーにて、「上級者向け」をクリックします。
(3) 「CSSを追加」をクリックします。
(4) カスタム CSS を追加の部分に、スタイルシートを追加します。
(5) 「ブログへ適用」ボタンをクリックします。

HTML/JavaScript コードの設置：

(1) Blogger の設定のレイアウトにて、「ガジェットを追加」を行います。
(2) 追加するガジェットとして「HTML/JavaScript」ガジェットを選択します。

(3) タイトルに「新着情報」などと入力します。
(4) コンテンツに、上記の HTML/JavaScript コードを張り付けます。

(5) 「保存」をクリックします。
(6) プレビューを行い、期待通りの動作になっているか確認します。
(7) 新着情報ガジェットを配置したい位置へ移動した後、「配置を保存」をクリックします。

オプション設定

表示件数の変更

プログラム中の max_results の値を変更します。
例）10 件分の新着情報を表示する場合：

var max_results = 10; // 新着記事を表示する件数

遅延実行時間

先頭の setTimeout 関数にしている、ミリ秒数を変更します。

例) 5000ミリ秒(5秒) 後に、処理を開始する場合：
setTimeout(function () {
...
}, 5000); // 遅延実行

サムネイル画像を表示するかどうか

プログラム中の show_thumbnail の値を変更します。

例）サムネイル画像を表示しない場合：
// サムネイル画像を表示するかどうか
var show_thumbnail = false;

サムネイル画像が記事に設定されていない場合に、代わりに使用する画像

プログラム中の show_thumbnail の値を変更します。

base64エンコードされた画像や、web上の画像ファイルの URL を指定します。

// サムネイルがない場合に使用するイメージ
// デフォルト：1x1 の透明png画像(base64エンコード)
var not_thumbnail_img_src = "";

投稿日を表示するかどうか

プログラム中の show_post_date の値を変更します。

例）投稿日を表示しない場合：
// 投稿日を表示するかどうか
var show_post_date = false;

投稿日のラベル

投稿日のラベルを変更する場合には、プログラム中の show_post_date の値を変更します。

例）投稿日のラベルを"投稿日：" とする場合：
// 投稿日のラベル
var post_date_label = "投稿日：";

まとめ

今回は、前回作成した「記事タイトル・サムネイル画像（記事へのリンク付き）の一覧(css用のクラス名, 遅延実行機能付き)を作成する、新着情報ガジェット」に対して、記事の投稿日を追加しました。

今回のシリーズはいったんここで、終了です。

このシリーズも、まだまだ続けて、より Blogger の新着情報が使いやすく、見やすいものになるようにしていきたいと思っています。

続きが気になる方は是非、このブログの RSS フィードや、各種SNS アカウントをフォローして、新着情報をチェックしてください。

次回：

記事の要約を新着情報ガジェットへ追加できるようにします。

Blogger:JavaScript:新着情報を表示するガジェットを作成(7)-記事の冒頭を追加
http://upa-pc.blogspot.com/2015/04/blogger-new-post-list-gadget-javascript-9.html
Dr.ウーパのコンピュータ備忘録

JavaScript 第6版

Blogger:JavaScript:新着情報を表示するガジェット - 正常に動作しない時のトラブルシューティング
http://upa-pc.blogspot.com/2015/04/blogger-new-post-list-gadget-javascript-7.html
Dr.ウーパのコンピュータ備忘録

Blogger:JavaScript:新着情報を表示するガジェット - CSSによるカスタマイズ手法
http://upa-pc.blogspot.com/2015/04/blogger-new-post-list-gadget-javascript-8.html
Dr.ウーパのコンピュータ備忘録

このブログ内の、他の”Blogger”についての情報を見る

関連する記事を、"ラベル"から探すことができます！

ラベル: Blogger, Bloggerカスタマイズ, JavaScript, 新着情報ガジェット作成

この情報を、他の人にも伝える

シェアすることで、他の人がこの情報を見つけやすくなります！

このページのタイトルとURLのペアを取得:

ページとURLのペアを生成中...

投稿者 Dr.ウーパ
時刻: 2015-03-20T19:02:00+09:00

2 件のコメント :

Dr.ウーパ2015年4月26日 19:11
■ 投稿日の日付の表示方法を変更する方法

投稿日の日付の表示方法を変更するには、プログラム中の以下の部分を修正します。

var post_date_text = post_date_label + post_date.getFullYear() + "/" +
(post_date.getMonth() + 1) + "/" +
post_date.getDate() + "";

この部分の処理により、投稿日は

年/月/日

というフォーマットで組み立てられます。

例えば、

2015年4月26日

のようなフォーマットにしたい場合には、

var post_date_text = post_date_label + post_date.getFullYear() + "年" +
(post_date.getMonth() + 1) + "月" +
post_date.getDate() + "日";

という形にプログラムを書き換えます。

返信削除
返信
Dr.ウーパ2015年4月26日 19:15
■ 投稿日の日付の位置を変える方法

投稿日の日付の位置を変えるには、CSS を修正します。

デフォルトでは、新着記事の投稿日に適用される CSS は次のようになっています。

/* 新着記事の投稿日 */
.new-post-list-item-post-date
{
text-align:right;
color:#999999;
}

投稿日を左寄せにするには、次のように修正します。

/* 新着記事の投稿日 */
.new-post-list-item-post-date
{
text-align:left;
color:#999999;
}

返信削除
返信