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
820
祝 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
Semantic Kernelの最新状況及び入門
tomokusaba
0
8
Fluent UI Blazor 最新Update
tomokusaba
1
200
アクセシビリティの観点からみたFluent UI Blazorのすすめ
tomokusaba
1
270
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
280
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
1.2k
プロンプトエンジニアリング入門
tomokusaba
2
1.5k
Sementic Kernelのネイティブ関数について
tomokusaba
0
1k
C#でのPlaywrightを使ったE2Eテストの実際
tomokusaba
0
680
「インフラ初心者」…からのPlaywright Testing
tomokusaba
1
370
Other Decks in Programming
See All in Programming
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
小さな開発会社を作った理由
polidog
0
1.9k
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
780
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた
tomiyan
0
790
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
Rustのweb開発を助ける 便利なツール紹介
yuki0418
1
190
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
Temporalを取り巻く仕様を整理する
sajikix
0
110
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
A Philosophy of Restraint
colly
200
16k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
Infographics Made Easy
chrislema
238
18k
Music & Morning Musume
bryan
43
5.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Building Applications with DynamoDB
mza
89
5.8k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
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
おしまい おしまい