SharePoint のクライアント側 Web パーツで Office UI Fabric React コンポーネントを使用する

[アーティクル]
03/21/2023

Office UI Fabric React は、Office と Office 365 のエクスペリエンスを構築するためのフロントエンドのフレームワークです。これは、応答性の良い、モバイルファーストコンポーネントの堅牢なコレクションが含まれており、Office デザイン言語を使用して Web エクスペリエンスを簡単に作り出すことができます。

この記事では Office UI Fabric React の DocumentCard コンポーネントを使用する、次の画像のような単純な Web パーツを構築する方法について説明します。

SharePoint ワークベンチでの DocumentCard Fabric コンポーネントのイメージ

Microsoft 365 プラットフォームコミュニティ (PnP) YouTube チャンネルのこのビデオを見て、これらの手順に従うこともできます。

Office UI Fabric React & Fluent UI React

注:

Microsoft は、2020 年初頭に Office UI Fabric の名前を Fluent UI に変更しました。

Office UI Fabric から Fluent UI への切り替え、および対応する React コンポーネントは現在、移行の状態です。現在の状態とそのロードマップの詳細については、「Fluent UI チームが提供する FAQ: 「Fabric と Startdust から Fluent UI に関するよく寄せられる質問」を参照してください。

SharePoint Framework (SPFx) パッケージは現在、元の Office UI Fabric NPM パッケージを参照しています。現在 & 、これらのパッケージは引き続き機能します。

プライマリ Fluent UI React パッケージ (@fluentui/react) は、SharePoint Framework プロジェクトで使用される office-ui-fabric-react パッケージからコンポーネントをエクスポートするだけです。現時点では、引き続き SharePoint Framework プロジェクトで office-ui-fabric-react パッケージを使用する必要があります。

このページでは、Microsoft が Fluent UI パッケージへの切り替えを推奨するまで、引き続き Office UI Fabric パッケージを参照します。このページのドキュメントリンクは Fluent UI ドキュメントを指している場合がありますが、Office UI Fabric にも適用されます。

Fluent UI Web サイト - 詳細な API のドキュメントと、各コントロールの実装コードの例。
API リファレンス - 詳細な API リファレンスのドキュメント。
Office UI Fabric React / Fluent UI React - github 上のソースコードリポジトリ。

新しい Web パーツプロジェクトの作成

自分の好みの場所に新しいプロジェクトディレクトリを作成します。
```
md documentcardexample-webpart
```
プロジェクトディレクトリへ移動します。
```
cd documentcardexample-webpart
```
作成した新しいディレクトリから Yeoman の SharePoint ジェネレーターを実行して、新しいプロジェクトを作成します。
```
yo @microsoft/sharepoint
```
Yeoman の SharePoint ジェネレーターにより、一連の質問メッセージが表示されます。次の質問以外のすべての質問について、既定のオプションをそのまま受け入れます。
- どの種類のクライアント側コンポーネントを作成しますか?: Web パーツ
- 使用するテンプレートは何ですか?: React
この時点で、Yeoman は必要な依存関係をインストールし、ソリューションファイルをスキャフォールドします。

SPFx v1.8.2 バージョン以降、目的の Web フレームワークとしてReactを選択すると、Yeoman には推奨される@microsoft/sp-office-ui-fabric-core パッケージバージョンがソリューションに含まれます。
注:

SPFx 1.8 以降では、 Office UI Fabric React v5 または v6 のいずれかを使用します。 SPFx の各バージョンでは、新しいプロジェクトで Office UI Fabric React のバージョンがアップグレードされます。次に例を示します。
- SPFx v1.8 プロジェクトでは、既定で Office UI Fabric React v5.132.0 が使用されます
- SPFx v1.9 & v1.10 プロジェクトでは、既定で Office UI Fabric React v6.189.2 が使用されます
Office UI Fabric React のバージョンによって、TypeScript のバージョンとの依存関係が異なります。既存の SPFx プロジェクトを新しいバージョンの Office UI Fabric React にアップグレードする場合は、以下の「付録: Office UI Fabric React のバージョンのアップグレード」セクションを参照してください。

このページでは、最新バージョンの SharePoint Framework を使用していることを前提としています。
次に、以下のコマンドを実行して、Visual Studio Code で Web パーツプロジェクトを開きます。
```
code .
```
React Web フレームワークを持つ Web パーツプロジェクトが装備できました。

src\webparts\documentCardExample フォルダーから DocumentCardExampleWebPart.ts を開きます。

ご覧のように、render() メソッドは反応要素を作成して、Web パーツ DOM にレンダリングします。

public render(): void {
  const element: React.ReactElement<IDocumentCardExampleProps> = React.createElement(
    DocumentCardExample,
    {
      description: this.properties.description
    }
  );

  ReactDom.render(element, this.domElement);
}

src\webparts\documentCardExample\components フォルダーから DocumentCardExample.tsx を開きます。

これは、Web パーツ DOM にレンダリングされるプロジェクトに Yeoman が追加した主要な反応コンポーネントです。

