要件定義の不安をなくす。要件定義の不安をなくす。ユニファのバックエンド分割に学ぶイノベーションメタバース開発に必要な技術の基本知識をおさらい。Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。onlyから脱却して、マルチプラットフォーム戦略を打ち出しています。その戦略は、デスクトップ向けのGUIアプリにもおよび、マルチプラットフォームで動作するアプリの開発ができる、さまざまなライブラリやフレームワークが提供されるようになってきました。本連載では、Windows環境におけるマルチプラットフォームGUI技術(.NET以外も含む)について、(主にC#の)サンプルコードを交えて解説します。開始、停止ボタン最後に参考文献はじめに本連載では、Windows環境で開発可能なマルチプラットフォームGUI技術を解説します。Blazorを取り上げます。デスクトップとモバイル(Android)に対応した簡単なアプリを作成して、フレームワークの使い方を解説します。対象読者C#とWebシステムの基礎的な知識がある方を対象とします。C#の基本文法などの解説は割愛します。Blazorを紹介します。Blazorという名前は、ご存じの方も多いでしょう。Blazorのことです。Blazorは、C#とWeb技術(HTMLやCSS)でWebアプリが作れるフレームワークです。Blazorチュートリアル」などを参照してください。MAUI上で動作させるものです。Blazorでは、Webブラウザーでの表示ではなく、Blazorが動作するBlazorWebViewコントロールを利用します。WebAssembly)がありました。WebAssemblyでは、ローカルで動作するWebサーバーを利用)。それに対してBlazorWebViewコントロールでは、Webサーバーを介さずに直接Blazorコードを実行します。Blazorのプロジェクトを作成してみましょう。動作の確認プロジェクト名や場所などを適宜設定すると、プロジェクトが作成されます。ここで早速、動作を確認してみましょう。Machineにして、緑の▶をクリックするか、メインメニューのデバッグからデバッグの開始を選択します。Blazorを利用したことがあれば、見覚えのある画面だと思います。Blazorとは同じものになっています。違いは、EdgeやChromeなどのWebブラウザ上で動作するのではなく、単体のアプリとして動作している点です。次に、Androidアプリとして実行してみましょう。SDK、Androidエミュレーターの作成については、前回までの記事を参照してください。Studioの実行環境を、Androidエミュレーターにして、デバッグを開始します。実行環境こちらも、汎用ブラウザが起動するのではなく、単体のアプリとして動作します。画面は、いわゆるレスポンシブデザインとなっているため、スマートフォンなどのサイズや向きに応じて、デザインが変更されます。新規作成されたプロジェクトのファイル/フォルダー構成は、次のようになっています。MAUIファイルに加えて、BlazorWebViewが参照するファイルも含まれていますので、テンプレートプロジェクトとはいえ、少々複雑な構成になっています。前々回の記事を参照していただければ、どのようなフォルダ/ファイルが増えているかが確認できると思います。画面レイアウトと、各部分を定義するファイルは、次のような構造になっています。画面レイアウトと定義ファイルSharedフォルダにあるMainLayout.razorは、画面レイアウトのベースとなるコンポーネントです。MainLayoutには、メニューコンポーネントと各コンテンツを表示する領域があり、メニューの項目を選択することで、コンテンツの内容が差し替わるようになっています。新しいページを追加するには、プロジェクトのPagesフォルダ以下にrazorファイルを追加し、SharedフォルダにあるNavMenu.razorを編集します。MAUIの処理があり、その後にBlazorWebViewが実行される形となります。MAUIから、次のように、BlazorWebViewを利用するコードが追加されています。MAUIアプリのメイン画面を定義する、MainPage.xamlでは、次のようになっています。</BlazorWebView></ContentPage>メインページでは、<BlazorWebView>タグによるBlazorWebViewコントロールの定義だけです。BlazorWebViewコントロールでは、HostPageプロパティで、起動時に参照するHTMLファイル(ここでは、wwwrootフォルダにあるindex.html)を指定しています。<BlazorWebView>タグ内には、BlazorWebViewのルートコンポーネント(razorコンポーネント)の定義もあります。RootComponentsでは、ComponentTypeプロパティでrazorコンポーネント名(Main.razor)と、Selectorプロパティで、コンポーネントを配置する位置を指定しています。#appは、index.htmlで定義しているHTML要素内のID属性です。index.htmlでは、次のように定義されています。id="app">Loading...</div>~略~アプリの起動時は、Loading...というテキストが表示され、BlazorWebViewが正常に実行されれば、そのテキストの位置に配置されることになります。index.htmlから呼び出されるMain.razorでは、RouteViewとしてMainLayoutコンポーネントが定義されています。