まとめ ２４日目 モバイルアプリ作成の手順：開発環境の構築
さて、前回、ionicで作ったブラウザアプリを"AndroidStudio"がAndroid用のアプリに変換して実機にインストールできることを確かめました。
ここからは、手順のまとめ並びにGooglePlayにアップする場合の追加の手順をまとめたいと思います。
（ただし2022年4月時点での情報です。ネットの世界はアップデートによりこの方法ではうまく行かない可能性もありますのでご注意ください）
項目は以下の通りになります。
１．開発環境の構築(各種ツールのインストールなど)
２．新規プロジェクトの場合と、既存プロジェクトのコマンドのまとめ
３．AndroidStudioでの実機でのテスト
４．GooglePlayにアップする場合、行わなければいけない作業
---------------------------------------------------------------
１．環境の構築(各種ツールのインストールなど)
以下のツールを順にインストール・セッティングします。
・Node.js
・Ionic CLI
・Git
・VisualStudioCode
・AndroidStudio
・JDK8
・Gradle
===== node.js =====
"node.js インストール"でGoogle検索をおかけください。
公式のダウンロードページが最初に出てくると思います。
推奨版の"Windows Installer"をクリックでダウンロードできますので、それをダブルクリックすればインストールできると思います。
32ビット版の新規配布はすでに行われていないので、まず間違いなく64ビット版だと思いますが、一応、その点もご注意を！
===== Ionic CLI =====
Node.jsの機能を使って、コマンドプロンプト経由でインストールします。
コマンドプロンプトを起動して、以下のコマンドで必要インストールに必要な機能があるかを確かめます。
まずNode.jsのインストールが成功しているかをコマンドプロンプトから以下のコマンドを走らせて確認します。
"node --version"
"npm --version"
"v16.14.0"とか"8.3.1"とか応答があれば問題ありません。
問題なければ、次のコマンドを、マンドプロンプトに貼り付けてエンターキーを押せば"Ionic CLI"をインストールできます。
"npm install -g @ionic/cli"
===== Git =====
以下のサイトから、『Downloads』の下からWindowsのロゴをクリックでWindows版のダウンロードページが表示されます。
Git - Downloads
https://git-scm.com/downloads
上の"Click here to download"をクリックで最新版( 64-bit version)がダウンロードされますので、それをダブルクリックで実行してください。
===== VisualStudioCode =====
以下の公式ページからダウンロードしてインストールしてください。
Visual Studio Code – コード エディター | Microsoft Azure
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
インストール後、(Pathの有効化のために)再起動してください。
インストール後最初の起動時にVisualStudioCode自身が『言語パックをインストールします』と表示するかもしれません。そのままインストールしてください。
===== Android Studio のインストール =====
Androidデベロッパー(公式)のAndroid Studio のインストールのページを見て見ます。
Android Studio のインストール
https://developer.android.com/studio/install
指示がサイトに書いて有りますので、その通りにインストールしてください。
指示の通りにクリックし、最後に各種SDK等の使用許諾にAcceptを選択してFinishを押下すると、ダウンロードが始まり、しばらくするとインストール完了。
（Downloading Components画面に履歴が表示されますのでfinish押下)
ただし、割とアップデートで中身が変わる気もしていますのでご注意ください。
『Welcome to Android Studio』の画面が表示されるので、MoreActionをクリックしてSDK Managerを開きます。(動きが異なるならば、ToolメニューにSDK Managerがあると思いますので、そちらを開いて下さい）
SDK Managerの上の方にある、"Android SDK Location"のパスをコピーして、いったんAndroidStudioを終了します。
このパスで『Android Studioコマンドラインツールの設定』をすると便利な事もあるかもしれないので、一応、設定します。
上でコピーしたパスを元にWindowsの環境変数をいじります。
スタートボタン右クリック→設定→システム→(左下の)詳細情報→(右側)関連設定：システムの詳細設定→(システムのプロパティダイアログ下)環境変数
ユーザーの環境変数に新規で "ANDROID_SDK_ROOT" を作り、上記でコピーした"Android SDK Location"のパスを値として設定します。
一旦、再起動して、環境変数が設定されていることを確認します。
『Android仮想デバイスの作成』は、使い物にならないくらい遅いので、PCにUSB接続できるAndroidスマートフォンが手元にあるならば行う必要がありません。
===== JDK8 =====
一旦、AndroidStudioを終了してください。
Googleで『JAVA downloads』で検索します。
一応、現時点のリンクも張りますが古いページだったりすることもありますので、なるべく最新のページから見た方が良いです。
※JDK以外にもJREとかありますので間違わないでください
Java Downloads ｜ Oracle
https://www.oracle.com/java/technologies/downloads/
少し下の『Java SE Development Kit 18.0.1.1 downloads』の項目のすぐ下にOSが選択できるようになっていますので、Windowsを選んでください。
x64 Installerを選んでダウンロード。ファイルを開くとインストールが始まります。
インストールが終了したら、コマンドプロンプトを立ち上げて(※必ず新規に立ち上げてください)以下のコマンドを打ってください。
---------------------
java --version
---------------------
ヴァージョン情報が出ればインストール成功です。
===== Gradle =====
※前の項目、JDK8のインストールが前提です。
バージョンが新しいものがある可能性があるので、ご注意ください。
"Gradle build tool" で検索。公式"https://gradle.org/"にアクセスします。
(Cookieは受け入れてもいなくても良いですが受け入れるならAcceptです。)
Instll Gradleと言うボタンがあるので押下
上の文章中にある一番上のリンク：release page.から以下のページに飛びます。
https://gradle.org/releases/
v7.4.2 Mar 31, 2022のBinary Onlyをダウンロードします。
(解凍して使います)
WindowsのエクスプローラでC:\Gradleと言うディレクトリを作成します。
ダウンロードしたファイルの解凍で出来た"gradle-7.4.2-bin"の中にある"gradle-7.4.2"をここに移します。
Windowsの環境変数をいじります。
スタートボタン右クリック→設定→システム→(左下の)詳細情報→(右側)関連設定：システムの詳細設定→(システムのプロパティダイアログ下)環境変数
既存の"Path" と言う環境変数を編集します。
"Path" と言う環境変数には、すでにいくつかパスが登録されているので、新規で"C:\Gradle\gradle-7.4.2\bin"を追加。
(バージョンが変わるとパス名が変わりますのでご注意を！)
コマンドプロンプトが開いていたら、いったん閉じて新規に開き、コマンド"Gradle -v" でインストールされているかを確認。(開いたままだと、環境変数の変更が反映していないのかうまく行かないです）
時間がかかるかもしれませんが、情報が出れば成功です。
---------------------------------------------------------------
以上で、１．開発環境の構築(各種ツールのインストールなど)を終わります。
