👏

HarmonyOS開発実践:ページとプロジェクトのライフサイクルを解明し、正確な監視を実現する

に公開

HarmonyOS開発実践:ページとプロジェクトのライフサイクルを解明し、正確な監視を実現する

まえがき

HarmonyOSアプリケーションの開発では、各ページとコンポーネントは特定のライフサイクルを持っています。これらのライフサイクル段階は、ページの誕生から消滅までの重要な瞬間を記録する生命の軌跡のようです。これらのライフサイクルを深く理解し、監視することで、アプリケーションのパフォーマンスを向上させるだけでなく、ユーザーエクスペリエンスをよりよく把握するのに役立ちます。

1. HarmonyOS @Component コンポーネントライフサイクルの詳細解説

HarmonyOSのArkTSフレームワークでは、カスタムコンポーネントはaboutToAppear()aboutToDisappear() という2つの非常に重要なライフサイクル関数を持っています。これらの関数は、それぞれコンポーネントが表示される直前と消滅する直前にシステムによって自動的に呼び出され、開発者が特定のタイミングで特定の操作を実行する機会を提供します。

  • aboutToAppear(): コンポーネントのbuild()関数が呼び出される前に実行され、データの初期化やリソースの読み込みを行うのに適したタイミングです。
  • aboutToDisappear(): コンポーネントが破棄される直前に呼び出され、イベントリスナーの解除やリソースの解放など、クリーンアップ処理を行うのに適しています。

コンポーネントライフサイクルのフロー図

+-----------------+
| ArkTS コンポーネント |
+-----------------+
    |
    | 初期化データ
    V
+------------+
| aboutToAppear() |
+------------+
    |
    | コンポーネントのビルドとレンダリング
    V
(build() とその他のロジック)
    |
    | ユーザーインタラクション
    | ...
    V
+-----------------+
| aboutToDisappear() |
+-----------------+
    |
    | コンポーネント破棄前の準備
    V
(コンポーネントが破棄される)

コード実践

以下は、HarmonyOSコンポーネントでこの2つのライフサイクル関数を使用する方法を示す簡単な例です。

// CustomComponent.ets
@Entry
@Component
export default struct CustomComponent {

  // コンポーネントが表示される直前に呼び出されます
  aboutToAppear() {
    console.log('CustomComponent: aboutToAppear called. Component is about to appear.');
    // ここでデータの初期化を行います
  }

  // コンポーネントが消滅する直前に呼び出されます
  aboutToDisappear() {
    console.log('CustomComponent: aboutToDisappear called. Component is about to disappear.');
    // ここで破棄前の準備を行います
  }

  build() {
    // コンポーネントのビルドとレンダリングのロジック
    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
      Text('This is a CustomComponent').fontSize(24).margin({ top: 20 })
      // その他のコンポーネントやレイアウト...
    }.width('100%').height('100%')
  }
}

深く探求する

コンポーネントのライフサイクルを正確に制御し、管理することで、より効率的なアプリケーションの開発とよりスムーズなユーザーエクスペリエンスを実現できます。さらに、いくつかのAPMパフォーマンスモニタリングツールを組み合わせることで、アプリケーションをリアルタイムで分析し、チューニングし、アプリケーションが常に最適な状態で動作することを確認できます。

2. ページエントリーコンポーネントライフサイクルの詳細分析

HarmonyOSの開発では、ページエントリーコンポーネントは非常に重要な役割を果たします。これらのコンポーネントは@Entryデコレータで装飾され、通常のコンポーネントライフサイクル関数だけでなく、ページエントリーに固有の3つのライフサイクル関数onPageShow()onBackPress()onPageHide()が追加されています。これらの関数により、開発者はページが異なる状態にあるときにその動作をより正確に制御することができます。

ライフサイクルコールバックの詳細

  • onPageShow(): ソフトウェアがページに移動するときに実行されます。この時点で、ページはすでにビルドとレンダリングが完了しており、ユーザーに表示される準備が整っています。ページデータの読み込み、アニメーションの開始などを行うのに適したタイミングです。
  • onBackPress(): ユーザーがバックボタンを押すか、その他のバック操作を実行するときに実行されます。この関数では、開発者はユーザーの入力を保存したり、ユーザーが本当にページを離れるかどうかを確認するなどのクリーンアップ作業を実行できます。
  • onPageHide(): ユーザーが携帯電話のホームキーを押して携帯電話のホーム画面に戻るか、その他のページを隠す操作を実行するときに実行されます。この時点で、ページはまだメモリに保持されていますが、ユーザーには表示されません。この関数では、開発者は不要なバックグラウンド操作を一時停止して、システムリソースを節約することができます。

アプリケーションが完全に破棄される場合(例えば、ユーザーがアプリケーションを手動で終了するか、システムがメモリ不足のためにアプリケーションを終了する場合)、aboutToDisappear()関数が呼び出されます。onPageHide()とは異なり、aboutToDisappear()はコンポーネントが完全に破棄され、メモリに保持されないことを示します。したがって、開発者はこの関数で必要なクリーンアップ作業を実行する必要があります。例えば、リソースを解放したり、イベントリスナーを解除したりするなどです。

