ギャップを埋める: MAUI ハイブリッドモバイル開発-jsチュートリアル-php.cn

Bridging the Gap: MAUI Hybrid Mobile Development

モバイルアプリケーション開発のダイナミックな世界では、効率、柔軟性、堅牢性を兼ね備えた適切なツールを見つけることが継続的な探求です。プログラミングで利用できるモバイルフレームワークは数多くありますが、JavaScript フレームワークとハイブリッドアプリケーションに焦点を当てると、選択肢は限られてしまいます。開発者は多くの場合、最新の JavaScript フレームワークとネイティブ機能をシームレスに活用できるソリューションを求めています。

MAUI Hybridizer は、JavaScript アプリケーションを .NET MAUI と統合するように設計された強力なライブラリであり、開発者が動的なクロスプラットフォームのハイブリッドモバイルアプリケーションを簡単に作成できるようにします。

強化されたハイブリッドライブラリの必要性

既存のソリューションを基に構築

JavaScript フレームワークを使用してハイブリッドアプリケーションを構築するには、いくつかのオプションがあります。 Capacitor や NativeScript などのツールは、ハイブリッドモバイルアプリ開発に大きく貢献してきました。これらは価値のある機能を提供し、独自の強みを持っています:

Capacitor は、幅広いプラットフォームのサポートと使い慣れた Web ベースの開発アプローチを提供します。
NativeScript を使用すると、開発者は JavaScript、TypeScript、または Angular を使用してネイティブアプリを構築し、ネイティブ API に直接アクセスできます。

ただし、開発者は次のような課題に遭遇する可能性があります。

プラグイン開発の複雑さ: Capacitor プラグインには Java や Swift などのネイティブ言語の知識が必要になることが多く、主に Web 開発の経験がある人にとっては障壁となる可能性があります。
サポートとメンテナンス: NativeScript は強力ではありますが、積極的なサポートとアップデートが不足している可能性があり、実稼働対応アプリケーションの開発とメンテナンスに問題が生じる可能性があります。

これらの考慮事項は、既存のソリューションの利点を組み合わせながらその制限に対処し、特に JavaScript フレームワークとハイブリッドアプリケーションに対して、より合理化されたアクセスしやすい開発エクスペリエンスを提供するライブラリの機会を強調しています。

MAUI ハイブリダイザーのご紹介

マウイ島の豊かな遺産を活用する

.NET マルチプラットフォームアプリ UI (MAUI) は、Xamarin によって築かれた強力な基盤の上に構築されており、Android、iOS、macOS、Windows などの複数のプラットフォームにわたってネイティブアプリケーションを作成するための統合フレームワークを提供します。この豊富な背景は、MAUI に多数の API がすでに実装されていることを意味し、プラットフォーム固有のコードを必要とせずにネイティブデバイス機能へのアクセスを提供します。

ライブラリの背後にあるロジック

MAUI Hybridizer は、JavaScript アプリケーションと .NET MAUI フレームワークの間のブリッジとして機能します。これにより、JavaScript 層と C# 層の間の双方向通信が可能になり、開発者は JavaScript からネイティブ API を呼び出すことができ、またその逆も可能になります。これは、JavaScript アプリケーションをロードし、メッセージングシステムを使用してコミュニケーションを容易にするハイブリッド Web ビューによって実現されます。

シームレスなプラグイン統合

MAUI Hybridizer は MAUI の広範な API セットを最大限に活用し、開発者がこれらの既存の実装をハイブリッドアプリケーション内のプラグインとして使用できるようにします。これにより、開発が加速されるだけでなく、アプリケーションが実証済みの安定したテクノロジに基づいて構築されるようになります。

主な特長

双方向通信: JavaScript からネイティブ C# メソッドをシームレスに呼び出し、C# から JavaScript 関数を呼び出します。
プラグインアーキテクチャ: カスタムプラグインを簡単に作成して統合し、アプリケーションの機能を拡張します。
イベント処理: 両方のレイヤーにわたって、再開や停止などのアプリケーションのライフサイクルイベントをトリガーして処理します。

