【SharePoint Online】Webパーツを読み解く ーSPFx開発 その6ー

2019年11月4日

こんにちは。
今回はWebパーツの中身を読み解いていこうかなと思います。
ブロックごとに何をしているのか色々勉強がてら解説します。

今回はサンプルで「Accordion」という自作のWebパーツを利用します。
各々のプロジェクト名に置換されるため注意して下さい。

それでは行きましょう。

SharePoint Frameworkの記事一覧

src\webparts[プロジェクト名]\*

今回はこの配下にあるメインのコンポーネントを解説します。
ぶっちゃけこれだけ分かってればいいんじゃないかなって思ってます。

[プロジェクト名]WebPart.ts

このtsファイルはメインのエントリポイントが定義されているファイルです。
Webパーツの根幹となる部分ですね。
これに色々つけ足したり読み込んだりすることでWebパーツが構成されます。

どんなことが書いてあるのでしょうか。
ブロックごとに見ていきます。

IAccordionWebPartProps クラス

プロパティ タイプを定義するためのクラスです。
Web パーツのカスタムプロパティタイプを登録したりすることができます。

export interface IAccordionWebPartProps {
  description: string,
  url: string,
  title: string;
}

render メソッド

レンダリングするDOM要素を書き込むためのメソッドです。
Webパーツの外観を構成しています。
有効な文字列にするために、
プロパティの値に対してHTMLエスケープを行う必要があります。
innerHTML=の後はすべてエスケープされていますので注意してください。

  public render(): void {
    this.domElement.innerHTML = `
      <div class="${ styles.accordion }">
        <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.title)}</p>
              <p class="${ styles.description }">${escape(this.properties.description)}</p>
              <p class="${ styles.description }">${escape(this.properties.url)}</p>
              <a href="https://aka.ms/spfx" class="${ styles.button }">
                <span class="${ styles.label }">Learn more</span>
              </a>
            </div>
          </div>
        </div>
      </div>`;
  }

この後説明する[getPropertyPaneConfiguration]のプロパティで定義されているプロパティにアクセスする場合は、
this.properties.[プロパティ]という形でアクセスすることができます。

              <p class="${ styles.description }">${escape(this.properties.title)}</p>
              <p class="${ styles.description }">${escape(this.properties.description)}</p>
              <p class="${ styles.description }">${escape(this.properties.url)}</p>

getPropertyPaneConfiguration メソッド

プロパティウィンドウを定義するメソッドです。
プロパティウィンドウとは、Webパーツのプロパティにあるブロックのことです。

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                }),
                PropertyPaneTextField('title', {
                  label: 'title'
                }),
                PropertyPaneTextField('url', {
                  label: 'url'
                })
              ]
            }
          ]
        }
      ]
    };
  }

[プロジェクト名]WebPart.manifest.json

このjsonファイルは、その名の通りマニフェストが記載されています。
プロパティバッグとなっていて、プロパティの既定値などを定義することができます。
preconfiguredEntries.propertiesで既定値を設定することができます。

"preconfiguredEntries": [{
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
    "group": { "default": "Other" },
    "title": { "default": "accordion" },
    "description": { "default": "This is Accordion Web part" },
    "officeFabricIconFontName": "Page",
    "properties": {
      "description": "accordion",
      "title": "accordionLink",
      "url": "http://hogehoge-note.com"
    }
  }]

その他にもバージョン、ID、表示名、アイコン、説明など
Web パーツのメタデータを定義することができます。

[プロジェクト名]WebPart.module.scss

SharePoint フレームワークでは、SassをCSSのプリプロセッサとして使用します。
SassとはCSSの拡張言語です。
SharePoint フレームワークにはSCSSコンパイラが付いており、
SassからCSSへの変換を自動的に行うことができます。

つまり、CSSはここに書きます。(笑)
アクセスするには、styles.[css]という形で記載することで簡単に利用できます。
→innerHTML内で利用できます。

[プロジェクト名]WebPart.module.scss.ts

このファイルは[プロジェクト名]WebPart.module.scssファイルに対応します。
scssファイルをtsファイルにコンパイルされた姿ですね。
実際にいじることはありません。
scssファイルを更新すると、ファイル内で対応する typings が生成され、Typescript にコンパイルされた後、Web パーツのコードでこれらのスタイルをインポートし参照することができます。

終わりに

今回は以上です。
改めて見ると結構簡潔ですね。
初めのころは何が何だか全くわかりませんでしたが、
書き留めてみると「このメソッドはこのメソッドに関連してるんだ!」
みたいな発見が結構あってどんどん理解が深まります。

次回こそは完全自作のWebパーツ作るぞ。。。!

それではまた。


次:
【SharePoint Online】リストアイテムをアコーディオンリンクで表示する ーSPFx開発 その7ー

SharePoint Frameworkの記事一覧