クライアント側の Web パーツを SharePoint に接続する (Hello world パート 2)

SharePoint に Web パーツを接続して、SharePoint 内の機能とデータにアクセスし、エンドユーザーに対してより統合されたエクスペリエンスを提供します。この記事では、前の記事の「最初の Web パーツのビルド」に組み込まれている Hello World Web パーツの構築を継続して説明します。

また、SharePoint PnP YouTube チャネルのこのビデオを見てこれらの手順に従うこともできます。

gulp serve の実行

コマンド gulp serve コマンドが実行されていることを確認します。 まだ実行されていない場合は、helloworld webpart プロジェクトのディレクトリに移動し、次のコマンドを使用して実行します。

cd helloworld-webpart
gulp serve

ページ コンテキストへのアクセスを取得する

SharePoint でホストされたワークベンチを使用すると、次のような主要なプロパティを公開するページ コンテキストにアクセスできるようになります。

  • Web タイトル
  • Web の絶対 URL
  • Web サーバー関連 URL
  • ユーザー サインイン名

ページ コンテキストへのアクセスを取得するには

Web パーツのコンテキスト情報にアクセスするには、コードで次のオブジェクトを使用します。

this.context.pageContext
  1. Visual Studio Code 内で、.\src\webparts\helloWorld\HelloWorldWebPart.ts を検索して開きます。

  2. render() メソッド内で、innerHTML コード ブロックを次のコードに置き換えます。

    this.domElement.innerHTML = `
      <div class="${ styles.helloWorld }">
        <div class="${ styles.container }">
          <div class="${ styles.row }">
            <div class="${ styles.column }">
              <span class="${ styles.title }">Welcome to SharePoint!</span>
              <p class="${ styles.subTitle }">Customize SharePoint experiences using web parts.</p>
              <p class="${ styles.description }">${escape(this.properties.description)}</p>
              <p class="${ styles.description }">${escape(this.properties.test)}</p>
              <p class="${ styles.description }">Loading from ${escape(this.context.pageContext.web.title)}</p>
              <a href="https://aka.ms/spfx" class="${ styles.button }">
                <span class="${ styles.label }">Learn more</span>
              </a>
            </div>
          </div>
        </div>
      </div>`;
    
  3. HTML のブロック内の変数値を出力するのに ${ } が使用されているのがわかります。 追加の HTML p は、this.context.pageContext.web.title を表示するために使用します。

  4. ファイルを保存します。 コンソールで実行されている gulp serve により、この保存操作が検出され、

    • 更新されたコードを自動的にビルドし、バンドルします。

    注意

    Visual Studio Code に変更を保存する際、gulp が自動でコンパイルするのを確認できるよう、コンソール ウィンドウと Visual Studio Code を横並びにしてください。

  5. SharePoint サイトのホストされたワークベンチに移動します。 完全な URL は https://your-sharepoint-site-url/_layouts/workbench.aspx です。 ホストされたワークベンチを更新して、再構築されたコード バンドルから変更内容を取得します。

    Web パーツ内に SharePoint サイトのタイトルが表示され、ページのコンテキストが Web パーツで使用できるようになります。

    SharePoint サイト内の SharePoint ページのコンテキスト

リスト モデルの定義

SharePoint のリスト データを用いて操作を開始するにはリスト モデルが必要です。リストを取得するには、2 つのモデルが必要です。

  1. Visual Studio Code 内で、.\src\webparts\helloWorld\HelloWorldWebPart.ts を検索して開きます。

  2. HelloWorldWebPart クラスの真上にある次の次のインターフェイスを定義します。

    export interface ISPLists {
      value: ISPList[];
    }
    
    export interface ISPList {
      Title: string;
      Id: string;
    }
    

    ISPList インターフェイスは、接続している SharePoint リスト情報を保持します。

モック ストアからリストを取得します。

モック データをテストするには、モック データを返すモック ストアが必要です。

モック ストアを作成するには

  1. src\webparts\helloWorld フォルダーに、MockHttpClient.ts という新規ファイルを作成します。

  2. 次のコードを MockHttpClient.ts にコピーします。

    import { ISPList } from './HelloWorldWebPart';
    
    export default class MockHttpClient  {
    
      private static _items: ISPList[] = [{ Title: 'Mock List', Id: '1' },
                                          { Title: 'Mock List 2', Id: '2' },
                                          { Title: 'Mock List 3', Id: '3' }];
    
      public static get(): Promise<ISPList[]> {
        return new Promise<ISPList[]>((resolve) => {
          resolve(MockHttpClient._items);
        });
      }
    }
    

    コードに関する注意事項

    • MockHttpClient クラスを既定のモジュールとしてエクスポートすると、その他のファイルにインポートできるようになります。
    • 初期 ISPList モック配列を作成し、項目の配列を返します。
  3. ファイルを保存します。