プラグインの作成: ステップバイステップガイド

MAUI Hybridizer の優れた機能の 1 つは、カスタムプラグインを作成できる機能で、開発者はネイティブデバイスの機能を利用してアプリケーションの機能を拡張できます。

ステップ 1: .NET MAUI クラスライブラリを作成する

まず、新しい .NET MAUI クラスライブラリプロジェクトを作成します。サポートされている .NET バージョン (Roslyn アナライザーはまだ .NET 9 を完全にはサポートしていない可能性があるため、9 未満) を使用していることを確認してください。

dotnet new mauiclasslib -n MyCustomPlugin -f net8.0

ログイン後にコピー

ステップ 2: AutoGen NuGet パッケージを追加する

Allowed.Maui.Hybridizer.AutoGen パッケージをプロジェクトに追加します。

dotnet add package Allowed.Maui.Hybridizer.AutoGen

ログイン後にコピー

ステップ 3: C# プラグインを実装する

属性を使用してプラグインクラスを作成し、それをプラグインとして指定し、そのメソッドを JavaScript から呼び出し可能として指定します。

using System.Text.Json.Serialization;
using Allowed.Maui.Hybridizer.Abstractions.Attributes;
using Allowed.Maui.Hybridizer.Abstractions.Plugins;

namespace MyCustomPlugin;

[HwvPlugin]
public class StoragePlugin
{
    [HwvMethod]
    public GetResponse Get([HwvPayload] GetRequest request)
    {
        return new GetResponse(Preferences.Default.Get(request.Key, string.Empty));
    }

    [HwvMethod]
    public void Set([HwvPayload] SetRequest request)
    {
        Preferences.Default.Set(request.Key, request.Value);
    }

    [HwvMethod]
    public void Remove([HwvPayload] RemoveRequest request)
    {
        Preferences.Default.Remove(request.Key);
    }

    public record GetRequest([property: JsonPropertyName("key")] string Key);

    public record GetResponse([property: JsonPropertyName("value")] string Value);

    public record SetRequest(
        [property: JsonPropertyName("key")] string Key,
        [property: JsonPropertyName("value")] string Value);

    public record RemoveRequest([property: JsonPropertyName("key")] string Key);
}

ログイン後にコピー

ステップ 4: 依存関係の挿入を使用してプラグインを登録する

プラグインを実装した後、Maui Hybridizer で認識できるように、プラグインを MAUI 依存関係注入コンテナーに登録する必要があります。

MauiProgram.cs に次のコードを追加します:

// Add the Hybridizer with plugin modules
builder.Services.AddHybridizer(
    Allowed.Maui.Hybridizer.Essentials.HwvPluginModule.Invoke, 
    MyCustomPlugin.HwvPluginModule.Invoke
);

// Add essentials plugins you need
builder.Services.RegisterAlertPlugin();
builder.Services.RegisterBatteryPlugin();
builder.Services.RegisterStoragePlugin();

// Add your custom plugin
builder.Services.AddTransient<CustomAlertPlugin>();

ログイン後にコピー

注: HwvPluginModule は、プラグインをビルドするときに、Allowed.Maui.Hybridizer.AutoGen パッケージによって作成される自動生成クラスです。プラグインのサービスを登録するメソッドが含まれています。

ステップ 5: ブリッジサービスを初期化する

この手順は通信チャネルを設定し、JavaScript アプリケーションで 1 回 (通常はアプリケーションのロード後に) 実行する必要があります。

import { bridgeService } from "../hybridizer/BridgeService";

// Initialize the bridge service for communication
if (!platformService.isWeb())
    bridgeService.initialize();

ログイン後にコピー

ステップ 6: JavaScript インターフェースを作成する

JavaScript アプリケーションで、ネイティブプラグインと通信するためのインターフェイスを作成します。

dotnet new mauiclasslib -n MyCustomPlugin -f net8.0

ログイン後にコピー

説明

プラットフォームチェック: アプリケーションが Web 上で実行されているか、ネイティブアプリとして実行されているかを判断します。
メソッド: ネイティブアプリとして実行するときに、bridgeService.invoke を使用してネイティブメソッドを呼び出します。
使用法: JavaScript コードで storagePlugin をインポートして使用し、ネイティブストレージ機能にアクセスします。

