React Script Editor の紹介①

滞っていたこの雑なブログも、そろそろ復帰の時…。

SharePoint がモダン UI になって、少し時間が経ちました。 「あれができなくなった」「これがやりたい」といった具合にけっこう不満？がたまってる人がいたので、今回は「SPFx React Script Editor Web パーツ」を紹介がてら、一通り読めば実装できるように手順を書いていこうかと。

この Web パーツは、クラシック UI で標準提供されていた「スクリプトエディター Web パーツ」を、SPFx でリメイク？したものです。

前提環境

• Visual Studio Code (お好みでその他 IDE もどうぞ)
• Node.js
  事前にいくつかのモジュールを用意したいので、下記コマンドを実施します
  「npm install -g typescript gulp-cli」

本題

GitHub からソースコードを ZIP Download します。(Fork > Clone でもおｋ)

github.com

解凍したら、「samples\react-script-editor」を VS Code で開きます。

「Ctrl + ＠」でターミナルを起動します。

ターミナルで下記のコマンドを実行します。
このコマンドによって、react-script-editor で必要な追加モジュールがダウンロードされます。(けっこう時間かかる)
「npm install」

次は証明書のインストールを行います。(この後のローカル確認作業時に必要になります。)
「gulp trust-dev-cert」

次にローカルで Web パーツを動かしてみたいので、下記のコマンドを実行します。
このコマンドでは、TypeScript や Sass などのトランスパイル・バンドルを実施後、既定のブラウザで Web パーツをデバッグが開始されます。
「gulp serve」

Web パーツをページに追加して、スクリプトを挿入し、Preview を見てみましょう。
(ここでは、フォルダー内の readme.md に記載されたデモ用のスクリプトを挿入しています。)

けっこういい感じに動くんじゃないかなぁと。

さて、このままではデバッグモードを実行したままなので、VS Code に戻ってターミナルに「Ctrl + C」を送信して処理を中断しましょう。

ここまでで前半戦終了

続きは次の更新で。 次回は、実際の SharePoint サイトへ展開していきます。

(当然 OSS なので、何か問題があったり改善案がある場合には、GitHub の Issue に投稿してみるのもありかもしれませんね。)