Blogger:JavaScript:投稿に付与されたラベルを取得する

イントロダクション

Google のブログサービス「Blogger」にて、投稿に付与されたラベルの一覧を取得して、JavaScript で処理をしたい場合ってありますよね。

それを実現する方法はいくつかあります(*1)が、今回は投稿に付与されているラベルの一覧を動的に取得する方法を実装してみます。

*1:

• 投稿に付与されているラベルを取得（今回の方法）
• Blogger のテンプレートの HTML のレイアウトデータから取得
• Feed から取得

など。

Blogger:JavaScript:投稿に付与されたラベルを取得する

基本的な考え方

Blogger のラベルは次のように、投稿の HTML に埋め込まれています。

<span class="post-labels">
ラベル:
<a href="..." rel="tag">
ラベル1
</a>
,
<a href="..." rel="tag">
ラベル2
</a>
,
...
<a href="..." rel="tag">
ラベルn
</a>
</span>

そのため、まず class 名 "post-labels" の要素を HTML 中から探しだし、その中の a タグに囲まれたテキストを取得します。

コード

以下のコードを、ブログの投稿ガジェットよりも下に配置した「HTML/JavaScript」ガジェットに追加します。

Blogger の設定 : レイアウト
ブログの投稿ガジェットの下に、HTML/JavaScript ガジェットを配置

付与されたラベル一覧：<br />
<div id="local-result">テスト結果をここに出力します。</div>
<script type='text/javascript'>
<!--

    /*
    Blogger の投稿に付与されたラベルの一覧を取得する

    戻り値：
    Blogger の投稿に付与されたラベルの文字列を納めた配列
    失敗した場合、undefined 
    */
    function getBloggerPostLabels() {

        // ラベル一覧が納められた要素の配列を取得
        var obj_post_labels = document.getElementsByClassName("post-labels");
        if (!obj_post_labels) return undefined;

        // 最初に見つかったラベル一覧が納められた要素から、ラベルの要素の配列を取得する
        var obj_labels = obj_post_labels[0].getElementsByTagName("a");
        if (!obj_labels) return undefined;


        // ラベルをテキストとして取得し、配列に格納して返却する
        var labels = [];
        for (var i = 0; i < obj_labels.length; i++ ) {
            labels.push(obj_labels[i].textContent || obj_labels[i].innerText);
        }

        return labels;
    };


    // テスト
    (function () {
        
        var obj_result = document.getElementById("local-result");
        obj_result.innerHTML = "";

        var labels = getBloggerPostLabels();
        if (labels) {
            
            // 取得したラベル一覧
            for ( var i = 0; i < labels.length; i++ ) {
                obj_result.appendChild(document.createTextNode(i + " : " + labels[i]));
                obj_result.appendChild(document.createElement("br"));
            }

        } else {
            obj_result.appendChild(document.createTextNode("ラベル一覧の取得に失敗しました。"));
        }

    })();

//-->
</script>

実行結果

付与されたラベル一覧：
0 : Blogger
1 : Bloggerカスタマイズ
2 : JavaScript
3 : ブログ

注意事項

getElementsByClassName について

上記の JavaScript 中で使用している getElementsByClassName は、Internet Explorer 8 以前にはないため、上記のスクリプトはそのような環境では正常に動作しません。

[JS] IE8にも対応できるクラス名から要素を取得する方法 ｜ memocarilog
http://memocarilog.info/javascript/7021

document.getElementsByClassName - Web API インターフェイス | MDN
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName

そのような環境に対応するには、getElementsByClassName と同じ動作をする処理を追加する必要があります。

動作を確認した Blogger のテンプレートについて

今回のスクリプトの動作は、Blogger のテンプレート「シンプル」にて行いました。

Blogger のテンプレートの種類によっては、正常に動作しない可能性があります。

まとめ

このように、Blogger の投稿に付与されたラベルの一覧を、JavaScript を使用することで簡単に取得することができます。

そして、取得したラベル一覧は配列として利用できるので、いろいろなことに応用ができそうです。

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