Fluent UI を理解する / Understanding Fluent UI

第 5 回 Japan M365 Dev User Group 勉強会 (https://jpm365dev.connpass.com/event/266838/) に登壇したときのスライドです。

Transcript

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

   View Slide

2. ⾃⼰紹介
   篠原敬志 (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 書いています。
   

   View Slide

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

   View Slide

4. Fluent Design System
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. Fluent UI
   

   View Slide

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

    View Slide

11. Fluent UI vs Material UI (MUI)
    

    View Slide

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

    View Slide

13. @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 リリース
    

    View Slide

14. @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 リリース
    

    View Slide

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

    View Slide

16. 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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. アイコンセット (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
    

    View Slide

21. カスタム テーマ
    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 互換) を既定で提供
    

    View Slide

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

    View Slide

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

    View Slide