「HTMLへ組み込む」の版間の差分
提供: LWF Wiki
(→HTMLを作成する) |
(→各項目の説明) |
||
142行: | 142行: | ||
*:LWFの表示に関するパラメータを設定することができます。 | *:LWFの表示に関するパラメータを設定することができます。 | ||
*:画面いっぱいに拡大して表示、指定したエリアにフィットさせるように表示 等が可能です。 | *:画面いっぱいに拡大して表示、指定したエリアにフィットさせるように表示 等が可能です。 | ||
+ | *:下記のサンプルでは画面いっぱいに拡大し余白ができた場合は中央に寄せるように設定しています | ||
var displaySetting = { | var displaySetting = { | ||
− | resizeMode:"fitToScreen" | + | resizeMode:"fitToScreen", |
+ | stageHAlign:0, | ||
+ | stageVAlign:0 | ||
}; | }; | ||
<br/> | <br/> |
2014年1月20日 (月) 01:00時点における版
目次 |
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.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", stageHAlign:0, stageVAlign:0 }; 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.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個必要です。
- 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