Blogger:投稿の本文・ラベルの表示・非表示をコントロールする要素を作ってみた

イントロダクション

Blogger では、トップページや過去の記事の検索、ラベルなどを表示すると、複数の投稿を一つのページの中で一覧表示することができます。


その時に、気になるタイトルの投稿を探したい場合には、投稿の本文やラベルなどの要素は邪魔になることがあります。

そこで、閲覧者が投稿の本文やラベルなどの要素の表示・非表示をコントロールできる要素を JavaScript で作成してみました。

※2014/6/4 : 「JavaScript:classNameに入っているのはstringだけじゃなかった!：svgタグのclassNameにはSVGAnimatedStringが入っていた」の問題により、コードを修正しました。

コード

このコードを追加すると、画面上に以下を選択できるセレクタが現れます。

• タイトルとラベルと本文
• タイトルとラベルのみ
• タイトルのみ

この中から選択した内容が画面に反映されます。

<div class="post-display-select-rect">
表示形式：<select id="post-display-select" onchange="postDisplaySelect_Changed()">
    <option selected>タイトルとラベルと本文</option>
    <option>タイトルとラベルのみ</option>
    <option>タイトルのみ</option>
</select>
<script type="text/javascript">
<!-- 
    function postDisplaySelect_Changed() {

        var obj_select = document.getElementById("post-display-select");
        switch (obj_select.selectedIndex) {
            case 0:         // タイトルとラベルと本文

                setStyleAllFromClassName("post-header", function (node) {
                    node.style.display = "inline";
                });

                setStyleAllFromClassName("post-body", function (node) {
                    node.style.display = "inline";
                });

                setStyleAllFromClassName("jump-link", function (node) {
                    node.style.display = "inline";
                });

                setStyleAllFromClassName("post-footer", function (node) {
                    node.style.display = "inline";
                });

                break;
            case 1:         // タイトルとラベルのみ

                setStyleAllFromClassName("post-header", function (node) {
                    node.style.display = "inline";
                });

                setStyleAllFromClassName("post-body", function (node) {
                    node.style.display = "none";
                });

                setStyleAllFromClassName("jump-link", function (node) {
                    node.style.display = "none";
                });

                setStyleAllFromClassName("post-footer", function (node) {
                    node.style.display = "none";
                });

                break;
            default:        // タイトルのみ

                setStyleAllFromClassName("post-header", function (node) {
                    node.style.display = "none";
                });

                setStyleAllFromClassName("post-body", function (node) {
                    node.style.display = "none";
                });

                setStyleAllFromClassName("jump-link", function (node) {
                    node.style.display = "none";
                });

                setStyleAllFromClassName("post-footer", function (node) {
                    node.style.display = "none";
                });
                
                break;
        }
    }


    // 特定のクラス名のノードに対してスタイルを設定する
    function setStyleAllFromClassName(className, callBack) {
        
        // ドキュメントを全精査する
        setStyleFromClassName(document.body, className, callBack);

        // 特定のクラス名のノードに対してスタイルを設定する
        function setStyleFromClassName(node, className, callBack) {
            
            // クラス名があり、文字列分割可能なときのみ処理を実施
            if (node.className) {
                if (node.className.split) {
                    var classNames = node.className.split(/\s+/);
                    for (var i = 0; i < classNames.length; i++) {

                        // 目的とするクラス名が見つかったら、コールバックによりスタイルを適用
                        if (className == classNames[i]) {
                            callBack(node);
                            break;
                        }
                    }
                }
            }

            // 再帰的に特定のクラス名を保持するノードを探す
            for (var i = 0; i < node.childNodes.length; i++) {
                setStyleFromClassName(node.childNodes[i], className, callBack);
            }
        }
    }

//-->
</script>
</div>

最適化したコード

上記のコードを修正せずに使用する場合には、以下の最適化したコードを使用することで Webページサイズの軽量化が行えます。

<div class="post-display-select-rect">
表示形式：<select id="post-display-select" onchange="postDisplaySelect_Changed()">
    <option selected>タイトルとラベルと本文</option>
    <option>タイトルとラベルのみ</option>
    <option>タイトルのみ</option>
</select>
<script type="text/javascript">
<!-- 
function postDisplaySelect_Changed(){switch(document.getElementById("post-display-select").selectedIndex){case 0:setStyleAllFromClassName("post-header",function(a){a.style.display="inline"});setStyleAllFromClassName("post-body",function(a){a.style.display="inline"});setStyleAllFromClassName("jump-link",function(a){a.style.display="inline"});setStyleAllFromClassName("post-footer",function(a){a.style.display="inline"});break;case 1:setStyleAllFromClassName("post-header",function(a){a.style.display=
"inline"});setStyleAllFromClassName("post-body",function(a){a.style.display="none"});setStyleAllFromClassName("jump-link",function(a){a.style.display="none"});setStyleAllFromClassName("post-footer",function(a){a.style.display="none"});break;default:setStyleAllFromClassName("post-header",function(a){a.style.display="none"}),setStyleAllFromClassName("post-body",function(a){a.style.display="none"}),setStyleAllFromClassName("jump-link",function(a){a.style.display="none"}),setStyleAllFromClassName("post-footer",
function(a){a.style.display="none"})}}function setStyleAllFromClassName(a,g){function c(a,d,e){if(a.className&&a.className.split)for(var f=a.className.split(/\s+/),b=0;b<f.length;b++)if(d==f[b]){e(a);break}for(b=0;b<a.childNodes.length;b++)c(a.childNodes[b],d,e)}c(document.body,a,g)};
//-->
</script>
</div>

設置方法

上記のコードを、HTML/JavaScriptガジェットに追加します。

HTML/JavaScriptガジェットの追加方法は、
　レイアウト→ガジェットを追加→HTML/JavaScript
から行えます。

結果

 以下のように、表示形式で選択した内容が投稿に反映されていることがわかります。

タイトルとラベルと本文

タイトルとラベルのみ

タイトルのみ

まとめ

以上により、閲覧者が投稿の本文やラベルなどの要素の表示・非表示をコントロールできる出来るようになりました。

これで、閲覧者が目的の投稿を探しやすくなったと思います！