Fluent UI を理解する 2022/12/1 第 5 回 Japan M365 Dev User Group 勉強会 篠原 敬志 (@karamem0)

⾃⼰紹介 篠原敬志 (Takashi Shinohara) アバナード株式会社 マネージャー Microsoft MVP for Office Development (2018-2022) Microsoft MVP for M365 Development (2022-) Japan M365 Dev User Group 運営 SharePoint をベースとしたアプリケーション開発に従事していました。近 年は Power Platform、Microsoft 365、Microsoft Azure を使った DX の⽀援を実施しています。アジャイル コーチ/スクラム マスターとしても 活動しています。 最近はずっと React 書いています。

本⽇のゴール Fluent UI にかかわる疑問にお答えします Fluent って どういう意味？ Fluent UI って どうやって使うの？ なんかいろいろ バージョンがあって わからない…

Fluent Design System

Fluent Design System マイクロソフトが提唱する新しいデザイン システム (Build 2017) デバイスやプラットフォームの違いに関わらず⼀貫した UX を提供する Windows 10/11 や Microsoft 365 Apps は Fluent Design System を採⽤している Fluent = 流暢な、すらすらとした、ぺらぺらな

Fluent の 5 ⼤基本要素 Light (光) ユーザーがフォーカスするべき領域を光で表現 Depth (奥⾏き) 要素を複数のレイヤーからなる重なりで表現 Motion (動き) ウィンドウとスクリーンのシームレスな動きの表現 Material (素材) ユーザーのインタラクションを促す素材の表現 Scale (スケール) 2D だけではなく 3D も含めて⼀貫性を持つ表現

Metro から Fluent へ (SharePoint) Metro UI (SharePoint 2013) Fluent UI (SharePoint Online)

Metro から Fluent へ (Windows) Metro UI (Windows 8.1) Fluent UI (Windows 11)

Fluent UI

Fluent UI Fluent Design System を実現する UI フレームワーク React Web Components Windows (WinUI) iOS Android Cross Platform MacOS

Fluent UI vs Material UI (MUI)

Fluent UI React https://github.com/microsoft/fluentui/ @fluentui/react (v8) @fluentui/react-northstar (v0) @fluentui/react-components (v9)

@fluentui/react (v8) https://developer.microsoft.com/ja-jp/fluentui/ Office 365 製品との統合に最適な UI フレームワーク React 16.8 以上 2017 年 1 ⽉ office-ui-fabric-react v1.0 リリース 2017 年 2 ⽉ SPFx v1.0 リリース 2020 年 3 ⽉ @fluentui/react に改名 2021 年 2 ⽉ @fluentui/react v8.1 リリース 2018 年 11 ⽉ Yo Office v1.0 リリース

@fluentui/react-northstar (v0) https://fluentsite.z22.web.core.windows.net/ Teams アプリ開発に最適な UI フレームワーク React 16.8 以上または React 17 (React 18 のサポートはなし) 2017 年 3 ⽉ Teams サービス開始 2022 年 5 ⽉ @microsoft/teams-js v2.0 リリース 2018 年 7 ⽉ @fluentui/northstar v0.1 リリース 2017 年 5 ⽉ @microsoft/teams-js v1.0 リリース

@fluentui/react-components (v9) https://react.fluentui.dev/ Microsoft 365 開発に最適な UI フレームワーク React 16.8 以上 2020 年 6 ⽉ 将来の統合についてアナウンス 2022 年 6 ⽉ @fluentui/react-components v9.0 リリース

v8 + v0 = v9 Microsoft is a large organization with many efforts. Customers were running into issues working on M365 code which needed to integrate with Teams, which was building out Stardust separately from Fabric. This diversion led to fragmentation, causing partners to build their apps twice. We recognize that as a huge issue. As a result, we have decided to converge the two libraries to provide one solution. (意訳: 別々に開発しちゃったよゴメンね、でもマージするから許してね) https://github.com/microsoft/fluentui/wiki/FAQ---Fabric-and-Stardust-to-Fluent-UI

v9 Component Roadmap 基本的なコンポーネントは Stable なもののかなりのコンポーネントが Unstable や TBD 現時点では v8 や v0 からいきなり v9 に乗り換えるのは難しい https://github.com/microsoft/fluentui/wiki/Fluent-UI-React-v9-Component- Roadmap

コンポーネントの⽐較 https://jpm365dev20222101stprd.z23.web.core.windows.net/

拡張コンポーネント @pnp/spfx-controls-react SPFx に特化したコントロールのセット @fluentui/react-teams Teams に特化したテーマやコントロールのセット

アイコンセット (SVG) v8 @fluentui/react-icons-mdl2 または @fluentui/react-icons-mdl2-branded https://uifabricicons.azurewebsites.net/ 基本フォント アイコンSVG を使⽤する場合は initializeIcons() や registerIcons() branded は Microsoft Fabric Assets License v0 @fluentui/react-icons-northstar https://fluentsite.z22.web.core.windows.net/0.65.0/icon-viewer v9 @fluentui/react-icons https://react.fluentui.dev/?path=/docs/concepts-developer-icons-icons- catalog--page

カスタム テーマ v8 https://fluentuipr.z22.web.core.windows.net/heads/master/theming- designer/index.html v0 https://fluentsite.z22.web.core.windows.net/0.65.0/theming ライト、ダーク、ハイコントラストを既定で提供 v9 https://react.fluentui.dev/?path=/docs/concepts-developer-theming--page ライト (v8 互換)、ダーク (v8 互換)、ライト (v0 互換)、ダーク (v0互換)、ハイコントラスト (v0 互換) を既定で提供

まとめ Microsoft 365 開発をする上では Fluent UI の理解は必須 Microsoft 365 開発以外でも UI フレームワークの選択肢となりうる v9 に期待 (いまはまだその時ではない)

ご清聴ありがとうございました 質問はありますか？