Office アドインでの Office UI Fabric JS の使用

Office UI Fabric は、Office と Office 365 のユーザー エクスペリエンスを構築するための JavaScript フロント エンドのフレームワークです。Angular や React などのフレームワークを使用せず、JavaScript のみを使用してアドインをビルドする場合は、ユーザー エクスペリエンスを作成するために Fabric JS の使用を検討してください。詳細については、「Office UI Fabric JS」を参照してください。

この記事では、Fabric JS の基本的な使用方法について説明します。

Fabric CDN 参照の追加

CDN から Fabric を参照するには、次に示す HTML コードをページに追加します。

<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css">
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.components.min.css">
<script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js"></script>

Fabric JS UX コンポーネントの使用

Fabric JS は、アドインで使用できるボタンやチェックボックスなど、複数の UX コンポーネントを提供しています。次に、アドインでの使用をお勧めする Fabric JS UX コンポーネントのリストを示します。アドインで Fabric コンポーネントのいずれかを使用するには、その Fabric のドキュメントへのリンクをたどって、「このコンポーネントの使用方法」の手順を実行してください。

Fabric JS を使用するためのアドインの更新

以前のバージョンの Office UI Fabric を使用しており、Fabric JS への移行を考えている場合は、新しいコンポーネントをアドインに組み込んでテストする方法について理解していることが必要です。更新を計画するには、次に示す点に留意してください。

  • Fabric JS を使用することでコンポーネントの初期化が簡単になります。以前のバージョンの Fabric の場合は、Fabric コンポーネントの JavaScript ファイルをアドイン プロジェクト (そのファイルへの <Script> 参照が含まれているプロジェクト) に含めてからコンポーネントを初期化します。Fabric JS では、Fabric コンポーネントの JavaScript ファイルと、それに関連する <Script> 参照を含める必要はなくなりました。Fabric コンポーネントの初期化以外に必要な手順はありません。
  • いくつかのコンポーネントは、UX コンポーネントの動作を制御する関数を提供するようになりました。たとえば、チェックボックス コントロールには、チェックボックスのオン状態とオフ状態を切り替える toggle 関数があります。
  • 一部のアイコン クラスの名前とスタイルが更新されています。
  • 最重要の変更点は、多数のコンポーネントで <label> 要素を使用していることです。<label> 要素では、コンポーネントのスタイルを制御します。<label> 要素を使用するように UX コードを更新することが必要になる場合があります。たとえば、Fabric JS のチェック ボックスがオンになっている <input> 要素の属性の値を変更しても、そのチェック ボックスに影響はありません。代わりに、checkunChecktoggle の関数をお使いください。

次の手順

Fabric JS の使用方法を示す完全なコード サンプルをご用意しています。次に示すリソースをご覧ください。

以前のリリースの Fabric に関するコード サンプルやドキュメントを探している場合は、次に示す記事をご確認ください。