Android Studioを使って、jsWaffleを使う方法

  • 2016/02/19 訂正
  • 2015/10/15 訂正
  • 2015/03/17 初稿

jsWaffleフレームワークを入手

以下よりjsWaffleをダウンロードします。ダウンロードしたら解凍します。

いちばん早い方法

Android Studio 1.4で、SDKが6.0(API Level23)という条件付きですが、上記のアーカイブに含まれる「ProjectTemplate」フォルダ以下が、簡単なjsWaffleのサンプルプロジェクトになっています。

そのため、Android Studioから、直接「既存のプロジェクトを開く(Open an existing Android Stuio Project) 」で開いて実行してみることができます。

うまく実行できたら、Project一覧から、「app > src > main > assets > www > index.html」を編集します。

そして、うまくプロジェクトがコンパイルできないという場合、以下を試してください。

Android Studioを起動する

Android Studioを起動します。もし、インストールされていなければ、Androidのサイトから入手してください。

01-dialog.png

一番上の[Start a new android studio project]ボタンをクリックします。

新規プロジェクト作成

02-newpro.png

適当にプロジェクト名を付けます。そして、[Next]ボタンをクリックします。

Application name MyTest
Company domain example.com

Androidバージョンを選択

ターゲットとなるAndroidバージョンを選びます。ここでは、Android 4.2辺りを指定します。

03-ver.png

Actibityは特に追加せず次へ

「Add No Activity」を選びます。最後に[Finish]ボタンをクリックします。

04-noadd.png

エクスプローラー(Finder)にフォルダをコピー

05-finder.png

プロジェクトを選んで右クリックし、「Reveal in Finder」をクリックします。

jsWaffleのコード一式をコピー

冒頭でダウンロードしたjsWaffleのコード一式を以下のパスにコピーします。(Macの場合、置換ではなく統合コピーしてください。)

(プロジェクトルート)/app/src

構成としては、下記のようにコピーしてください。

  • (プロジェクトルート)/app/src/main/java/com/kujirahand/...
  • (プロジェクトルート)/app/src/main/assets/www/...
dir-struct.png
(暫定処理:追記 2015/10/15)Android SDKバージョン22以降では、レガシーライブラリであることを明示しないとコンパイルが通らなくなりました。

Gradle.Scripts > build.gradle (Module: app) の adnroid の項目に、下記のように、org.apache.http.legacyを追加します。

android {
    ...
    useLibrary 'org.apache.http.legacy'
    ...
}

実行する

USBで端末とPCを接続して、「Run」ボタンを押してください。

08-run.png

端末上で、jsWaffleのアプリが起動します。

この後は、/src/main/assets/www/index.htmlを編集してください。

AdMobに対応後のjsWaffle

最新版では、AdMobの利用が簡単になっています。ただ、プロジェクトの設定で、AdMobを有効にする必要があります。

※(ProjectTemplate)はこの設定が有効になっていません。

備考:以前作ったプロジェクトの更新方法

以前、jsWaffleで作ったプロジェクトのassetsフォルダを、上記の手順で作った/src/main/assetsフォルダに放り込めば、Android5.2でも動くアプリとして動きます。

また、画面サイズが変わっていますので、HTMLファイルの<head>タグに以下の一行を差し込むと良いでしょう。

<meta name="viewport" content="width=320">