バージョン: v8

ファイルシステムから写真をロードする

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

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

Preferences API

まず、src/composables/usePhotoGallery.tsのusePhotoGallery関数の一番上で、ストアのキーとして機能する定数変数を定義します。

const PHOTO_STORAGE = 'photos';

次に、Photos配列をJSONとして設定に保存するcachePhotos関数を追加します。

const cachePhotos = () => {
  Preferences.set({
    key: PHOTO_STORAGE,
    value: JSON.stringify(photos.value),
  });
};

次に、Vueのwatch関数を使用して、photos配列を監視します。配列が変更されるたびに（この場合は、写真の撮影または削除）、cachePhotos関数をトリガーします。コードを再利用できるだけでなく、アプリのユーザーがアプリを閉じたり、別のアプリに切り替えたりしても問題ありません。写真データは常に保存されます。

watch(photos, cachePhotos);

写真の配列データが保存されたので、Tab2がロードされたときにデータを取得する関数を作成します。まず、Preferencesから写真データを取得し、次に各写真のデータをbase64形式に変換します。

const loadSaved = async () => {
  const photoList = await Preferences.get({ key: PHOTO_STORAGE });
  const photosInPreferences = photoList.value ? JSON.parse(photoList.value) : [];

  for (const photo of photosInPreferences) {
    const file = await Filesystem.readFile({
      path: photo.filepath,
      directory: Directory.Data,
    });
    photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
  }

  photos.value = photosInPreferences;
};

モバイル（後述！）では、画像タグのソース - <img src="x" /> - をファイルシステムの各写真ファイルに直接設定して、自動的に表示できます。ただし、Webでは、ファイルシステムAPIが内部的にIndexedDB内にbase64で保存するため、ファイルシステムから各画像をbase64形式で読み取る必要があります。

最後に、写真ギャラリーページがロードされたときにloadSaved関数を呼び出す方法が必要です。それを行うには、Vueのmountedライフサイクルフックを使用します。以前に、VueからonMountedをインポートしました。

import { ref, onMounted, watch } from 'vue';

usePhotoGallery関数内で、onMounted関数を追加し、loadSavedを呼び出します。

onMounted(loadSaved);

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

ファイルシステムから写真をロードする

Preferences API​

目次

Preferences API