Techvenience

Technology × Convenience - Vue / React / Next / Nuxt / ChatGPTなどのIT技術がもたらす便利さをお伝えします。最近はChatGPTなどのAI技術を使ってブログを書いています。

6章-1 Cordovaでハイブリッドアプリ開発環境を整える【Android】 - 【連載】ハイブリッドアプリの最新情報とその動向【Corodva】

【連載】ハイブリッドアプリの最新情報とその動向【Corodva】

f:id:duo-taro100:20160218004611p:plain

 

6章-1 Cordovaでハイブリッドアプリ開発環境を整える【Android

CordovaではAndroid、Blackberry10、iOSOS XWindowsなどに向けてのアプリ開発できるが、今回はAndroid版とiOS版に限っている。

AndroidiOS向けに開発を行うには、それぞれ独自の設定が必要で、かつ共通の設定もある。それを一つの記事にすると少し長くなってしまうので、Android版の設定とiOS版の設定と共通の設定の3つに分けて解説をしていく。また今回はMacOS上での環境構築。Windowsについては時間があれば後日。

今回はAndroid独自の設定。ちょっと複雑で、時間もかかるので1時間〜1時間半程度、集中できる時間にやった方がいい。iOSは簡単なのに・・・

f:id:duo-taro100:20160404001647p:plain

Android版 事前準備

1.JDKのインストール
2.Android SDKのインストール
3.Android SDKパッケージの追加
4.環境設定変更

1.JDKのインストール

以下のサイトからJDK7、もしくはそれ以降をインストール。現状、JDK8は推奨されていないので、JDK7の方を(画像はJDK8でやっているが手順は同じなので気にせず)
JDK7のインストール

 

上記リンクに飛ぶと、以下の画面が表示される。

矢印で示した部分「Accept License Agreement」にチェックを入れて、Mac OS X用をダウンロード

f:id:duo-taro100:20160404002120p:plain

ダウンロードしたものを開くと以下の画像のようになるので、ダブルクリック。するとインストーラが立ち上げるので、特に変更を加えることなく「続ける」を押してインストールを進める。

f:id:duo-taro100:20160404002359p:plain

インストールが終わったら、正しくインストールされているかバージョンの確認。

コマンドラインから

java -version

上記のコマンドを実行すると、「java version "1.8.x_xx"」のように表示される。

されない場合は正しくインストールされていない。  

2.Android SDKのインストール

Androidプラグインを作成しない場合は Android Stand-alone SDK Toolsからのインストールで十分だけど、今回は開発に幅を持たせるという意味からAndroid Studioをインストール
詳細なインストール手順は以下の通り。

Android Studio と SDK Tools のダウンロード | Android Developers

上記リンクから。


まずはダウンロード

 

f:id:duo-taro100:20160404003008p:plain


左下にある「DOWNLOAD ANDROID STUDIO FOR MAC」という緑色の部分をクリック(赤い矢印)

そうすると同意を求める文章が出てくるので、該当箇所にチェックを入れてダウンロードを開始。

f:id:duo-taro100:20160404003050p:plain

 

次にアプリケーションフォルダへの移動


ダウンロードしたもの(.dmg)を立ち上げると、以下の画面が立ち上がるのでAndroid StudioをApplicationsへドラッグ&ドロップ

f:id:duo-taro100:20160404003128p:plain


続いて、AndroidStudioの起動


Android Studioが正常に起動すれば完了。 その他設定については次の「Android SDKパッケージの追加」で行う。
Android Studioの日本語化について。
Android Studioを開発で利用することはあまりないので、不要かと思うが実施する方は以下のページを参照。

it-innovation.hatenablog.com

3.Android SDKパッケージの追加

Android SDK をセットアップする場合、少なくとも最新の SDK Tools と Android プラットフォームのダウンロードが必要。今回は必要最低限のものだけダウンロード。 

 

まず、AndroidStudio SDK Managerの起動

 

Android Studioを起動すると画像の左側の画面が表示される。ここで「Configure」を選択し、「SDK Manager」をクリック。

f:id:duo-taro100:20160404003401p:plain

 

SDK Tools、Platformの入手

 

f:id:duo-taro100:20160404003452p:plain



