Office アドインでの Office UI FabricOffice UI Fabric in Office Add-ins

Office UI Fabric は、Office と Office 365 のユーザー エクスペリエンスをビルドするための JavaScript フロントエンドのフレームワークです。Fabric は、拡張や改訂が可能な視覚効果に焦点を合わせたコンポーネントであり、Office アドインで使用できます。Fabric は Office デザイン言語を使用するため、Fabric の UX コンポーネントは Office に元々組み込まれているかのように自然に使うことができます。Office UI Fabric is a JavaScript front-end framework for building user experiences for Office and Office 365. Fabric provides visuals-focused components that you can extend, rework, and use in your Office Add-in. Because Fabric uses the Office Design Language, Fabric's UX components look like a natural extension of Office.

アドインを作成する場合は、Office UI Fabric を使用してユーザー エクスペリエンスを作成することをお勧めします。Office UI Fabric の使用は省略可能です。If you are building an add-in, we encourage you to use Office UI Fabric to create your user experience. Using Office UI Fabric is optional.

次のセクションでは、Fabric を使用して要件を満たす方法について説明します。The following sections explain how to get started using Fabric to meet your requirements.

Fabric Core を使用する: アイコン、フォント、色Use Fabric Core: icons, fonts, colors

Fabric Core には、デザイン言語の基本的な要素 (アイコン、色、タイプ、グリッドなど) が含まれます。Fabric Core は独立したフレームワークです。Fabric React と Fabric JS は、どちらも Fabric Core を使用します。Fabric Core contains basic elements of the design language such as icons, colors, type, and grid. Fabric core is framework independent. Both Fabric React and Fabric JS use Fabric Core.

Fabric Core の使用を開始するにはTo get started using Fabric Core:

  1. ページの HTML に CDN 参照を追加します。Add the CDN reference to the HTML on your page.

    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css">
    
  2. Fabric のアイコンとフォントを使用します。Use Fabric icons and fonts.

    Fabric のアイコンを使用するには、ページに "i" 要素を含め、適切なクラスを参照します。アイコンのサイズは、フォント サイズを変更することで制御できます。たとえば、次のコードは、themePrimary (#0078d7) 色を使用する特大の表アイコンを作成する方法を示しています。To use a Fabric icon, include the "i" element on your page, and then reference the appropriate classes. You can control the size of the icon by changing the font size. For example, the following code shows how to make an extra-large table icon that uses the themePrimary (#0078d7) color.

    <i class="ms-Icon ms-font-xl ms-Icon--Table ms-fontColor-themePrimary"></i>
    

    その他の Office UI Fabric で使用可能なアイコンを見つけるには、「アイコン」ページの検索機能を使用します。アドインで使用するアイコンを検索するときには、アイコン名の先頭に ms-Icon-- を追加してください。To find more icons that are available in Office UI Fabric, use the search feature on the Icons page. When you find an icon to use in your add-in, be sure to prefix the icon name with ms-Icon--.

    Office UI Fabric で使用可能なフォントのサイズと色については、「文字体裁」および「」を参照してください。For information about font sizes and colors that are available in Office UI Fabric, see Typography and Colors.

Fabric コンポーネントを使用するUse Fabric Components

Fabric には、次のタイプのコンポーネントを含む、さまざまな UX コンポーネントが用意されています。これらを使用してアドインを作成できます。Fabric provides a variety of UX components that you can use to build your add-in, including the following types of components:

  • 入力コンポーネント - 例: ボタン、チェック ボックス、および切り替えInput components - for example, Button, Checkbox, and Toggle
  • ナビゲーション コンポーネント - 例: ピボットおよび階層リンクNavigation components - for example, Pivot Breadcrumb
  • 通知コンポーネントの MessageBar や吹き出しなどNotification components - for example, MessageBar and Callout

すべての Fabric コンポーネントがアドインでの使用を推奨しているわけではありません。アドインでの使用を推奨する Fabric React UX コンポーネントのリストを以下に示します。Not all Fabric components are recommended for use in add-ins. Here is a list of Fabric React UX components that we recommend for use in an add-in:

アドインの作成には、Angular や React など別の JavaScript フレームワークも使用できます。フレームワークで Fabric コンポーネントを使用するには、次のリソースを参照してください。You can use different JavaScript frameworks, such as Angular or React, to build your add-in. To get started using Fabric components with your framework, see the following resources.

フレームワークFramework Example
応答React Office アドインで Office UI Fabric React を使用するUsing Office UI Fabric React in Office Add-ins
角度Angular Angular 1.5 ディレクティブのコミュニティ プロジェクトである「ngOfficeUIFabric」と、「Fabric コンポーネントと Angular 2 コンポーネントとのラッピングについて検討する」を参照してください。See ngOfficeUIFabric, which is a community project with Angular 1.5 directives, and Consider wrapping Fabric components with Angular 2 components