祝 Ver.3リリース Fluent UI Blazorのすすめ

.NETラボ 勉強会 2023年9月
https://dotnetlab.connpass.com/event/294666/

#FluentUI
#Blazor

Transcript

1. 祝 Ver.3リリース Fluent UI Blazorのすすめ 株式会社SAKURUG エンジニアリングユニット 草場 友光 .NETラボ 2023年9月
2. 自己紹介 • 普段は主にシステムをAzureにモダナ イズする仕事をしています。 • コミュニティ活動を通じて知識をアッ プデートしています。 • 2022/08-2023 Microsoft MVP (Developer Technologies) • tomo_kusaba
3. 宣伝 【VISION】ひとの可能性を開花させる企業であり続ける VISIONに共感できる仲間募集中。
4. 注意 • 個人の見解・解釈が多分に入っています。 • 見解の相違・事実誤認などありましたらご指摘ください。 • 本日リリースの3.1.0の内容に基づいています。 • #dotnetlabでtweetすると左側に表示されます
5. 今日の目的 • Fluent UI Blazor 3がリリースされました。 • 機能アップポイントや使いこなしポイントを見ていきましょう！
6. Fluent UIとは • Microsoftが提唱するUIデザインシステム • W3C準拠 • Fast上に構築されている • このFluent UIの実装をするために用意されたMicrosoft 公 式のBlazorUIコンポーネントが Microsoft.Fast.Components.FluentUI • すべての主要なブラウザで動作する
7. <fluent-select> ... </fluent-select> Fastのタグを元にJavaScriptでDOM生成 <FluentSelect ... /> BlazorのUIコンポーネントとしてパラメータを受け取り、Fastのタグを出力 Fast上に構築とは？ JSInterop Fluent UIのCSS
8. Fluent UI Blazor導入方法 • パッケージを導入 dotnet add package Microsoft.Fast.Components.FluentUI • スタイル • WebAssemblyの場合index.htmlにServerの場合_Layout.cshtmlに <link href="{PROJECT_NAME}.styles.css" rel="stylesheet" /> <link href="_content/Microsoft.Fast.Components.FluentUI/css/reboot.css" rel="stylesheet" /> • using • _Imports.razorにusingを追加 @using Microsoft.Fast.Components.FluentUI • Program.csに以下を追加 builder.Services.AddFluentUIComponents(options => { options.HostingModel = BlazorHostingModel.WebAssembly; });
9. デザイントークン • デザインのカスタマイズとパーソナライゼーションを自動的に行う ことができます。 • これは、デザイントークンを設定することで実現することができま す。 • 例えば、「ライトモード」や「ダークモード」と呼ばれるようなスタイ ル設定をデザイントークンの機能によって設定することができま す。
10. アクセントカラー • アクセントカラーとはアプリケーションUIの中で象徴的な色を1つ 設定することができる • 例えば。。。。 • Excel→#107C41 • PowerPoint → #C43E1C • Word → #185ABD • Teams → #6264A7
11. レイアウトコンポーネント • Ver3よりレイアウトコンポーネントが追加されている • 今までBootstrapで行ってきたようなGridシステムのようなレ イアウトやスタックといったレイアウトが容易に行えるようになっ ています。 • これらの組み合わせによって容易に3ペインの画面などを作るこ とができます。
12. Grid • 12ポイントのグリッドシステム • 5種類のブレイクポイントを持っている • レイアウトをするのに最も多用するコンポーネント • BootstrapのGridから移行するのに違和感なく使うことができ ると思います。
13. Stack • 子コンポーネントを水平または垂直に配置する • 子コンポーネントがコンテナ内でどのように整列されるか？ • 右より？左より？センタリング？ • コンポーネント間の間隔を調整
14. 入力コンポーネント • FluentInputBaseを継承している • FluentInputBaseはBlazorのComponentBaseを継承し ている • 従って、EditFormに用意されているデータ検証が使える！！
15. Text Field • string?型の入力をサポートする入力コンポーネント
16. Number Field • 数値の入力をサポートする入力コンポーネント • ただし、EditFormで入力検証時には小数値の入力には注意が必 要
17. DatePicker/TimePicker • 日付や時刻をドロップダウンで選択し入力する機能があります。
18. Checkbox • いわゆるチェックボックスのFluentUIデザイン実装
19. Search Field • 検索要素のテキスト入力要素
20. Listbox/Combobox/Selectbox • コード上はこの3つはほぼ共通。 • ComboboxとSelectboxの違いは複数選択が可能かどうか＞ Selectboxは複数選択のオプションあり
21. DataGrid • 内部的にはQuickGridのコードを流用して作成されている • 表形式のデータを表示するために使用される → 来月詳しい使い方をユースケース別に解説していきます！
22. 他にもいろいろと便利なUI
23. Switch • bool値を入力する入力コンポーネント
24. Tabs • 水平方向と垂直方向のタブを実装することができる
25. Dialog • プライマリウィンドウまたは別のダイアログウィンドウにオーバー レイされるウィンドウ • 例えば、モーダルウィンドウとか・・・
26. CodeEditor • Monacoエディタのラッパー
27. Tooltip • ツールチップはマウスを合わせると情報を提示する部品
28. Panel • 画面の右側あるいは左側に表示されるダイアログ
29. AutoComplete • 3．1．0の新機能(new) • デモにて！！
30. テンプレートにFluent UIを導入した • BlazorテンプレートはHTML＋Bootstrap＋CSSで3ペインの 画面構成を行っている • しかし、せっかくBlazor使っているのだから基本HTMLは書きた くない！！ • Fluent UI Blazor 3よりLayout Componentsが入ってい る！ • きっとこれで可能！
31. MainLayout.razor <FluentLayout Style="height: 100%"> <FluentHeader>header</FluentHeader> <FluentStack Orientation="Orientation.Horizontal" Width="100%" Style="height:stretch"> <NavMenu /> <FluentBodyContent> <ChildContent> @Body </ChildContent> </FluentBodyContent> </FluentStack> <FluentFooter Style="bottom:auto;position:fixed;"> .NET Lab 2023/09 footer </FluentFooter> </FluentLayout> FluentLayout FluentHeader FluentStack(水平方向に) FluentFooter NavMen u FluentBodyContent
32. NavMenu.razor <FluentNavMenu Width="150"> <FluentNavMenuLink Icon="@(new Icons.Regular.Size24.Home())" Text="Home" Href="/" /> <FluentNavMenuLink Icon="@(new Icons.Regular.Size24.Calculator())" Text="Counter" Href="counter" /> <FluentNavMenuLink Icon="@(new Icons.Regular.Size24.Database())" Text="Fetch data" Href="fetchdata" /> </FluentNavMenu>
33. デモ
34. 今回使用したソースコード • https://github.com/tomokusaba/FluentUI3Sample
35. 参考文献 • Welcome to the Fluent UI Blazor components library • Microsoft Fluent UI Blazor components
36. おしまい おしまい