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で開発したAndroidアプリをGoogle Playに掲載する (1)

Cordovaで開発したAndroidアプリをGooglePlayに掲載する手順を記します。 Windows10で操作することを前提とします。 1.Cordovaでプロジェクトを作成する Node.j…続きを読む

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

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

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

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

サイトマップ生成ツール

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

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

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

地デジ番組をスマホに持ち出して外出先で番組を見る

スマートホンを持つようになると、録画した地デジ番組をスマートホン上で観たいという欲求が膨れ上がってきました。そこで、どのようにすればスマホで地デジ録画番組を見ることができるか調べてみました。 用意する…続きを読む

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

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

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

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

auガラホ GRATINA 4Gでスクリーンショットを撮る

auのガラホ「GRATINA 4G」でスクリーンショットを撮る方法です。 左下の「F1」キーと右側面の「マナー/シャッター」キーを同時押しすると、スクリーンショットが撮れます。同時に押さないとF1に設…続きを読む

Android6.0でスマホのフォルダが表示されない

Androidスマホを使っていて、Android6.0にアップデートしたら、USBでPCにスマホを接続しても、中身(フォルダ)が表示されなくなりました。 外付けデバイスとしてスマホの機種名は表示されま…続きを読む