これで、HelloWorldWebPart クラスで MockHttpClient クラスを使用できるようになりました。 最初に MockHttpClient モジュールをインポートする必要があります。

MockHttpClient クラスのインポート

  1. HelloWorldWebPart.ts ファイルを検索して開きます。

  2. import * as strings from 'HelloWorldWebPartStrings'; を探し、その直後に以下のコードを追加します。

    import MockHttpClient from './MockHttpClient';
    
  3. HelloWorldWebPart クラス内でリスト検索をモックする次のメソッドを追加します。

    private _getMockListData(): Promise<ISPLists> {
      return MockHttpClient.get()
        .then((data: ISPList[]) => {
          var listData: ISPLists = { value: data };
          return listData;
        }) as Promise<ISPLists>;
    }
    
  4. ファイルを保存します。

SharePoint サイトからリストを検索します。

次に現在のサイトからリストを取得する必要があります。 SharePoint REST API を使用して、https://yourtenantprefix.sharepoint.com/_api/web/lists にあるサイトからリストを取得します。

SharePoint Framework には、SharePoint に対して REST API 要求を実行するヘルパー クラス spHttpClient が含まれています。 これは、既定のヘッダーを追加し、書き込みに必要なダイジェストを管理して、テレメトリを収集します。このテレメトリはサービスがアプリケーションのパフォーマンスを監視するために役立ちます。

