表示調整
閉じる
挿絵表示切替ボタン
▼配色
▼行間
▼文字サイズ
▼メニューバー
×閉じる

ブックマークに追加しました

設定
0/400
設定を保存しました
エラーが発生しました
※文字以内
ブックマークを解除しました。

エラーが発生しました。

エラーの原因がわからない場合はヘルプセンターをご確認ください。

ブックマーク機能を使うにはログインしてください。
48/61

まとめ 24日目 モバイルアプリ作成の手順:コマンドのまとめ

追記2022年5月21日19時53分

LocalStorageの使用が必要な場合、コマンドプロンプトで2つほどインストールが必要になります。


ソースコードの設定も必要になりますので、下記のリンクを参照してください。


実践ionicアプリ 25日目 LocalStorageの使用と背景の(ちょっとした)デザイン

https://ncode.syosetu.com/n7839ho/53/

環境開発に続いて、コマンドプロンプトで良く使うコマンドをまとめます。

いずれも、"C:\MyTest"と言うフォルダで作業していることが前提です。

また、プロジェクトの名前を仮に"newProject"とします。


なお、注意点として、AndroidStudioを使用する場合は、特に理由がない場合、閉じないでコードの編集作業等を行う事をお勧めします。(AndroidStudioは開くのに時間が一番かかりますので)


また初めて、そのプロジェクトをAndroidStudioで開く前には、アプリのIDと名前を決める必要があります。


下記のケースごとにコマンドをまとめます。


1.新規でionicプロジェクトを作りブラウザで表示

2.既存のionicプロジェクトをブラウザで表示

3.既存のionicプロジェクトを始めて、AndroidStudioで開く

4.既存のionicプロジェクトをAndroidStudioで開く(二回目以降)


===== 1.新規でionicプロジェクトを作りブラウザで表示 =====

------------------------------------------

"cd c:\MyTest"

"ionic start newProject blank --type=angular"

"cd .\newProject"

"ionic serve"

------------------------------------------


===== 2.既存のionicプロジェクトをブラウザで表示 =====

--------------------------

"cd c:\MyTest\newProject"

"ionic serve"

--------------------------


===== 3.既存のionicプロジェクトを初めて、AndroidStudioで開く =====

※このコマンドの前にアプリの名前とIDの設定を必ず行ってください。


変更するファイル:プロジェクト直下の"capacitor.config.ts"

変更箇所:4行目と5行目

---------------------

appId: 'io.ionic.starter', ← GooglePlayのリンクにも使われる

appName: 'newProject',  ← スマートフォンのアイコンに表示されるアプリの名前

---------------------


名前については、GooglePlayで却下されるような名前以外は問題ないと思いますが、IDについては以下のような決まりがあります。

(以下はGooglePlayのエラーメッセージです)

※※※このタイミングでしか直せないので注意※※※※※※※※※

APK または Android App Bundle のパッケージ名は

「com.example.myapp」形式で指定してください。

使用できる文字は英字(a~z)、数字、アンダースコア(_)です。

先頭の文字は小文字にして、150 文字以下で指定してください。

※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※


後でAndroidStudioでのアイコン設定でも出てくる問題ですが、すべて英小文字にして置くのが無難だと思います。

(英大文字で拒否されることが時々あります)


では、コマンドに戻ります。

------------------------------------------

"cd c:\MyTest\newProject"

"ionic build --prod"

"npm install @capacitor/android@latest"

"ionic cap add android"

"npx cap sync android"

"ionic cap open android"

------------------------------------------


コマンドプロンプトはすぐ終了しますが、AndroidStudioの起動は時間がかかります。

立ち上がっても、AndroidStudio右下で作業をしているのが判ると思います。

(PCのスペックにもよるでしょうが1時間やそれ以上かかるかもしれません)

右下でGitに追加するか的な事を聞いてきた場合、don't ask againで構わないと思います。

左側にエクスプローラ表示でファイルとフォルダが表示されるのですが、"loading..."の状況が続きます。

エクスプローラ表示が出ても右下の作業状況の表示が動いている場合は終了していません。

辛抱強くお待ちください。


なお、AndroidStudioが完全に立ち上がった後でなら、"ionic serve"でブラウザアプリを立ち上げ、同時にVisualStudioCodeでコードの修正を行っても構いません。(後述参照)


===== 4.既存のionicプロジェクトをAndroidStudioで開く(二回目以降) =====

AndroidStudioで開く時間が一番かかると思いますので、開きっぱなしで編集作業や、ブラウザでの確認を行う事をお勧めします。


AndroidStudioが立ち上がった後に、"ionic serve"でブラウザアプリを立ち上げたり、VisualStudioCodeでコードの修正を行っても問題はありません。


------------------------------------------

"cd c:\MyTest\newProject"

"ionic build --prod"  ←ソースコード変更が無ければ不要

"npx cap sync android" ←ソースコード変更が無ければ不要

"ionic cap open android"

------------------------------------------


ionicでモバイルアプリを作成する場合、AndroidStudioはAndroid用アプリへの変換のみを行うツールと割り切る方が良いです。


以上、コマンドプロンプトで使うコマンドのまとめでした。投稿


追記2022年5月21日19時53分

LocalStorageの使用が必要な場合、コマンドプロンプトで2つほどインストールが必要になります。


ソースコードの設定も必要になりますので、下記のリンクを参照してください。


実践ionicアプリ 25日目 LocalStorageの使用と背景の(ちょっとした)デザイン

https://ncode.syosetu.com/n7839ho/53/

評価をするにはログインしてください。
ブックマークに追加
ブックマーク機能を使うにはログインしてください。
― 新着の感想 ―
このエピソードに感想はまだ書かれていません。
感想一覧
+注意+

特に記載なき場合、掲載されている作品はすべてフィクションであり実在の人物・団体等とは一切関係ありません。
特に記載なき場合、掲載されている作品の著作権は作者にあります(一部作品除く)。
作者以外の方による作品の引用を超える無断転載は禁止しており、行った場合、著作権法の違反となります。

この作品はリンクフリーです。ご自由にリンク(紹介)してください。
この作品はスマートフォン対応です。スマートフォンかパソコンかを自動で判別し、適切なページを表示します。

↑ページトップへ