Blogger:投稿の投稿日時を、JavaScriptで取得 (data:post.timestampISO8601 タグ編)

イントロダクション

Google のブログサービス「Blogger」にて、記事を公開した日付をもとに、何らかの処理を行いたいときってありますよね。


投稿を公開した日付を取得するにはいろいろな方法があります。

Blogger:投稿の公開日を取得する方法
http://upa-pc.blogspot.com/2015/03/blogger-get-published-date.html


今回は、Blogger のテンプレート用のタグ <data:post.timestampISO8601/> の値を取得する方法について考えました。

Blogger:投稿の投稿日時を、JavaScriptで取得 (<data:post.timestampISO8601/>編)

Blogger のテンプレート用のタグ <data:post.timestampISO8601/> を、Blogger のテンプレートの HTML へ埋め込むと、Blogger のサーバから配信された HTML 文書中には、その投稿を公開した日時が埋め込まれます。

投稿を公開した日時は、ISO 8601形式 の日時データとして取得できます。

例）2015-03-26T19:17:00+09:00
年・月・日・時・分・秒・タイムゾーン を取得できる


では、実際に JavaScript コードを見ていきましょう。

なお、以下の投稿は Blogger を通常表示した場合の例です。
モバイルテンプレートの場合には、下記のコードでは行えませんので、ご注意ください。

JavaScript コード

Blogger のテンプレートの HTML へ埋め込むもの

    <script type="text/javascript">
        var global_blogger_post_timestamp = "<data:post.timestampISO8601/>";        /* example : "2015-03-26T19:17:00+09:00"; */
    </script>

上記のコードを、

<b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'></b:widget>

内の、

<b:includable id='post' var='post'></b:includable>

内（直下）に配置します。

コードを
<b:includable id='post' var='post'> の
直下に配置

なお、Blogger のテンプレートの HTML を編集する際には、下記の点に注意してください。

Blogger:BloggerのテンプレートのHTMLを編集するときに気を付けること
http://upa-pc.blogspot.com/2015/03/blogger-template-edit-attention.html
Dr.ウーパのコンピュータ備忘録

HTML/JavaScript ガジェットで埋め込むもの

    <div id="local-result"></div>
    <script type="text/javascript">
    <!--
        (function () {
            var obj_output = document.getElementById("local-result");

            if (typeof global_blogger_post_timestamp != "undefined") {
                if (global_blogger_post_timestamp !== "<" + "data:post.timestampISO8601" + "/>") {

                    var timestamp_date = new Date(global_blogger_post_timestamp);

                    var post_date_text = timestamp_date.getFullYear() + "/" +
                        (timestamp_date.getMonth() + 1) + "/" +
                        timestamp_date.getDate() + " " +
                        timestamp_date.getHours() + ":" +
                        timestamp_date.getMinutes() + ":" +
                        timestamp_date.getSeconds();

                    obj_output.appendChild(document.createTextNode(post_date_text));

                    return;
                }
            }

            obj_output.appendChild(document.createTextNode("投稿の公開日は利用できません"));

        })();
    //-->
    </script>

解説

Blogger のテンプレートの HTML へ埋め込むものについて

投稿の投稿日時を取得するための、Blogger のテンプレート用のタグ <data:post.timestampISO8601/> は、ブログの投稿ウィジット内でしか使えません。

かつ、data:post. という形式でデータへアクセスするので、データ posts をループによって、1 つの投稿(post)ごとにアクセスしているところに記載する必要があります。

そのため、<b:includable id='post' var='post'></b:includable> の直下に記載してあります。


なお、1ページ内に複数の投稿があるようなページ（トップページ、ラベルページなど）では、それぞれの投稿ごとに日付データがあります。

そのため、そのようなページでは、global_blogger_post_timestamp はそのページ内の最後の投稿の日付になっているので注意が必要です。


実用上は、1ページ内に複数の投稿があるようなページでは、「HTML/JavaScript ガジェットで埋め込むもの」の処理を実行しないように条件処理を加えるといったことが必要になります。

HTML/JavaScript ガジェットで埋め込むものについて

Blogger のテンプレートの HTML へ埋め込んだ global_blogger_post_timestamp から投稿の公開日時を取得し、<div id="local-result"></div>の中へ出力しています。


以下の条件が 2 つ揃った場合のみ、日付データを表示できます。

typeof global_blogger_post_timestamp != "undefined"
→ 変数 global_blogger_post_timestamp が定義されている
（Blogger のテンプレートの HTML へ埋め込むコードを埋め込み忘れていた場合に、エラーと判定するため。）

global_blogger_post_timestamp !== "<" + "data:post.timestampISO8601" + "/>"
→ 変数 global_blogger_post_timestampの中身が <data:post.timestampISO8601/> ではない。
（正常に日付データとして展開されていなかった場合をエラーと判定するため。）


そして、ISO8601 形式の日時のデータを、Date オブジェクトを使用して、解析し、年・月・日・時・分・秒を取得しています。

                    var timestamp_date = new Date(global_blogger_post_timestamp);

                    var post_date_text = timestamp_date.getFullYear() + "/" +
                        (timestamp_date.getMonth() + 1) + "/" +
                        timestamp_date.getDate() + " " +
                        timestamp_date.getHours() + ":" +
                        timestamp_date.getMinutes() + ":" +
                        timestamp_date.getSeconds();

実行結果

正常に投稿の投稿日時を取得できると、次のように画面上に表示されます。

Blogger : 画面上に表示された投稿日時

まとめ

このように、Blogger のテンプレート用のタグ <data:post.timestampISO8601/> を用いると、投稿の投稿日時を取得することができます。

しかし、Blogger のテンプレートの HTML が絡んでくると、なかなかいろいろと面倒なことが多いですね。


そんな時には、Blogger の投稿の URL から、投稿年・月を取得する方法もあります。

Blogger:投稿の投稿年・月を、JavaScriptで取得 (URL編)
http://upa-pc.blogspot.com/2015/03/blogger-get-published-date-from-url.html

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