ionicを試す ２3日目 AndroidStudioを起動する。そのまま実機で表示！
※初回は特に本当に時間がかかります
時間的余裕の無いときは避けてください！！！
廉価なノートパソコンですが1時間かかりました。
おそらくAndroidStudioを最新の状態にするのにかかっていると思われます。
別のプロジェクトの起動には、時間はかかりますが、1時間と言うレベルではありませんでした。
※またPCとスマートフォンをつなぐUSBケーブルを用意してください。
前ページの
・GoogleUSBドライバをWindowsにインストールする。
・Android携帯を開発者モードにする。
を完了してください。
タスクマネージャーを立ち上げるとAndroidStudioが作業しているかの目安になると思います。
いよいよAndroid用アプリ作成です。
おおざっぱに全体の手順をまとめますと
①ionicでひな形アプリを作り
②VisualStudioCodeで動きや表示をコーディングする
③AndroidStudioでAndroid用アプリに変換する
と言う流れになります。
新規プロジェクトを作り、『ionicを試す １７日目のソースコード』をコピーして、それをAndroid用アプリに変換してみましょう。
『ionicを試す １７日目のソースコード』
https://ncode.syosetu.com/n7839ho/34/
次の順序で処理を行ってください。
------------------------------------------
・コマンドプロンプトから"cd c:\MyTest"
・同じく"ionic start test_mobile blank --type=angular"
・ひな形が出来たら、上記のコードをコピーして置き換えて保存
コピー前に全角スペースを半角スペース2つに置き換え、改行を適宜削除
・コマンドプロンプトから"cd c:\MyTest\test_mobile"
・同じく"ionic serve"で立ち上げて動作の確認
------------------------------------------
ここまでは、今まで通りですね。
ここで新しい作業が加わります。
まずアプリの名前とIDを決めます。
名前はスマートフォンのアイコンに表示され、IDはGooglePlayのリンクに表示されます。
（つまりIDは他の人と被ることが出来ません。簡単には被らないと思いますが。）
名前とIDを決めるファイルは、プロジェクト直下の"capacitor.config.ts"です。
中身は10行しかないのですぐ判ると思いますが4行目と5行目です。
------------------------------------------
appId: 'io.ionic.starter',
appName: 'test_mobile',
------------------------------------------
この部分を変更する事で、アプリの名前とIDを決めることが出来ます。
名前については、GooglePlayで却下されるような名前以外は問題ないと思いますが、IDについては以下のような決まりがあります。
(GooglePlayのエラーメッセージです)
※※※このタイミングでしか直せないので注意※※※※※※※※※
APK または Android App Bundle のパッケージ名は
「com.example.myapp」形式で指定してください。
使用できる文字は英字（a～z）、数字、アンダースコア（_）です。
先頭の文字は小文字にして、150 文字以下で指定してください。
※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※
後でAndroidStudioでのアイコン設定でも出てくる問題ですが、すべて英小文字にして置くのが無難だと思います。
(英大文字で拒否されることが時々あります)
新規に作り直すのでなければ、このタイミングでしか名前とIDの設定が出来ないのでご注意ください。
ここでは(googlePlayにあげることも無いので)下記のようにします。
------------------------------------------
appId: 'piza.piza.panic',
appName: 'ピザの注文！',
------------------------------------------
変更後、保存したら、いよいよAndroidStudioでの作業に入ります。
コマンドプロンプトでの命令が続きます。
ブラウザアプリが動いているならば、Ctrl+C入力で終了してください。
（カレントディレクトリーが"c:\MyTest\test_mobile"になっているのを確認してください）
①"ionic build --prod"
いわゆるコンパイル作業です。AndroidStudioが使う部品作りと思ってください。
最初は必ず行います。ソースコードの変更があれば、その時も行います。
②"npm install @capacitor/android@latest"
最初に一度だけ流します。capacitorと言うツールの最新版をインストールします。
③"ionic cap add android"
これも一度だけ流します。プロジェクト内にandroid用アプリのためのフォルダを作ります。
(iOS用の命令も当然あります）
④"npx cap sync android"
上で作ったAndroid用のフォルダの中身を最新のものにすると思ってください。
ソースコードの変更があれば、その時も行います。
"Share anonymous usage data?"と聞かれてきますが"Y"で答えても良いと思います。
（匿名の使用状況データを共有しますか？）
多分一度だけ聞くのだと思います。
⑤"ionic cap open android"
※この命令、初回は特に本当に時間がかかります※
※時間的余裕の無いときは避けてください！！！※
この命令でAndroidStudioが起動します。
コマンドプロンプトはすぐ終了ですが、AndroidStudioの起動は時間がかかります。
立ち上がっても、AndroidStudio右下で作業をしているのが判ると思います。
(PCのスペックにもよるでしょうが1時間やそれ以上かかるかもしれません)
右下でGitに追加するか的な事を聞いてきますが、don't ask againで構わないと思います。
左側にエクスプローラ表示でファイルとフォルダが表示されるのですが、"loading..."の状況が続きます。
エクスプローラ表示が出ても右下の作業状況の表示が動いている場合は終了していません。
辛抱強くお待ちください。
⑥バージョンの確認
右横に新機能紹介の"What's New in Bumblbee"と言う領域が出ていたら、右上の”－”をクリックして表示しないようにできます。(他の領域も同様）
今、AndroidStudio左上のFile等のメニューバーの下に"android > app"と表示されていると思います。
そのappをクリックすると、appフォルダ内のファイルとフォルダが表示されますので、"build.gradle"をクリックしてください。
ファイルの中身が表示されますが、9行目と10行目にバージョンコードとバージョン名が記載されています。
build.gradle
---------------------
versionCode 1
versionName "1.0"
---------------------
今は不要ですが、GooglePlayにアップロードするときは、バージョンを上げないと変更版のアップが出来ませんので覚えておいてください。
⑦Android端末での実行
"build.gradle"は閉じて構いません。(ソースコード左上のファイル名右横のXをクリック)
⑥のバージョンの確認でFile等のメニューバーの下に"android > app"と表示されているのを見たと思います。
そのさらに右、真ん中あたりに"No Device"と言う表記があると思います。
これは、実行するためのデバイスが存在しないという意味です。
PCとスマートフォンをつなぐUSBケーブルをPCに接続して、スマートフォンとPCを接続してください。
許可しますか等のメッセージにすべてOKで応えると、"No Device"が機種名に変わります。
機種名右横のプレイボタンをクリックでAndroid端末用アプリとしてのビルドが始まり、終了後、スマートフォンでアプリが起動します。(おそらく、セキュリティソフトが遅い原因だという表示が出るかもしれません。)
画面が予期せぬダークモードですが、これで実機で動作が出来るモバイルアプリが出来た訳です。
なお、アプリ一覧には 'ピザの注文！'で表示されています。
これで目標は達成しましたが、もう少し続けます。投稿
