BLOG



LWFの導入とデモ確認までの流れ(windows)

業務の関係で、LWFをテストする機会があったので、導入までの流れをまとめてみました。
(LWFSについてはまた別の機会に)

 

1) LWFをダウンロードする

次の2箇所にアクセスしてGitかzipでファイルをダウンロードします。

https://github.com/gree/lwf
https://github.com/gree/lwf-demo

サイトのダウンロード場所
(ダウンロード場所は、サムネイル参照)

 

どちらにしろ「スペースが含まれている」「日本語(2バイト)を含む」ようなフォルダにはダウンロードしないこと。
のちのちトラブルの原因になります。

また、ダウンロードしたフォルダはそれぞれ「lwf」「lwf-demo」に名前変更してください。
htmlやjsファイル内のパスを変更することなく、デモファイルを確認できるようになります。

 

2) jsflをインストールする

lwf/tools/flash内に次の2つのjsflが入っています。

・include JavaScript for LWF.jsfl
・LWF_Publish.jsfl

いずれもFlashにインストールすると、LWFの書き出しに必要な

・LWFフォーマットのチェック
・ASリンケージの自動設定
・画像ファイルの抽出(「○○.bitmap」フォルダに書き出される)
・SWFの書き出し

を一度にしてくれます。

ただし、JPEGファイルは強制的に「ロスレスPNG」として扱われるようです。
(書き出される画像ファイルもPNG。自分の環境だけ?)

 

3) Rubyをインストールする

swfからlwfへのコンバートを行う「swf2lwf.rb」はRubyのファイルなので、windowsの場合は別途Rubyのインストールが必要です。
LWFSのドキュメントからの参照ですが、 Ruby1.9.3とDevKitが必要なようなので、http://rubyinstaller.org/downloads/より、次の2つをダウンロードします。

・Ruby 1.9.3-p429
・DevKit-tdm-32-4.5.2-20111229-1559-sfx.exe

 

インストール方法については、下記の説明がわかりやすいです。

http://www.rubylife.jp/install/install/index1.html
http://www.rubylife.jp/railsinstall/rails/index4.html

 

4) ローカルでデモページを確認する

LWFでは、動的にlwfファイルからJavaScriptでローカルファイルを作成している(っぽい)ため、ブラウザによっては「ローカルファイルの作成」が引っかかって正常に表示されない場合があります。
(サーバー上での確認であれば引っかからないので問題なし)

https://github.com/gree/lwf/wiki/ForHTML5にGoogle Chromeで表示を有効にする方法が書いてありましたが、自分のところではうまくいきませんでした。

 

その他の方法として、自分で試したのは以下の方法です。

 

1)  xamppなどのローカルサーバー環境を作成して確認

「サーバーが必要なら用意すればいい」ということで、環境を作成し、そこから確認を取る方法。
これだとブラウザ別でのチェックもできます。

インストールについては、下記の説明を参考にしてください。
http://www.adminweb.jp/xampp/install/index1.html

 

2) Dreamweaverのライブビューで確認

作業の過程で気がついたのですが、Dreamweaverの[ライブビュー]からでも動作確認を取ることができました。コードを書く作業と合わせるととても便利です。
また、[サイトレポート]ウインドウを見ればtraceの内容なども確認することができます。

 

自分の場合は、Dreamweaverでの作業が身軽でしたのでこれを採用して進めています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

WP-SpamFree by Pole Position Marketing

トラックバックURL : http://tool-hp.com/blog/215/trackback/