【SharePoint Online】jQueryUI アコーディオンWeb パーツを作成する ーSPFx開発 その5ー

2019年11月4日

こんにちは。
今回はjQueryUI Accordionを利用してWebパーツを作成しようと思います。
まずは手始めにテキストのアコーディオンを作成しますが、
今後はリストと連携したりできたらなぁ。

それでは行きましょう。

SharePoint Frameworkの記事一覧

雑多な知識

jQueryを利用するためには、jQuery と jQuery UI の NPM パッケージをインストールする必要があるようです。

npm install jquery@2
npm install jqueryui

そのほかにtypings(TypeScriptの型定義ファイルを管理するツール)というものもインストールしておきます。

npm install @types/jquery@2
npm install @types/jqueryui

既定のバンドル情報を書き換える

[config\config.json]ファイルには既定のバンドル情報が記載されています。
今回は既定のバンドルから jQuery と jQueryUIを除外しておきます。
除外する場合は、externalsセクションに記載しておくようです。

"externals": {
    "jquery":"node_modules/jquery/dist/jquery.min.js",
    "jqueryui":"node_modules/jqueryui/jquery-ui.min.js"
  },

アコーディオン用のHTMLファイルを作成する

MyAccordionTemplate.tsとして以下コードを
src/webparts/jqueryAccordion配下に作成します。

export default class MyAccordionTemplate {
    public static templateHtml: string =  `
      <div class="accordion">
        <h3>Section 1</h3>
        <div>
            <p>
            いろはにほへと ちりぬるを
            </p>
        </div>
        <h3>Section 2</h3>
        <div>
            <p>
            わかよたれそ つねならむ
            </p>
        </div>
        <h3>Section 3</h3>
        <div>
            <p>
            うゐのおくやま けふこえて
            </p>
            <ul>
            <li>リストタグ1</li>
            <li>リストタグ2</li>
            <li>リストタグ3</li>
            </ul>
        </div>
        <h3>Section 4</h3>
        <div>
            <p>
            あさきゆめみし
            </p>
            <p>
            ゑひもせすん
            </p>
        </div>
    </div>`;
}

作成したテンプレートをWebパーツ内で読み込みます。
src\webparts\jQuery\JqueryAccordionWebPart.tsのimportセクションに以下を書き込んでます。

import MyAccordionTemplate from './MyAccordionTemplate';

同じくjQueryも読み込みましょう。

import * as jQuery from 'jquery';
import 'jqueryui';

モジュールローダーを読み込むことで外部CSSを利用できるようにします。

import { SPComponentLoader } from '@microsoft/sp-loader';

クラス内で外部のjquery-ui.cssファイルを読み込むようにします。
これで以下のことが実現できます。

・Web パーツを初期化するコンテキストを使用して、親コンストラクターを呼び出します。
・CDN からアコーディオンのスタイルを非同期的に読み込みます。

public constructor() {
  super();

  SPComponentLoader.loadCss('//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css');
}

最後にアコーディオンをレンダリングするためにinnerHTMLを書き換えましょう。

public render(): void {
  this.domElement.innerHTML = MyAccordionTemplate.templateHtml;

  const accordionOptions: JQueryUI.AccordionOptions = {
    animate: true,
    collapsible: false,
    icons: {
      header: 'ui-icon-circle-arrow-e',
      activeHeader: 'ui-icon-circle-arrow-s'
    }
  };

  jQuery('.accordion', this.domElement).accordion(accordionOptions);
}

JQueryUI.AccordionOptions にはいくつかのオプションを定義しています。
オプションの詳細は公式サイトを確認してください。

最後にjQuery(‘.accordion’, this.domElement).accordion(accordionOptions);を初期化してあげて完了です。

動作確認

これだけでアコーディオンWebパーツを作成することができました。
それではgulp serveコマンドで動作確認をしてみましょう。

正常に表示させることができました。
・・・なんとも物悲しい(笑)

ちょっと記事が長くなってしまったので、今回はここまでです。
次回はこのWebパーツを編集していきたいと思います。

それではまた。


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

SharePoint Frameworkの記事一覧