Fluent UI を React で Assets License を回避しつつ使用する

はじめに

今回は Microsoft が出している「Fluent UI」をReactで使ってみる、という記事です。

もともとFluent UIは office-ui-fabric という名前だったそうで、
Qiitaで検索してみると2015年あたりの記事がちらほら出てきますね。

デモサイトもとってもリッチでワクワクしますね。
https://developer.microsoft.com/en-us/fluentui/#/controls/web

しかし、Microsoftのブランドなども関係することから、ライセンスがややこしいです。

ライセンスについて

Fluent UI React 自体は MIT ライセンス と、とても使いやすいです。

が、但し書きがあります。以下、2020/05/27時点での内容

All files on the Fluent UI React GitHub repository are subject to the MIT license. Please read the License file at the root of the project.
Usage of the fonts and icons referenced in Fluent UI React React is subject to the terms of the assets license agreement.
(https://github.com/microsoft/fluentui#licenses より引用。)

はて、 assets license agreement ？となり見てみると…

“Fabric Assets” means
a. Segoe font
b. Microsoft Office icons
c. Microsoft Fabric icons

上記 Fabric Assets は Sugoeフォント／Microsoft Office icons／Microsoft Fabric icons からなり、
それらの使用は

a. In connection with the use of a Microsoft API within the development of a software
application, website, or product you create or a service you offer designed to provide access
or interact with a Microsoft service or application (“Application”)
b. To illustrate that Application integrates with one or more Microsoft products and services.

の場合にのみ許可されるとあります。
すなわち、Microsoft製品のAPIを叩いたりする場合のみに限られそうです。

By downloading the Fabric Assets (defined below) from the Content Delivery Network, you represent and
warrant to Microsoft that you have the authority to accept this Agreement on behalf of yourself, a company,
and/or other entity, as applicable.

とあるように、CDNからダウンロードするか否かが問題になりそうです。

個人の「感想」です。実際の使用にあたっては知財部門など専門家の意見を仰ぐべきです。
本記事に従った結果発生するいかなる問題に対しても責任を負いかねます

回避方法

Segoe fontの使用を回避する方法と、Fabric Iconの使用を回避する方法を記載します。

Segoe font

回避方法についてはGitHub Issueでも議論されています。

「非MITライセンスなものをオプトアウトするオプションがほしい」という質問に対し、
デフォルトフォントを変更する方法が提案されています。

import { loadTheme, createTheme } from 'office-ui-fabric-react';

loadTheme(createTheme({
  defaultFontStyle: { fontFamily: 'Comic Sans MS', fontWeight: 'bold' },
  fonts: {
    medium: { fontSize: 50 }
  }
}));

今のバージョンでは office-ui-fabric-react でなく、 @fluentui/react ですね。

Fabric Icon

iconの利用回避についてはGitHubのwikiに書いてあります。

import { registerIcons } from '@uifabric/styling';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFilter } from '@fortawesome/free-solid-svg-icons';

registerIcons({
  icons: {
    Filter: <FontAwesomeIcon icon={faFilter} />
  }
});

これについてはドキュメントが古く、
@uifabric/styling となっている部分は @fluentui/react とすることで実現できます。

使用するときは

<Button iconProps={{ iconName: "Filter" }}/>

のように、registerIconsのキーを iconProps.iconName に指定します。

やってみた

上記の通り実施してみました。ドキュメントにあるColorPickerBasicExampleを表示してみています。

いいぞ。

ログからもわかるように、文字やアイコンを表示しているにも関わらず、
MicrosoftのCDNからはコンテンツをダウンロードしている様子はありません。

普段使用しているWindows 10環境では、Segoeフォントは入ってしまっているので、
今回はDockerコンテナ（Debianベース）にGoogle Chromeを導入して見てみました。

おまけ

こっそりREADMEが experiences for Microsoft 365 から web experiences に変更になってますね。

終わりに

いざ記事を書いてみると、Fluent UIユーザーが少ないようでびっくりしました。
最近のMicrosoftっぽいUIって好きなんですが、あまり人気がないんでしょうか。

非MITライセンスのオプトアウトについては、このIssueの行方も見守りたいところです。
https://github.com/microsoft/fluentui/issues/12488