前回はSharePointFramework(以降SPFx)の環境構築について記載しましたが、今回はSharePoint上にリリースする手順になります
-
-
VSCodeを使用するSharePointFramework(SPFx)の環境構築 - ナストンのまとめ
VSCode(Dev Containers)とDockerを使用してSharePointFramework(以降、SPF ...
前回の記事へ
※前回のSPFxの環境構築だとデバックができない状態ですが、何が原因か特定できていないので特定できしだい記事にします
SPFxをパッケージ化する
前回の記事で作成したプロジェクト上のコマンドラインで以下のコマンドを順次実行します
gulp bundle --ship

上記のコマンドを実行し、以下のような表示がされたら次のコマンドを実行します

gulp package-solution --ship


以下のような表示されたらパッケージ化が完了です。パッケージ化されたものは以下に配置されています
<プロジェクトフォルダ名>\sharepoint\solution 配下に(プロジェクト名).sppkgというものが生成されているはずでこれがパッケージになります

SharePointにアップする
SharePoint管理センター(URLに-adminが含まれるもの)にアクセスし、左の『その他の機能』>『アプリ』の下にある『開く』をクリック

アプリのサイトに移動したら、『Upload』をクリック

そうするとファイル選択画面が表示されるので、先ほどのsppkgファイルを選択します。アップロードが完了すると以下の画像のように設定項目が色々と表示されるので今回は画像の内容で設定しています。どちらか選択したら下にある「アプリを有効化する」をクリックします

アップしたアプリの状態が「Enabled」となっていれば、問題ありません。これでSharePointへのアップは完了です

アプリの配置
続いてアップしたものをSharePointに配置します。対象サイトに移動し、サイトコンテンツで左上にある『追加』>『アプリ』をクリック

画像のように先ほど追加したアプリの追加ボタンをクリックすると対象サイトにアプリが追加されます

無事に追加できるとサイトコンテンツ配下に先ほどのアプリが表示されます。これで、対象サイトで使えるようになります

追加したアプリはページ上に配置できるのでページを編集し、追加ボタンに詳細設定配下にアプリがあるのでそれを選択します

これでSharePointへのリリースが完了となります

追加したWebパーツだけのページを作成
ホームから新規 > ページをクリック

ページテンプレートが表示されるので『アプリ』タブから作成したいSPFxアプリを選択し、右下の「ページの作成」をクリック

ページ名等をこの画面で設定できるので、設定後保存します

これで対象のWebパーツが1つだけ配置されたページの作成が完了となります

会社紹介
私が所属しているアドバンスド・ソリューション株式会社(以下、ADS)は一緒に働く仲間を募集しています
会社概要
「技術」×「知恵」=顧客課題の解決・新しい価値の創造
この方程式の実現はADSが大切にしている考えで、技術を磨き続けるgeekさと、顧客を思うloveがあってこそ実現できる世界観だと思っています
この『love & geek』の精神さえあれば、得意不得意はno problem!
技術はピカイチだけど顧客折衝はちょっと苦手。OKです。技術はまだ未熟だけど顧客と知恵を出し合って要件定義するのは大好き。OKです
凸凹な社員の集まり、色んなカラーや柄の個性が集まっているからこそ、常に新しいソリューションが生まれています
ミッション
私たちは、テクノロジーを活用し、業務や事業の生産性向上と企業進化を支援します
-
-
アドバンスド・ソリューション株式会社
アドバンスド・ソリューションは主にMicrosoft製品を使用して、企業の生産性向上に取り組んでいます。要件定義から導入 ...
サイトへ移動