【SharePoint Online】SPFxでアプリを作る その1ー

2021年11月17日

こんにちは。
今回から、SharePoint Framework(SPFx)の開発を行っていこうと思います。
SharePointのモダンUIを唯一開発できる方法であり、
筆者も興味があるのでとうとう手を出していきます。
今回は色々調べてHello, Worldまで書いていきます。
↓↓参考にさせて頂いたサイト様↓↓
 ・鍋綿ブログ様は偉大です。準備編を参考にさせていただきました。
 ・Microsoft Docsもたまに僕でも理解できる記事を書いてくれます。
それでは行きましょう。
※準備編として、「【SharePoint Online】アプリカタログサイトを作成する ーSPFx開発 その0ー」から見てみてください。

SharePoint Frameworkの記事一覧

準備編

まず、SPFxの開発には以下が必要なようです。
Node.js
Yeoman
gulp
SPFx用のYeoman ジェネレーター

Node.jsのLTSバージョンをインストール
②コマンドプロンプトで[npm install -g yo gulp]を実行してYeomanとgulpインストール
③コマンドプロンプトで[npm install -g @microsoft/generator-sharepoint]を実行して
 SPFx用のYeomanジェネレーターインストール

※Nodeの対応バージョンはこちらを確認してください。
これで環境準備は完了のようです。

サンプルプロジェクト作成

次にサンプルプロジェクトを作成してみましょう。
プロンプトは作業用ディレクトリに移動しておきましょう。
[yo @microsoft/sharepoint]を実行することで、応対形式でプロジェクトを作成できます。
プロジェクトはファイルが作成されるのでフォルダを切っておくといいかもしれません。
以下の通り設定してください。

  • 既定の helloworld‐webpart をソリューション名として受け入れ、Enter キーを押します。
  • [SharePoint Online のみ (最新)] を選択し、Enter キーを押します。
  • ファイルの配置場所として [現在のフォルダーを使用する] を選びます。
  • N ] を選択して、ソリューションをすぐにすべてのサイトに展開できるようにします。
  • ソリューションに固有の権限が含まれている場合は、質問に対して [N] を選択してください。
  • 作成するクライアント側コンポーネントの種類として、[Web パーツ] を選択します。
コマンド実行
実行結果

結果5分くらいでプロジェクト自体は作成できました。
オプションは全部Yesです。
SPアイコンに言われたとおりgulp serveを打ってみます。

証明書が必要なようです。
[gulp trust-dev-cert]で開発者用の証明書の発行ができるようですので
gulp serveを一旦停止し、実行しましょう。
インストールが完了し、再度gulp serveを打ってみると・・・

開いた!
そしてある!作成したWebパーツがある!
配置してみると以下の様になりました。

すんごい簡単でした!!
感動すら覚えます!!

ですが、これはローカルサーバでのプレビューです。
次はSharePoint で Web パーツをプレビューしてみましょう。
以下のアドレスにアクセスします。(gulp serveは起動したまま)
https://[テナント名].sharepoint.com/_layouts/workbench.aspx
同様にワークベンチのページで自身のWebパーツを発見することができました!

Web パーツのプロパティ ウィンドウの編集

src\webparts\helloworld フォルダーの HelloWorldWebPart.ts を開きましょう。
プロパティ ウィンドウに、チェック ボックス、ドロップダウン リスト、切り替えなどのプロパティをいくつか追加します。
まず最初に、フレームワークからそれぞれのプロパティ ウィンドウのフィールドをインポートします。
2行目に以下のコードを追加して必要なフィールドをインポートします。
※@microsoft/sp-webpart-baseと重複エラーが出た場合は、@microsoft/sp-webpart-baseから重複したフィールドを削除しましょう。

import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField,
  PropertyPaneCheckbox,
  PropertyPaneDropdown,
  PropertyPaneToggle
} from '@microsoft/sp-property-pane';

IHelloWorldWebPartPropsセクションに移動し、
以下コードを追加してオブジェクトをマッピングします。

export interface IHelloWorldWebPartProps {
    description: string;
    test: string;
    test1: boolean;
    test2: string;
    test3: boolean;
}

getPropertyPaneConfigurationメソッドに移動し、
以下コードを追加して新しいプロパティ ウィンドウ フィールドを追加します。

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
  return {
    pages: [
      {
        header: {
          description: strings.PropertyPaneDescription
        },
        groups: [
          {
            groupName: strings.BasicGroupName,
            groupFields: [
            PropertyPaneTextField('description', {
              label: 'Description'
            }),
            PropertyPaneTextField('test', {
              label: 'Multi-line Text Field',
              multiline: true
            }),
            PropertyPaneCheckbox('test1', {
              text: 'Checkbox'
            }),
            PropertyPaneDropdown('test2', {
              label: 'Dropdown',
              options: [
                { key: '1', text: 'One' },
                { key: '2', text: 'Two' },
                { key: '3', text: 'Three' },
                { key: '4', text: 'Four' }
              ]}),
            PropertyPaneToggle('test3', {
              label: 'Toggle',
              onText: 'On',
              offText: 'Off'
            })
          ]
          }
        ]
      }
    ]
  };
}

追加したフィールド[test]にアクセスして表示するようにHelloWorldWebPartクラス内の
innerHTMLを以下のように修正しましょう。

export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {

  public render(): void {
    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>
              <a href="https://aka.ms/spfx" class="${ styles.button }">
                <span class="${ styles.label }">Learn more</span>
              </a>
            </div>
          </div>
        </div>
      </div>`;
  }

次にプロパティの既定値を設定しましょう。
HelloWorldWebPart.manifest.json を開き、properties を次のものに変更します。

これで全てのファイルを保存し、再度gulp serveを実行して反映されていることを確認してください。

終わりに

今回はここまでです。
想像の5倍は簡単で驚きました。
次回はSharePointのリスト情報を取得して表示してみます。
アプリストアにアクセスするための手法はいろいろと便利かと思います。

それではまた。


次:
【SharePoint Online】SharePoint に接続してリスト情報を取得するようにカスタムする ーSPFx開発 その2ー

SharePoint Frameworkの記事一覧