🤖

既存のプロジェクトからのAndridネイティブアプリ作成手順

2023/08/16に公開

Node.js

はじめに

でテンプレート画面の作成までできたので、今度は既存のプロジェクトからAndridネイティブアプリを作成する手順を確認。

ここでは、試しに以下のプロジェクトをAndridネイティブアプリにしてみる。
Nxを使用したmonorepo環境なので、フロントエンドだけをアプリ化する。

テスト環境

OS：Windows11
NodeJS：16.12.0
npm：8.1.0
Capacitor：v5

capacitorのモジュールを追加

まずはテンプレ作成のときと同様にcapacitorのモジュールを追加する。

>npm i --save @capacitor/core @capacitor/cli

初期化

ionic initを実行し、プロジェクト名、プロジェクトタイプを指定する。

>ionic init
? Project name: angular-nest-example2
[WARN] Could not determine project type.

       Please choose a project type from the list.

? Project type: @ionic/angular (angular)
[OK] Your Ionic project has been initialized!

npx cap initを実行し、アプリ名、パッケージIDを指定する。

>npx cap init
[?] What is the name of your app?
    This should be a human-friendly app name, like what you'd see in the App Store.
√ Name ... angular-nest-example2
[?] What should be the Package ID for your app?
    Package IDs (aka Bundle ID in iOS and Application ID in Android) are unique identifiers for apps. They must be in
    reverse domain name notation, generally representing a domain name that you or your company owns.
√ Package ID ... com.example.app
√ Creating capacitor.config.ts in C:\Work\git\angular-nest-example2 in 4.84ms
[success] capacitor.config.ts created!

IONICビルド

ionic buildを実行すると、Project "app" does not exist.のエラーとなる。

>ionic build
> ng.cmd run app:build
? Would you like to share anonymous usage data about this project with the Angular Team at
Google under Google’s Privacy Policy at https://policies.google.com/privacy? For more
details and how to change this setting, see https://angular.io/analytics. No
An unhandled exception occurred: Project "app" does not exist.
See "C:\Users\kazu-\AppData\Local\Temp\ng-i43eSU\angular-errors.log" for further details.
[ERROR] An error occurred while running subprocess ng.

        ng.cmd run app:build exited with exit code 127.

        Re-running this command with the --verbose flag may provide more information.

今回の環境は、api（バックエンド）とweb（フロントエンド）の2つのプロジェクトに分けているため、フロントエンドのほうを対象にする必要がある。
--projectでプロジェクトを指定して実行すると成功した。

>ionic build --project "web"

コピー

出力先が違うのでエラーになる。

>npx cap copy
× copy web - failed!
[error] The web assets directory (.\dist) must contain an index.html file.
        It will be the entry point for the web portion of the Capacitor app.

capacitor.config.tsの出力を修正すると成功した。

capacitor.config.ts

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'sk.car.reserve.manage.com',
  appName: 'sk-car-reserve-manage',
  webDir: 'dist/apps/web',　　★修正
  server: {
    androidScheme: 'https'
  }
};

export default config;

Androidのプラットフォーム追加

npx cap add android

※ @capacitor/androidが入ってなかったらインストールしておく。

APKビルド

これ以降は、テンプレート画面作成のときと同じなので、省略。
（https://zenn.dev/kyv28v/articles/4fca40e645b889 を参照。）

特に問題なくスマホで実行できた。
テンプレート作成の時と違うのはプロジェクトの指定と出力先パスの変更くらいで、意外と簡単だった。

今回対応した結果のコードを以下にアップしておく。

補足１（npmモジュールについて）

テンプレート作成のときのpackage.jsonと見比べると、以下あたりは必要になりそう。
必要に応じて追加する。

@capacitor/app
@capacitor/haptics
@capacitor/keyboard
@capacitor/status-bar
@ionic/angular
ionicons
@ionic/angular-toolkit

補足２（ERR_OSSL_EVP_UNSUPPORTEDエラーについて）

別環境で試したところ、ionic build --project "web"のときにERR_OSSL_EVP_UNSUPPORTEDのエラーが発生。
ERR_OSSL_EVP_UNSUPPORTEDでググると、Nodeのバージョンの違いによるものらしく、Nodeをダウングレードすると成功した、などの事例が出てきた。
が、今回はどちらもnode@16.12.0のはず。
ただ、VoltaでNodeのバージョン管理しており、グローバルにはnode@18.16.0が入っている。
エラーログにNode.js v18.16.0とあったので、グローバルのほうが使用されているみたい。

成功した環境は、@angular/cli@16.1.4がグローバルインストールされていた。
失敗した環境にも@angular/cli@16.1.4がグローバルインストールすると、成功した。
根本原因は不明。