Webデザイナーがモバイルアプリを開発するための最高の選択肢～.NET MAUI Blazor～

はじめに

自分で作ったWebサイトをモバイルアプリに持ってくるとき、コンポーネントの要素や背景などモバイルアプリ用に同じようなものをまた作っている。
そんな経験ありませんか？

.NET MAUI Blazor Appでは、作ったHTML,CSSをそのまま表示し、さらにボタンのクリックによりネイティブ機能をシームレスに呼び出すことができます。

.NET MAUI BlazorはHTML,CSSをそのまま表示させます。

.NET MAUIではHTMLとCSSをそのまま表示して画面を作ることができます。

下の画像はBootStrap公式のサイトから持ってきたサンプルをコピペしたものです。

コピペしたHTML,CSSそのまま表示されていることが見て取れます。

CSSの追加も可能

当たり前ですがCSSの追加も簡単にできます。
Pagesフォルダに「NewPage.razor.css」ファイルを作りarticleクラスのバックグラウンドを変えました。

ネイティブ要素を重ねて表示可能

青色の「Float」と書いてあるボタンはXAMLで作ったフロートボタンです。
WebViewの中にモバイルネイティブコンポーネントを追加してみたり自由自在です。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:pages="clr-namespace:BlazorMAUIApp.Pages"
             x:Class="BlazorMAUIApp.Views.NewView"
             Title="NewView">

    <Grid>
        <!--↓これがHTML,CSSを表示するBlazorWebView-->
        <BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html">
            <BlazorWebView.RootComponents>
                <RootComponent Selector="#app" ComponentType="{x:Type pages:NewPage}" />
            </BlazorWebView.RootComponents>
        </BlazorWebView>
        <!--Grid内の要素は重なることをうまく使ってFloatボタンを作成した-->
        <Border HorizontalOptions="End"
                VerticalOptions="End"
                Margin="20,50">
            <Border.StrokeShape>
                <Ellipse/>
            </Border.StrokeShape>
            <Border.Shadow>
                <Shadow Offset="0.7,5" Opacity="0.5"/>
            </Border.Shadow>
            <!--↓もちろんここからClickedイベントハンドラーなどを使ってC#の処理につなげられる-->
            <Button x:Name="flootbtn"
                Text="Float"
                FontSize="24"
                TextColor="AntiqueWhite"
                HorizontalOptions="End"
                VerticalOptions="End">
                
            </Button>
        </Border>
    </Grid>
</ContentPage>

今回は浮かせましたが、メニューを上部に作ったり、左端に作ったりってのが簡単にできます。

もちろんそこからネイティブ機能を発火させることもできます。

Shellメニュー,Navigationなども簡単

ネイティブにShellをつけてFlyoutメニューを作りナビゲーションさせることも可能です。

WebViewからネイティブのページに移動なども

BlazorなのでJQueryを使わなくても簡単に要素のクリックイベントを発火できます。
これはBlazorWebViewのサインインボタンをクリックしたときNativePageというネイティブで作られたログイン用のページに遷移する処理です。

まずHTMLの最後の方に@codeとあるのでその中に以下を記述し

@code {
    private void OnNativeOpen()
    {
        Shell.Current.GoToAsync(nameof(NativePage));
    }
}

<header class="blog-header py-3">
    <div class="row flex-nowrap justify-content-between align-items-center">
      <div class="col-4 d-flex justify-content-end align-items-center">
        <a class="btn btn-sm btn-outline-secondary" @onclick="OnNativeOpen" href="#">Sign up</a>//←目的の要素に@onclickを追加し、関数名を書くだけ
      </div>
    </div>
  </header>

こんな感じで簡単にイベントを作り出すことができます。
(ナビゲーション用の前準備は必要だが割愛)

このまま昨日書いたログイン処理呼び出してしまえばネイティブでログイン処理も可能

さいごに

走り書きになりましたが、このMAUI Blazor Appかなりアプリづくりの可能性や生産性が向上する超便利機能になります。

そのほかC#を使う利点として以下があります。
・静的型付けで高速
・.NETの資産が使える(もちろんJavaScriptの資産も使えます)
・JavaScriptより高速

Webデザイナーの方はこのMAUI Blazorアプリを使って自分が作ったおしゃれなサイトをそのままコピペでモバイルアプリにしちゃいませんか？