SharePointのモダンUI向けに作成したSharePoint Framework（以降SPFx）の独自アプリを、SharePoint Onlineに展開するには、パッケージ化してサイトに追加する必要があります。
今回はサイトに適用するまでの方法と手順をまとめました。
目次
前提条件
- SharePoint Online
- モダンUI
独自の拡張機能の作成～動作確認まではこちらの記事で取り扱っています。
SharePointのモダンUIでカスタムCSS・カスタムJSを適用する方法
権限の確認
SPFxを操作するには、管理者権限が必要です。SharePoint管理センター及び、App Catalogにアクセスできるか事前に確認を行ってください。
App Catalogは、SharePoint管理センターの[その他の機能]＞[アプリ]のページです。
権限が足りない場合は管理者に権限を付与してもらってください。
Microsoft Entraから権限を付与できます。
1.パッケージ化
では早速、アプリをパッケージ化しましょう。VSCodeを起動し、アプリのファイルがあるフォルダを選択して開き、ターミナルウィンドウを表示します。
まずは1つめのコマンドを実行します。
|
1 |
gulp bundle --ship |
完了したら、次はこちらを実行します。
|
1 |
gulp package-solution --ship |
この2つのコマンドが実行されると、sharepoint/solution フォルダに.custom-css.sppkgファイルが生成されます。これがアプリのデータになります。
※生成後にアプリの修正を行う場合は、再度2つのコマンドを実行すると、.sppkgファイルが上書き保存されます。
2.App Catalogからアプリをアップロード、動作を確認
App Catalogにアクセスし、.sppkgファイルをアップロード
SharePoint管理センターから、App Catalogにアクセスします。App Catalogは、SharePoint管理センターの[その他の機能]＞[アプリ]と進みます。（管理者権限が必要です）
「Upload」ボタンから、手順1で作成した.sppkgファイルをアップロードします。
アップ直後、アプリを有効化するかどうか、選択肢が表示されます。
「このアプリのみを有効化する」にチェックし、アプリを有効化します。
有効化され、一覧にアプリが追加されます。
適用するサイトからアプリを追加
アプリを適用したいサイトのアプリを追加ページを開きます。右上の歯車から、「アプリを追加」から進みます。
先程追加したアプリが表示されているので、「追加」ボタンを押すとCSS・JSが適用されます。
サイトに戻って、実際に適用されたか確認します。適用されていればOKです。
◆もしアプリを修正した時は…
アプリに修正が入った場合は、再度手順1からをやり直します。
同名のアプリを.sppkgファイルをアップロードすれば、サーバーにあるアプリを上書き保存可能です。サイトにも新しい状態で適用されます。
ゲストユーザーが存在する場合の注意点
SharePointを受託開発として請ける場合など、テスト環境は自社領域に構築してクライアント確認をする場合があるかと思います。その際、ゲストユーザーを招待して閲覧権限を付与しますが、
稀にゲストユーザーの環境から独自アプリが適用されない（アプリから読み込んでいるカスタムCSSが適用されていないなど）状態になってしまう場合があるようです。当社の環境でも発生したことがあります。
関係者に報告する前に、ゲスト権限のテストアカウントを発行し、アプリが正しく反映されているか確認するよう習慣づけた方がよいですね。。
アプリファイルの保存場所がデフォルトではゲストユーザーからアクセスできない場所に設定されているようで、そのため権限がなくエラーになるようです。
以下の手順で設定しなおすと、解消される可能性があります。一度試してみてください。
必要なツールなど
- SharePoint Online Management Shell
- 管理権限があるアカウントのログイン情報
SharePoint Online Management Shell（以下SPO Shell）はこちらからインストールしてください。
SPO Shellをサイトに接続する
SPO Shellを起動SPO Shellを起動し、現象が発生しているSharePointのサイトに接続します。
SPO Shellにコマンドを入力して実行します。
URL部分はSharePointのサイトのURLに書き換えて入力してください。
|
1 |
Connect-SPOService -Url https://yourtenant-admin.sharepoint.com |
ログインする
実行後に別ウィンドウが開き、ログインを求められます。
管理者権限があるアカウントのログイン情報を入力してログインします。
以下のコマンドを実行して、設定を変更します。
|
1 |
Set-SPOTenant -ShowEveryoneClaim $true |
次に、このコマンドを実行します。
|
1 |
Set-SPOTenantCdnEnabled -CdnType Public |
以上で、設定は完了です。ゲストユーザーからアプリが稼働するか試してみてください。
