ライブリロードによる高速アプリ開発

ここまでで、どこでも動作するクロスプラットフォームアプリを簡単に開発できることがわかりました。開発エクスペリエンスはかなり高速ですが、さらに高速化する方法があると言ったらどうでしょう？

Ionic CLI のライブリロード機能を使用すると、Ionic アプリの構築時の生産性を向上させることができます。アクティブになっている場合、ライブリロードはアプリの変更が検出されると、ブラウザや WebView をリロードします。

ライブリロード

ionic serve を覚えていますか？あれはブラウザでライブリロードが動作し、迅速なイテレーションを可能にするものでした。

iOS および Android デバイスで開発する際にも使用できます。これは、ネイティブプラグインと対話するコードを作成するときに特に役立ちます。ネイティブプラグインのコードが動作することを確認するにはデバイス上で実行する必要があるため、コードを迅速に記述し、ビルドしてデプロイし、テストする方法があることは、開発速度を維持するために非常に重要です。

ライブリロードを使用して、フォトギャラリー機能の欠けていた部分である写真の削除を実装しましょう。お好みのプラットフォーム (iOS または Android) を選択し、デバイスをコンピュータに接続します。次に、選択したプラットフォームに基づいてターミナルで次のいずれかのコマンドを実行します。

$ ionic cap run ios -l --external

$ ionic cap run android -l --external

ライブリロードサーバーが起動し、まだ開いていない場合は選択したネイティブ IDE が開きます。IDE 内で、[再生] ボタンをクリックしてアプリをデバイスに起動します。

写真の削除

ライブリロードが実行され、アプリがデバイスで開いている状態で、写真削除機能を実装しましょう。Tab2Page.vue を開き、actionSheetController をインポートします。写真の削除オプションを備えたIonActionSheetを表示します。

import {
  actionSheetController,
  IonPage,
  IonHeader,
  IonFab,
  IonFabButton,
  IonIcon,
  IonToolbar,
  IonTitle,
  IonContent,
  IonImg,
  IonGrid,
  IonRow,
  IonCol,
} from '@ionic/vue';
// other imports

次に、すぐに作成する deletePhoto 関数を参照します。

const { photos, takePhoto, deletePhoto } = usePhotoGallery();

ユーザーが画像をタップ/クリックすると、アクションシートが表示されます。<ion-img> 要素にクリックハンドラーを追加します。

<ion-img :src="photo.webviewPath" @click="showActionSheet(photo)"></ion-img>

次に、script setup 内で、create 関数を呼び出して、選択した写真を削除するか、ダイアログをキャンセル (閉じる) するオプション付きのダイアログを開きます。

const showActionSheet = async (photo: UserPhoto) => {
  const actionSheet = await actionSheetController.create({
    header: 'Photos',
    buttons: [
      {
        text: 'Delete',
        role: 'destructive',
        icon: trash,
        handler: () => {
          deletePhoto(photo);
        },
      },
      {
        text: 'Cancel',
        icon: close,
        role: 'cancel',
        handler: () => {
          // Nothing to do, action sheet is automatically closed
        },
      },
    ],
  });
  await actionSheet.present();
};

次に、usePhotoGallery 関数に deletePhoto メソッドを実装する必要があります。ファイルを開き、次を追加します。

const deletePhoto = async (photo: UserPhoto) => {
  // Remove this photo from the Photos reference data array
  photos.value = photos.value.filter((p) => p.filepath !== photo.filepath);

  // delete photo file from filesystem
  const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
  await Filesystem.deleteFile({
    path: filename,
    directory: Directory.Data,
  });
};

選択した写真は最初に photos 配列から削除され、次に Filesystem API を使用して写真ファイルが削除されます。

photos 配列から写真を削除すると、自動的に cachePhotos 関数がトリガーされることを覚えておいてください。

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

watch(photos, cachePhotos);

最後に、deletePhoto 関数を返します。

return {
  photos,
  takePhoto,
  deletePhoto,
};

このファイルを保存し、もう一度写真をタップして、[削除] オプションを選択します。今回は、写真が削除されました！ライブリロードを使用して、はるかに迅速に実装されました。💪

このチュートリアルの最後の部分では、アプリケーションをビルドしてユーザーのデバイスにデプロイするために使用される Appflow 製品の基本について説明します。