バージョン: v8

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

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

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

ライブリロード

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

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

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

$ ionic cap run ios -l --external

$ ionic cap run android -l --external

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

写真の削除

ライブリロードが実行中で、アプリがデバイスで開いている状態で、写真の削除機能を実装しましょう。tab2.page.htmlを開き、各<ion-img>要素に新しいクリックハンドラーを追加します。アプリユーザーがギャラリー内の写真をタップすると、選択した写真を削除するか、ダイアログをキャンセル（閉じる）するオプションが表示されたアクションシートダイアログが表示されます。

<ion-col size="6" *ngFor="let photo of photoService.photos; index as position">
  <ion-img [src]="photo.webviewPath" (click)="showActionSheet(photo, position)"></ion-img>
</ion-col>

tab2.page.tsで、アクションシートをインポートし、コンストラクターに追加します。

import { ActionSheetController } from '@ionic/angular';

constructor(public photoService: PhotoService,
            public actionSheetController: ActionSheetController) {}

UserPhotoをimport文に追加します。

import { PhotoService, UserPhoto } from '../services/photo.service';

次に、showActionSheet()関数を実装します。2つのオプションを追加します。PhotoServiceのdeletePicture()関数（次にさらに追加されます）を呼び出すDeleteと、「キャンセル」の役割を与えられた場合に自動的にアクションシートを閉じるCancelです。

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

編集した両方のファイルを保存します。写真ギャラリーアプリが自動的にリロードされ、ギャラリーの写真のいずれかをタップすると、アクションシートが表示されます。「削除」をタップしてもまだ何も起こらないので、コードエディターに戻ります。

src/app/services/photo.service.tsで、deletePicture()関数を追加します。

public async deletePicture(photo: UserPhoto, position: number) {
  // Remove this photo from the Photos reference data array
  this.photos.splice(position, 1);

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

  // delete photo file from filesystem
  const filename = photo.filepath
                      .substr(photo.filepath.lastIndexOf('/') + 1);

  await Filesystem.deleteFile({
    path: filename,
    directory: Directory.Data
  });
}

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

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

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

ライブリロード​

写真の削除​

目次

ライブリロード

写真の削除