スポンサーリンク

Ionic4とCapaciorでAndroidでカメラ画像取得にtryするもうまくいかず。

Ionic4でCapacitorのCameraプラグインを使用する方法について、以下のサイトを写経してみたい。

http://tphangout.com/ionic-4-camera-with-capacitor/
image

(開発環境)
image
Visual Studio Code

(0)今回行うこと

(1)新規Ionic4アプリの作成

C:/ionic4/ フォルダを、VisualStudioCodeで開き、以下を入力

ionic start ionic4-camera blank --type=angular

cordova と Proは両方とも、N + Enter.

image

cd ionic4-camera
ionic serve

image

(2’)@capacitor/cli , @capacitor/core のインストール

npm install --save @capacitor/cli @capacitor/core

image

(3’)cordova-plugin-splashscreen のアンインストール

npm uninstall --save cordova-plugin-splashscreen

image

(4’)Androidで利用できるようにする

npx init camerapp com.example.app
npx cap android
npx cap copy

image

なんか以下のようなエラーが出てだめそう。

image

以下の公式サイトにしたがってやり直します。

https://capacitor.ionicframework.com/docs/getting-started/with-ionic
image

(2)

npm run build
npm install --save @capacitor/cli @capacitor/core
npm uninstall --save cordova-plugin-splashscreen
npx cap init ionic4-camera-app com.example.app
npx cap android
npx cap copy
npx cap open android

image

image

image

image

公式サイト通りにやっているのに、エラーが、、、

image

npx cap add android
npx cap copy

image

一歩進んだようだが、またしても、エラーが。

image

(3)Android Studioを起動

image

image

image

かなり時間がかかる。。。

しかも、エラーになってしまった。。。

image

 

ちょっと、わけがわからないので、おいておく。

(5)src/app/home/home.page.html

(変更前)
image

(変更後)
image

home.ts

(変更前)
image

(変更後)
image

 

(6)

ionic cordova build android --prod --release

image

image

エラーが出てしまった。

うまくいかず。。。

 

 

npx cap add android

スポンサーリンク

Capacitor,Ionic4

Posted by twosquirrel