HTMLへ組み込む

2014-02-06T04:58:49Z

Hcch:

==HTMLへLWFを組み込む==
制作したLWFを実際にHTMLに組み込んでみましょう。<br/>
組み込む際に必要なファイルはLWFS_work_outputフォルダに入っています。<br/>
<br/>
※LWF再生に必要なファイル群のパス<br/>
LWFS_work_output/html5/list/(projectフォルダ)/_<br/>
<br/>
==ライブラリのダウンロード==
HTMLへ組み込む際の作業や設定を簡単にすることができる「lwf-loader」というライブラリがあります。<br/>
こちらを使用して組み込みを行いますので、必要なファイルをダウンロードしてください。<br/>
<br/>
*ファイルの入手手順
**lwf-loaderをダウンロード。
**:https://github.com/gree/lwf-loader (右下のDownload zip)
**LWF本体をダウンロードしlwf.jsを取得(LWFS_work_outputフォルダにある「lwf.js」でも可)
**:https://github.com/gree/lwf
**underscore.jsをダウンロード。
**:http://underscorejs.org/
ダウンロードしたファイルから下記のファイルを１つのフォルダにまとめておいてください。<br/>
*必要なファイル
**lwf-loader-all.min.js (lwf-loader.js + lwf-util.js でも可)
**underscore-min.js (underscore.js でも可)
**lwf.js
<br/>
==HTMLを作成する==
LWFS_work_outputのファイル構成を参考にした場合、下記のようなhtmlを作成します。<br/>
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>
<br/>

==各項目の説明==
*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" />
<br/>
*必要な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>
<br/>
*エラー発生時の処理
*:LWFの読み込み失敗やエラーが発生した時に行う処理を記述しています。
var paramHandler = function (pElement) {
return {
handler: {
loadError: function (e) {
console.log(e);
},
exception: function (e) {
console.log(e);
}
}
}
};
<br/>
*読み込み完了時の処理
*:LWFファイルの読み込みに成功した時に行う処理を記述しています。
var paramCallback = function (pElement) {
return {
callback: {
onLoad: function (pLwf) {
console.log(pLwf);
}
}
}
};
<br/>
*LWF再生設定
*:LWFファイルのファイル名の指定やパスの指定、またLWFに渡すデータの設定等を設定することができます。
*:prefixはhtmlから見て.lwfが存在するパスを指定してください。
*:もし、画像は分けて管理したい場合は画像が存在するフォルダのパスをimagePrefixで指定してください。
var setting = {
lwf:"sample.lwf",
prefix:"_/"
}
<br/>
*LWF表示設定
*:LWFの表示に関するパラメータを設定することができます。
*:画面いっぱいに拡大して表示、指定したエリアにフィットさせるように表示等が可能です。
*:下記のサンプルでは画面いっぱいに拡大し余白ができた場合は中央に寄せるように設定しています
var displaySetting = {
resizeMode:"fitToScreen",
stageHAlign:0,
stageVAlign:0
};
<br/>
*LWF-Loaderの生成
*:LWF-Loaderインスタンスを生成しています。再生するLWF1個につきLoaderも1個必要です。<br/>
var lwfLoader = new window.LwfLoader();
<br/>
*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);
});
<br/>
*LWFを再生するdivの指定
*:LWFを再生する際の基準となるdivを定義しています。
<body style="margin: auto">
< div id="lwfs-sample"></div>
</body>
<br/>

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

LWF Wiki - 利用者の投稿記録 [ja]

HTMLへ組み込む