Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fluent UI を理解する / Understanding Fluent UI

Fluent UI を理解する / Understanding Fluent UI

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

Takashi Shinohara

December 01, 2022
Tweet

More Decks by Takashi Shinohara

Other Decks in Technology

Transcript

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

    View full-size 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 full-size slide

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

    View full-size slide

  4. Fluent Design System

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. Fluent UI vs Material UI (MUI)

    View full-size slide

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

    View full-size slide

  12. @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 full-size slide

  13. @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 full-size slide

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

    View full-size slide

  15. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. アイコンセット (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 full-size slide

  20. カスタム テーマ
    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 full-size slide

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

    View full-size slide

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

    View full-size slide