HOME技術スマホCordovaでAndroid/iOSアプリ開発環境の構築

CordovaでAndroid/iOSアプリ開発環境の構築

Androidの開発環境としては、Android Studioがあります。
Android Studioは複雑なアプリの開発ができる一方、JAVAを理解していないとソースをかけなかったり、クロスプラットフォームの開発ができないというデメリットもあります。

特にJAVAを勉強するのが苦手という人にとっては、HTML5+JavaScript+CSS3という組み合わせだけでAndroid / iOSどちらのアプリも生成できるという、クロスプラットフォームの開発環境がお薦めです。
この環境には、PhoneGapやMonacaなどがありますが、ここでは、基本的な開発環境であるCordovaについて、インストールからビルドまでを記録します。

Cordovaでビルド環境をつくる

Node.jsをインストール

https://nodejs.org/ja/
にアクセスし、最新版をダウンロードします。
今回の例では、Windows (x68)のv.6.11.0.LTS(推奨版)をダウンロード。
ダウンロードしたファイルをダブルクリックでインストールします。

Cordovaをインストール

node.js command promptを起動します。
※Node.jsをインストールしていないと起動しません。
分からない場合は「node」で検索すると候補にあがってきます。

> npm install -g cordova

以上のコマンドを実行するとインストールされます。

plugmanをインストール

plugmanは、cordova用のプラグイン。入れておくと何かと開発に便利なのでインストールしておきます。

> npm install -g plugman

Apache Antをインストール

http://ant.apache.org/
にアクセスし、DownloadのBinary Distributionsから、Current Release of Ant以下の最新のアーカイブをダウンロードします。
ここでは「apache-ant-1.10.1-bin.zip」をダウンロードしました。
ダウンロードしたらzipファイルを解凍し、c:\apache-ant\以下にフォルダごと移動します。
c:\apache-ant\apache-ant-1.10.1

Apache Antへのパスを通します。
「環境変数」というキーワードで検索して出た候補を起動すると、環境変数の設定画面が出るので、ユーザー環境変数の「新規」ボタンをクリックします。
変数名に「ANT_HOME」
変数値に「c:\apache-ant\apache-ant-1.10.1」
を指定して、「OK」。

さらに、変数名が「PATH」という欄を選んで、「編集」をクリックします。
「新規」をクリックして、
「%ANT_HOME%\bin」と入力して「OK」をクリックして完了します。

JDKをインストール

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
にアクセスして、自分のOSのビット数に合った最新バージョンをダウンロードします。
ここでは、Java SE Development Kit 8u131から、「Windows x64」をダウンロードしました。
ダウンロードしたらインストールします。ここではインストール先を「c:\java\jdk1.8.0_131」にしています。

パスを通します。
変数名「JAVA_HOME」
変数値「c:\java\jdk1.8.0_131」

変数名「PATH」に追加
変数値「%JAVA_HOME%\bin」

Android SDKをインストール

Android SDKはAndroid Studioをインストールしないとインストールできないので、Android Studioをインストールします。

https://developer.android.com/studio/index.html?hl=ja
上記にアクセスし、Android Studioをダウンロード。ここでは、2.3.3.0をダウンロードし、インストールしました。インストール先は「c:\Android」にしています。

インストール後、Android Studioを起動し、「Configure」からSDK Managerを起動します。

左側のペインにあるAndroid SDKを選択し、「Android SDK Location:」がAndroid Studioをインストールしたフォルダのsdkフォルダになっているか確認します。なっていなければ修正します。

SDK Platformsを選択し、開発したいプラットフォームを選択します。ここではAndroid 4.0 (IceCreamSandwich)以降をすべてチェックしました。
また、「SDK Tools」から
・Android SDK Build-Tools **
・Android Emulator
・Android SDK Platform-Tools
・Android SDK Tools
をチェックします。
このほか、「Google Play services」「Google USB Driver」「Intel x86 Emulator Accelerator (HAXM installer)」もチェックしました。

以上を確認したら「OK」をクリックするとインストールが始まります。これで最新のSDKをインストールできました。

次に環境変数にパスを追加します。

変数名「ANDROID_HOME」
変数値「c:\Android\android-sdk」

変数名「PATH」に追加
変数値「%ANDROID_HOME%\platform-tools」

変数名「PATH」に追加
変数値「%ANDROID_HOME%\build-tools\**.*.*」
(末尾の数字は、実際のbuild-toolsフォルダを開き、大きい数字のフォルダ名を当てはめてください。たとえば、26.0.3など)

変数名「PATH」に追加
変数値「%ANDROID_HOME%\tools」

変数名「GRADLE_HOME」を新規作成
変数値「c:\Android\android-studio\gradle」

変数名「PATH」に追加
変数値「%GRADLE_HOME%\gradle-*.*\bin」
(*には、実際にフォルダを開き、そこにあるgradleフォルダ名を当てはめます。たとえば、gradle-3.2など)

以上で準備完了です。
ここまで設定したら、一度コンピュータを再起動します。

cordovaでアプリをビルドする

c:\などにcordovaプロジェクト専用のフォルダを作ります。
ここでは、「c:\cordova」とします。

コマンドプロンプトを開き、「c:\cordova」に移動します。

プロジェクトを作成します。ここではtestにします。

c:\cordova> cordova create test

