Windows 8.x を使用した Android ネイティブアプリの構築

本ガイドは、Sencha Architect でネイティブアプリを構築するために Windows 8/8.1 を準備する手順について説明します。本ガイドは Sencha Architect の環境設定を中心に扱っていますが、これらの手順は Architect を使用しないで Touch のネイティブアプリケーションを構築する場合にも必要です。

注意:本ガイドはクリーンな Windows 8 マシンを対象としています。これらの手順の一部はソフトウェア更新のみの場合には不要です。

JAVA

最初に JAVA JDK 1.7+ がインストールされ、JAVA_HOME Environment Variable で適切にマップするようにします。

まず JAVA JDK 1.7（Java SE 1.7）をインストールします。

1. “Java SE 7uxx” セクションの JDK の下にある [Download（ダウンロード）] ボタンをクリックします。

2. この時点で [Accept License Agreement（ライセンス契約に同意する）] ラジオボタンにチェックを入れ、該当するダウンロードリンクをクリックする必要があります。Windows x86は32ビットマシン用、Windows x64は64ビットマシン用です。

3. 保存するかアラートが表示されたら [Run（実行）] をクリックします。

4. ダウンロードしたら、表示されるポップアップで [はい] をクリックして Java によるマシンへの変更を許可します。

5. インストーラーが抽出を開始するまで [次へ] をクリックします。抽出後に、インストール ディレクトリの変更が許可されます。C ドライブのルートをポイントするようにディレクトリを変更してください。C:\Java\ にフォルダーを作成してインストール先にします。

6. “jre7” のインストール先を確認されたら、別のフォルダを指定してください。JRE は場所が確認できない場合は JDK を上書きすることが知られています。これによって、後で重大な問題が発生します。

7. コマンドプロンプトから以下のコマンドを発行して JAVA インストールとバージョンを確認します。

   java -version

参照:

java version 1.7.0_xx

JAVA_HOME とパス変数

次に、JAVA_HOME 環境変数を変更する必要があります。JAVA_HOME は上記で設定したインストール場所にポイントする必要があります。

以下の手順を実行することによって Windows 8 で環境変数を設定できます。

1. 左下の [Windows] ボタンを右クリックします。
2. [システム] -> [システムの詳細設定]（タイル表示）をクリックします
3. [詳細設定] タブをクリックします。
4. ウィンドウの右下の [環境変数] をクリックします。

環境変数内に入ったので、次に JAVA_HOME を追加しましょう。

1. [システム環境変数] の下の [新規] ボタンをクリックします。
2. 変数の名前に “JAVA_HOME” と入力し、変数の値に “C:\Java” と入力します。
3. [OK] をクリックします。

次に、Java のパスをシステムの Path 変数に追加してみましょう。

1. [システム環境変数] の下の “Path” を探します。
2. [編集] をクリックして “;%JAVA_HOME%\bin” を現在の変数の値の末尾に追加します。パスは “;” で区切られていることに注目してください。新しい変数を追加する場合にはセミコロンを常に使用する必要があります。
3. [OK] をクリックして変更を了承し、[OK] を再度クリックして保存します。

注意:このオプションは新しいコマンドプロンプトウィンドウのみに影響し、既存のウィンドウには影響しません。インストールするために、開いているウィンドウを閉じます。このインストールでは、場合によってはすべての変更を解決する前に再起動する必要があります。

Apache Ant

次に、Apache Ant を見てみましょう。Apache Ant をインストールしていない場合、ここでバイナリを見つけることができます。

好みの圧縮方法を選択します。この例では、.zip アーカイブをダウンロードし、以下の “Current Release of Ant” を見つけました。

リンクをクリックしたら、[保存] をクリックしてファイルをダウンロードします。Ant はマシンのどこにでも配置できますが、このソフトウェアは C:\ ディレクトリに保持することが好ましいです。

Windows 用の Ant インストーラーはありません。コンテンツを C:\Ant に抽出するだけです。

ANT_HOME と Path 変数

Ant が導入されたら、ANT_HOME 環境変数を設定できます。JAVA_HOME 環境変数とは異なり、ANT_HOME 変数は ant ディレクトリのルートに直接マップします。

前回と同じように環境設定を開き、これらの手順に従います。

1. [システム環境変数] の下の [新規] ボタンをクリックします。
2. 変数の名前に “ANT_HOME” と入力し、変数の値に “C:\Ant” と入力します。
3. [OK] をクリックします

次に、Ant のパスをシステムの Path 変数に追加してみましょう。

1. [システム環境変数] の下の “Path” を探します。
2. [編集] をクリックして “;%ANT_HOME%\bin” を現在の変数の値の末尾に追加します。
3. [OK] をクリックして変更を了承し、[OK] を再度クリックして保存します。

コマンドプロンプトで以下のコマンドを発行して Ant が正しく設定されていることを確認できます。

ant -v

以下を返します。

Apache Ant(™) version {version} compiled on {date}

注意:このオプションは新しいコマンドプロンプトウィンドウのみに影響し、既存のウィンドウには影響しません。インストールするために、開いているウィンドウを閉じます。

Ruby

次に、Ruby を見てみましょう。Ruby はこのインストーラーを利用すると簡単にインストールできます。

最新バージョンのインストーラーをダウンロードします（執筆時点で Ruby 2.0.0-p481）。インストーラーを実行すると [Options（オプション）] ページが表示されます。