ライフサイクルフロー図

+------------------+
| @Entry コンポーネント |
+------------------+
    |
    | ページが表示される直前
    V
+-----------------+
| aboutToAppear() |
+-----------------+
    |
    | コンポーネントのビルドとレンダリング
    V
+------------+
| build()      |
+------------+
    |
    | ページが表示された後
    V
+-------------+
| onPageShow() |
+-------------+
    |
    | ユーザーインタラクションと操作
    | ...
    V
+----------------+
| ユーザー操作またはインタラクション |
+----------------+
    |
    | ユーザーがバックボタンを押すか、ページを離れる
    V
+--------------+
| onBackPress() |
+--------------+
    |
    | ページが隠れる
    V
+--------------+
| onPageHide()  |
+--------------+
    |
    | アプリケーションが破棄されるか、ページが不要になる
    V
+-----------------+
| aboutToDisappear() |
+-----------------+
    |
    | コンポーネントが破棄される
    V
(コンポーネントが完全にメモリから削除される)

実践ガイド

  • ライフサイクル関数の適切な使用: ページやコンポーネントのニーズに応じて、適切なライフサイクル関数で対応する操作を実行します。例えば、onPageShow()でデータを読み込み、onPageHide()でバックグラウンドタスクを一時停止します。
  • リソース管理に注意: aboutToDisappear()で、必要なくなったすべてのリソースを解放し、メモリリークやパフォーマンス問題を避けるようにします。
  • ユーザーインタラクションとナビゲーション: onBackPress()でユーザーのバック操作を処理し、ユーザーがスムーズにナビゲートしてページを終了できるようにします。

ページエントリーコンポーネントのライフサイクル関数を深く理解し、適切に利用することで、より効率的で、スムーズで、ユーザーにやさしいHarmonyOSアプリケーションを開発することができます。

3. UIAbilityライフサイクルの分析

ライフサイクルステートの詳細な説明

9b77a014169f31d3836726a75a31e98f.webp.png

Createステート

Createステートはアプリケーションのロード中に発生し、UIAbilityインスタンスが作成されたときにトリガーされます。システムはonCreate()コールバックメソッドを呼び出します。このコールバックメソッドでは、開発者はページの初期化操作を行うことができます。例えば、変数の定義やリソースの読み込みなどを行い、後のUIの表示に備えます。

import AbilityConstant from '@ohos.app.ability.AbilityConstant';
import UIAbility from '@ohos.app.ability.UIAbility';
import Want from '@ohos.app.ability.Want';

export default class EntryAbility extends UIAbility {
    onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
        // ページの初期化、例えばデータの読み込み、初期状態の設定など
    }
    // ... その他のメソッド
}

WindowStageCreateステート

UIAbilityインスタンスが作成された後、フォアグラウンド(Foreground)に表示される前に、システムはWindowStageを作成します。WindowStageはアプリケーションウィンドウの抽象表現で、ウィンドウのレンダリングやイベント処理等功能が含まれます。

WindowStageが作成された後、システムはonWindowStageCreate()コールバックメソッドを呼び出します。このコールバックメソッドでは、開発者はプロジェクトの設定を行い、ジャンプするホームページを設定することができます。このようにすることで、WindowStageがフォアグラウンドに表示されるとき、アプリケーションはすでに表示するUIの内容とユーザーインタラクションを処理する能力を準備しています。


export default class EntryAbility extends UIAbility {
    // ... その他のメソッド

onWindowStageCreate(windowStage: window.WindowStage): void {
  const applicationContext = this.context.getApplicationContext()
  // 読み込み開始
  let entryPage = 'pages/main/IndexPage'
  // 設定読み込み
  let config = ...
  }

    // ... その他のメソッド
}

実践ガイド

  1. プロジェクトの基本データの設定: onWindowStageCreate関数でプロジェクトの基本設定を行います。
  2. イベントの購読と処理: onWindowStageCreateでいくつかのライフサイクル関数を購読します。

4. 監視の購読

EntryAbilityでは、通常、アプリケーションの状態の変化やAbilityのライフサイクルイベントを監視する必要があります。これらのイベントを監視することで、リソースをより効果的に管理し、特定のロジックを実行し、ユーザーエクスペリエンスを最適化することができます。

EntryAbility クラス

// EntryAbility クラスは UIAbility を拡張し、アプリケーションのライフサイクルとイベントリスニングを管理します
export default class EntryAbility extends UIAbility {
    // Ability LifecycleのリスニングIDを保存するためのプロパティ
    private lifecycleId: number = -1;

