Blogger:投稿の投稿年・月を、JavaScriptで取得 (URL編)

イントロダクション

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

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

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

今回は、Blogger の投稿の URL に含まれる投稿年・月を JavaScript で取得する方法について考えました。

Blogger:投稿の投稿年・月を、JavaScriptで取得 (URL編)

Blogger の投稿の URL は、一般的に次のような形式になっています。

例）2015年3月26日に公開した「Blogger:過去の下書きの記事を探すには、投稿のすべてのラベル/検索ボックスが便利」の場合
http://upa-pc.blogspot.jp/2015/03/blogger-search-draft.html

http://(ブログのドメイン)/yyyy/mm/post-name

yyyy : その投稿を公開した 4 桁の年
mm : その投稿を公開した 2 桁の月
post-name : 投稿の名前

更に詳しく知りたい場合には、以下のページをご覧ください。

Bloggerユーザなら知っておきたい、BloggerブログのURL構成まとめ
http://upa-pc.blogspot.com/2015/02/blogger-url-summary.html
Dr.ウーパのコンピュータ備忘録

つまり、Blogger の投稿の URL を解析すれば、その投稿を公開した年と月がわかることになります。

では、実際に JavaScript を使用して、Blogger の投稿の URL から、その投稿を公開した年と月を取得しています。

JavaScript コード

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


        // URL の pathname の部分を取得
        var url_path = location.pathname;  // example : "/2015/03/test.html";
        

        // URL 検査及び分解
        var parts = url_path.match(/^\/(\d{4})\/(\d{2})\//);
        if (!parts) {

            obj_output.appendChild(document.createTextNode("投稿の年・月の取得に失敗しました。"));

        } else {
            var year = parts[1];            // 年
            var month = parts[2];           // 月

            obj_output.appendChild(document.createTextNode("年:" + year + ", 月:" + month));
        }

    //-->
    </script>

実行結果

解説

現在表示しているページの URL の pathname 部分から、年・月を取得し、<div id="local-result"></div>の中へ出力しています。

location.pathname にて、ホストからの相対パスを取得しています。

window.location - Web API インターフェイス | MDN
https://developer.mozilla.org/ja/docs/Web/API/Window/location

URL の pathname 部分から、年・月を取得するには、正規表現によって解析・取得を行っています。

var parts = url_path.match(/^\/(\d{4})\/(\d{2})\//);

正規表現：/^\/(\d{4})\/(\d{2})\// によって、文字列の match メソッドを用いて、

^ : 先頭から検査

\/ : パスの区切り'/' とマッチ
(\d{4}) : 4桁の数字とマッチ、マッチ結果を戻り値の配列の[1]へ設定

\/ : パスの区切り'/' とマッチ
(\d{2}) : 2桁の数字とマッチ、マッチ結果を戻り値の配列の[2]へ設定
\/ : パスの区切り'/' とマッチ

という解析・取得処理を行っています。

JavaScript の正規表現の詳細は、下記ページをご覧ください。

正規表現 - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions

以上によって取得した、投稿の投稿年・月を、

var year = parts[1]; // 年
var month = parts[2]; // 月

によって、変数 year, month に代入しています。

まとめ

このように、Blogger の投稿の URL には、投稿を公開した年・月が含まれているので、JavaScript などで解析することにより、簡単に投稿年・月を取得することができます。

それらを利用すれば、いろいろなことが出来そうです。

その他、Blogger のテンプレート用のタグ <data:post.timestampISO8601/> を用いて、投稿の投稿日時を取得する方法もあります。

Blogger:投稿の投稿日時を、JavaScriptで取得 (<data:post.timestampISO8601/>編)
http://upa-pc.blogspot.com/2015/03/blogger-get-published-date-from-timestampISO8601.html

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

詳説正規表現第3版

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

2015年3月27日金曜日