SharePointFramework – 株式会社カジトリ技術ブログ

Sharepoint Frameworkにプロパティ要素を追加し、画面から設定値を変更できるようにする

hsatou — Mon, 17 Jun 2019 12:14:27 +0000

はじめに

前回の記事では、SharePoint Framework内でWordPress REST API処理を追加し、SharePointページ内でコンテンツを表示する対応を行いました。

しかし前回の記事のままだと、取得先のWordPressのURLは、ソースコード内に埋め込まれており、変更できません。
URLを変更するためには、都度ソースコードを変更する必要があり、非常に面倒です。

そのため今回は、SharePoint Frameworkにプロパティ要素を追加し、画面から設定値を変更できるようにする機能を追加します。
今回は、「取得先のWordPressのURLを、画面から変更できるようにする対応」とします。

SharePoint Frameworkのプロパティとは

前回作成したWebパーツを起動すると、「Edit web part」と、Webパーツを編集するタイルが表示されています。

このボタンをクリックすると、画面右に、プロパティを変更する要素が表示されます。

現在は「Description Field」、つまり説明文を変更する要素のみになりますが、今回はここに、取得先のWordPress APIを変更できるようにしていきます。

実装

今回の参考資料：
https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part#configure-the-web-part-property-pane

プロパティの追加

前回修正した、「SharePointWordpressWebPart.ts」（アプリ名.ts）ファイルを開き、先頭の以下の要素を確認します。

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

この「PropertyPaneTextField」というのが、プロパティのテキストフィールドになります。
ここで、プロパティ要素にチェックボックスを追加したい場合はPropertyPaneCheckbox、ドロップダウンメニューの場合はPropertyPaneDropdownなどを追加してください。
例：

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

※今回については、種類はテキストフィールドのみなので、上記の追加は不要です

同じtsファイル内のインタフェース、「ISharePointWordpressWebPartProps」を確認します。デフォルトだと以下のようになっております。

export interface ISharePointWordpressWebPartProps {
  description: string;
}

ここに、プロパティとして追加したい要素と、その種類を追記していきます。
今回はWordPressのURLなので、以下のように追加してください。その後、ファイルを保存します。

export interface ISharePointWordpressWebPartProps {
  description: string;
  wordPressUrl: string;
}

その下の、getPropertyPaneConfigurationメソッドを確認します。
デフォルトだと、以下のような記述になっております。

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

これを修正し、wordPressUrl要素を追加していきます。
具体的には、以下のようになります。

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                }),
                // 追加-開始
                PropertyPaneTextField('wordPressUrl', {
                  label: 'WordPress URL'
                }),
                // 追加-終了
              ]
            }
          ]
        }
      ]
    };
  }

これで、SharePointWordpressWebPart.tsに関する設定は完了です。

デフォルト値の修正

アプリのプロパティ既定値を追加していきます。

「SharePointWordpressWebPart.manifest.json」(アプリ名.manifest.json)を開きます。
標準だと以下のような記載がされています。

  "preconfiguredEntries": [{
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
    "group": { "default": "Other" },
    "title": { "default": "SharePointWordpress" },
    "description": { "default": "SharePointWordpress description" },
    "officeFabricIconFontName": "Page",
    "properties": {
      "description": "SharePointWordpress"
    }
  }]
}

preconfiguredEntries > properties が、プロパティの既定に関する内容です。
この内容を変更します。今回は前回同等、弊社で提供しているサービスのURLにします。
（他社のブログにアクセスするのも問題なので）

  "preconfiguredEntries": [{
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
    "group": { "default": "Other" },
    "title": { "default": "SharePointWordpress" },
    "description": { "default": "SharePointWordpress description" },
    "officeFabricIconFontName": "Page",
    "properties": {
      "description": "SharePointWordpress",
      "wordPressUrl": "https://exment.net"
    }
  }]
}

Ctrl + Shift + Bでビルドを行い、以下のコマンドでWorkBenchを表示します。

