AndroidアプリをHTMLファイルで作るフレームワーク、jsWaffleの使い方。JARファイルを使ったセットアップ方法を紹介します。

1. SETUP - jsWaffle
Kujirahand.com

2. jsWaffle のセットアップ
前準備
Eclipse のインストール
Android SDK のインストール
jsWaffleのJARファイルとwwwフォルダをダウンロー
ド
セットアップ
1. Android Projectを作る
2. jsWaffle の JAR ファイルを libs に追加
3. jsWaffle の www フォルダを assets に追加
4. Androidで実行

3. jsWaffleファイルのダウンロー
ド
JARファイルのダウンロード
jsWaffleのプロジェクト
ページから2つのファイル
をダウンロードする！

4. EclipseのAndroidプロジェクト作
成
Eclipseを起動します。

5. 新規プロジェクト作成
File > New >
Android Application
Project

6. 今回は、Android1.6で説明。

7. プロジェクトダイアログに入力
Application Name/Project Nameを入力。今回は、TestProjectに。

8. ダイアログを次へ次へ…
Next > Next > Finish と次々とクリック！

9. JARファイルをlibsにドロップ
あらかじめダウンロードしておいた
jsWaffle.jar を libs フォルダに
ドロップします。
コピーかリンクか尋ねられる
ので、コピーしてしまいましょう

10. Build PathにJARファイルを追加
Libsに追加したjsWaffle.jarを右クリックして、
[Build Path > Add to Build Path]
をクリックして、JARファイルを追加します。

11. メイン java ファイルを開く
メインファイルは、
[src]フォルダにあります。

12. メインファイルを書き換えます
メインファイルの冒頭にある extends の後ろを
Waffle Activity に置き換えます。

13. メインファイルを書き換え その
2
クラスの中身、不要な部分を削除します。
以下のような感じにしてください。

14. プロジェクトのひな形wwwをド
ロップ
先ほどダウンロードした
www.zipを解凍します。
www フォルダを プロジェクトの
assets フォルダに ドロップします。
--- ひゃっほう！---
実際、これは、プロジェクトのひな形です。
最低、www フォルダの中にある、
index.html と jsWaffle.js さえあれば
良いのですけど、慣れないうちは全部
コピーしておきましょう。

15. Androidアプリとして実行！
プロジェクトを右クリックして、
ポップアップメニューから
[Run As > Android Application]を
クリック！！！

16. 実機 あるいは エミュレータで
実行
jsWaffle のデモが起動したなら
セットアップ終了です！

17. この後の作業
“assets/www/index.html” がメインファイルです。
このファイルを好きなように書き換えます。
これは普通のHTMLファイルです。好きなように書
き換えてくださいね。あなただけの、オリジナル
アプリが、手軽に作れますように！！