Fluent UI Blazor 5 (alpha)の紹介

Fluent UI Blazor 5 (alpha)の紹介
.NETラボ 勉強会 2025年3月(LT成分多め)
https://dotnetlab.connpass.com/event/347207/

Transcript

1. Fluent UI Blazor 5 (alpha) の紹介 草場 友光 .NETラボ勉強会2025年03月
2. 自己紹介 • コミュニティ活動を通じて知識を アップデートしています。 • 2022/08-2025 Microsoft MVP (Developer Technologies) • tomo_kusaba
3. 注意 • 個人の見解・解釈が多分に入っています。 • 見解の相違・事実誤認などありましたらご指摘ください。 • #dotnetlabでtweetすると左側に表示されます
4. 今日の目的 • Fluent UI Blazor 5についての情報が出てきました。 • 今回はFluent UI Blazor 4と5の差分に着目してどのような変 更点があるか、今後Fluent UI Blazor5にアップデートしていく 上でどのような課題があるかについてお話ししていきたいと思い ます。
5. Fluent UI Blazorとは • Microsoftが提唱する最新のデザインフレームワーク Windows 11やMicrosoft 365やAzureのようなUI • かつては「Aero」とか「Metro」とかありました。 • 最近では、.NET Aspireのダッシュボードに採用されている
6. UIフレームワークの必要性について • UI専門のデザイナーがいれば必要性は感じないかも。 • しかし、エンジニアがUIも考える必要があるとしたらどうか？ • アクセシビリティの考慮 • アクセシビリティの考慮事項ってよくわからない • 色彩とか難しい • デザインってよくわからない • だからこそ、UIフレームワークとその規約に縛られてみる！
7. あなたのサービスは、 ある日あなたが色を 識別できなくなったとしても 不自由なく使えますか？
8. あなたのサービスは、 ある日あなたが目が 見えなくなったとしても 不自由なく使えますか？
9. 地球上のすべての個人と すべての組織が より多くのことを達成できるようにする。
10. きっと、Fluent UI Blazorの力で アクセシビリティもより効率よく 実装できるに違いない！
11. 色覚異常ってどれくらいいるの？ • 日本人において男性の20人に一人、女性の500人に一人の割合 • とても無視できる割合ではない！
12. 色覚異常へのWebデザインでの対処 • 色に頼った情報発信のしかたをしない。 • 色調の違いのみの違いに頼らない • 色数を増やさない • コントラストを高くする
13. Fluent UI Blazorでの実装及び規約 • 基本的に製品を表すAccentColorを1色のみ指定できるのみ。 • 自動的に文字のコントラストを確保するデザイントークンが実装さ れている。 • 規約上、AccentColor以外はUIの階層構造を表すグレースケー ルのみの色。 • 例外的にシステムから、警告、エラーなどを表すセマンティックカ ラーをつけることができるとされているが説明文の添付の配慮が 求められている。
14. Fluent UI Blazor 5移行の背景 • 現行のFluent UI Blazor 4のベースとなっているFastプロ ジェクトの再構築 このため、現在使用しているFastがメンテされなくなった。 • https://github.com/microsoft/fast/issues/6955 • FastがメンテされないことでFluent UI Blazor側で修正不能 なバグの例：EditFormを使用したFluentNumberFieldで double型を使用したのに小数点を含む数値が入力できない。 https://github.com/microsoft/fluentui- blazor/issues/1175
15. FlunetUI Web Components v3 • 最新のFluent UI Web コンポーネント 3/8現在 v3.0.0-beta.83 • カスタマイズ可能 • パフォーマンス最適化 • コンポーネントをスリム化 • 最新のJavaScriptフレームワークで動作 • WCAG2.1 準拠 • コードでFluent Design Launguageの変更を常に把握 • W3C Webコンポーネント標準に基づいて構築
16. 昨年の.NET Conf 2024でのセッション • 「Next-Gen」としてFluent UI Blazor 5の話があった
17. Fluent UI Blazor 5 • FluentUI Web Components v3への対応 ｖ2であったコンポーネントがすべてあるとは限らない • また、Fluent UI Blazor 4で独自対応していたコンポーネント も移植されているとは限らない • プロパティなどFluentUI Web Components v3準拠のため 変更多数 →ここが破壊的変更につながっている
18. 現時点のコンポーネント数比較 ｖ4 ｖ5
19. コンポーネントについて • 今後も、コンポーネントの数は拡充されていく予定。 • ただし、Fluent UI Blazor 4にあったコンポーネントが Fluent UI Blazor 5にある保障はない。
20. サポートについて • Fluent UI Blazor 4は2026年11月までのサポートを予定 ただし、新しい機能を2026年11月まで追加しつつけるという意 味ではない。 • Fluent UI Blazor 5がv4の代替として十分に成熟したと（コン トリビューターが）確信できるレベルに達した段階でメンテナンス モードに入ります。
21. 移行について(Appearance) • ボタンの性質・・・実質的には色を示すプロパティの変更 v3 & v4 v5 Appearance.Neutual ButtonAppearance.Default Appearance.Accent ButtonAppearance.Primary Appearance.Lightwieght ButtonAppearance.Transparent Appearance.Outline ButtonAppearance.Outline Appearance.Stealth ButtonAppearance.Default Appearance.Filled ButtonAppearance.Default
22. 移行について(レイアウト) • FluentLayoutコンポーネントの追加 • FluentHeader,FluentBodyContent,FluentFooter,Flu entMainLayoutの削除
23. 移行について(GridItem) • プロパティがC#の名前付け規則に合うようにパスカルケースに 変更されました。 xs, sm, md, lg, xl, xxl => Xs, Sm, Md, Lg, Xl, Xxl
24. 移行について(Label) • ラベルは入力フィールドのラベル付けに使用されている。 • これまでのようにタイポグラフィを反映したテキストを表示する場 合は「Text」という新しいコンポーネントを使用します。
25. 移行について(TextArea) • Row, Colプロパティの削除 要素を行数や文字列数でサイズを設定するプロパティ • 現時点では、コンポーネントの高さと幅を自由に定義する機能が ない
26. 移行について(Persona) • Avatarという名前のコンポーネントに変更 • Fluent UI WebComponentに沿った変更
27. 移行について(Panel) • Drawerに変更 • Fluent UI WebComponentに沿った変更
28. 移行について(ProgressRing) • Spinnerに変更 • Fluent UI WebComponentに沿った変更
29. まとめ • Fluent UI Blazor 4から5への移行はかなり大きな変更が必 要。 • 現在稼働中のシステムのFluent UI Blazorの移行は慌てる必 要はない。 • 2026年11月までにノウハウを固めつつ移行計画を進めるのが よい。 • 新規プロジェクトに関しては最初からv5で計画するのが合理的。
30. おしまい おしまい