「HTMLへ組み込む」の版間の差分

提供: LWF Wiki
移動: 案内、 検索
(→‎HTMLを作成する)
23行: 23行:
 
==HTMLを作成する==
 
==HTMLを作成する==
 
LWFS_work_outputのファイル構成を参考にした場合、下記のようなhtmlを作成します。<br/>
 
LWFS_work_outputのファイル構成を参考にした場合、下記のようなhtmlを作成します。<br/>
−
LWFファイル名「sample」の場合
+
LWFファイル名「sample」のLWFを画面いっぱいに表示する場合
 
  <!DOCTYPE HTML>
 
  <!DOCTYPE HTML>
 
  <html>
 
  <html>
86行: 86行:
  
 
==各項目の説明==
 
==各項目の説明==
 +
*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に必要なファイルの読み込みを行っています
 +
<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>
 +
<br/>
 +
*エラー発生時の処理
 +
*:LWFの読み込み失敗やエラーが発生した時に行う処理が記述されています。
 +
var paramHandler = function (pElement) {
 +
    return {
 +
        handler: {
 +
            loadError: function (e) {
 +
                console.log(e);
 +
            },
 +
            exception: function (e) {
 +
                console.log(e);
 +
            }
 +
        }
 +
    }
 +
};
 +
<br/>

2014年1月16日 (木) 20:08時点における版

目次

HTMLへLWFを組み込む

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

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

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-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">
    < 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に必要なファイルの読み込みを行っています 
<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);
            }
        }
    }
};


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