gulp serve

これで、先ほど確認したプロパティを表示すると、「WordPress URL」入力テキスト欄が追加されています。

プロパティ値をWebパーツに埋め込む

いよいよ、今回作成したプロパティwordPressUrlを、Webパーツに埋め込む処理を追加していきます。

WordPress.tsのgetWordpressHtmlを、引数よりWordPressのURLを取得する方式に修正します。

export default class WordPress {
  public static getWordpressHtml = (wordPressUrl) => {
    var $defer = $.Deferred();
    var apiUrl = wordPressUrl + '/wp-json/wp/v2/posts?_embed';
    $.getJSON(apiUrl).then((data) => {
        // 以下省略

apiUrlを、wordPressUrl + '/wp-json/wp/v2/posts?_embed' より作成する方式に修正しました。

SharePointWordpressWebPart.tsのrender関数を修正します。

public render(): void {
    var wordPressUrl = this.properties.wordPressUrl;  // ポイント
    WordPress.getWordpressHtml(wordPressUrl)
      .then((html:string) => {
        $(this.domElement).html(html); 
      });
  }

ポイントは「this.properties.wordPressUrl」です。this.propertiesで、プロパティ値を取得できます。
今回はthis.properties.wordPressUrlで、WordPressのURLを取得しています。

これにより、WordPressのURLを、画面から取得するようになりました。
試しに、URLを変更してみます。プロパティウィンドウを開き、WordPress URLを、かつて私が書いていた個人ブログに変更します。

めちゃくちゃ色々語ってますねｗ
このように、画面からURLを変更することで、取得先のURLを変更することができます。

ちなみに、レンダリング時に直接埋め込むことも可能なようです。
参考サイトだと、以下のように記載しておりました。この中の「this.properties.description」が該当します。

public render(): void {
  this.domElement.innerHTML = `
    
      
        
          
            Welcome to SharePoint!
            Customize SharePoint experiences using web parts.
            ${escape(this.properties.description)}
            
              Learn more
            
          
        
      
    `;
}

まとめ

このように、プロパティを設定することで、ユーザーによる柔軟な設定変更ができるようになります。
設定値は可能な限りプロパティ値にすることで、変化に柔軟なアプリ作りを心掛けましょう！

SharepointFrameworkを試してみる[WordPressの記事を表示]

hsatou — Mon, 17 Jun 2019 12:09:13 +0000

はじめに

SharepointFrameworkの検証を行います。
この記事では、以下について扱います。

SharePointFrameworkのインストール
とりあえずSharePointFrameworkで実行してみる
jqueryの追加
独自処理 - WordPress連携部分の追加

※SharepointFrameworkの概念の話はしません。それはまた別の機会に。

実装

今回の参考資料

https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part

SharePointFrameworkのインストール

nodeを未インストールの場合、nodeをインストール

https://nodejs.org/ja/

npm確認
```
npm --version
```

必要パッケージインストール

npm install -g yo gulp
npm install -g @microsoft/generator-sharepoint

SharepointFrameworkインストール先のフォルダを作成

mkdir SharePointWordpress
cd SharePointWordpress

SharepointFrameworkインストール実行
```
yo @microsoft/sharepoint
```

ここで、対話式でさまざまなことを聞かれるので、回答します。

  What is your solution name? : (任意のソリューション名)  
  Which baseline packages do you want to target for your component(s)? :(そのままEnter。SharePoint Onlineのみ)  
  Where do you want to place the files? : (そのままEnter。カレントフォルダにインストール)  
  Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites? : (N)  
  Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant? : (N)  
  Which type of client-side component to create? : (そのままEnter。WebPart)  
  What is your Web part name? : (任意のWebパーツ名。この名前が画面に表示される様子)
  What is your Web part description? : (説明文。面倒なのでそのままEnter)
  Which framework would you like to use? : (JSのフレームワーク。Reactとか使う場合は指定する様子)

これが完了したら、インストールが開始されます。超時間かかりますが、待ちましょう。

Visual Studio Codeで、インストールしたフォルダを開いて起動
Ctrl + Shift + Bで、gulpのビルド実行
gulp buildを選択 → タスクのスキャンを出力せず実行をクリック
→これで、元々入っているSharePointFrameworkのビルドが実行されます。
VSCodeで、以下のコマンドを実行
```
gulp serve
```
→ブラウザが立ち上がり、SharePoint WorkBenchが起動します。
「+」ボタンをクリック後、パーツ名をクリックし、Webパーツを配置します。
既定のパーツが配置されていることを確認します。

カスタマイズ

デフォルト設定で起動できることを確認したら、ここからカスタマイズをしていきましょう。

jquery追加

まずはjqueryの追加です。

VSCodeで、以下のコマンドを実行

npm install jquery@2 --save
npm install @types/jquery@2 --save

VSCodeで、config/config.jsonを開き、externalsに以下を追加
```
"jquery":"node_modules/jquery/dist/jquery.min.js"
```

独自処理を追加

独自処理として、今回はWordPressのAPIを使用し、WordPressの記事一覧を取得し表示します。
※WordPressの向き先は、とりあえず自社サービスのものにしています。

src\webparts\sharePointWordpressに、WordPress.tsを追加します。
その後、以下のコードを追加します。

import * as $ from 'jquery';

export default class WordPress {
  public static getWordpressHtml = () => {
    var $defer = $.Deferred();

    // wordpressのAPIのURL
    $.getJSON('https://exment.net/wp-json/wp/v2/posts?_embed').then((data) => {
          console.log(data);

          var html = '';
          for(var index in data){
              var d = data[index];

              var title = d.title.rendered;
              var link = d.link;
              var excerpt = d.excerpt.rendered;
              var date = d.date;

              // ul作成
              var $a = $('', {'href' : link, 'style' : 'margin-bottom:4em; display:block;'});
              var $ul = $('');

              $ul.append($('', {'text': 'タイトル：' + title}));
              $ul.append($('
', {'text': '日付：' + date}));
              $ul.append($('', {'html': '本文：' + excerpt}));

              $a.append($ul);

              html += $a[0].outerHTML;
          }

          $defer.resolve(html);
      });

    return $defer.promise();
  }

}

src\webparts\sharePointWordpress\SharePointWordpressWebPart.tsの記述を修正します。

import { Version } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { escape } from '@microsoft/sp-lodash-subset';

import styles from './SharePointWordpressWebPart.module.scss';
import * as strings from 'SharePointWordpressWebPartStrings';

///// 追加---s
import * as $ from 'jquery';
//WordPress.tsを読み込む
import WordPress from './WordPress';
///// 追加---e

export interface ISharePointWordpressWebPartProps {
  description: string;
}

export default class SharePointWordpressWebPart extends BaseClientSideWebPart {

  public render(): void {
    ///// 修正---s
    // WordPress.ts内のgetWordpressHtml実行
    WordPress.getWordpressHtml()
      .then((html:string) => {
        $(this.domElement).html(html); 
      });
    ///// 修正---e
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

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

再度Ctrl + Shift + Bで、ビルドを行います。
その後Sharepoint WorkBenchにアクセスすることで、WordPressの記事一覧が表示されます。
無事、jqueryも呼び出した上で、独自の実装を実現できました！

SharePointFramework – 株式会社カジトリ 技術ブログ

Sharepoint Frameworkにプロパティ要素を追加し、画面から設定値を変更できるようにする

はじめに

SharePoint Frameworkのプロパティとは

実装

プロパティの追加

デフォルト値の修正

プロパティ値をWebパーツに埋め込む

まとめ

SharepointFrameworkを試してみる[WordPressの記事を表示]

はじめに

実装

今回の参考資料

SharePointFrameworkのインストール

カスタマイズ

jquery追加

独自処理を追加

SharePointFramework – 株式会社カジトリ技術ブログ