このヘルパー クラスを使用するには、最初にそれらを @microsoft/sp-http モジュールからインポートします。

  1. HelloWorldWebPart.ts ファイルの一番上までスクロールします。

  2. import MockHttpClient from './MockHttpClient'; を探し、その直後に以下のコードを追加します。

    import {
      SPHttpClient,
      SPHttpClientResponse
    } from '@microsoft/sp-http';
    
  3. 次のメソッドを追加し、HelloWorldWebPart クラス内で SharePoint からリストを取得します。

    private _getListData(): Promise<ISPLists> {
      return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists?$filter=Hidden eq false`, SPHttpClient.configurations.v1)
        .then((response: SPHttpClientResponse) => {
          return response.json();
        });
    }
    

    メソッドは spHttpClient ヘルパー クラスを使用して、HTTP GET 要求を発行します。 ISPLists インターフェイスを使用し、非表示のリストを取得しないようフィルターを適用します。

  4. ファイルを保存します。

  5. gulpserve を実行中のコンソール ウィンドウに切り替え、エラーの有無を確認します。 エラーがある場合は、コンソール内で gulp がレポートするので、続行する前にそれらを修正する必要があります。

新しいスタイルの追加

SharePoint フレームワークでは、Sass を CSS のプリプロセッサとして使用し、具体的には通常の CSS 構文に完全に準拠した SCSS 構文を使用します。 Sass は、CSS 言語を拡張し、変数や入れ子のルール、インラインのインポートなどの機能を使用することで、Web パーツ用の効率的なスタイル シートを整理し、作成することができます。 SharePoint フレームワークには、Sass ファイルを通常の CSS ファイルに変換する SCSS コンパイラが付いており、開発中に使用する型指定されたバージョンも提供します。

新しいスタイルを追加するには

  1. HelloWorldWebPart.module.scss を開きます。 これは、スタイルを定義する SCSS ファイルです。

    既定では、スタイルは Web パーツに適用されます。 表示スタイルは .helloWorld で定義されているのがわかります。

  2. .button スタイルの後 (ただし、まだメイン .helloWorld スタイル セクションの内側) に、次のスタイルを追加します。

    .list {
      color: #333333;
      font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
      font-size: 14px;
      font-weight: normal;
      box-sizing: border-box;
      margin: 10;
      padding: 10;
      line-height: 50px;
      list-style-type: none;
      box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
    }
    
    .listItem {
      color: #333333;
      vertical-align: center;
      font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
      font-size: 14px;
      font-weight: normal;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      box-shadow: none;
      *zoom: 1;
      padding: 9px 28px 3px;
      position: relative;
    }
    
  3. ファイルを保存します。

    gulp は、ファイルを保存するとすぐに、コンソール内のコードを再構築します。 これにより、HelloWorldWebPart.module.scss.ts ファイル内で対応する typings が生成されます。 Typescript にコンパイルされた後、Web パーツのコードでこれらのスタイルをインポートし参照することができます。

    ヒント

    このファイルは、プロジェクトのビルド時に動的に生成されます。 .vscode/settings.json ファイルを使用して、VS Codeのエクスプローラー ビューで非表示になります。

    Web パーツの render() のメソッドで確認できます。

    <div class="${styles.row}">
    

リスト情報を表示する

HelloWorldWebPart クラスを開きます。

SharePoint ワークベンチでは、ローカル環境にある Web パーツや SharePoint サイトから Web パーツを自由にテストすることができます。 SharePoint Framework は EnvironmentType モジュールを使用して Web パーツを実行している環境を理解しやすくすることで、この機能を補助しています。

EnvironmentType モジュールを使用するには

  1. 最初に Environment モジュールと EnvironmentType モジュールを @ microsoft/sp-core-library バンドルからインポートします。 次のコードに示すように、それを上部の import セクションに追加します。

    import {
      Environment,
      EnvironmentType
    } from '@microsoft/sp-core-library';
    
  2. HelloWorldWebPart クラス内に次のプライベート メソッドを追加します。

    private _renderList(items: ISPList[]): void {
      let html: string = '';
      items.forEach((item: ISPList) => {
        html += `
      <ul class="${styles.list}">
        <li class="${styles.listItem}">
          <span class="ms-font-l">${item.Title}</span>
        </li>
      </ul>`;
      });
    
      const listContainer: Element = this.domElement.querySelector('#spListContainer');
      listContainer.innerHTML = html;
    }
    

    このメソッドは、styles 変数を使用して以前に追加された新しい CSS スタイルを参照し、REST API から受信されるリスト情報をレンダリングするために使用されます。

  3. ファイルを保存します。

  4. HelloWorldWebPart クラス内に次のプライベート メソッドを追加し、それぞれのメソッドを呼び出してリスト データを取得します。

    private _renderListAsync(): void {
      // Local environment
      if (Environment.type === EnvironmentType.Local) {
        this._getMockListData().then((response) => {
          this._renderList(response.value);
        });
      }
      else if (Environment.type == EnvironmentType.SharePoint ||
               Environment.type == EnvironmentType.ClassicSharePoint) {
        this._getListData()
          .then((response) => {
            this._renderList(response.value);
          });
      }
    }
    

    _renderListAsync() メソッドでのEnvironmentTypeに関する注意事項:

    • Environment.type プロパティを見ると、ローカル環境か SharePoint 環境にあるかを確認できます。
    • ワークベンチをホストする場所によって、適切なメソッドが呼び出されます。
  5. ファイルを保存します。

重要

上記のコードは、v1.12.1 以前の SharePoint Framework で操作する場合にのみ作業することを意図しています。

これは、ローカル ワークベンチが SharePoint Framework の v1.13 で削除されたためです。

EnvironmentType.Test 列挙オプションを使用してプロジェクトに自動テストを実装している場合は、同じメソッドを使用してモック データ ソースを作成できます。

リスト データの取得

  1. render() メソッドに移動し、メソッドの内部のコードを次のコードに置き換えます。

    this.domElement.innerHTML = `
      <div class="${ styles.helloWorld }">
        <div class="${ styles.container }">
          <div class="${ styles.row }">
            <div class="${ styles.column }">
              <span class="${ styles.title }">Welcome to SharePoint!</span>
              <p class="${ styles.subTitle }">Customize SharePoint experiences using web parts.</p>
              <p class="${ styles.description }">${escape(this.properties.description)}</p>
              <p class="${ styles.description }">${escape(this.properties.test)}</p>
              <p class="${ styles.description }">Loading from ${escape(this.context.pageContext.web.title)}</p>
              <a href="https://aka.ms/spfx" class="${ styles.button }">
                <span class="${ styles.label }">Learn more</span>
              </a>
            </div>
          </div>
          <div id="spListContainer" />
        </div>
      </div>`;
    
    this._renderListAsync();
    
  2. ファイルを保存します。

    gulpserve コンソール ウィンドウ内でコードが再ビルドされることに注意してください。 エラーが表示されていないことを確認します。

  3. SharePoint Framework v1.12.1 以前を使用している場合 (オンプレミスの SharePoint Server を使用している場合など)、ローカル ワークベンチに切り替えて HelloWorld Web パーツを追加します。

    モック データが返されていることを確認してください。

    localhost からのリストデータのレンダリング

  4. SharePoint でホストされているワークベンチに切り替えます。ページを更新して、HelloWorld Web パーツを追加します。

    現在のサイトから返されたリストを確認する必要があります。

    SharePoint からのリストデータのレンダリング

  5. 今すぐサーバーの実行を停止できます。 コンソールに切り替え、gulpserve を停止します。 Ctrl+C を選択して gulp タスクを終了します。

次の手順

これで、SharePoint リスト データへの Web パーツの接続は完了です。

次の「Web パーツの SharePoint ページへの展開」トピックで、Hello World Web パーツのビルドを続けることができます。 SharePoint ページでの Hello World の Web パーツの展開とプレビュー方法を説明します。