WebView ワークフロー

公開日: 2014 年 2 月 28 日

ウェブ開発の利点の一つは、ワークフローの改善に使用できる豊富なツールがあることです。

このようなツールの例として、Grunt があります。これは、本番環境向けのビルドを作成する前に、Sass のコンパイルやライブサーバーの起動から、画像の圧縮、JavaScript の圧縮、JSHint の実行まで、ウェブアプリで実行するタスクを定義できる JavaScript タスクランナーです。

Yeoman は、ウェブ アプリケーションの作成、ボイラープレートの生成、Bower と npm からのライブラリの導入、事前定義されたタスクを含む Grunt ファイルの作成に役立つツールです。

このチュートリアルでは、Yeoman を使用して新しい基本的なウェブアプリを作成し、Android Studio ビルドシステム（Gradle）を Grunt と統合してウェブアプリをビルドします。また、ブラウザでアプリケーションをテストするためのローカル ライブリロード サーバーを起動するように Grunt タスクを設定します。これにより、HTML、CSS、JavaScript ファイルを変更するたびにページを手動で更新する必要がなくなります。

前提条件

始める前に、いくつかの前提条件をインストールする必要があります。

1. Yeoman をインストールします。https://github.com/yeoman/yeoman/wiki/Getting-Started
2. Android Studio をインストールします。https://developer.android.com/sdk/installing/studio.html

ステップ 1. Android Studio で WebView を使用して新しいプロジェクトを作成する

詳しい手順については、スタートガイドをご覧ください。

ステップ 2. ウェブアプリ コンテンツのサブディレクトリを作成する

プロジェクトを作成したら、新しい最上位ディレクトリを作成します。Android Studio でプロジェクト フォルダを右クリックし、[New] > [Directory] を選択します。

ディレクトリに webapp という名前を付けます。

ステップ 3. 新しいディレクトリに Yeoman プロジェクトを作成する

ターミナルで、プロジェクトの webapp ディレクトリに cd します。

cd <path-to-project>/webapp/

次に、Yeoman で新しいウェブアプリを作成します。

yo webapp

画面上の手順に沿ってプロジェクト オプションを選択します。マシンに npm がインストールされている方法によっては、sudo npm install の実行が必要になる場合があります。

次のステップに進む前に、次のコマンドを実行してアプリをテストします。

grunt server

ブラウザで新しいタブが開き、Grunt によって起動されたローカル サーバーに接続します。プロジェクト内の HTML、CSS、JavaScript ファイルのいずれかを変更すると、ページが自動的に再読み込みされ、更新されます。

grunt build を実行すると、新しいディレクトリ dist が作成され、ウェブアプリが圧縮されて最適化され、このフォルダ内に本番環境対応バージョンが作成されます。

ステップ 4. Gradle ビルドを構成する

webapp ディレクトリに build.gradle という名前の新しいファイルを作成します。

新しい build.gradle ファイルに次のように追加します。

import org.apache.tools.ant.taskdefs.condition.Os

task buildWebApp(type: Exec) {
  executable = Os.isFamily(Os.FAMILY_WINDOWS) ? "grunt.cmd" : "grunt"
  args = ["build"]
}

これにより、事前定義されたタイプ Exec の buildWebApp という新しいタスクが作成されます。次に、Exec の executable 変数を、現在の OS に応じて関連する grunt コマンドに設定します。args は "build" に設定されます。これは、コマンドラインで grunt build が実行されることと同等です。最後に、上部の import は Os.isFamily(Os.FAMILY_WINDOWS) を使用するためのものです。

この新しいタスクを使用するには、プロジェクトに新しい build.gradle ファイルを認識させる必要があります。

ルート ディレクトリで settings.gradle を開き、次の行を追加します。

include ':webapp'

ステップ 5. Android アプリのビルド時にウェブアプリをビルドする

ビルドするウェブアプリを取得し、Android アプリの assets ディレクトリにアプリをコピーします。

以下を Android アプリの build.gradle ファイルにコピーします。

task copyWebApplication(type: Copy) {
  from '../webapp/dist'
  into 'src/main/assets/www'
}

task deleteWebApplication(type: Delete) {
  delete 'src/main/assets/www'
}

copyWebApplication.dependsOn ':webapp:buildWebApp'
copyWebApplication.dependsOn deleteWebApplication

android.applicationVariants.all { variant ->
  tasks.getByPath(":${project.name}:assemble${variant.buildType.name.capitalize()}").dependsOn copyWebApplication
}

それぞれの部分について見てみましょう。

タスク copyWebApplication

task copyWebApplication(type: Copy) {
  from '../webapp/dist'
  into 'src/main/assets/www'
}

この Copy タスクは、webapp/dist ディレクトリからアプリをコピーします。ファイルを src/main/assets/www にコピーします。このタスクでは、必要なディレクトリが存在しない場合、必要なファイル構造も作成されます。

task deleteWebApplication

task deleteWebApplication(type: Delete) {
  delete 'src/main/assets/www'
}

この削除タスクは、assets/www ディレクトリ内のすべてのファイルを削除します。

copyWebApplication.dependsOn

copyWebApplication.dependsOn ':webapp:buildWebApp'
copyWebApplication.dependsOn deleteWebApplication

最初の行は、copyWebApplication がウェブアプリの build.gradle ファイルの buildWebApp タスクに依存していることを示しています。

2 行目は、deleteWebApplication タスクに依存関係があることを示しています。

