生成コード解説：文字へのスタイルシートの適用結果を、アニメーションで表示するJavaScriptコードジェネレータ

イントロダクション

「文字へのスタイルシートの適用結果を、アニメーションで表示するJavaScriptコードジェネレータ」で生成される JavaScript コードについて解説します。


「文字へのスタイルシートの適用結果を、アニメーションで表示するJavaScriptコードジェネレータ」で生成したコードのプレビュー：

こんにちは！

文字へのスタイルシートの適用結果を、アニメーションで表示するJavaScriptコードジェネレータで生成される JavaScript コード

生成された JavaScript コード

「文字へのスタイルシートの適用結果を、アニメーションで表示するJavaScriptコードジェネレータ」で、文字へのスタイルシートの適用結果を、アニメーションで表示するJavaScriptコードを生成すると次のような JavaScript コードが得られます。

文字へのスタイルシートの適用結果を、アニメーションで表示するJavaScriptコード：
<!-- anime css begin -->
<div id="anime-css-container">こんにちは！<script type="text/javascript">
<!--
(function(){function e(){a.setAttribute("style",c[b]);f&&(d.innerHTML="",d.appendChild(document.createTextNode("style:"+c[b])));b++;b>=c.length&&(b=0);setTimeout(e,1E3)}var a=document.getElementById("anime-css-container");if(a){a.removeAttribute("id");var c="font-size:10px;\r\nfont-size:11px;\r\nfont-size:12px;\r\n".split(/\r\n|\r|\n/g);if(!(0>=c.length)){var f=!0,d=null;f&&(d=document.createElement("div"),a.parentNode.insertBefore(d,a));var b=0;e()}}})();
//-->
</script></div>
<!-- anime css end -->


なお、生成の条件は次のとおりです。

スタイルを適用するテキスト:
こんにちは！

テキストのスタイルシート(CSS):
font-size:10px;
font-size:11px;
font-size:12px;


生成された JavaScript コードは、データ容量の削減のため最適化されているので、人にとって読みづらい形式になっています。

そこで、最適化する前の JavaScript コードを以下に示します。

最適化する前の JavaScript コード

最適化する前の文字へのスタイルシートの適用結果を、アニメーションで表示するJavaScriptコード：

<!-- anime css begin -->
<div id="anime-css-container">

<script type="text/javascript" id="anime-css-main">
<!--
    (function () {

        var obj_text = document.getElementById("anime-css-container");
        if (!obj_text) return;
        obj_text.removeAttribute("id");

        var css_array = "font-size:10px;\r\nfont-size:11px;\r\nfont-size:12px;\r\n".split(/\r\n|\r|\n/g);
        if (css_array.length <= 0) return;

        var show_css = true;
        var obj_css = null;
        if (show_css) {
            obj_css = document.createElement("div");
            obj_text.parentNode.insertBefore(obj_css, obj_text);
        }

        var css_index = 0;
        function animeCSS() {

            obj_text.setAttribute("style", css_array[css_index]);
            if (show_css) {
                obj_css.innerHTML = "";
                obj_css.appendChild(document.createTextNode("style:" + css_array[css_index]));
            }

            css_index++;
            if (css_index >= css_array.length) css_index = 0;
            setTimeout(animeCSS, 1000);
        };
        animeCSS();

    })();

//-->
</script>


</div>
<!-- anime css end -->

コード解説

<!-- anime css begin -->
<div id="anime-css-container">

スタイルをアニメーション的に適用するテキストを納める要素です。

この要素を識別するために、id 属性として "anime-css-container" を設定しています。

<script type="text/javascript" id="anime-css-main">
<!--
    (function () {

        var obj_text = document.getElementById("anime-css-container");
        if (!obj_text) return;
        obj_text.removeAttribute("id");

スタイルをアニメーション的に適用するテキストを納める要素("anime-css-container")を取得しています。

なお、1 ページ内に複数の「文字へのスタイルシートの適用結果を、アニメーションで表示するJavaScriptコード」があった場合に備えて、複数の "anime-css-container" がページ内に存在しないようにするために、取得した要素の id 属性を削除しています。


        var css_array = "font-size:10px;\r\nfont-size:11px;\r\nfont-size:12px;\r\n".split(/\r\n|\r|\n/g);
        if (css_array.length <= 0) return;

改行区切りの、スタイルシートを配列として格納しています。
スタイルシート１行が、アニメーションの 1 フレームです。


        var show_css = true;
        var obj_css = null;
        if (show_css) {
            obj_css = document.createElement("div");
            obj_text.parentNode.insertBefore(obj_css, obj_text);
        }

適用しているスタイルを説明するテキストを納める要素を作成しています。
show_css が false であれば、この要素は作成されません。


        var css_index = 0;
        function animeCSS() {

            obj_text.setAttribute("style", css_array[css_index]);
            if (show_css) {
                obj_css.innerHTML = "";
                obj_css.appendChild(document.createTextNode("style:" + css_array[css_index]));
            }

            css_index++;
            if (css_index >= css_array.length) css_index = 0;
            setTimeout(animeCSS, 1000);
        };
        animeCSS();

アニメーションの 1 フレームごとに呼び出される関数です。

要素の style 属性を書き換えることで、要素のスタイルシートを変更しています。
また、show_css が true であれば、適用しているスタイルシートを画面上に表示します。

関数内で、再びタイマをセットして自分自身を呼び出すことで、アニメーションを実行しています。


    })();

//-->
</script>

</div>
<!-- anime css end -->


以上のコードで、この動作を実現しています。