Techvenience

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

【Android版】Android版エミュレータでの動作確認とAdmonb導入【Cordova・Monaca】MonacaのプロジェクトをCordovaのローカルプロジェクトに移行して、Admob導入【Admob・plugin】 PART5

【Android版】Android版エミュレータでの動作確認とAdmonb導入【Cordova・Monaca】MonacaのプロジェクトをCordovaのローカルプロジェクトに移行して、Admob導入【Admob・plugin】 PART5

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

その5 【Android版】Android版エミュレータでの動作確認とAdmonb導入

前回まででiOS版での操作確認までが終わった。

http://www.sky-limit-future.com/www.sky-limit-future.com

今回からはAndroid版の設定を行なっていく。
iOSと違って、Android版はエミュレータ起動までの道のりが長いが、頑張る。
※iOS版に引き続き、Macでの開発環境構築方法です。<目次>
JDKのインストール
Android SDKのインストール
SDK パッケージをインストール
エミュレーターを構成
プラットフォーム追加
エミュレーターの起動確認

JDKのインストール

既にインストールされているか確認。

$ javac -version

「javac 1.8.0_144」みたいな感じで出れば大丈夫。
「No Java runtime present, requesting install. 」と出た場合はインストールが必要。

versionをどうするかだけど、ちょっと気になったこと。

Mac で Android Studio を利用する際に JDK 1.8 を使用していると、安定性が低下することが知られています。
これらの問題が解決されるまでは、古いバージョン(JDK 1.6 以前)の JDK をダウンロードすることで安定性を改善することができます。

Install Android Studio | Android Studio

(追記)Android Studioを使用していないので、1.8.0_144でも問題なかった。Android Studioを使用する人はこの辺も考慮した方が良さそう。

Android SDKのインストール

■Android studioとAndroid SDKのインストール

developer.android.com


ここに書いてある通りにインストール。(動画がに従えばOK)

Install Android Studio | Android Studio

インストールが終わったら、この画面が出てくる。

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

その状態で、PATHの設定にうつる。

■PATH設定
PATHの設定を行うには「.bash_profile」を編集するが、今まで設定を行ったことがない場合はファイルが存在しない。
その場合は新規作成する必要がある。ファイルの存在確認から新規作成までを解説した記事があるので、必要のある方は
こちらを参照。

www.sky-limit-future.com

ここでは.bash_profileが存在する前提で話を進める。
編集する
vi ~/.bash_profile

新規作成の方は、何も記載がない。
.bash_profileが開かれたら、「i」を入力する。
こうすることで、入力モードになり書き込みが可能。
(ターミナル下部に「-- INSERT --」と表示される)

以下の2行を書き込む

export ANDROID_HOME=/Users/{Username}/Library/Android/sdk
export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

{Username}となっているところは、各自変更。
分からない場合は、

ホームディレクトリに移動

$ cd

作業ディレクトリを表示

$ pwd

/Users/{Username}

のように返ってくると思うので、この値を使う。
僕の場合は{Username} = duotaro なので

export ANDROID_HOME=/Users/duotaro/Library/Android/sdk
export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

書き込んだら(コピーして、{Username}を編集したら)、「esc」を押下。
すると、入力モードが解除(-- INSERT --が消える)されるので、「:wq」と入力 → Return(Enter)。
すると、記入した内容で保存される。

.bash_profileの変更内容はターミナルを開き直すか、sourceコマンドを使用しないと反映されない。
ここでは、sourceコマンドを使用。

更新

$ source ~./bash_profile

内容が反映されているか確認

$ echo $PATH

これで先ほどの内容が表示されたら完了。

SDK パッケージをインストール

Android Studioの起動画面でSDK Managerを選択。

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

ここで、必要なSDKを落とす。
推奨パッケージが記載されているので、基本的にはこれに従う。

■SDK Platforms
Cordovaの推奨で「Android 5.1.1 (API 22) 」とあるので、それとデフォルトでチェックのついている「Android 8.0 (API 26)」にチェックをつける。
(追記)
→ Android 6.0 API23以上もあった方がいいので追加

■SDK Tools
デフォルトで選択されているものだけで大丈夫。(変更なし)

ここで、「OK」を押してインストール開始。

エミュレーターを構成
エミュレータの構成をしておかないと、Cordovaでエミュレータを起動しても正しく動かない。

まずは、プロジェクトがないとダメなので、適当に作る。
全部デフォルトのままでいい。

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

以降は、こちらに詳しく載っている。
akira-watson.com

プラットフォーム追加してビルド

■Androidを追加
Cordovaプロジェクトに移動

$ cd testProject

プラットフォーム追加

$ cordova platforms add android

    • save flag or autosave detected

Saving android@~6.2.3 into config.xml file ...

■ビルド

$ cordova build android

エミュレーターの起動確認
エミュレータ起動
$ cordova emulate android

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

上手くいった。動作確認も問題なし!
すんなりすんなり。

これでiOSとAndroid共に移行と Admobの導入完了。
あとはAdmobに登録して、表示用広告を作成する。
それを設置して終了。今回はそこまではやらないが。