バージョン: v8

ファイルシステムからの写真の読み込み

写真の撮影とファイルシステムへの保存を実装しました。最後に足りない機能が1つあります。写真はファイルシステムに保存されていますが、各ファイルへのポインタを保存して、フォトギャラリーに再び表示できるようにする必要があります。

幸いなことに、これは簡単です。CapacitorのPreferences APIを利用して、写真の配列をキーバリューストアに保存します。

Preferences API

ストアのキーとして機能する定数変数を定義することから始めます。

export class PhotoService {
  public photos: UserPhoto[] = [];
  private PHOTO_STORAGE: string = 'photos';

  // other code
}

次に、`addNewToGallery`関数の最後に、`Preferences.set()`を呼び出して写真の配列を保存します。これをここに追加することで、新しい写真が撮影されるたびに写真の配列が保存されます。こうすることで、アプリユーザーがアプリを閉じたり、別のアプリに切り替えたりしても、すべての写真データが保存されます。

Preferences.set({
  key: this.PHOTO_STORAGE,
  value: JSON.stringify(this.photos),
});

写真の配列データが保存されたら、そのデータを取得できる`loadSaved()`という関数を作成します。同じキーを使用して、JSON形式で写真の配列を取得し、それを配列に解析します。

public async loadSaved() {
  // Retrieve cached photo array data
  const { value } = await Preferences.get({ key: this.PHOTO_STORAGE });
  this.photos = (value ? JSON.parse(value) : []) as UserPhoto[];

  // more to come...
}

モバイルでは（次に説明します！）、画像タグのソース - `<img src="x" />` - をファイルシステム上の各写真ファイルに直接設定して、自動的に表示できます。ただし、Webでは、`Photo`オブジェクトの新しい`base64`プロパティを使用して、ファイルシステムから各画像をbase64形式で読み取る必要があります。これは、ファイルシステムAPIが内部でIndexedDBを使用しているためです。以下は、先ほど追加した`loadSaved()`関数に追加する必要があるコードです。

// Display the photo by reading into base64 format
for (let photo of this.photos) {
  // Read each saved photo's data from the Filesystem
  const readFile = await Filesystem.readFile({
    path: photo.filepath,
    directory: Directory.Data,
  });

  // Web platform only: Load the photo as base64 data
  photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;
}

その後、`tab2.page.ts`でこの新しいメソッドを呼び出して、ユーザーが最初にタブ2（フォトギャラリー）に移動したときに、すべての写真が読み込まれて画面に表示されるようにします。

async ngOnInit() {
  await this.photoService.loadSaved();
}

これで完了です！Web上で動作するIonicアプリに、完全なフォトギャラリー機能を構築しました。次に、iOSとAndroid用のモバイルアプリに変換します！

ファイルシステムからの写真の読み込み

Preferences API​

目次

Preferences API