Office UI Fabric を SharePoint で使ってみる

こんにちは、MS開発部の 荒井 です。

新年度になり、Office365 や SharePoint を使い始めたり、導入を考えている方もいらっしゃるかと思います。
SharePoint を使うに当たって皆さん気にされるのは、画面の見栄えです。「使いやすくキレイなページをつくりたい…」そんなときに使える(かもしれない)のが Office UI Fabric です。
SharePointだけでなくOffice365全般に使われているライブラリで、これを使用することにより統一感を出すことができ、さらには驚くべき仕様が…。

Office UI Fabric JS – https://dev.office.com/fabric-js/index.html
Office UI Fabric (React) – https://developer.microsoft.com/en-us/fabric

 

クラシックサイト

クラシックサイトでは Office UI Fabric JS の方が使いやすいでしょうか。
以下のページに実装方法が記述してあります。
https://dev.office.com/fabric-js/GetStarted/GetStarted.html

今回は Pivot(タブ)、CheckBox、Button を使ってみます。

SharePoint では見慣れた仕上がり。記述方法も大して難しくありません。

 

モダンUIのWebパーツ

※モダンUIについては下記ページでご紹介しております。
SharePointOnline コミュニケーションサイトとは
新しいUI(モダンUI)でのカスタマイズ -SharePointFramework-

上記ページでも書いていますが、モダンUIではスクリプトを直接書くことはできないため、Webパーツなどを作成して使用することになります。こちらでは React の方を使う方法が提示されています。
https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/web-parts/get-started/use-fabric-react-components

以前ご紹介した SPFx Webパーツ はこの Office UI Fabric を使用して作成しています。
 

そして、React 版では 外観の変更 などからテーマカラーを変更すると…

!!
なんと Office UI Fabric のパーツの色も変わります。これはスゴイ!
今までであれば、「色を変更したい!」となる度にCSSの修正をしなければいけませんでしたが、その手間がなくなります。

 

アイコン

さらには、様々なアイコンが用意されています。
https://developer.microsoft.com/en-us/fabric#/styles/icons

パッと見でわかりやすいページ作成に不可欠なアイコンですが、画像でカラーバリエーションを用意したりするのは結構大変なんですよね…。
こちらのアイコンはクラシックのページであればスクリプトエディターやJSリンクなど様々な場面で使えますし、色はCSSで変えれるので、画像作成が面倒な方は是非!

 

以上、Office UI Fabric のご紹介でした。機能だけではなく画面も整備してこそ便利な SharePoint ですので、理想の画面に近づくことができれば幸いです。

その他にも弊社の業務内容などにご興味のある方は、お気軽にお問い合わせください。
(お問い合わせはこちらのページをご確認の上、メールアドレス「info@deepcom.co.jp」までご連絡ください。)

 

コメントは利用できません。