差分

このページの2つのバージョン間の差分を表示します。

--- z_blog:2018:181009_ionic4-capacitor-camera [2018/10/09] – adash333
+++ z_blog:2018:181009_ionic4-capacitor-camera [2018/10/09] (現在) – [参考] adash333
@@ 行 1: / 行 1: @@
 ====== 181009_Ionic4+Capacitor+Cameraの写経にtryしてみる ======
+前回；[[181009_ionic4_firestore_capacitor_camera2]]
 もうどうにもならないCapacitor\\
@@ 行 8: / 行 10: @@
 JULY 30, 2018
+===== 参考サイト =====
+https://capacitor.ionicframework.com/docs/getting-started/with-ionic/\\
+Using Capacitor with Ionic(Capacitor公式サイト)
+===== 写経経過 =====
 <code>
@@ 行 16: / 行 24: @@
 npm uninstall --save cordova-plugin-splashscreen
 npm install --save @capacitor/cli @capacitor/core
-npx init camerapp com.example.app
+npx cap init camerapp com.example.app
 npm run build
-npx cap android
+npx cap add android
+</code>
+home.page.htmlと、home.page.tsの変更
+==== home.page.html ====
+<code>
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-title>
+      Ionic Blank
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content padding>
+  <img [src]="yourImage">
+  <ion-button (click)="captureImage()">Capture !!</ion-button>
+</ion-content>
+</code>
+==== home.page.ts ====
+<code>
+import { Component } from '@angular/core';
+import { Plugins, CameraSource, CameraResultType } from '@capacitor/core';
+@Component({
+  selector: 'app-home',
+  templateUrl: 'home.page.html',
+  styleUrls: ['home.page.scss'],
+})
+export class HomePage {
+  yourImage: any;
+  constructor() {
+  }
+  async captureImage() {
+    const capturedImage = await Plugins.Camera.getPhoto(
+      {
+        quality: 90,
+        allowEditing: true,
+        source: CameraSource.Camera,
+        resultType: CameraResultType.Uri
+      }
+    );
+    this.yourImage = capturedImage.webPath;
+  }
+}
+</code>
+===== npm run build =====
+<code>
+npm run build
+npx capacitor sync
+npx cap open android
+</code>
+参考：[[:ionic3でcameraプラグイン|ionic3-camera(2018/10月時点)]]
+{{:z_blog:2018:pasted:20181009-234145.png}}
+アプリメニュー：Build → Build APK
+app/build/outputs/apk/ に、apkファイルが出てくるので、それを自分のAndroidスマホにGDrive経由でインストール。
+=> Androidスマホにapkファイルをインストールして、カメラが起動するところまでは行けた。しかし、カメラでとった写真が表示されない。。。
+コードを更新したときは、
+<code>
+npm run build
+npx cap copy
+</code>
+この、androidstudioでapkファイルを作成する方法がよく紹介されているが、それなら、Ionic-Native（Cordova）で十分な気がする。
+Capacitorを利用するメリットは、PWAでCameraなどが使えるからだと思う。
+===== アプリのPWA化 =====
+<code>
+ng add @angular/pwa --project app
+ionic build --prod
+</code>
+GitHub経由でnetlifyでデプロイしてみたが、CAPTURE!!ボタンをクリックしても、カメラは起動しなかった。
+ソースコード
+https://github.com/adash333/camera
+===== 参考 =====
+なんとプラグイン無しでpwaとしてカメラが動くionic3ソースコードが紹介されていた
+https://github.com/peterpeterparker/ionic-pwa-camera-no-plugins
+https://qiita.com/hedrall/items/94ef17b2e096c9d352bd\\
+@hedrall
+年08月07日に更新
+Ionic > カメラロールなどから画像を選択して、アップロードする
 ===== 写経元サイト =====
@@ 行 26: / 行 139: @@
 JULY 30, 2018
-</code>