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

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

2014年12月22日月曜日

Blogger:投稿タイトルと投稿時間の一覧表(ブログ内の全投稿)を作成する

イントロダクション

Google のブログサービス「Blogger」に投稿したページのタイトルと、そのページの投稿時間を一覧表示したい場合があります。



作りたいもののイメージ:
投稿タイトル(ヘッダ)投稿日時(ヘッダ)
投稿タイトル1投稿日時1
投稿タイトル2投稿日時2




投稿タイトルn投稿日時n


そこで、Blogger の Feed の情報を取得し、ブログ内の全投稿に対して、投稿タイトルと投稿時間の一覧表を作成する JavaScript コードを作成しました。


コード

<div id="post-list-container">
記事一覧生成中...
</div>
<div id="post-list-gen-time">
</div>
<script type="text/javascript">
<!--
    // --- 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 feedDataArray = [];         // フィードのデータ
    var max_results = 500;          // フィード取得件数(最大500)
    var blogger_url = location.protocol + "//" + location.hostname;     // Blogger の URL



    // 記事一覧作成のトリガー
    (function () {

        loadFeed();
        
    })();

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

    function loadtoc(data) {

        // エントリーがある場合は、エントリーをストックし、次の記事の読み込み処理を実行
        if (data.feed.entry) {
            if (data.feed.entry.length > 0) {
                
                feedDataArray.push(data);

                // フィードの上限件数取得できていた場合、まだ投稿が残っている可能性があるので次のフィードを取得する
                if (data.feed.entry.length == max_results) {

                    // 次の feed の読み込み
                    loadFeed();
                    return;
                }
            }
        }

        // エントリーが無い・最後のエントリーまで読み込んだ場合
        // 全てのデータを読み込み終わったので、記事一覧を作成
        createPostsIndex();
    }

    function createPostsIndex() {
        
        // 処理時間計測
        var start_time = new Date();


        var html = "";

        html += "<table>";
        html += "<tr><td>投稿タイトル</td><td>投稿日時</td></tr>";
        for (var feedCount = 0; feedCount < feedDataArray.length; feedCount++) {

            var data = feedDataArray[feedCount];        // 処理対象のフィードの取り出し
            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;
                    }
                }

                html += "<tr>" +
                    "<td><a href=\"" + href + "\">" + escapeHTML(data.feed.entry[i].title.$t) + "</a></td>" + 
                    "<td>" + data.feed.entry[i].published.$t + "</td>" + 
                    "</tr>";
            }
        }

        html += "</table>";


        var obj_output = document.getElementById("post-list-container");
        obj_output.innerHTML = html;


        // 処理時間計測
        var end_time = new Date();
        var process_span = end_time - start_time;    // 処理時間(ms)

        document.getElementById("post-list-gen-time").innerHTML = "<br />記事一覧の作成にかかった時間は " + process_span + " ms です。<br />";


        // テキストをエスケープ処理する
        function escapeHTML(html) {

            var div = document.createElement("div");
            if (div.innerText !== void 0) div.innerText = html;          // innerText が定義されていれば innerText へ設定
            else div.textContent = html;                                 // Firefox のように innerText がないブラウザ向け

            return div.innerHTML;
        }
    }

//-->
</script>


上記のコードを、Blogger の新規作成したページの HTML に挿入します。


なお、HTML を挿入した後は「作成」には戻らず、そのまま「公開」ボタンを押して公開します。
(HTMLから、作成へ戻ると、JavaScript 内に不要な改行が自動的に挿入され、正常に JavaScript を実行できなくなる場合があります。)


結果

上記のコードを張り付けたページを表示すると、次のような投稿タイトルと投稿時間の一覧表(ブログ内の全投稿)が作成されます。

投稿タイトルと投稿時間の一覧表(ブログ内の全投稿)


なお、このブログの投稿タイトルと投稿時間の一覧表(ブログ内の全投稿)は、次のページで閲覧できます。

Dr.ウーパのコンピュータ備忘録: 投稿タイトルと投稿時間の一覧表(ブログ内の全投稿)
http://upa-pc.blogspot.jp/p/post-date-time.html


まとめ

Blogger の Feed の情報を取得し、ブログ内の全投稿に対して、投稿タイトルと投稿時間の一覧表を作成する JavaScript コードを作成しました。

このように、Blogger の Feed を使用すれば、Blogger に投稿したデータに対して、様々な処理を行うことができます。


次回は、投稿時間をExcelやGoogle Driveのスプレッドシートで日時として認識できる形式で表記した「投稿タイトルと投稿時間の一覧表(ブログ内の全投稿)を作成する JavaScript コード」を作成します。

次回:投稿時間をExcelやGoogle Driveのスプレッドシートで日時として認識できる形式で表記-Blogger:投稿タイトルと投稿時間の一覧表(ブログ内の全投稿)を作成する
http://upa-pc.blogspot.com/2014/12/blogger-post-title-date-table-2.html





関連記事

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

同じラベルの記事を読み込み中...