testフォルダに移動した後に、Android用のプラットフォームを追加します。

c:\cordova> cd test
c:\cordova\test> cordova platform add android

testというプロジェクトをそのままビルドして実機で動作確認します。
動作確認として2種類の方法を示します。

動作確認1:apkファイルを転送する

コマンドプロンプトで、ビルドを実行します。

c:\cordova\test> cordova build

出力されたapkファイルをスマホに転送します。
転送方法はUSBで接続して任意のフォルダに配置したり、メールで送信するなどの方法をとります。

出力されたapkファイルをスマホでタップすると、インストールされて動作確認ができるようになります。
その際、「提供元不明のアプリ」のインストールを許可します。

動作確認2:直接スマホで起動する

直接スマホにアプリを表示させるには、まずスマホとPCをUSBで接続します。
スマホの「設定」→「開発者向けオプション」→「USBデバッグ」をオンにします。
「開発者向けオプション」が表示されていない場合には、「設定」→「端末情報」→「ソフトウェア情報」→「ビルド番号」を7回タップします。

コマンドプロンプトで以下を実行します。

c:\cordova\test> cordova run android

Gradleの設定

以下のエラーが出てビルドが成功しない場合にはGradleの設定がうまくいっていません。

Could not find an installed version of Gradle either in Android Studio,or on your system to install the gradle wrapper. Please include gradlein your path, or install Android Studio

この場合にはGradleを別途インストールしてパスを通します。

Gradle Build Toolにアクセスします。

「1. Install Gradle」をクリックします。

「Installing manually」をクリックします。

「Complete」をクリックすると「gradle-6.0-all.zip」がダウンロードされます。
※ファイル名はバージョンによって異なります。

ダウンロードしたzipファイルを解凍し、中身を「c:\gradle」以下に配置します。

次にパスを通します。

デスクトップ上の「PC」を右クリック→「プロパティ」をクリックします。

「システムの詳細設定」をクリックします。

「環境変数」をクリックします。

ユーザー環境変数の「Path」をクリックして「編集」をクリックします。

「新規」で新しい値を「c:\gradle\bin」とします。
(さきほどのgradleフォルダ内に直接解凍ファイルを入れた場合はbinフォルダがあることになります。そうでない場合はbinフォルダがある場所を指定します)

「OK」をクリックして確定します。
このあとコンピュータを再起動してください。

関連記事

DiXiM Playerのサーバーが起動しない場合の対処法

以前「地デジ番組をスマホに持ち出して外出先で番組を見る」で紹介したアプリ「DiXiM Player」について、無線経由で録画番組をスマホに転送している途中に、無理やりダウンロードを中止させるような操作…続きを読む

Androidスマホの画面をキャプチャする

Androidスマホの画面をキャプチャするには、Android 4.0以降のスマホであれば、電源ボタンと音量を下げるボタンを同時に押して1~2秒待つとキャプチャされます。 キャプチャした画像は、本体の…続きを読む

スマホで辞書登録をする

わたしはGalaxy S9(SC-03K)を使っています。 スマホの文字入力の際には、一文字入力したら変換して記号などを出せるように辞書登録をしていますが、Galaxyに変えたときに手間取ったので記録…続きを読む

auガラホ GRATINA G4のMACアドレスを調べる

auガラホのGRATINA G4のMACアドレスを調べる方法です。 MACアドレスを調べる必要性 普段、携帯のMACアドレスを調べることはありませんが、例えば、MACアドレスフィルタリングを無線ルータ…続きを読む

USB接続トランスコーダー「GV-TRC/USB」で地デジ番組を圧縮して持ち出す

以前の記事「地デジ番組をスマホに持ち出して外出先で番組を見る」で録画した地デジ番組をスマホに入れてみる方法を紹介しました。 しかし、一つ大きな問題がありました。それは、地デジ番組のサイズ調整ができない…続きを読む

RPGツクールMV:デプロイしたファイルをCordovaプロジェクトに移してAndroid端末で動作確認するバッチファイルをつくる

RPGツクールMVでつくったゲームをデプロイすると、wwwフォルダが生成されます。 このwwwフォルダをCordovaプロジェクトのwwwフォルダにコピーすると、Android端末で動作させることがで…続きを読む

AndroidスマホをPCに認識させる

AndroidのスマートフォンをコンピュータにUSB接続しても、認識されずにそのままになってしまったので、認識させる方法を調べました。 OS:Android 5.1 機種:富士通Arrows FX F…続きを読む

auガラホGRATINA 4Gでスクリーンショットを撮った画像をPCに保存する

auガラホGRATINA 4Gでスクリーンショットを撮った後、スクリーンショットの画像ファイルをPCに保存する方法です。 GRATINA 4GをMicroUSBケーブルでPCと接続します。 GRATI…続きを読む

Androidスマホに入れておくべきアプリ

先日スマホを水没しました。 最新のスマホに買い替えたのですが、SDカードのデータは全滅し本体にもどんなアプリを入れていたのかあまり思い出せません。 やはりクラウドにデータを保存しておいた方が便利だなと…続きを読む

サイトマップ生成ツール

ウェブサイトをつくりウェブサーバーにアップデートした後にやるべきことは、サイトマップを更新して、検索エンジンに送信することです。 サイトマップを送信することにより、検索エンジンにウェブサイトのページ構…続きを読む