z_blog:2018:181009_ionic4-capacitor-camera

差分

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

この比較画面へのリンク

--- z_blog:2018:181009_ionic4-capacitor-camera [2018/10/09] – [181009_Ionic4+Capacitor+Cameraの写経にtryしてみる] 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\\
@@ 行 7: / 行 9: @@
 Ionic 4 – Camera with Capacitor
 JULY 30, 2018
 ===== 参考サイト =====
@@ 行 25: / 行 28: @@
 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 > カメラロールなどから画像を選択して、アップロードする
 ===== 写経元サイト =====

z_blog/2018/181009_ionic4-capacitor-camera.1539094251.txt.gz · 最終更新: 2018/10/09 by adash333