画像のように、「Android SDK」を選択し、ページ下部の「launch Standalone SDK Manager」をクリック。   すると以下の画面が立ち上がる。

f:id:duo-taro100:20160404003525p:plain

Toolsディレクトリ直下にある以下のものにチェックをつける(最後にまとめてインストールするので今はチェックをつけるだけ)
Android SDK Tools
Android SDK Platform-tools
Android SDK Build-tools(最新バージョン)

 

また、少し下に移動するとAndroid x.x.x のようにバージョンごとのディレクトリがあるので、開発対象バージョンのディレクトリを開く。例ではAndroid 6.0。

f:id:duo-taro100:20160404003636p:plain


ディレクトリのなかの、SDK Platformにチェックをいれる。また以下の画像で「Installed」となっているものはチェックをつけておく。自分の画面で既に「Installed」と表記されているものはそのままで大丈夫。 「Update」という表記されているものはチェックをつける必要がある。

f:id:duo-taro100:20160404003744p:plain

 

追加API用のサポートライブラリを取得する


続いて、追加API用のサポートライブラリやその他のAPI用の「Google Play」サービスを入手する。


画面の下の方に「Extras」ディレクトリがあるので、そこで以下のものを選択。
・Local Maven repository for Support Libraries
Android Support Library
Google Repository
Google Play Service
Intel x86 Emulator Accelerator (HAXM installer)

f:id:duo-taro100:20160404003840p:plain


パッケージをインストールする


必要なパッケージをすべて選択したら、インストール。
右下の[Install ? packages] をクリック。

f:id:duo-taro100:20160404003942p:plain


次のウィンドウで、左側のパッケージ名を1つずつダブルクリックし、各パッケージの使用許諾契約に同意する。最後に[Install] をクリック。

SDK Manager のウィンドウの1番下に、ダウンロードの進捗状況が表示されるので、ダウンロードが終わるまでSDK Managerを終了しないことSDK Managerを終了すると、ダウンロードはキャンセルされてしまう。

 

4.antのインストール

Androidのビルド用にantが必要なのでインストール。

コマンドラインから以下のコマンドを実行する。

$ brew install ant

 成功すれば、以下のような表示がでる。

==> Downloading https://archive.apache.org/dist/ant/binaries/apache-ant-1.9.4-bi

######################################################################## 100.0%


以上で必要なものは揃ったので、用意したものを使えるように環境変数の設定を行う。

5.環境設定変更

CordovaCLIツールを正しく機能させるために環境変数の設定する必要がある。 ダウンロードした、Android SDKの「tools」と「platform-tools」にパスを通す。


まずは現状のPATHを確認

 

$ echo $PATH

現在の状態が表示されます。

/usr/local/sbin:/usr/local/sbin:/Library/Frameworks/Python.framework/Versions/2.7/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin

ここは人によって違うので、上記と同じでなくても気にしない。 

 

以下のコマンドでPATHを通す。

 

「**USER名**」の部分は環境に合わせて変える。

$ export PATH=/Users/**USER名**/Library/Android/sdk/tools:$PATH
$ export PATH=/Users/**USER名**/Library/Android/sdk/platform-tools:$PATH

 

変更を適用。

 

$ source ~/.bash_profile

 

変更が適応されたかの確認。

 

$ echo $PATH

 

以下のように太青文字部分が追加されていれば完了。

/Users/USER名/Library/Android/sdk/platform-tools:/Users/USER名/Library/Android/sdk/tools:/usr/local/sbin:/usr/local/sbin:/Library/Frameworks/Python.framework/Versions/2.7/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin

 

f:id:duo-taro100:20160218004753j:plain

以上でAndroid開発の事前準備は終了。

その他にも設定が必要だけど、共通の設定なので続きは以下の記事を。

it-innovation.hatenablog.com

 

 

上記の記事に入る前にiOSの設定が必要なので、次回はiOSの環境を整える。Androidは結構複雑だけど、iOSは簡単なので!

6章-2 Cordovaでハイブリッドアプリ開発環境を整える【iOS】 - 【連載】ハイブリッドアプリの最新情報とその動向【Corodva】

  

it-innovation.hatenablog.com