export default class DocumentCardExample extends React.Component<IDocumentCardExampleProps, {}> {
  public render(): React.ReactElement<IDocumentCardExampleProps> {
    return (
      <div className={ styles.documentCardExample }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
              <span className={ styles.title }>Welcome to SharePoint!</span>
              <p className={ styles.subTitle }>Customize SharePoint experiences using web parts.</p>
              <p className={ styles.description }>{escape(this.props.description)}</p>
              <a href="https://aka.ms/spfx" className={ styles.button }>
                <span className={ styles.label }>Learn more</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Office UI Fabric コンポーネントの追加

SharePoint における新しい先進的なエクスペリエンスでは Office UI Fabric と Office UI Fabric React を新たなエクスペリエンスを構築するための既定のフロントエンドフレームワークとして使用します。そのため、SharePoint Framework には、SharePoint で利用可能なバージョンに一致する既定の Office UI Fabric と Fabric React のバージョンが付属しています。これにより、ビルドする Web パーツを SharePoint に展開するときに、適切なバージョンの Fabric スタイルが確実に使用されるようになります。

このソリューションを作成するときにフレームワークとして React を選択したため、ジェネレーターによって適切なバージョンの Office UI Fabric React もインストールされています。 Fabric コンポーネントは、追加作業なしで react コンポーネントに直接インポートできます。

Office UI Fabric コンポーネントを追加するには

src\webparts\documentCardExample\components フォルダーから DocumentCardExample.tsx を開きます。

次の import ステートメントをファイルの先頭に追加して、使用する Fabric React コンポーネントをインポートします。

import {
  DocumentCard,
  DocumentCardPreview,
  DocumentCardTitle,
  DocumentCardActivity,
  IDocumentCardPreviewProps
} from 'office-ui-fabric-react/lib/DocumentCard';

既存の render() メソッドを次のメソッドに置き換えます。

public render(): JSX.Element {
  const previewProps: IDocumentCardPreviewProps = {
    previewImages: [
      {
        previewImageSrc: String(require('./document-preview.png')),
        iconSrc: String(require('./icon-ppt.png')),
        width: 318,
        height: 196,
        accentColor: '#ce4b1f'
      }
    ],
  };

  return (
    <DocumentCard onClickHref='http://bing.com'>
      <DocumentCardPreview { ...previewProps } />
      <DocumentCardTitle title='Revenue stream proposal fiscal year 2016 version02.pptx' />
      <DocumentCardActivity
        activity='Created Feb 23, 2016'
        people={
          [
            { name: 'Kat Larrson', profileImageSrc: String(require('./avatar-kat.png')) }
          ]
        }
      />
    </DocumentCard>
  );
}

ファイルを保存します。

このコードでは、DocumentCard コンポーネントにいくつかの追加のセクションが含まれています。
- DocumentCardPreview
- DocumentCardTitle
- DocumentCardActivity
previewPropsプロパティには DocumentCardPreview の一部のプロパティが含まれています。

イメージ資産のコピー

次のイメージを src\webparts\documentCardExample\components フォルダーにコピーします。

注:

コード内では、ルートの場所からの相対パスを使用してそれらのイメージを参照していました。コード内のイメージを参照すると、package-solution.json ファイルのように設定trueされているincludeClientSideAssets限り、それらを *.sppkg ソリューションパッケージに含めることができます。

ホストされているワークベンチで Web パーツをプレビューする

コンソールで、次のように入力して、SharePoint でホストされているワークベンチで Web パーツをプレビューします。
```
gulp serve --nobrowser
```
ブラウザを開き、SharePoint サイトでホストされているワークベンチに移動します: https://enter-your-SharePoint-site/_layouts/workbench.aspx。
ツールボックスで、追加する DocumentCardExample Web パーツを選択します。

付録: Office UI Fabric React のバージョンのアップグレード

SPFx 1.8 以降では、 Office UI Fabric React v5 または v6 のいずれかを使用します。 SPFx の各バージョンでは、新しいプロジェクトで Office UI Fabric React のバージョンがアップグレードされます。次に例を示します。

SPFx v1.8 以前のバージョンのプロジェクトでは、既定で Office UI Fabric React v5.x が使用されます
SPFx v1.9 & v1.10 プロジェクトでは、既定で Office UI Fabric React v6.x が使用されます

Office UI Fabric React のバージョンによって、サポートされている TypeScript の最小バージョンが異なります。

Office UI Fabric React v5 は TypeScript v2.x に依存します。 SPFx v1.8 以前のプロジェクトも TypeScript v2.x に依存します。

Office UI Fabric React v6 には TypeScript v3.x が必要です。すべての SPFx v1.9 以降のプロジェクトは、Office UI Fabric React v6 の同じ依存関係に一致する TypeScript v3 以降を使用するように構成されています。

SPFx v1.8 プロジェクトを Office UI Fabric React v6 にアップグレードする場合は、プロジェクトの TypeScript のバージョンもアップグレードする必要があります。詳細については、SPFx v1.8 リリースノートを参照してください: SharePoint Framework v1.8 リリースノート: TypeScript 2.7、2.9、および 3.xのサポート。