モバイルの追加

私たちのフォトギャラリーアプリは、1つのコードベースを使用して、iOS、Android、および Web で実行できるようになるまで完成しません。モバイルプラットフォームをサポートするための小さなロジック変更、ネイティブツールをいくつかインストールし、デバイスでアプリを実行するだけです。さあ、始めましょう！

まず、いくつかの小さなコード変更を行いましょう。そうすれば、デバイスにデプロイするときにアプリは「そのまま動作」します。

プラットフォーム固有のロジック

まず、写真の保存機能を更新してモバイルをサポートします。プラットフォーム (モバイルか Web) に応じて、少し異なるコードを実行します。Ionic Vue から `Platform` API をインポートし、Capacitor の `core` パッケージから `Capacitor` をインポートします。

import { isPlatform } from '@ionic/vue';
import { Capacitor } from '@capacitor/core';

`savePicture` 関数で、アプリが実行されているプラットフォームを確認します。「ハイブリッド」(Capacitor、ネイティブランタイム) の場合、`readFile` メソッドを使用して写真ファイルを base64 形式で読み取ります。また、Filesystem API を使用して写真への完全なファイルパスを返します。`webviewPath` を設定するときは、特別な `Capacitor.convertFileSrc` メソッドを使用します (詳細はこちら)。それ以外の場合は、Web でアプリを実行する場合と同じロジックを使用します。

const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
  let base64Data: string | Blob;
  // "hybrid" will detect mobile - iOS or Android
  if (isPlatform('hybrid')) {
    const file = await Filesystem.readFile({
      path: photo.path!,
    });
    base64Data = file.data;
  } else {
    // Fetch the photo, read as a blob, then convert to base64 format
    const response = await fetch(photo.webPath!);
    const blob = await response.blob();
    base64Data = (await convertBlobToBase64(blob)) as string;
  }
  const savedFile = await Filesystem.writeFile({
    path: fileName,
    data: base64Data,
    directory: Directory.Data,
  });

  if (isPlatform('hybrid')) {
    // Display the new image by rewriting the 'file://' path to HTTP
    // Details: https://ionic.dokyumento.jp/docs/building/webview#file-protocol
    return {
      filepath: savedFile.uri,
      webviewPath: Capacitor.convertFileSrc(savedFile.uri),
    };
  } else {
    // Use webPath to display the new image instead of base64 since it's
    // already loaded into memory
    return {
      filepath: fileName,
      webviewPath: photo.webPath,
    };
  }
};

次に、`loadSaved` 関数に新しいロジックを追加します。モバイルでは、Filesystem 上の各写真ファイルを直接参照して自動的に表示できます。ただし、Web では、Filesystem から各画像を base64 形式で読み取る必要があります。これは、Filesystem API が内部で IndexedDB を使用しているためです。`loadSaved` 関数を更新します。

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

  // If running on the web...
  if (!isPlatform('hybrid')) {
    for (const 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}`;
    }
  }

  photos.value = photosInPreferences;
};

これで、フォトギャラリーは Web、Android、および iOS で実行される 1 つのコードベースで構成されました。次に、待望のデバイスへのアプリのデプロイです。