    // WindowStageが作成されたときに呼び出されます
    onWindowStageCreate(windowStage: window.WindowStage): void {
        // アプリケーションコンテキストを取得します
        const applicationContext = this.context.getApplicationContext();

        // アプリケーションの状態変化を監視します
        // EntryApplicationStateChangeCallbackインスタンスを作成して状態変化を処理します
        applicationContext.on('applicationStateChange', new EntryApplicationStateChangeCallback());

        // Ability Lifecycleイベントを監視します
        // EntryAbilityLifecycleCallbackインスタンスを作成し、リスニングIDを取得します
        this.lifecycleId = applicationContext.on('abilityLifecycle', new EntryAbilityLifecycleCallback());

        // ここでは、WindowStageが作成された後の初期化操作を実行できます
        // ...
    }

    // Abilityが破棄されたときに呼び出されます
    onDestroy(): void {
        // アプリケーションコンテキストを取得します
        const applicationContext = this.context.getApplicationContext();

        // アプリケーションの状態変化のリスニングを解除します
        applicationContext.off('applicationStateChange');

        // Ability LifecycleのリスニングIDがある場合は、リスニングを解除します
        if (this.lifecycleId !== -1) {
            applicationContext.off('abilityLifecycle', this.lifecycleId);
        }

        // ここでは、リソースのクリーンアップとメモリの解放を実行できます
        // ...
    }

    // ... その他のメソッド
}

EntryAbilityLifecycleCallback クラス

// EntryAbilityLifecycleCallback クラスは AbilityLifecycleCallback を拡張し、Abilityのライフサイクルイベントを処理します
export default class EntryAbilityLifecycleCallback extends AbilityLifecycleCallback {
    // Abilityが作成されたときに呼び出されます
    onAbilityCreate(ability: UIAbility): void {
        // ここでは、Abilityが作成された後の初期化操作を実行できます
        // ...
    }

    // WindowStageが作成されたときに呼び出されます
    onWindowStageCreate(ability: UIAbility, windowStage: window.WindowStage): void {
        // ここでは、WindowStageが作成された後の初期化操作を実行できます
        // ...
    }

    // ページがフォーカスを取得したときに呼び出されます
    onWindowStageActive(ability: UIAbility, windowStage: window.WindowStage): void {
        // ここでは、ページがアクティブになったときの操作を実行できます。例えば、状態の復元、データの更新など
        // ...
    }

    // WindowStageがフォーカスを失ったときに呼び出されます
    onWindowStageInactive(ability: UIAbility, windowStage: window.WindowStage): void {
        // ここでは、ページがフォーカスを失ったときの操作を実行できます。例えば、アニメーションの停止、状態の保存など
        // ...
    }

    // WindowStageが破棄される前に呼び出されます
    onWindowStageDestroy(ability: UIAbility, windowStage: window.WindowStage): void {
        // ここでは、WindowStageが破棄される前のクリーンアップ操作を実行できます
        // ...
    }

    // Abilityが破棄される前に呼び出されます
    onAbilityDestroy(ability: UIAbility): void {
        // ここでは、Abilityが破棄される前のクリーンアップ操作を実行できます
        // ...
    }

    // Abilityがフォアグラウンドに移動したときに呼び出されます
    onAbilityForeground(ability: UIAbility): void {
        // ここでは、Abilityがフォアグラウンドに移動したときの操作を実行できます。例えば、停止していたアニメーションの復元など
        // ...
    }

    // Abilityがバックグラウンドに移動したときに呼び出されます
    onAbilityBackground(ability: UIAbility): void {
        // ここでは、Abilityがバックグラウンドに移動したときの操作を実行できます。例えば、アニメーションの停止、状態の保存など
        // ...
    }

    // Abilityが一時停止状態から復帰したときに呼び出されます
    onAbilityContinue(ability: UIAbility): void {
        // ここでは、Abilityが復帰したときの操作を実行できます。例えば、アニメーションの再開など
        // ...
    }
}

EntryApplicationStateChangeCallback クラス

// EntryApplicationStateChangeCallback クラスは ApplicationStateChangeCallback を拡張し、アプリケーションの状態変化イベントを処理します
export default class EntryApplicationStateChangeCallback extends ApplicationStateChangeCallback {
    // アプリケーションがフォアグラウンドに移動したときに呼び出されます
    onApplicationForeground(): void {
        // ここでは、アプリケーションがフォアグラウンドに移動したときの操作を実行できます。例えば、ネットワークリクエストの復元など
        // ...
    }

    // アプリケーションがバックグラウンドに移動したしたときに呼び出されます
    onApplicationBackground(): void {
        // ここでは、アプリケーションがバックグラウンドに移動したときの操作を実行できます。例えば、アニメーションの停止、ネットワークリクエストの中断など
        // ...
    }
}

以上のように、HarmonyOSの開発では、ページやコンポーネントのライフサイクルを深く理解し、それらを適切に監視することで、アプリケーションのパフォーマンスを向上させ、効率的なリソース管理を実現し、優れたユーザーエクスペリエンスを提供することができます。

Discussion