SharePoint Frameworkの開発環境を作って、オリジナルWebパーツを作る。

なぜ必要になったか。

SharePoint上に、ちょっとしたJavaScriptを使った仕組みを組み込んでやりたかったというのが事の発端です。

以前なら、htmlの拡張子を.aspxに変えてやるだけで、SharePoint上で表示できていたそうなのですが、昨今はカスタムスクリプトというのを許可する必要がありました。

ところが、ここを切り替えても、24時間以内に許可は取り消されてしまいます。設定画面には注意書きがあります。セキュリティ上よろしくないということで、現在はSharePoint Framework (SPFx)が推奨されているようです。

何ができる？

簡単にいうと、SharePointのWebパーツなどが作れます。Webパーツ自体はTypeScriptで開発するということは、htmlファイルに書いていた内容を組み込めそうです。SharePointサイト上にHTMLファイルを置くのではなく、サイトページ上に配置したWebパーツに組み込んでやろうという試みです。

さっそくQiitaの記事を参考に

SharePoint Frameworkの記事を参考に開発環境をインストールしてみたのですが、どうもおかしい。
どの記事でも、glupというタスクランナーを使って、ローカルサーバを動かし、SharePointの画面をローカルで動かしてます。
スクショのＵＲＬを見たら、ローカルサーバですね。

なのに、実行してみたらURL欄にプレイスホルダーがむなしく表示されるだけ。

というわけで、最近仕組みが変わってたようです。

問題のプレイスホルダーはこちらにあります。部分を自分のSharePointサイトのURLに差し替えておけばOKです。昔はローカルサーバ上のHTMLファイルをひらいていたところが、実際のSPOサーバ上の指定箇所を、うまい具合にローカルサーバが差し替えてくれる仕組みになった模様。

つまり、最新のMicrosoft Learnに従えば万事うまくいく

楽を使用とQiitaから知見を集めようとしたのが今回のつまづきの原因でした。
こちらが公式ドキュメントで、ここに掲載されているコマンドを順番に実行すれば環境ができました。

私はものぐさなので、手順をまとめておきます。

Nodeのバージョンに注意。

気を付けるべきは古いバージョンのNode.jsをインストールすることです。
ドキュメントでは現在　V16と書いてあるので、インストールするべきはV16の中の一番最新のものです。ちなみにV16.20.2がV16の中で最新でした。

インストールができたら、VB Codeのターミナルとかで、下記を順番に実行します。
ものぐさな自分用にメモしておきます。

npm install gulp-cli yo @microsoft/generator-sharepoint --global
npm install gulp-cli --global
npm install @microsoft/generator-sharepoint --global
md hello
cd hello
yo @microsoft/sharepoint #いろいろ聞かれるのはとりあえずエンターで。ここで作成するWebパーツ名とか指定します。

最後のでhelloフォルダの中にたくさんのファイルが作られます。
config>serve.json ファイルの中の{tenantDomain}部分を置き換えます。

置き換えられたら、念のためにビルドしてみます。
VB Codeで Ctrl + Shift + B を押すと、こんなのが出てきますのでクリックします。

終わったらサーバを開きます。gulpがちゃんとインストールできていればうごくはず。署名の信頼は１回やればOK。

gulp trust-dev-cert #開発者用自己署名証明書の信頼
gulp serve #ローカルサーバの起動

編集するのは、ウェブパーツ名.ts

src>weparts>ソリューション名　の下にあるWebパーツ名.tsファイルの中身を開きます。

表示させたい内容を記述するのは、このdivタグの中。これだけわかったら、今回の目的は達成できそうです。

<div class="${ styles.helloWorld }"></div>

Webパーツのパッケージ化

先ほど開発していたフォルダに移動して、下記を実行します。

gulp bundle
gulp package-solution

これで、sharepoint\solutin 配下に、Webパーツ名.sppkgファイルが出来上がってます。

サイトへのsppkgファイルのインストール

SharePoint管理センターを開き、その他の機能＞アプリ＞開く　と進みます。

上記の画面がでたら、「Updload」から先ほどのsppkgファイルを選択します。
アップロードできると、このパッケージを１つのサイトで使うか、テナント全体のサイトで使えるようにするか聞いてきます。今回は１サイトだけで使いたいので、上側を選択しました。

Webパーツを使いたいサイトの設定画面から「アプリの追加」選ぶと、さきほどアップロードしたWebパーツが表示されていました。

さっそくサイトの編集からWebパーツを探してみると、作成したものが表示されました！

喜びもつかの間・・・原因を探ります。もう一息なのに。

バンドルとパッケージをやり直してリトライ！

いちどパッケージ化の前にクリアしてきれいな状態でやり直すとうまくいくらしいので、試してみました。

gulp clean
gulp bundle --ship
gulp package-solution --ship

すると、今回はSharePoint Frameworkの中で指定した内容が表示されました！！　これでやりたい仕組みを展開できそうです！