バージョン: v8

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

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

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

Preferences API

src/hooks/usePhotoGallery.tsのusePhotoGallery関数の定義の前に、ストアのキーとして機能する定数変数を定義することから始めます。

const PHOTO_STORAGE = 'photos';
export function usePhotoGallery() {}

次に、Storageクラスを使用して、デバイスストレージへの読み書きのためのgetメソッドとsetメソッドにアクセスします。

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

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

フォト配列データが保存されたので、フックがロードされるときにデータを取得するメソッドを作成します。ReactのuseEffectフックを使用してこれを行います。これをtakePhoto宣言の上に挿入します。コードを以下に示し、それを分解します。

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

    for (let photo of photosInPreferences) {
      const file = await Filesystem.readFile({
        path: photo.filepath,
        directory: Directory.Data,
      });
      // Web platform only: Load the photo as base64 data
      photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
    }
    setPhotos(photosInPreferences);
  };
  loadSaved();
}, []);

これは最初は少し難しそうに見えますが、フックに渡す2番目のパラメータである依存配列[]を見てから説明します。

useEffectフックは、デフォルトでは、コンポーネントがレンダリングされるたびに呼び出されます。ただし、依存配列を渡すと、依存関係が更新された場合にのみ実行されます。ここでは、一度だけ呼び出す必要があります。変更されない空の配列を渡すことで、フックが複数回呼び出されるのを防ぐことができます。

useEffectの最初の引数は、エフェクトによって呼び出される関数です。無名のアロー関数を渡し、その中で別の非同期メソッドを定義してから、すぐに呼び出します。フックのコールバック自体は非同期にできないため、フック内から非同期関数を呼び出す必要があります。

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

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

Preferences API​

目次

Preferences API