SharePoint Framework(SPFx)で作ったカスタムアプリをサイトに追加・公開する方法

  • このエントリーをはてなブックマークに追加

SharePointのモダンUI向けに作成したSharePoint Framework(以降SPFx)の独自アプリを、SharePoint Onlineに展開するには、パッケージ化してサイトに追加する必要があります。
今回はサイトに適用するまでの方法と手順をまとめました。

前提条件

  • SharePoint Online
  • モダンUI
※その他、説明にVisual Studio Code(以下VSCode)を使用します

独自の拡張機能の作成~動作確認まではこちらの記事で取り扱っています。


SharePointのモダンUIでカスタムCSS・カスタムJSを適用する方法


権限の確認

SPFxを操作するには、管理者権限が必要です。
SharePoint管理センター及び、App Catalogにアクセスできるか事前に確認を行ってください。
App Catalogは、SharePoint管理センターの[その他の機能]>[アプリ]のページです。
権限が足りない場合は管理者に権限を付与してもらってください。
Microsoft Entraから権限を付与できます。


1.パッケージ化

では早速、アプリをパッケージ化しましょう。
VSCodeを起動し、アプリのファイルがあるフォルダを選択して開き、ターミナルウィンドウを表示します。

まずは1つめのコマンドを実行します。


完了したら、次はこちらを実行します。


この2つのコマンドが実行されると、sharepoint/solution フォルダに.sppkgファイルが生成されます。これがアプリのデータになります。
※生成後にアプリの修正を行う場合は、再度2つのコマンドを実行すると、.sppkgファイルが上書き保存されます。

2.App Catalogからアプリをアップロード、動作を確認

App Catalogにアクセスし、.sppkgファイルをアップロード

SharePoint管理センターから、App Catalogにアクセスします。
App Catalogは、SharePoint管理センターの[その他の機能]>[アプリ]と進みます。(App Catalogへのアクセスには、テナントの権限が必要です)
「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に書き換えて入力してください。


ログインする
実行後に別ウィンドウが開き、ログインを求められます。
管理者権限があるアカウントのログイン情報を入力してログインします。

SharePointのテナントの設定を変更

以下のコマンドを実行して、設定を変更します。



次に、このコマンドを実行します。


以上で、設定は完了です。ゲストユーザーからアプリが稼働するか試してみてください。

執筆者:森島[ WEBデザイナー ]

8bit デザイナーです。 デザイン・マークアップ・映像制作など幅広く担当しています。

関連記事

WordPress

アンケートフォームをホームページに設置できるWordPressプラグインの活用事例4選

WordPressでアンケートフォームを作成したい!けれどきちんと日本語対応しているプラグインが見つからない…と思ったことはありませんか? 弊社でリリースをしたフォーム作成作成プラグイン「Easy Form Maker」であれば、完全日本語対応で、通常のお問い合わせフォームだけでなく、アンケートフォームの作成を行うことができます。 今回は、実際にどんなアンケートフォームが作成できるかご紹介します。 目次1 Easy Form Makerって?2 イベントなどのフィードバックア […]

WordPress

カレンダーをホームページに表示できるWordPressプラグインの活用事例4選

イベントのお知らせをカレンダー形式で掲載したいけれど、なかなかWordPressの日本語プラグインでピッタリなものが見つからない…と思ったことはありませんか? 弊社でリリースをしたWordPressのイベントカレンダープラグイン「Event Calendar Maker」であれば、完全日本語対応で、ホームページ上に簡単にイベントカレンダーを掲載することができます。 今回は、実際にどんなシーンでこのカレンダーが活用できるのかをご紹介します! 目次1 Event Calendar […]

スマホアプリ

高齢者を見守るアプリ「みまもりシルバー」をリリースしました!

高齢のご家族が外出中、いつもと違う時間に帰ってこないと、ちょっとした不安が頭をよぎることはありませんか? 「道に迷っていないかな」「転んでいないかな」…心配事はなかなか尽きないですよね。 そんな心配をすぐに解消できるGPS見守りアプリ「みまもりシルバー」をリリースしました。 メールアドレスなどによる会員登録やサービス契約は不要!基本無料で、かんたんに使うことができます。 この記事では、アプリの魅力や使い方を詳しくご紹介します。 目次1 みまもりシルバーはなにができるの?1.1 […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。