バージョン: v8

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

これまで、あらゆる場所で動作するクロスプラットフォームアプリを簡単に開発できることを見てきました。開発プロセスは非常に迅速ですが、さらに高速化する方法があるとしたらどうでしょうか？

Ionic CLI のライブリロード機能を使用して、Ionic アプリの開発効率を向上させることができます。有効にすると、アプリに変更が検出された際に、ブラウザや WebView が自動的に再読み込みされます。

ライブリロード

ionic serve を覚えていますか？それはブラウザで動作するライブリロードで、迅速な反復開発を可能にしました。

iOS および Android デバイスでの開発時にも使用できます。これは、ネイティブプラグインとやり取りするコードを記述する場合に特に便利です。ネイティブプラグインコードの動作を確認するにはデバイスで実行する必要があるため、コードをすばやく記述してビルド、デプロイ、テストする方法を持つことは、開発速度を維持するために不可欠です。

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

$ ionic cap run ios -l --external

$ ionic cap run android -l --external

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

写真の削除

ライブリロードが実行中で、アプリがデバイスで開いている状態で、写真の削除機能を実装しましょう。Tab2.tsx を開き、React から useState と usePhotoGalleryフックから UserPhoto をインポートします。

import React, { useState } from 'react';
import { usePhotoGallery, UserPhoto } from '../hooks/usePhotoGallery';
// other imports

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

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

次に、削除する写真の情報を格納するための状態値を追加します。

const [photoToDelete, setPhotoToDelete] = useState<UserPhoto>();

ユーザーが画像をクリックすると、状態値を写真に変更してアクションシートを表示します。<IonImg> 要素を次のように更新します。

<IonImg onClick={() => setPhotoToDelete(photo)} src={photo.webviewPath} />

次に、選択した写真を削除するか、ダイアログをキャンセル（閉じる）かのオプションを含むIonActionSheet ダイアログを追加します。photoToDelete に値があるかどうかで isOpen プロパティを設定します。

JSX で、次のコンポーネントを閉じている </IonContent> タグの前に配置します。

<IonActionSheet
  isOpen={!!photoToDelete}
  buttons={[
    {
      text: 'Delete',
      role: 'destructive',
      icon: trash,
      handler: () => {
        if (photoToDelete) {
          deletePhoto(photoToDelete);
          setPhotoToDelete(undefined);
        }
      },
    },
    {
      text: 'Cancel',
      icon: close,
      role: 'cancel',
    },
  ]}
  onDidDismiss={() => setPhotoToDelete(undefined)}
/>

上記では、Delete（後で追加する deletePhoto 関数を呼び出す）と、"cancel" の役割が与えられるとアクションシートを自動的に閉じる Cancel の2つのオプションを追加しました。onDidDismiss 関数を設定し、モーダルが消えたときに photoToDelete を undefined に戻すことも重要です。そうすることで、別の画像がクリックされたときに、アクションシートは photoToDelete の値の変化を認識します。

次に、usePhotoGallery フックから取得する deletePhoto メソッドを実装する必要があります。ファイルを開き、フックに次の関数を貼り付けます。

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

  // Update photos array cache by overwriting the existing photo array
  Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) });

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

選択された写真はまず Photos 配列から削除されます。次に、Capacitor Preferences API を使用して、Photos 配列のキャッシュされたバージョンを更新します。最後に、Filesystem API を使用して実際の写真ファイル自体を削除します。

deletePhoto 関数を返すようにして、公開するフック API の一部として含めるようにしてください。

return {
  photos,
  takePhoto,
  deletePhoto,
};

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

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

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

ライブリロード​

写真の削除​

目次

ライブリロード

写真の削除