Tweet
Tweet

Slide 1

Slide 1 text

祝 Ver.3リリース Fluent UI Blazorのすすめ 株式会社SAKURUG エンジニアリングユニット 草場 友光 .NETラボ 2023年9月

Slide 2

Slide 2 text

自己紹介 • 普段は主にシステムをAzureにモダナ イズする仕事をしています。 • コミュニティ活動を通じて知識をアッ プデートしています。 • 2022/08-2023 Microsoft MVP (Developer Technologies) • tomo_kusaba

Slide 3

Slide 3 text

宣伝 【VISION】ひとの可能性を開花させる企業であり続ける VISIONに共感できる仲間募集中。

Slide 4

Slide 4 text

注意 • 個人の見解・解釈が多分に入っています。 • 見解の相違・事実誤認などありましたらご指摘ください。 • 本日リリースの3.1.0の内容に基づいています。 • #dotnetlabでtweetすると左側に表示されます

Slide 5

Slide 5 text

今日の目的 • Fluent UI Blazor 3がリリースされました。 • 機能アップポイントや使いこなしポイントを見ていきましょう！

Slide 6

Slide 6 text

Fluent UIとは • Microsoftが提唱するUIデザインシステム • W3C準拠 • Fast上に構築されている • このFluent UIの実装をするために用意されたMicrosoft 公 式のBlazorUIコンポーネントが Microsoft.Fast.Components.FluentUI • すべての主要なブラウザで動作する

Slide 7

Slide 7 text

... Fastのタグを元にJavaScriptでDOM生成 BlazorのUIコンポーネントとしてパラメータを受け取り、Fastのタグを出力 Fast上に構築とは？ JSInterop Fluent UIのCSS

Slide 8

Slide 8 text

Fluent UI Blazor導入方法 • パッケージを導入 dotnet add package Microsoft.Fast.Components.FluentUI • スタイル • WebAssemblyの場合index.htmlにServerの場合_Layout.cshtmlに • using • _Imports.razorにusingを追加 @using Microsoft.Fast.Components.FluentUI • Program.csに以下を追加 builder.Services.AddFluentUIComponents(options => { options.HostingModel = BlazorHostingModel.WebAssembly; });

Slide 9

Slide 9 text

デザイントークン • デザインのカスタマイズとパーソナライゼーションを自動的に行う ことができます。 • これは、デザイントークンを設定することで実現することができま す。 • 例えば、「ライトモード」や「ダークモード」と呼ばれるようなスタイ ル設定をデザイントークンの機能によって設定することができま す。

Slide 10

Slide 10 text

アクセントカラー • アクセントカラーとはアプリケーションUIの中で象徴的な色を1つ 設定することができる • 例えば。。。。 • Excel→#107C41 • PowerPoint → #C43E1C • Word → #185ABD • Teams → #6264A7

Slide 11

Slide 11 text

レイアウトコンポーネント • Ver3よりレイアウトコンポーネントが追加されている • 今までBootstrapで行ってきたようなGridシステムのようなレ イアウトやスタックといったレイアウトが容易に行えるようになっ ています。 • これらの組み合わせによって容易に3ペインの画面などを作るこ とができます。

Slide 12

Slide 12 text

Grid • 12ポイントのグリッドシステム • 5種類のブレイクポイントを持っている • レイアウトをするのに最も多用するコンポーネント • BootstrapのGridから移行するのに違和感なく使うことができ ると思います。

Slide 13

Slide 13 text

Stack • 子コンポーネントを水平または垂直に配置する • 子コンポーネントがコンテナ内でどのように整列されるか？ • 右より？左より？センタリング？ • コンポーネント間の間隔を調整

Slide 14

Slide 14 text

入力コンポーネント • FluentInputBaseを継承している • FluentInputBaseはBlazorのComponentBaseを継承し ている • 従って、EditFormに用意されているデータ検証が使える！！

Slide 15

Slide 15 text

Text Field • string?型の入力をサポートする入力コンポーネント

Slide 16

Slide 16 text

Number Field • 数値の入力をサポートする入力コンポーネント • ただし、EditFormで入力検証時には小数値の入力には注意が必 要

Slide 17

Slide 17 text

DatePicker/TimePicker • 日付や時刻をドロップダウンで選択し入力する機能があります。

Slide 18

Slide 18 text

Checkbox • いわゆるチェックボックスのFluentUIデザイン実装

Slide 19

Slide 19 text

Search Field • 検索要素のテキスト入力要素

Slide 20

Slide 20 text

Listbox/Combobox/Selectbox • コード上はこの3つはほぼ共通。 • ComboboxとSelectboxの違いは複数選択が可能かどうか＞ Selectboxは複数選択のオプションあり

Slide 21

Slide 21 text

DataGrid • 内部的にはQuickGridのコードを流用して作成されている • 表形式のデータを表示するために使用される → 来月詳しい使い方をユースケース別に解説していきます！

Slide 22

Slide 22 text

他にもいろいろと便利なUI

Slide 23

Slide 23 text

Switch • bool値を入力する入力コンポーネント

Slide 24

Slide 24 text

Tabs • 水平方向と垂直方向のタブを実装することができる

Slide 25

Slide 25 text

Dialog • プライマリウィンドウまたは別のダイアログウィンドウにオーバー レイされるウィンドウ • 例えば、モーダルウィンドウとか・・・

Slide 26

Slide 26 text

CodeEditor • Monacoエディタのラッパー

Slide 27

Slide 27 text

Tooltip • ツールチップはマウスを合わせると情報を提示する部品

Slide 28

Slide 28 text

Panel • 画面の右側あるいは左側に表示されるダイアログ

Slide 29

Slide 29 text

AutoComplete • 3．1．0の新機能(new) • デモにて！！

Slide 30

Slide 30 text

テンプレートにFluent UIを導入した • BlazorテンプレートはHTML＋Bootstrap＋CSSで3ペインの 画面構成を行っている • しかし、せっかくBlazor使っているのだから基本HTMLは書きた くない！！ • Fluent UI Blazor 3よりLayout Componentsが入ってい る！ • きっとこれで可能！

Slide 31

Slide 31 text

MainLayout.razor header @Body .NET Lab 2023/09 footer FluentLayout FluentHeader FluentStack(水平方向に) FluentFooter NavMen u FluentBodyContent

Slide 32

Slide 32 text

NavMenu.razor

Slide 33

Slide 33 text

デモ

Slide 34

Slide 34 text

今回使用したソースコード • https://github.com/tomokusaba/FluentUI3Sample

Slide 35

Slide 35 text

参考文献 • Welcome to the Fluent UI Blazor components library • Microsoft Fluent UI Blazor components

Slide 36

Slide 36 text

おしまい おしまい