HTMLへ組み込む

提供: LWF Wiki
2015年2月9日 (月) 16:04時点におけるTamago (トーク | 投稿記録)による版

(差分) ←前の版 | 最新版 (差分) | 次の版→ (差分)
移動: 案内、 検索

目次

HTMLへLWFを組み込む

制作したLWFを実際にHTMLに組み込んでみましょう。
組み込む際に必要なファイルはLWFS_work_outputフォルダに入っています。

※LWF再生に必要なファイル群のパス
LWFS_work_output/html5/list/(projectフォルダ)/_

ライブラリのダウンロード

HTMLへ組み込む際の作業や設定を簡単にすることができる「lwf-loader」というライブラリがあります。
こちらを使用して組み込みを行いますので、必要なファイルをダウンロードしてください。

ダウンロードしたファイルから下記のファイルを１つのフォルダにまとめておいてください。

  • 必要なファイル
    • lwf-loader-all.min.js (lwf-loader.js + lwf-util.js でも可)
    • underscore-min.js (underscore.js でも可)
    • lwf.js


HTMLを作成する

LWFS_work_outputのファイル構成を参考にした場合、下記のようなhtmlを作成します。
LWFファイル名「sample」のLWFを画面いっぱいに表示する場合 

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
        <title>LWF Loader sample</title>
        <script type="text/javascript" src="../../../../js/lwf.js"></script>
        <script type="text/javascript" src="../../../../js/underscore-min.js"></script>
        <script type="text/javascript" src="../../../../js/lwf-loader.min.js"></script>
        <script type="text/javascript">

            var setting = {
                lwf:"sample.lwf",
                prefix:"_/"
            }

            var displaySetting = {
                resizeMode:"fitToScreen",　// "fitForWidth", "fitForHeight"などの選択肢もあり
                stageHAlign:0,　// -1, 0, 1で調整可能
                stageVAlign:0
            };

            var lwfLoader = new window.LwfLoader();
            window.addEventListener('DOMContentLoaded', function() {
                var element = document.getElementById('lwfs-sample');
                lwfLoader.debug = true; //trueにするとフレームレートが表示されます
                lwfLoader.setDisplaySetting(displaySetting);
                lwfLoader.setPreventDefaultBehaviour(true);
                lwfLoader.playLWF(element, setting); 
            });

        </script>
    </head>
    <body style="margin: auto">
        < div id="lwfs-sample"></div>
    </body>
</html>


各項目の説明

  • metaタグ
    文字コードの指定やスマートフォンで表示する際の設定などを指定しています。 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />


  • 必要なjsファイルの読み込み
    LWF本体の再生、lwf-loaderに必要なファイルの読み込みを行っています。
    先ほどダウンロードしたloaderやlwf.jsを指定してください。 
<script type="text/javascript" src="../../../../js/lwf.js"></script>
<script type="text/javascript" src="../../../../js/underscore-min.js"></script>
<script type="text/javascript" src="../../../../js/lwf-loader.min.js"></script>


  • エラー発生時の処理
    LWFの読み込み失敗やエラーが発生した時に行う処理を記述しています。 
var paramHandler = function (pElement) {
    return {
        handler: {
            loadError: function (e) {
                console.log(e);
            },
            exception: function (e) {
                console.log(e);
            }
        }
    }
};


  • 読み込み完了時の処理
    LWFファイルの読み込みに成功した時に行う処理を記述しています。 
var paramCallback = function (pElement) {
    return {
        callback: {
            onLoad: function (pLwf) {
                console.log(pLwf);
            }
        }
    }
};


  • LWF再生設定
    LWFファイルのファイル名の指定やパスの指定、またLWFに渡すデータの設定等を設定することができます。
    prefixはhtmlから見て.lwfが存在するパスを指定してください。
    もし、画像は分けて管理したい場合は画像が存在するフォルダのパスをimagePrefixで指定してください。 
var setting = {
    lwf:"sample.lwf",
    prefix:"_/"
}


  • LWF表示設定
    LWFの表示に関するパラメータを設定することができます。
    画面いっぱいに拡大して表示、指定したエリアにフィットさせるように表示 等が可能です。
    下記のサンプルでは画面いっぱいに拡大し余白ができた場合は中央に寄せるように設定しています 
var displaySetting = {
    resizeMode:"fitToScreen",
    stageHAlign:0,
    stageVAlign:0
};


  • LWF-Loaderの生成
    LWF-Loaderインスタンスを生成しています。再生するLWF1個につきLoaderも1個必要です。
var lwfLoader = new window.LwfLoader();


  • LWFの再生開始 + パラメータのセット
    DOMの構築が終わったあと、LWFを再生するdivの指定や上記で設定したパラメータをLWF-Loaderにセットして再生を開始しています。 
window.addEventListener('DOMContentLoaded', function() {
    var element = document.getElementById('lwfs-sample');
    lwfLoader.addInitializeHook(paramHandler);
    lwfLoader.addInitializeHook(paramCallback);
    lwfLoader.debug = true;
    lwfLoader.setDisplaySetting(displaySetting);
    lwfLoader.setPreventDefaultBehaviour(true);
    lwfLoader.playLWF(element, setting);
});


  • LWFを再生するdivの指定
    LWFを再生する際の基準となるdivを定義しています。 
<body style="margin: auto">
    < div id="lwfs-sample"></div>
</body>


LWF-Loaderのリファレンス

LWF-Loaderの各オプションやパラメータの詳しい設定は公式ページにドキュメントがあるのでそちらを参照してください。
http://gree.github.io/lwf-loader/
http://gree.github.io/lwf-loader/lwfloader-doc/ja/lwfloader.html

webGL rendererでの注意点

webGL rendererを利用する場合、canvasの背景色を黒色にしないとiOS8でアルファブレンドがおかしくなってしまいます。
canvasの背景色は必ず黒色にしてください。
lwfLoaderを使用している場合はlwfLoader.playLWF()の前に、lwfLoader.backgroundColor = 'ff000000'を設定してください。

「http://lwf-users.org/index.php?title=HTMLへ組み込む&oldid=1513」から取得