Web開発者が始める .NET MAUI Blazor App

Web開発者が始める .NET MAUI Blazor App

• 1.
  Web開発者が始める.NET MAUI Blazor App 株式会社SAKURUG エンジニアリングユニット 草場友光 .NET ラボ 2022年6月
• 2.
  自己紹介 • 普段は主にWebFormsアプリ の保守のお仕事をしてます。 • 古めのシステムが多いので時 代に取り残されぬよう新しい技 術を一つでも入れるよう日々努 力しています。 •tomo_kusaba
• 3.
  宣伝 【VISION】ひとの可能性を開花させる企業であり続ける VISIONに共感できる仲間募集中。
• 4.
  注意 • 個人の見解・解釈が多分に入っています。 • 見解の相違・事実誤認などありましたらご指摘ください。 •#dotnetlabでtweetすると右側に表示されます
• 5.
  今日の目的 • .NET MAUIがとうとうGAしました。 •.NET MAUI Blazor Appはその中でもBlazor技術を使い Android、iOS向けのモバイル開発ができるフレームワークで す • Web開発者視点でどれだけ違和感なくモバイル開発に入ってい けるかを紹介していきます。
• 6.
  本日やってることは。。。 • Blazor WebAssemblyで実装してWebページとして公開しても 変わらないとかいう突っ込みはなしで！ •きっと、それぞれのプラットフォームでのネイティブアプリ ケーションになるというところに価値があるのです。
• 7.
  .NET MAUIとは ネイティブのモバイルアプリやデスクトップアプリを作成するためのクラスプラットフォー ムフレームワーク
• 8.
  .NET MAUI BlazorAppとは？ • Android、iOS、macOS、Windowsにデプロイできる • Razorコンポーネントを使用可能 • Blazor WebAssemblyと同じ感覚でアプリケーション開発可能 • あくまでUIを構築する手段としてのBlazor • .NET MAUIの提供するGPSや加速度APIなどのネイティブAPI へのアクセスを含むさまざまなAPIが使用可能
• 9.
  .NET MAUI BlazorAppのしくみ BlazorWebVeiwコントロール Blazorコード
• 10.
  プロジェクト構成 Platforms・Resourcesという見慣れ ないフォルダ 他にも、MainPage.xamlや Program.csではなく MauiProgram.csがエントリーポイ ントになっている 基本的には、Blazor WebAssembly のプロジェクト構造に似てる！
• 11.
  前提条件 • Visual Studio2022Previewおよび.NET Multi-Platform App UI開発ワークロードをインストール • Microsoft Edge WebView2 • Android Emulatorのパフォーマンス向上のためHyper-Vおよ びHAXM(Intel CPU)の有効化
• 12.
  プロジェクトを作ろう • .NET MAUIBlazorアプリのテンプレートを選択
• 13.
  Windowsで動かしてみた
• 14.
  Androidエミュレータで動かしてみた
• 15.
  もちろん、ホットリロードもできる！ • Androidエミュレータに対してホットリロード
• 16.
  WebAPIをコールしてみた • 通常通りの実装でWebAPIを呼べる • だって、C#なんだもん
• 17.
  Razorコンポーネント • WebAPIからの情報を表示す るだけならBlazor WebAssemblyと全く同じ • これで、モバイル向けネイ ティブアプリケーションがで きるのはすごい
• 18.
  UIコンポーネントを入れてみた • Blazorで画面をつくるためにHTML使いたくないよぉ！ • 個人的に使いなれた「Radzon」を入れてみる
• 19.
  Radzen導入方法 • 「Radzen.Blazor」をNuget
• 20.
  Radzen導入方法 • 「_Imports.razor」に@using Radzenと@using Radzen.Blazorの2行を追加
• 21.
  Radzen導入方法 • 「wwwroot/index.html」にcssとjsを追加
• 22.
  Radzenを使う • Radzenのタグが使えることを確認しよう
• 23.
  デバイス情報の読み取り • DeviceInfoで読み取りができる。 • 詳しくはDocs参照
• 24.
  デバイスセンサーへのアクセス • 例えば加速度センサーDocsのサンプル 日本語訳が微妙すぎてこの引数がよ くわからん 次のコード例は、加速度計の変更を監視する方法を示しています。 イン スタンスはAccelerometer.Default メソッドに ToggleAccelerometer 渡されます。 ？？ 次のコード例は、加速度計の変更を監視する方法を示しています。 イン スタンスは ToggleAccelerometerメソッドに Accelerometer.Default が渡されます。
• 25.
  Android実機で動かしてみたその1 • 物理デバイスでデバッグする方法 ビルド番号を7回タップ→ 開発者向けオプションメ ニューが出る
• 26.
  Android実機で動かしてみたその1
• 27.
  Android実機で動かしてみたその1
• 28.
  Android実機で動かしてみたその2 • 署名なしでビルド→apkを作る • テスト用途ですので公開用には署名してビルドしてください
• 29.
  Android実機で動かしてみたその2
• 30.
  Android実機で動かしてみたその2
• 31.
  参考文献 • Radzen BlazorComponets Get Started • Android用の .NET MAUI アプリを発行する • BlazorWebView を使用して .NET MAUI アプリで Blazor Web アプリをホストする • .NET MAUIBlazor アプリを構築する
• 32.
  おしまい おしまい