いよいよモバイルアプリ化へ
昨日は、いじったソースをコピペした訳ですが、VisualStudioCodの入力補助機能が大活躍したことは書いておくべきだと思います。
特に src\app\home\home.page.ts の下記のようなプロパティ定義コードは、ほぼ名前を一か所決めるだけで自動的に書き出されるのでとても便利です。
----------------------------------------
private _PageText1 : string;
public get PageText1() : string {
return this._PageText1;
}
public set PageText1(v : string) {
this._PageText1 = v;
}
----------------------------------------
さて、表題。
今までの作業は、Webページとしてのアプリですが、これを Android なり iOS なりで動くアプリにするための作業を開始します。
参考書籍は例のごとく、"Ionicで作るモバイルアプリ制作入門[Angular版]"（ISBN978-4-86354-292-1)。
以下参考書籍と書きますね。
１．配布の設定
参考書籍によると、色々設定が必要との事。
まずコマンドプロンプトから"ionic integrations enable capacitor" と言うコマンドを走らせます。
いきなり躓きました(´・ω・`)
エラーメッセージは
------------------------------------------------------------
[ERROR] Sorry! ionic integrations enable can only be run in an Ionic project
directory.
If this is a project you'd like to integrate with Ionic, run ionic init.
------------------------------------------------------------
まず、ionicプロジェクトフォルダーをカレントディレクトリーにしてないという事の模様。
変更して再チャレンジ。
またエラーです。
------------------------------------------------------------
error: unknown option '--npm-client'
[ERROR] An error occurred while running subprocess capacitor.
capacitor.cmd init GameBook io.ionic.starter --npm-client npm exited
with exit code 1.
Re-running this command with the --verbose flag may provide more
information.
------------------------------------------------------------
よく判らないけど、"--verbose"と言うオプションを付けて再実行すると、もうちょっと情報もらえるかも？と言っているようです。
ですので、再実行、"ionic integrations enable capacitor --verbose"
長い内容が返ってきました。とりあえずコピー。と思ったら1万文字以上か・・・
読んで抜粋書いていく方が良さそうですね。
読んでいくと、よく判らないけど（最初のエラーでも出ていましたが） '--npm-client' と言うオプションがついているのが問題だと言っているようですね。
調査はいります・・・・・2022年3月20日8時19分
8時40分
うまく行くか判らないですが、capacitor をインストール
( https://capacitorjs.jp/docs/getting-started )
参考書籍に従って、"ionic build --prod" 実行。成功。
続けて、アンドロイド用のPlatform追加。コマンド "ionic cap add android" 実行。失敗
エラーは、 "--npm-client" オプションが不明との事で、最初と同じ。 8時47分
さて、可能性は色々浮かびますが、参考書籍とちがって新規ではなく、既存のアプリ開発フォルダーで作業したのが原因の可能性があります。
調査はいります。午前8時49分
参考書籍に記載されている通りに実行。やはり同じエラー。午前9時03分
考えた方を変えてみます。
とりあえず、Google様にお伺い。"error: unknown option '--npm-client' エラー"
午前9時17分
どうやら、ionic CLI のバージョンが古い模様。以下のリンクに従い、入れなおす。
https://github-com.translate.goog/ionic-team/capacitor/issues/4603?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja&_x_tr_pto=sc
しかし、もういちど"ionic integrations enable capacitor" を走らせると、全く異なるエラーです。
とりあえず、プロジェクト削除して、再作成してみましょう。(ソースのコピー張っておいてよかった)
午前9時22分
午前9時42分
とりあえず、白紙テンプレート作成。
再度、"ionic integrations enable capacitor" を実行。既にenabled だよとメッセージ。
----------------------------------------
[INFO] Integration capacitor already enabled.
----------------------------------------
どうも参考書籍といくつか差異がある模様。
まず参考書籍では、 "capacitor.config.json" が自動生成されるとの事だったが、実際に出来ていたのは、 "capacitor.config.ts" 。
中身的にはほぼ同じですけれど、ここから先は参考書籍頼りは難しいかも？ 午前9時51分
続けて、"ionic build --prod" を実行。成功。(iOSやAndroid用のアプリを作るための材料用意）
続けて(iOSの環境を持っていないので)Androidアプリのビルド
コマンド "ionic cap add android" の実行。成功
ちょっと気になったので、今できたばかりのandroidフォルダの中を覗いてみます。
うん、いっぱい入ってます。(もう少し知識が必要）
一旦、ここで投稿 午前10時00分
