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

イントロダクション

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


ソースコードの全文は、以下のページに記載してあります。

ソースコード：文字へのスタイルシートの適用結果を、アニメーションで表示するJavaScriptコードジェネレータ
http://upa-pc.blogspot.com/2015/02/anime-css-code.html

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

データ入力部

<!-- program start -->

<br />
<form onsubmit="return false;">
<b>スタイルを適用するテキスト:</b><input id="input-text" style="width: 500px;" type="text" /><br />
例）こんにちは！<br />
<br />
<b>テキストのスタイルシート(CSS):</b><br />
<textarea cols="90" id="input-css" rows="20"></textarea><br />
アニメーションの1フレームに使用したいスタイルを一行ずつ記載してください。<br />
例）<br />
text-shadow: 4px 4px 4px rgba(150, 150, 150, 1);<br />
text-shadow: 8px 8px 8px rgba(150, 150, 150, 1);<br />
text-shadow: 12px 12px 12px rgba(150, 150, 150, 1);<br />
<br /></form>
<br />

文字へのスタイルシートの適用結果を、アニメーションで表示するJavaScriptコードを生成するために必要なデータをユーザから受け付ける部分です。

「スタイルを適用するテキスト」と「テキストのスタイルシート(CSS)」を受け付けます。

データ出力部

<b>プレビュー：</b><br />
<div id="preview">
ここにデータが出力されます。
</div>
<br />
<b>貼り付けコード：</b><br />
<textarea cols="90" id="output-html" rows="20">ここに貼り付け用のコードが出力されます。
</textarea>
<br />
このコードをWebページのソースコードに貼り付けてください。<br />

文字へのスタイルシートの適用結果を、アニメーションで表示するJavaScriptコードを生成した結果を出力します。

プレビューと、貼り付け用コードを出力します。

貼り付けコード原型・プレビュー用コード

<script id="anime-css-main" 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="CSS-DATA".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>

文字へのスタイルシートの適用結果を、アニメーションで表示するJavaScriptコードの貼り付け用コードと、プレビューで使用するコードです。

ユーザから入力されたスタイルシート情報を、コード中の "CSS-DATA" の部分に置換します。


なお、このコードは、貼り付けコードのデータ量圧縮のため最適化されています。
最適化されていないコードと、その解説については、以下のページに記載しました。

生成コード解説：文字へのスタイルシートの適用結果を、アニメーションで表示するJavaScriptコードジェネレータ
http://upa-pc.blogspot.com/2015/02/anime-css-generated-code.html

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

<script type="text/javascript">
<!--
    (function () {

        var id_input_text = "input-text";
        var id_input_css = "input-css";
        var id_output_preview = "preview";
        var id_output_html = "output-html";


        // 前回検査時の入力値
        var input_old_text = "";
        var input_old_css = "";


        // 定期的に入力を監視し、入力が変化していたら、出力する
        setInterval((function () {

            var input_text = document.getElementById(id_input_text).value;
            var input_css = document.getElementById(id_input_css).value;

            if (input_text != input_old_text ||
                input_css != input_old_css) {


                // 出力データ形成
                var obj_output = document.createElement("div");

                obj_output.setAttribute("id", "anime-css-container");
                obj_output.appendChild(document.createTextNode(input_text));


                var multiline_css = input_css.replace(/\r\n|\r|\n/g, "\\r\\n");

                var default_anime_css_script = document.getElementById("anime-css-main").innerHTML;
                var anime_css_script = default_anime_css_script.replace("CSS-DATA", multiline_css);

                var obj_script = document.createElement("script");
                obj_script.setAttribute("type", "text/javascript");
                obj_script.innerHTML = anime_css_script;
                obj_output.appendChild(obj_script);


                // 画面へ出力
                var obj_output_container = document.createElement("div");
                obj_output_container.appendChild(obj_output);

                document.getElementById(id_output_html).value = "<!-- anime css begin -->\r\n" +
                    obj_output_container.innerHTML + "\r\n" +
                    "<!-- anime css end -->";


                var obj_output_preview = document.getElementById(id_output_preview);
                obj_output_preview.innerHTML = "";
                obj_output_preview.appendChild(obj_output);


                input_old_text = input_text;
                input_old_css = input_css;
            }

        }), 500);

    })();

//-->
</script>
<!-- program end -->

文字へのスタイルシートの適用結果を、アニメーションで表示するJavaScriptコードジェネレータの主な処理を記載している場所です。

入力を一定周期で監視し、入力が変化していたらコードの生成処理を行っています。


コードの流れは次のとおりです。

ユーザ入力取得

↓

貼り付けコード生成

↓

プレビュー出力

↓

貼り付けコード出力

貼り付けコード生成部では、ページ内に張り付けられている JavaScript コードをコピーして、ユーザから入力されたスタイルシートを置換によって埋め込んでいます。

そのため、貼り付けコード・プレビュー用コードは、ジェネレータのページが読み込まれたときに無条件で動作しますが、そのときには、"anime-css-container" という id 属性が存在しないため、コードは何の処理も行わず即時終了します。


このコードの解説は以上です。