カメラで写真を撮る

いよいよ楽しい部分です。Capacitor の Camera API を使用して、デバイスのカメラで写真を撮る機能を追加します。まずは Web 用に構築し、次にモバイル (iOS と Android) で動作するように少し調整します。

写真サービス

すべての Capacitor ロジック (カメラの使用やその他のネイティブ機能) は、サービスクラスにカプセル化されます。 `ionic generate` コマンドを使用して `PhotoService` を作成します。

ionic g service services/photo

新しい `services/photo.service.ts` ファイルを開き、カメラ機能を駆動するロジックを追加しましょう。まず、Capacitor の依存関係をインポートし、Camera、Filesystem、Storage プラグインへの参照を取得します。

import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
import { Filesystem, Directory } from '@capacitor/filesystem';
import { Preferences } from '@capacitor/preferences';

次に、デバイスの写真を撮ってファイルシステムに保存するためのコアロジックを含む新しいクラスメソッド `addNewToGallery` を定義します。まずはデバイスのカメラを開くことから始めましょう。

public async addNewToGallery() {
  // Take a photo
  const capturedPhoto = await Camera.getPhoto({
    resultType: CameraResultType.Uri,
    source: CameraSource.Camera,
    quality: 100
  });
}

ここで注目すべき点は、プラットフォーム固有のコード (Web、iOS、または Android) がないことです。Capacitor Camera プラグインがそれを抽象化してくれるため、デバイスのカメラを開いて写真を撮ることができる `Camera.getPhoto()` というメソッド呼び出しが 1 つだけになります。

次に、`tab2.page.ts` を開き、`PhotoService` クラスをインポートし、インポートされたサービスの `addNewToGallery` メソッドを呼び出すメソッドを追加します

import { PhotoService } from '../services/photo.service';

constructor(public photoService: PhotoService) { }

addPhotoToGallery() {
  this.photoService.addNewToGallery();
}

次に、`tab2.page.html` を開き、FAB がタップ/クリックされたときに `addPhotoToGallery()` 関数を呼び出します。

<ion-content>
  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
    <ion-fab-button (click)="addPhotoToGallery()">
      <ion-icon name="camera"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>

ファイルを保存し、まだ実行されていない場合は、`ionic serve` を実行してブラウザで開発サーバーを再起動します。「フォトギャラリー」タブで、カメラボタンをクリックします。コンピュータに Web カメラがある場合、モーダルウィンドウが表示されます。セルフィーを撮りましょう!

(あなたのセルフィーはきっと私のよりずっと良いでしょう)

写真を撮った後、すぐに消えてしまいます。アプリ内に表示し、後でアクセスできるように保存する必要があります。

写真の表示

`PhotoService` クラス定義の外側 (ファイルの一番下) に、写真のメタデータを保持するための新しいインターフェース `UserPhoto` を作成します。

export interface UserPhoto {
  filepath: string;
  webviewPath?: string;
}

ファイルの先頭に戻り、写真の配列を定義します。この配列には、カメラでキャプチャされた各写真への参照が格納されます。

export class PhotoService {
  public photos: UserPhoto[] = [];

  // other code
}

`addNewToGallery` 関数で、新しくキャプチャされた写真を Photos 配列の先頭に追加します。

  const capturedPhoto = await Camera.getPhoto({
    resultType: CameraResultType.Uri,
    source: CameraSource.Camera,
    quality: 100
  });

  this.photos.unshift({
    filepath: "soon...",
    webviewPath: capturedPhoto.webPath!
  });
}

次に、`tab2.page.html` に移動して、画像を画面に表示します。グリッドコンポーネントを追加して、ギャラリーに写真が追加されるにつれて各写真がきれいに表示されるようにし、`PhotoServices` の Photos 配列の各写真をループ処理して、それぞれに画像コンポーネント (`<ion-img>`) を追加します。 `src` (ソース) を写真のパスに設定します。

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col size="6" *ngFor="let photo of photoService.photos; index as position">
        <ion-img [src]="photo.webviewPath"></ion-img>
      </ion-col>
    </ion-row>
  </ion-grid>

  <!-- ion-fab markup  -->
</ion-content>

すべてのファイルを保存します。Web ブラウザでカメラボタンをクリックして、もう一度写真を撮ります。今度は、写真がフォトギャラリーに表示されます!

次に、写真をファイルシステムに保存するためのサポートを追加し、後でアプリで取得して表示できるようにします。