ステップ２「アプリにネイティブ機能をつけよう」

ステップ３「カメラとPWA Elementsを使ってみよう」

Author: rdlabo

package.json

@@ -28,6 +28,7 @@
     "@ionic-native/splash-screen": "^5.0.0",
     "@ionic-native/status-bar": "^5.0.0",
     "@ionic/angular": "^4.7.1",
+    "@ionic/pwa-elements": "1.3.0",
     "@rdlabo/capacitor-admob": "^0.1.4",
     "cordova-plugin-badge": "^0.8.8",
     "core-js": "^2.5.4",

src/app/tab3/tab3.page.html

@@ -6,4 +6,11 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content></ion-content>
+<ion-content>
+  <img [src]="photo" *ngIf="photo">
+  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
+    <ion-fab-button (click)="takePicture()">
+      <ion-icon name="camera"></ion-icon>
+    </ion-fab-button>
+  </ion-fab>
+</ion-content>

src/app/tab3/tab3.page.ts

@@ -1,12 +1,20 @@
 import { Component } from '@angular/core';
+import { Plugins, CameraResultType, CameraSource } from '@capacitor/core';
 
 @Component({
   selector: 'app-tab3',
   templateUrl: 'tab3.page.html',
   styleUrls: ['tab3.page.scss']
 })
 export class Tab3Page {
-
+  photo;
   constructor() {}
 
+  async takePicture() {
+    const image = await Plugins.Camera.getPhoto({
+      quality: 100,
+      resultType: CameraResultType.DataUrl,
+    });
+    this.photo = image.dataUrl;
+  }
 }

src/main.ts

@@ -4,9 +4,12 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 
+import { defineCustomElements } from '@ionic/pwa-elements/loader';
+
 if (environment.production) {
   enableProdMode();
 }
 
 platformBrowserDynamic().bootstrapModule(AppModule)
   .catch(err => console.log(err));
+defineCustomElements(window);

yarn.lock

@@ -395,6 +395,11 @@
     ionicons "^4.6.3"
     tslib "^1.10.0"
 
+"@ionic/[email protected]":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@ionic/pwa-elements/-/pwa-elements-1.3.0.tgz#9f27b1d3d408542528279209817d534f55957921"
+  integrity sha512-nCi4mpOpRmpNbpVN60NSAch61XxEOr4ulw7irWdsIpt1WOXmsfmc0IWYZCRtpeQsiLAHvBFoFoNhELdjirmHgA==
+
 "@ngtools/[email protected]":
   version "8.1.3"
   resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-8.1.3.tgz#9df049b14539109b60590a1ca64cbd80b6e49909"