C# からの JavaScript の呼び出し: イベントの処理

MAUI Hybridizer は、C# レイヤーからの JavaScript 関数の呼び出しも容易にし、特に再開や停止などのアプリケーションのライフサイクルイベントを処理する場合に役立ちます。

イベント処理の実装

App.xaml.cs ファイルで、アプリケーションのライフサイクルイベントを設定し、_jsCaller を使用して JavaScript メソッドを呼び出します。

dotnet add package Allowed.Maui.Hybridizer.AutoGen

ログイン後にコピー

説明

AppLifecycleService: アプリケーションのライフサイクルイベントを処理するカスタムサービス。
HwvJsCaller: C# から JavaScript 関数を呼び出せるようにするために挿入されました。
イベントサブスクリプション: アプリが再開または停止すると、対応する JavaScript 関数 Resumed または Stopped が呼び出されます。

JavaScript 側

JavaScript アプリケーションで、bridgeService.register を使用してイベントハンドラーを登録します。

using System.Text.Json.Serialization;
using Allowed.Maui.Hybridizer.Abstractions.Attributes;
using Allowed.Maui.Hybridizer.Abstractions.Plugins;

namespace MyCustomPlugin;

[HwvPlugin]
public class StoragePlugin
{
    [HwvMethod]
    public GetResponse Get([HwvPayload] GetRequest request)
    {
        return new GetResponse(Preferences.Default.Get(request.Key, string.Empty));
    }

    [HwvMethod]
    public void Set([HwvPayload] SetRequest request)
    {
        Preferences.Default.Set(request.Key, request.Value);
    }

    [HwvMethod]
    public void Remove([HwvPayload] RemoveRequest request)
    {
        Preferences.Default.Remove(request.Key);
    }

    public record GetRequest([property: JsonPropertyName("key")] string Key);

    public record GetResponse([property: JsonPropertyName("value")] string Value);

    public record SetRequest(
        [property: JsonPropertyName("key")] string Key,
        [property: JsonPropertyName("value")] string Value);

    public record RemoveRequest([property: JsonPropertyName("key")] string Key);
}

ログイン後にコピー

完全な例

この実装の包括的な例は、MAUI Hybridizer リポジトリ内のサンプルプロジェクトにあります。

結論

MAUI Hybridizer は、既存のツールの強みを活かして、ハイブリッドモバイルアプリケーション開発のための堅牢で柔軟なソリューションを提供します。プラグイン開発を簡素化し、JavaScript とネイティブコード間のシームレスな通信を促進することで、高品質のクロスプラットフォームアプリケーションを作成するためのアクセスしやすく効率的なツールを開発者に提供します。

個人的な意見

ハイブリッドモバイルアプリ開発の複雑さを乗り越えてきた開発者として、MAUI Hybridizer は MAUI の豊富な API 遺産を効果的に活用しながら、JavaScript 統合のための直感的なインターフェイスを提供していることがわかりました。これは、.NET MAUI とのより緊密な統合とより簡単なプラグイン開発プロセスを求める開発者に適した代替手段を提供することで、既存のソリューションを補完します。

現状と今後の予定

MAUI Hybridizer は現在ベータ版であり、開発者にその機能を探索する機会を提供しています。 .NET 9 のリリースにより、このライブラリはベータ段階を終了する予定であり、MAUI Hybridizer Essentials パッケージに必須のプラグインのセットが付属します。これにより、コアのネイティブ機能がカバーされ、開発エクスペリエンスがさらに強化されます。

はじめる

Maui Hybridizer を調べて実際の動作を確認するには、GitHub リポジトリにアクセスしてサンプルプロジェクトをチェックしてください。新しいアプリケーションを構築している場合でも、既存のアプリケーションの強化を検討している場合でも、このライブラリはハイブリッドモバイル開発における有望な道筋を提供します。

以上がギャップを埋める: MAUI ハイブリッドモバイル開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。