あるSEのつぶやき・改

IT・システム開発に関することをつぶやいています。

強力なクロスプラットフォーム技術になるBlazorでAndroid/iOSアプリを試してみた


はじめに

「.NET Conf Focus on Blazor」というオンラインイベントで、Blazor(ブレイザー)でAndroid/iOSアプリを開発できる「Mobile Blazor Bindings」が発表されました。

www.publickey1.jp

最近はクロスプラットフォーム技術が熱いですが、Blazor がその仲間入りを果たしたわけですね。

Blazorとは

Blazor は、元々は C# で WebAssembly を開発することができるようにする Microsoft の実験的プロジェクトだったのですが、今ではその範囲を超えてクロスプラットフォーム技術と呼ぶのに遜色のない技術となっています。

現在は、以下の5種類の Blazor があるとのこと。

  • Blazor Server
    • ASP.NET を用いサーバーで動作
  • Blazor WebAssembly
    • WebAssembly
  • Blazor PWA
    • PWA(Progressive Web Application)
  • Blazor Hybrid
    • ElectronやWebViewでデスクトップアプリケーション
  • Blazor Native
    • Android/iOSのモバイル技術

ただしBlazor PWA、Blazor Hybrid、Blazor Nativeは実験的プロジェクトです。

とはいえ、Blazor はかなりのポテンシャルを持ったプロジェクトだと言えます。

www.publickey1.jp

devblogs.microsoft.com

クロスプラットフォーム技術のこれから

クロスプラットフォーム技術といえば、以下のものが有名です。

  • React, React Native
  • Xamarin
  • Flutter
  • Kotlin

現在は、React, React Native というフロントエンド、モバイル開発技術が有力ですが、個人的な見解として、長い目で見れば Kotlin が主流になっていくのではないかと考えています。

Kotlinは、Android アプリのネイティブ開発を行うことができる人気の言語です。

しかも、システム開発でスタンダードの Java と 100% の互換性を持っているため、サーバーサイド、例えば Spring Boot での開発も Kotlin で行うことができます。

Kotlin はそれだけでなく、Kotlin/Native により Android/iOS アプリやデスクトップアプリ、WebAssembly の開発を行うこともできます(現在はプレビュー版)。

さらに、Kotlin for JavaScript により、Kotlin で React の開発まで行うことができます。

これは相当のポテンシャルで、Kotlin を覚えれば、まさにすべての環境で開発を行えるようになります。

今回発表された Blazor は Kotlin に匹敵するポテンシャルを秘めていると言えるでしょう。

C# ですべての開発ができるというのは、Microsoft がすでに実現していることですが、技術体系が分散している嫌いがあります。

Blazor は C# で開発しますが、Blazor の流儀ですべての開発ができるということで一歩進んでいると言えるのではないでしょうか。

まだ実験的プロジェクトという位置づけではあるものの、一部は正式リリースが決まっているので、他のプロジェクトも正式リリースを迎える可能性があります。非常に期待のできるプロジェクトですね。

今回発表された「Mobile Blazor Bindings」で実際に Android/iOS のアプリを作ってみました。

Mobile Blazor Bindings

まずは開発環境を構築します。

.NET Core 3.0 or 3.1 SDK をインストールします。

dotnet.microsoft.com

次に、Visual Studio (Windows) または Visual Studio for Mac で ASP.NET の Web開発環境と Xamarin のモバイル開発環境を用意します(詳細は割愛)。

Blazor のテンプレートをインストールします。

dotnet new --install Microsoft.MobileBlazorBindings.Templates::0.2.42-preview

dotnet new -i Microsoft.MobileBlazorBindings.Templates::0.1.173-beta

(2020.2.15 Add)
テンプレートのバージョンを0.2.42-previewにすることで、iOSの問題を回避できます。
(/2020.2.15 Add)

プロジェクトを作成します。

dotnet new mobileblazorbindings -o MyApp

Visual Studio で作成したプロジェクトを開くと、以下のように共通部分とAndroid、iOSにプロジェクトが別れていることが分かります。

f:id:fnyablog:20200118092120p:plain:w320

なお、Xcodeは11.3以降である必要があります。

コードを確認

デフォルトで組み込まれているサンプルコードを確認します。

HelloWorld.razor

<ContentPage>
    <StackLayout Margin="new Thickness(20)">

        <Label Text="Hello, World!"
               FontSize="40" />

        <Counter />

    </StackLayout>
</ContentPage>

Counter.razor

<Frame CornerRadius="10" BackgroundColor="Color.LightBlue">

    <StackLayout Orientation="StackOrientation.Horizontal" HorizontalOptions="LayoutOptions.Center">

        <Button Text="Increment" OnClick="@IncrementCount" />

        <Label Text="@("The button was clicked " + count + " times")"
               FontAttributes="FontAttributes.Bold"
               VerticalTextAlignment="TextAlignment.Center" />

    </StackLayout>

</Frame>

@code
{
    int count;

    void IncrementCount()
    {
        count++;
    }
}

カウントアップするだけのシンプルなアプリですね。

Android で実行

Visual Studio の以下の部分より Android でビルド・実行します。

f:id:fnyablog:20200118093151p:plain:w320

すると、Android エミュレータで無事に実行することができました。

f:id:fnyablog:20200118093646g:plain:w320

iOS で実行

iOS も Android と同じ要領でシミュレータで実行します。

ですが、PlatformNotSupportedException が発生してしまいました。

これは issue にも上がっているのですが、現在対応中の問題のようです。

github.com

残念ながらワークアラウンドもないようなので、対応が済むのを待つしかないようです。

(2020.2.15 Add)
Microsoft.MobileBlazorBindings.Templates の0.2.42-preview をインストールして、プロジェクトを再作成することで問題を解消することができます。

f:id:fnyablog:20200215191538g:plain:w320

(/2020.2.15 Add)

おわりに

Blazor の概要とクロスプラットフォーム技術を見たあとに、実際に「Mobile Blazor Bindings」を動かしてみました。

iOS で動作しないというのは残念でしたが、まだ実験的プロジェクトですし気長に対応を待つのがよいかと思います。

クロスプラットフォーム技術もますますおもしろくなってきましたね。