Ruby のインストールパスを C:\Ruby に設定し、[Add Ruby executables to your PATH] と書かれたチェックボックスにチェックを入れてください。

これによって、今まで手動で行っていた手順を自動化します。

新しいコマンドプロンプトを開いて以下を入力し、インストールが完了したことを確認します。

ruby -v

これに対して何かを返します。

ruby 2.0.0p481 {build-date} {bit version}

注意:このオプションは新しいコマンドプロンプトウィンドウのみに影響し、既存のウィンドウには影響しません。インストールするために、開いているウィンドウを閉じます。

Android SDK

次に、Android SDK が必要になります。Android SDK サイトからダウンロードできます。

1. [View All Downloads and Sizes] をクリックして、[SDK Tools Only] の下の推奨される .exe を選択します。

2. 条件に同意し、ファイルをダウンロードします。

3. 実行ファイルを実行します。最初に、上記のインストール結果に従って渡される Java のインストールを確認します。

4. 次に、必要なインストールの範囲を選択します。

5. インストール先フォルダを C:\Android にして [次へ]、[インストール] の順にクリックします。

6. インストールが成功したら、Android SDK マネージャーを実行します。事前にチェックが入っているボックスをインストールする必要があります。これらには Android ビルドツールのベースツールといくつかの最新プラットフォームが含まれます。

7. [Install x packages] をクリックし、ダウンロードが完了するまで待ちます。

注意:代わりに ADT バンドルをダウンロードできます。だたし、場合によっては必要ない多数の追加機能が多く含まれています。

通常、ANDROID_HOME 環境変数を作成する必要があります。

1. [システム環境変数] の下の [新規] ボタンをクリックします。
2. 変数の名前に “ANDROID_HOME” と入力し、変数の値に “C:\Android” と入力します。
3. [OK] をクリックします

最後に、ANDROID_HOME 環境変数を付加する必要があります。

1. [システム環境変数] の下の “Path” を探します
2. [編集] をクリックして “;%ANDROID_HOME%\tools;%ANDROID_HOME%\platforms;%ANDROID_HOME%\platform-tools” を現在の変数の値の末尾に追加します。
3. [OK] をクリックして変更を了承し、[OK] を再度クリックして保存します

“android” コマンドをターミナルから発行してパスが正しく設定されているかテストできます。SDK ツールが正しくインストールされている場合、Android マネージャーが起動します。

注意:このオプションは新しいコマンドプロンプトウィンドウのみに影響し、既存のウィンドウには影響しません。インストールするために、開いているウィンドウを閉じます。

NodeJS

最後にインストールする依存関係にあるソフトウェアは NodeJS です。まず NodeJS installer をダウンロードします。

1. Node.js インストーラーを開始して [次へ] をクリックします。
2. ライセンス契約に同意して [次へ] をクリックします。
3. C:\nodejs をインストール先に選択して [インストール] をクリックできるようになるまで進みます。

Nodeは自動的にシステムパスに追加しますが、新しいマッピングをすべて解決するにはマシンを再起動する必要があります。

マシンを再起動してから、コマンドプロンプトを開き、以下のコマンドを発行して NodeJS のインストールをテストします。

node -v

上記のコマンドは以下のようなものを返します。

"v0.10.3x".

Cordova / PhoneGap

NodeJS がインストールされたので、Cordova や PhoneGap をマシンに簡単に追加できます。これは今までで最も簡単な手順です。コマンドプロンプトを開き、以下のコマンドを実行するだけです。

Cordova

npm install -g cordova

PhoneGap

npm install -g phonegap

以下のコマンドを実行してインストールを確認できます。

cordova -v
phonegap -v

正しくインストールされている場合はいずれもバージョン番号を返します。Sencha Architect のワークフロー

既存のプロジェクトを Sencha Architect 3.1.x で開いた後に、[Save] ボタンを押して開始できます。これでプロジェクトが初期化され、Sencha Cmd を設定できます。

プロジェクトが保存されたら、コマンドプロンプトを開きます。

保存されたプロジェクトフォルダに移動して以下のコマンド（APP_ID と APP_NAME 引数はオプション）を実行します。

sencha phonegap init com.mycompany.MyApp MyApp

または

sencha cordova init com.mycompany.MyApp MyApp

これで、上記のコマンドが終了すると phonegap（または cordova）ディレクトリがプロジェクトフォルダに表示されます。Sencha Architect に戻ると 2 つのビルドオプションが表示されます。

• ネイティブビルド
• ネイティブビルドとエミュレーション

また、PhoneGap または Cordova のブロックがプロジェクトの app.json ファイルに表示されます。app.json はプロジェクトのルートにあります。ここでビルドするプラットフォームを設定できます。

PhoneGap

"native": {
   "packager": "phonegap",
   "cordova": {
      "config": {
         "id": "com.domain.MyApp",
         "name": "MyApp",
         "platform": "android"
      }
   }
}

Cordova

"native": {
   "packager": "cordova",
   "cordova": {
      "config": {
         "id": "com.domain.MyApp",
         "name": "MyApp",
         "platforms": "android"
      }
   }
}

注意:Android とエミュレータの関係で、ネイティブビルドとエミュレーションで Windows 上での Android ビルドが完了するまで長い時間がかかります。

結論

これで、Windows 8.x 環境は Sencha Architect 3.1.x の Sencha Touchでネイティブの Android ビルドを構築する準備ができているはずです。詳細は、PhoneGap および Cordova ガイドを参照してください。