はじめに

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

www.publickey1.jp

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

Blazorとは

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

現在は、以下の５種類の 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++;
    }
}