Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
祝 Ver.3リリース Fluent UI Blazorのすすめ
Search
tomokusaba
September 22, 2023
Programming
0
1.2k
祝 Ver.3リリース Fluent UI Blazorのすすめ
.NETラボ 勉強会 2023年9月
https://dotnetlab.connpass.com/event/294666/
#FluentUI
#Blazor
tomokusaba
September 22, 2023
Tweet
Share
More Decks by tomokusaba
See All by tomokusaba
Fluent UI Blazor 5 (alpha)の紹介
tomokusaba
0
170
Generative AI for Beginners .NETの紹介
tomokusaba
1
280
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
360
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
330
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
430
Semantic Kernelのネイティブプラグインで知識拡張をしてみる
tomokusaba
0
240
.NET Conf 2024の振り返り
tomokusaba
0
290
.NET Conf 2024 .NETラボ 勉強会 2024年12月
tomokusaba
1
55
C#/.NETのこれまでのふりかえり
tomokusaba
1
270
Other Decks in Programming
See All in Programming
Empowering Developers with HTML-Aware ERB Tooling @ RubyKaigi 2025, Matsuyama, Ehime
marcoroth
1
230
サービスレベルを管理してアジャイルを加速しよう!! / slm-accelerate-agility
tomoyakitaura
1
160
コンテナでLambdaをデプロイするときに知っておきたかったこと
_takahash
0
180
Vibe Codingをせずに Clineを使っている
watany
17
6k
スモールスタートで始めるためのLambda×モノリス
akihisaikeda
2
160
AHC045_解説
shun_pi
0
460
複数ドメインに散らばってしまった画像…! 運用中のPHPアプリに後からCDNを導入する…!
suguruooki
0
470
マルチアカウント環境での、そこまでがんばらない RI/SP 運用設計
wa6sn
0
710
地域ITコミュニティの活性化とAWSに移行してみた話
yuukis
0
230
これだけは知っておきたいクラス設計の基礎知識 version 2
masuda220
PRO
24
6k
Do Dumb Things
mitsuhiko
0
420
PHP で学ぶ OAuth 入門
azuki
1
120
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
Raft: Consensus for Rubyists
vanstee
137
6.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.1k
Designing for Performance
lara
607
69k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
Embracing the Ebb and Flow
colly
85
4.6k
Site-Speed That Sticks
csswizardry
5
480
For a Future-Friendly Web
brad_frost
176
9.7k
Optimizing for Happiness
mojombo
377
70k
Transcript
祝 Ver.3リリース Fluent UI Blazorのすすめ 株式会社SAKURUG エンジニアリングユニット 草場 友光 .NETラボ
2023年9月
自己紹介 • 普段は主にシステムをAzureにモダナ イズする仕事をしています。 • コミュニティ活動を通じて知識をアッ プデートしています。 • 2022/08-2023 Microsoft
MVP (Developer Technologies) • tomo_kusaba
宣伝 【VISION】ひとの可能性を開花させる企業であり続ける VISIONに共感できる仲間募集中。
注意 • 個人の見解・解釈が多分に入っています。 • 見解の相違・事実誤認などありましたらご指摘ください。 • 本日リリースの3.1.0の内容に基づいています。 • #dotnetlabでtweetすると左側に表示されます
今日の目的 • Fluent UI Blazor 3がリリースされました。 • 機能アップポイントや使いこなしポイントを見ていきましょう!
Fluent UIとは • Microsoftが提唱するUIデザインシステム • W3C準拠 • Fast上に構築されている • このFluent
UIの実装をするために用意されたMicrosoft 公 式のBlazorUIコンポーネントが Microsoft.Fast.Components.FluentUI • すべての主要なブラウザで動作する
<fluent-select> ... </fluent-select> Fastのタグを元にJavaScriptでDOM生成 <FluentSelect ... /> BlazorのUIコンポーネントとしてパラメータを受け取り、Fastのタグを出力 Fast上に構築とは? JSInterop
Fluent UIのCSS
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; });
デザイントークン • デザインのカスタマイズとパーソナライゼーションを自動的に行う ことができます。 • これは、デザイントークンを設定することで実現することができま す。 • 例えば、「ライトモード」や「ダークモード」と呼ばれるようなスタイ ル設定をデザイントークンの機能によって設定することができま
す。
アクセントカラー • アクセントカラーとはアプリケーションUIの中で象徴的な色を1つ 設定することができる • 例えば。。。。 • Excel→#107C41 • PowerPoint
→ #C43E1C • Word → #185ABD • Teams → #6264A7
レイアウトコンポーネント • Ver3よりレイアウトコンポーネントが追加されている • 今までBootstrapで行ってきたようなGridシステムのようなレ イアウトやスタックといったレイアウトが容易に行えるようになっ ています。 • これらの組み合わせによって容易に3ペインの画面などを作るこ とができます。
Grid • 12ポイントのグリッドシステム • 5種類のブレイクポイントを持っている • レイアウトをするのに最も多用するコンポーネント • BootstrapのGridから移行するのに違和感なく使うことができ ると思います。
Stack • 子コンポーネントを水平または垂直に配置する • 子コンポーネントがコンテナ内でどのように整列されるか? • 右より?左より?センタリング? • コンポーネント間の間隔を調整
入力コンポーネント • FluentInputBaseを継承している • FluentInputBaseはBlazorのComponentBaseを継承し ている • 従って、EditFormに用意されているデータ検証が使える!!
Text Field • string?型の入力をサポートする入力コンポーネント
Number Field • 数値の入力をサポートする入力コンポーネント • ただし、EditFormで入力検証時には小数値の入力には注意が必 要
DatePicker/TimePicker • 日付や時刻をドロップダウンで選択し入力する機能があります。
Checkbox • いわゆるチェックボックスのFluentUIデザイン実装
Search Field • 検索要素のテキスト入力要素
Listbox/Combobox/Selectbox • コード上はこの3つはほぼ共通。 • ComboboxとSelectboxの違いは複数選択が可能かどうか> Selectboxは複数選択のオプションあり
DataGrid • 内部的にはQuickGridのコードを流用して作成されている • 表形式のデータを表示するために使用される → 来月詳しい使い方をユースケース別に解説していきます!
他にもいろいろと便利なUI
Switch • bool値を入力する入力コンポーネント
Tabs • 水平方向と垂直方向のタブを実装することができる
Dialog • プライマリウィンドウまたは別のダイアログウィンドウにオーバー レイされるウィンドウ • 例えば、モーダルウィンドウとか・・・
CodeEditor • Monacoエディタのラッパー
Tooltip • ツールチップはマウスを合わせると情報を提示する部品
Panel • 画面の右側あるいは左側に表示されるダイアログ
AutoComplete • 3.1.0の新機能(new) • デモにて!!
テンプレートにFluent UIを導入した • BlazorテンプレートはHTML+Bootstrap+CSSで3ペインの 画面構成を行っている • しかし、せっかくBlazor使っているのだから基本HTMLは書きた くない!! • Fluent
UI Blazor 3よりLayout Componentsが入ってい る! • きっとこれで可能!
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
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>
デモ
今回使用したソースコード • https://github.com/tomokusaba/FluentUI3Sample
参考文献 • Welcome to the Fluent UI Blazor components library
• Microsoft Fluent UI Blazor components
おしまい おしまい