HTMLへ組み込む
提供: LWF Wiki
目次 |
HTMLへLWFを組み込む
制作したLWFを実際にHTMLに組み込んでみましょう。
組み込む際に必要なファイルはLWFS_work_outputフォルダに入っています。
詳しくは コチラ を参照してください。
ライブラリのダウンロード
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」の場合
<!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 = false; lwfLoader.setDisplaySetting(displaySetting); lwfLoader.playLWF(element, setting); lwfLoader.setPreventDefaultBehaviour(true); }); </script> </head> <body style="margin: auto">
</body> </html>