Blogger:JavaScript:新着情報を表示するガジェットを作成(2)-記事タイトルのみの一覧を作成

イントロダクション

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

前回：
Blogger:JavaScript:新着情報を表示するガジェットを作成(1)-準備編
http://upa-pc.blogspot.com/2015/03/blogger-new-post-list-gadget-javascript-1.html

今回は、まずは「新着情報ガジェット」の基本構造を作成していきます。
今回の「新着情報ガジェット」は、任意の件数の新着情報のタイトル一覧を作成します。

新着情報を表示するガジェットを作成(2)-記事タイトルのみの一覧を作成

記事タイトル（記事へのリンク付き）のみの一覧を作成する、新着情報ガジェットの HTML/JavaScript コードは次のようになります。

コード：

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

<script type="text/javascript">
<!--
    (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 ---

        // *** 設定可能なパラメータ ここから ***
        var max_results = 5;            // 新着記事を表示する件数
        // 上限は 500 件です

        // *** 設定可能なパラメータ ここまで ***


        // 記事一覧作成のトリガー
        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");
        }

    })();
    
    function newpost_loader(data) {

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

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

            var obj_newPostList = document.createElement("div");
            
            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");

                // 全体のリンク要素
                var obj_link = document.createElement("a");
                obj_link.setAttribute("href", href);
                obj_item.appendChild(obj_link);

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


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

//-->
</script>

実行結果：

設置方法

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

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

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

オプション設定

表示件数の変更

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

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

まとめ

今回は、新着情報ガジェットとしての基本である、新着記事のタイトル一覧を表示する機能を実装してみました。

次回は、スタイルシート(CSS)によりデザインを指定しやすいように、class 属性を付与してみたいと思います。

次回：

Blogger:JavaScript:新着情報を表示するガジェットを作成(3)-css用のクラス名を追加
http://upa-pc.blogspot.com/2015/03/blogger-new-post-list-gadget-javascript-3.html

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

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

2015年3月20日金曜日