$30 off During Our Annual Pro Sale. View Details »

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

tomokusaba
September 22, 2023

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

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

#FluentUI
#Blazor

tomokusaba

September 22, 2023
Tweet

More Decks by tomokusaba

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  7. ...
    Fastのタグを元にJavaScriptでDOM生成

    BlazorのUIコンポーネントとしてパラメータを受け取り、Fastのタグを出力
    Fast上に構築とは?
    JSInterop
    Fluent UIのCSS

    View Slide

  8. 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;
    });

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  29. AutoComplete
    • 3.1.0の新機能(new)
    • デモにて!!

    View Slide

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

    View Slide

  31. MainLayout.razor

    header
    Style="height:stretch">



    @Body




    .NET Lab 2023/09 footer


    FluentLayout
    FluentHeader
    FluentStack(水平方向に)
    FluentFooter
    NavMen
    u
    FluentBodyContent

    View Slide

  32. NavMenu.razor

    Icon="@(new Icons.Regular.Size24.Home())"
    Text="Home"
    Href="/" />
    Icon="@(new Icons.Regular.Size24.Calculator())"
    Text="Counter"
    Href="counter" />
    Icon="@(new Icons.Regular.Size24.Database())"
    Text="Fetch data"
    Href="fetchdata" />

    View Slide

  33. デモ

    View Slide

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

    View Slide

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

    View Slide

  36. おしまい
    おしまい

    View Slide