ギャップを埋める: MAUI ハイブリッド モバイル開発

モバイル アプリケーション開発のダイナミックな世界では、効率、柔軟性、堅牢性を兼ね備えた適切なツールを見つけることが継続的な探求です。プログラミングで利用できるモバイル フレームワークは数多くありますが、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>();
</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 サイトの他の関連記事を参照してください。