【SharePoint Online】クライアント側の Web パーツを SharePoint ページに展開する ーSPFx開発 その3ー

2019年9月16日

こんにちは。
今回はワークベンチではなく、SharePoint で Web パーツを展開して登録する方法を見ていきたいと思います。
自身で作成されたWebパーツをSharePointのモダンページで利用できるところまでを記事にします。
参考は引き続きMSDocから、「クライアント側の Web パーツを SharePoint ページに展開する」のページを参考にさせていただきます。
それでは行きましょう。

SharePoint Frameworkの記事一覧

Web パーツをパッケージ化する

まずはWeb パーツをパッケージ化する方法を見ていきます。
コマンドプロンプト からソリューションのフォルダーを開きましょう。
開いたら以下コードでパッケージを作成します。

gulp package-solution

sharepoint/solutionフォルダー配下にパッケージが作成されました。

パッケージをアプリ カタログに展開する

作成したパッケージをアプリカタログサイトに配置していきます。
アプリカタログサイトがない場合は、こちらの記事を参考に作成してください。

アプリカタログサイトのSharePoint 用アプリライブラリを開き、
作成したsppkgをドラッグ・アンド・ドロップします。

表示されたポップアップで「展開」をクリックします。

これでデプロイは完了です。

デプロイしたWebパーツをテストサイトに配置してみる

さて、では実際にテストサイトに配置して利用してみます。
歯車アイコンから「アプリの追加」をクリックします。

追加できるアプリに存在しましたので追加してみましょう。

サイトコンテンツに確かに登録されることを確認できました。

ですが、この状態ですと、内部的にローカルの情報をホストしているため、
ページに貼り付けてもエラーとなってしまいますので、
いつものようにローカルサーバーを起動します。
ブラウザでの表示は不要なので、nobrowserオプションを付けています。

gulp serve –nobrowser

そしてサイトページにWebパーツを貼り付けると、
正常にリスト情報も取得でき、貼り付けることができました。

問題が発生した場合

以下のように接続が拒否されるエラーが発生しました。
Yeomanでプロジェクトを作成した際に固有の権限が含まれているかどうかを聞かれた際に
Yesを選択してしまったことが原因だったようですのでみなさんも注意してください。

最後に

今回は以上にしようと思います。
次回はローカルでホストしていたWebパーツをOffice 365 CDN からのクライアント側 Web パーツのホスティングに切り替えるように設定をし直そうと思います。
これでようやくアプリが1つ完成というイメージですね。
結構手間がかかるんだなぁ・・・

なんか調べたら他の方法でもWebパーツ作成できるようなので色々試していこう!

それではまた。

次:
【SharePoint Online】CDN からのクライアント側 Web パーツをホスティングさせる ーSPFx開発 その4ー

SharePoint Frameworkの記事一覧