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

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