SharePoint Embedded for Visual Studio Code

SharePoint Embedded Visual Studio Code 拡張機能は、開発者が SharePoint Embedded アプリケーション開発を無料で開始するのに役立ちます。

重要

SharePoint Embedded でのビルドを開始するには、Microsoft 365 テナントへの管理アクセス権が必要です。 まだテナントをお持ちでない場合は、Microsoft 365 Developer Program、Microsoft Customer Digital Experience を使用して独自のテナントを取得するか、Microsoft 365 E3 ライセンスの無料試用版を作成できます。

SharePoint Embedded for Visual Studio Code をインストールする

1. Visual Studio Code で新しいウィンドウを開き、アクティビティ バーの [拡張機能] に移動します。
2. [拡張機能] ビューで "SharePoint Embedded" を検索します。 Visual Studio Marketplace で拡張機能を表示することもできます。
3. [インストール] を選択すると、SharePoint Embedded アイコンがアクティビティ バーに表示されます。
4. 既にインストールされている場合は、利用可能な場合は、最新バージョンに更新してください。
5. アイコンを選択して SharePoint Embedded ビューを開き、試用版構成でコンテナーの種類を作成します。

管理者の資格情報を使用してサインインする

拡張機能を使用するには、管理者アカウントを使用して Microsoft 365 テナントにサインインする必要があります。

• 認証により、外部ブラウザーで新しいタブが開き、アクセス許可が付与されます

  

• 要求されたアクセス許可を慎重に確認し、管理者の同意を求めるポップアップ ウィンドウで [ 同意 する] を選択します

  

承認が成功したら、ダイアログで [開く] を選択して VSCode にリダイレクトします。

試用版構成を使用してコンテナーの種類を作成する

サインインすると、 試用版構成でコンテナーの種類を作成するように求められます。 コンテナーの種類を使用すると、SharePoint Embedded API の呼び出しを開始し、SharePoint Embedded を使用して概念実証アプリケーションを構築できます。 コンテナーの種類の詳細については、こちらをご覧ください。

• [試用版コンテナーの種類の作成] を選択します
• プロンプトに従って、コンテナーの種類に名前を付けます。 後でコンテナーの種類名を変更できます。

注:

SharePoint Embedded for Visual Studio Code では、現時点では試用版構成を持つコンテナーの種類のみがサポートされています。 標準またはパススルーの課金構成を持つその他のコンテナーの種類は、SharePoint Online PowerShell モジュールを使用して作成する必要があります。

Microsoft Entra ID アプリを作成する

すべてのコンテナーの種類は、Microsoft Entra ID アプリケーションによって所有されます。 無料試用版コンテナーの種類を作成する最初の手順は、新しいアプリケーションを作成するか、所有するアプリケーションとして既存のMicrosoft Entra ID アプリケーションを選択することです。 新しいアプリケーションの名前を指定するか、既存のアプリケーションのいずれかを選択できます。 SharePoint Embedded アプリ アーキテクチャの詳細

• プロンプトに従って、新しい Entra アプリケーションに名前を付けるか、既存のアプリケーション ID を選択します。

注:

既存のアプリケーションを選択すると、そのアプリの構成設定が更新され、SharePoint Embedded とこの拡張機能の両方で動作します。 運用環境のアプリケーションでは、これを行うことはお勧めしません。

コンテナーの種類が作成され、アプリケーションが構成されると、左側のナビゲーション バーにローカル テナントの登録をツリーとして表示できるようになります。

コンテナーの種類を登録する

コンテナーの種類を作成したら、そのコンテナーの種類をローカル テナントに登録する必要があります。 コンテナーの種類 の登録について詳しくは、こちらをご覧ください。

• プロンプトに従い、VS Code ウィンドウの右下隅にある [ ローカル テナントに登録 ] を選択します

  

• プロンプトが表示されない場合は、 <container-type-name> を右クリックし、メニューから [登録 ] を選択できます。

  

アクセス許可を付与する

アクセス許可を確認し、プロンプトに従って管理者の同意を付与する

外部ブラウザー ウィンドウが開き、サインインして管理者の同意を付与します

最初のコンテナーを作成する

コンテナーの種類が登録された状態で、最初のコンテナーを作成できるようになりました。 コンテンツをアップロードおよび管理するために作成できるコンテナーの種類は 5 つだけです。

• 左側のナビゲーション バーのツリーから [コンテナー] ドロップダウンを右クリックし、[コンテナーの作成] を選択します。
• 作成するコンテナーの名前を入力します

コンテナーのリサイクル

また、拡張機能内のコンテナーをリサイクルして回復することもできます。

サンプル アプリの読み込み

無料試用版コンテナーの種類を作成したら、拡張機能を使用して SharePoint Embedded サンプル アプリの 1 つを読み込み、Microsoft Entra ID アプリとコンテナーの種類の詳細をランタイム構成ファイルに自動的に設定できます。

サンプル アプリケーションを読み込むと、ローカル コンピューターで認証するためのプレーン テキスト シークレットが作成されることを通知されます。

アプリケーションでクライアント シークレットが見つからない場合は、作成するかどうかを確認するメッセージが表示されます。 [OK] を押して続行します。

重要

これは運用環境を対象としたものではありません。 運用環境のアプリケーション登録を設定する方法の詳細については、こちらを参照してください。

サンプル アプリの使用

ターミナルで次のコマンドを実行します。これにより、2 つの部分で構成されるサンプル アプリケーションが開始されます。

1. React クライアント アプリケーション - ポート 8080 で実行されているフロントエンド ユーザー インターフェイス
2. Azure関数アプリケーション サーバー - SharePoint Embedded 操作を処理するバックエンド API サーバー

# Navigate to your sample application directory
cd [your-path]\SharePoint-Embedded-Samples\Samples\spe-typescript-react-azurefunction

# Install dependencies and start the application
npm run start

注:

依存関係がインストールされ、両方のアプリケーションがビルドされるため、最初のスタートアップには数分かかる場合があります。 アプリケーションに移動する前に、両方のコンソール出力が表示されるのを待ちます。

これにより、依存関係がインストールされ、サーバーとクライアント アプリケーションが実行されます。一度実行すると、ターミナルに次の情報が表示され、その後、 http://localhost:8080 に移動してアプリケーションにアクセスできます。

両方のアプリケーションが正常に実行されたら、

1. Web ブラウザーを開き、 http://localhost:8080
2. Microsoft 365 管理者アカウント (VS Code 拡張機能で使用されているアカウントと同じ) を使用してサインインする
3. ホーム ページで [コンテナー ] を選択して、コンテナーの作成とファイルのアップロードを開始します
4. 画面の指示に従って SharePoint Embedded コンテナーを操作する

重要

このサンプル アプリケーションでは、開発目的でのみ、認証シークレットをプレーン テキストで格納します。 運用環境では、この構成を使用しないでください。

トラブルシューティング

問題が発生した場合:

• ポートが既に使用されている: ポート 8080 が既に使用されている場合、アプリケーションは自動的に次の使用可能なポートを試します
• 依存関係がインストールされていない: 前に手動で npm install を実行してみてください npm run start
• 認証エラー: Microsoft Entra ID アプリが正しいリダイレクト URI で正しく構成されていることを確認する

Postman 環境をエクスポートする

SharePoint Embedded Postman コレクションを使用すると、SharePoint Embedded API を探索して呼び出すことができます。 コレクションには、認証とさまざまな識別子に使用される変数を含む環境ファイルが必要です。 この拡張機能により、この設定された環境ファイルの生成が自動化されるため、Postman にインポートして SharePoint Embedded API をすぐに呼び出すことができます。