HTMLへ組み込む
提供: LWF Wiki
目次 |
HTMLへLWFを組み込む
制作したLWFを実際にHTMLに組み込んでみましょう。
組み込む際に必要なファイルはLWFS_work_outputフォルダに入っています。
※LWF再生に必要なファイル群のパス
LWFS_work_output/html5/list/(projectフォルダ)/_
ライブラリのダウンロード
HTMLへ組み込む際の作業や設定を簡単にすることができる「lwf-loader」というライブラリがあります。
こちらを使用して組み込みを行いますので、必要なファイルをダウンロードしてください。
- ファイルの入手手順
- lwf-loaderをダウンロード。
- https://github.com/gree/lwf-loader (右下のDownload zip)
- LWF本体をダウンロードしlwf.jsを取得(LWFS_work_outputフォルダにある「lwf.js」でも可)
- underscore.jsをダウンロード。
- lwf-loaderをダウンロード。
ダウンロードしたファイルから下記のファイルを1つのフォルダにまとめておいてください。
- 必要なファイル
- 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-all.min.js"></script> <script type="text/javascript"> var paramHandler = function (pElement) { return { handler: { loadError: function (e) { console.log(e); }, exception: function (e) { console.log(e); } } } }; var paramCallback = function (pElement) { return { callback: { onLoad: function (pLwf) { console.log(pLwf); } } } }; var setting = { lwf:"sample.lwf", prefix:"_/" } var displaySetting = { resizeMode:"fitToScreen" }; var lwfLoader = new window.LwfLoader(); 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); }); </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-all.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" };
- LWF-Loaderの生成
- LWF-Loaderインスタンスを生成しています。再生するLWF1個につきLoaderも1個必要です。
- 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