つまり、実際にファイルを assets ディレクトリにコピーする前に、ウェブアプリをビルドし、assets ディレクトリの現在の内容を削除します。

android.applicationVariants.all

android.applicationVariants.all { variant ->
  tasks.getByPath(":${project.name}:assemble${variant.buildType.name.capitalize()}").dependsOn copyWebApplication
}

このタスクでは、アプリのバージョンごとに、プロジェクトのすべてのビルドの依存関係を指定します。ここでは、copyWebApplication を実行する assemble タスクに依存関係を設定します。

assemble タスクはプロジェクトの出力をアセンブルするため、まずウェブアプリを Android プロジェクトにコピーする必要があります。

ステップ 6. すべてが正常に動作していることを確認する

Android Studio では、Android アプリの src フォルダに assets ディレクトリが存在しないはずです。

index.html ページを使用するように WebView を設定します。

mWebView.loadUrl("file:///android_asset/www/index.html");

[実行] をクリックして、アプリケーションをビルドします。www サブディレクトリに、ウェブアプリを含む assets ディレクトリが表示されます。

ステップ 7. ライブサーバーとライブリロードを作成する

ライブ リロードは、ウェブ アプリケーションにすばやく変更を加える場合に非常に便利です。これを実現するには、アプリの 2 つの「プロダクト フレーバー」を作成します。ライブ サーバー バージョンと、ウェブ コンテンツが Android アプリにパッケージ化された静的バージョンです。

Android アプリの build.gradle で、android 要素の末尾に次の行を追加します。

android {
  ...
  defaultConfig {
    ...
  }
  productFlavors {
    staticbuild {
      packageName "com.google.chrome.myapplication"
    }

    liveserver {
      packageName "com.google.chrome.myapplication.liveserver"
    }
  }

}

Gradle では、liveserver パッケージ名と通常のパッケージ名の両方を持つアプリのバージョンを作成できるようになりました。正常に動作しているかどうかを確認するには、[Sync Project with Gradle Files]（上部のバーの [Run] ボタンの横）をクリックします。

次に、Android Studio の左下にある [Build Variants] を表示します。ここには、ビルド可能なアプリのバージョンが表示されます。

productFlavor ごとに、デバッグ バージョンとリリース バージョンがあります。これは、Android Plugin for Gradle によってデフォルトで提供されます。これにより、ビルドがデバッグビルドか、Google Play ストアにデプロイするのに適したリリースビルドかを決定します。

これで 2 つのバージョンが作成されましたが、まだ実際には何も違いはありません。

手順 8. ライブサーバーから読み込む

次に、ビルドするプロダクト フレーバーに応じて異なる URL を読み込むようにアプリを構成します。

Android アプリでは、すべてのプロダクト フレーバーに共通のファイルは src/main にあります。1 つのプロダクト フレーバーに固有のコードまたはリソースを追加するには、productFlavor と同じ名前のディレクトリを src の下に作成します。そのビルド バリアント用にビルドすると、Gradle と Android プラグインによって、これらの追加ファイルが src/main のファイルの上にマージされます。

URL を文字列リソースとして定義し、ハードコードされた URL の代わりにそのリソースをコードで使用します。

1. src/liveserver フォルダと src/staticbuild フォルダを作成します。

2. liveserver フォルダに、res という名前の新しいフォルダと、values という名前のサブフォルダを作成します。この中に config.xml という名前のファイルを作成します。このプロセスを staticbuild フォルダに対して繰り返します。

3. 構成ファイル内で、src/liveserver/res/values/config.xml に次の行を追加します。

   <?xml version="1.0" encoding="utf-8"?>
   <resources>
     <string name="init_url">https://<Your Local Machine IP Address>:9000</string>
   </resources>
   

   src/staticbuild/res/values/config.xml に次のブロックを追加します。

   <?xml version="1.0" encoding="utf-8"?>
   <resources>
     <string name="init_url">file:///android_asset/www/index.html</string>
   </resources>
   

4. これらの構成ファイルの init_url を使用するように WebView を設定します。

   mWebView.loadUrl(getString(R.string.init_url));
   

5. liveserver/AndroidManifest.xml に AndroidManifest.xml という新しいファイルを作成し、次の行を追加します。

   <?xml version="1.0" encoding="utf-8"?>
   <manifest xmlns:android="https://schemas.android.com/apk/res/android">
     <uses-permission android:name="android.permission.INTERNET" />
   </manifest>
   

   これにより、liveserver ビルドのインターネット権限が追加されます。

6. webapp/Gruntfile.js 内で次の項目を探します。

   connect: {
     options: {
       port: 9000,
       livereload: 35729,
       // change this to '0.0.0.0' to access the server from outside
       hostname: **'localhost'**
     },
     ...
   }
   

   ローカル ネットワークからローカル サーバーにアクセスできるように、localhost を 0.0.0.0 に置き換えます。

   connect: {
     options: {
       port: 9000,
       livereload: 35729,
       // change this to '0.0.0.0' to access the server from outside
       hostname: '**0.0.0.0'**
     },
     ...
   }
   

変更をテストする手順は次のとおりです。

1. ライブサーバーを起動します。

   grunt server
   

2. Android Studio の [Build Variant] で、[LiveserverDebug] を選択します。[実行] をクリックします。

   HTML、CSS、JavaScript のコンテンツを編集すると、ブラウザにすぐに反映されます。

これで、Grunt サーバーからのライブ リロードが可能な開発バージョンと、Android アプリにローカルにパッケージ化された静的バージョンの 2 つのバージョンのアプリが作成されました。