クイック スタート: VS Code を使用して最初のアプリを構築する

適用対象: Developer

Visual Studio Code 用の SharePoint Embedded 拡張機能をインストールして、コンテナーの種類の作成、所有するアプリと課金の構成、コンテナーの種類の登録、コンテナーの作成を行い、エディターのガイド付きビューからサンプル アプリを読み込みます。

Visual Studio Marketplace から拡張機能を入手する

SharePoint 埋め込み Visual Studio Code 拡張機能を使用して、最初のアプリ用の標準コンテナーの種類を作成します。 また、拡張機能は、所有アプリの構成、Azure 課金のアタッチ、コンテナーの種類の登録を行います。 次に、コンテナーを作成し、ローカル サンプル アプリを実行します。

この記事では、ビルドの旅を開始します。 課金ガイダンスについては、「 コンテナーの種類の作成と構成」を参照してください。

ヒント

ガイド付きビューではなく、コーディング エージェントを使用してビルドすることをお勧めしますか? SharePoint 埋め込み MCP サーバーを使用して、自然言語を使用してリソースをプロビジョニングおよび管理します。

前提条件

開始する前に、以下を用意してください:

• Visual Studio Code がインストールされている。
• Microsoft 365 テナントへの管理者アクセス。
• SharePoint が利用できるテナント。
• アカウントがアクセスできる Azure サブスクリプションとリソース グループ。
• Azure サブスクリプションの所有者または共同作成者のアクセス許可。
• サンプル アプリ用にインストールされた Node.js と npm。
• Microsoft Entra ID で管理者の同意を付与するアクセス許可。

重要

Microsoft 365 テナントへの管理者アクセス権が必要です。 テナントをお持ちでない場合は、Microsoft 365 開発者プログラム、Microsoft カスタマー デジタル エクスペリエンス、または Microsoft 365 E3 試用版を使用します。

拡張機能をインストールする

この記事の上部にあるボタンを使用するか、エディター内から拡張機能をインストールします。

1. Visual Studio Code を開きます。
2. アクティビティ バーから [拡張機能 ] を開きます。
3. SharePoint Embedded を検索します。
4. [インストール] を選択します。
5. 拡張機能が既にインストールされている場合は、更新します。
6. アクティビティ バーの SharePoint 埋め込みアイコンを選択します。

サインイン

1. SharePoint Embedded ビューで、サインイン操作を選択します。
2. Microsoft 365 管理者アカウントを使用します。
3. ブラウザーで認証を完了します。
4. 要求されたアクセス許可を確認します。
5. [ 承諾 する] を選択して管理者の同意を付与します。
6. リダイレクトされたら Visual Studio Code に戻ります。

重要

同意プロンプトを注意深く確認します。 拡張機能には、開発リソースを構成するためのテナント アクセス許可が必要です。

サインインすると、拡張機能に SharePoint 埋め込みホーム ビューが表示されます。

標準コンテナーの種類の作成

コンテナーの種類は、一連の SharePoint 埋め込みコンテナーのリレーションシップ、アクセス権限、課金に関する責任、および選択した動作を定義します。

1. [ コンテナーの種類の作成] を選択します。
2. 請求方法として、[ 標準] を選択します。
3. コンテナーの種類の名前を入力します。
4. 作成が完了するまで、画面の指示に従います。

アプリを所有する organization が SharePoint Embedded の使用料を支払う場合は、標準コンテナーの種類を使用します。 評価版の場合は [ 評価版] を選択します。 顧客テナント課金の場合は、 directToCustomer 課金分類を使用するパススルー オプションを選択します。

所有するアプリを作成または選択する

すべてのコンテナーの種類には、1 つの所有 Microsoft Entra ID アプリケーションがあります。

1. 新しい Microsoft Entra ID アプリケーションを作成するか、既存のアプリケーション ID を選択します。
2. 新しいアプリケーションを作成する場合は、その名前を入力します。
3. 拡張機能で開発設定を構成させます。

注意

既存のアプリケーションを選択すると、拡張機能によってアプリの構成が更新されます。 このクイックスタートでは運用アプリを使用しないでください。

モデルについては、「 SharePoint Embedded アプリのアーキテクチャ」を参照してください。

標準請求の構成

Standard コンテナーの種類には Azure 課金が必要です。 拡張機能は、アカウントがアクセスできる Azure サブスクリプションとリソース グループを使用して課金を添付します。

1. Azure サブスクリプションを選択します。
2. リソース グループを選択します。
3. 拡張機能が Microsoft.Syntex リソース プロバイダーを登録し、課金を添付するのを待ちます。

課金の設定をスキップした場合、または必要な Azure アクセス許可がない場合、ツリーには課金が設定されていませんと表示されます。 後でセットアップを完了するには、コンテナーの種類を右クリックします。 次に、[ 課金の添付] を選択します。

コンテナーの種類をローカルで登録する

アプリでコンテナーを作成したり、コンテンツにアクセスしたりする前に、消費テナントにコンテナーの種類を登録する必要があります。

1. 作成後、プロンプトに従ってコンテナーの種類をローカル テナントに登録します。
2. プロンプトが表示されない場合は、コンテナーの種類を右クリックし、[ 登録] を選択します。
3. アクセス許可を確認します。
4. ブラウザーで管理者の同意を付与します。
5. Visual Studio Code に戻ります。

登録により、所有するアプリがコンテナー タイプのコンテナーに対して使用できるアクセス許可が構成されます。

最初のコンテナーの作成

1. SharePoint Embedded ツリーで、コンテナーの種類を展開します。
2. コンテナ ーを右クリックします。
3. [ コンテナーの作成] を選択します。
4. コンテナー名を入力します。
5. コンテナーがツリーに表示されることを確認します。

コンテナーは、SharePoint Embedded の基本的なストレージ ユニットおよびセキュリティ境界です。

サンプル アプリを読み込む

1. SharePoint Embedded ビューで、[ サンプル アプリの読み込み] を選択します。
2. SharePoint Embedded サンプルを選択します。

1. ローカル プレーン テキスト シークレットに関する警告を確認します。
2. クライアント シークレットを作成するように求められたら、[ローカル開発用に OK ] を選択します。
3. 拡張機能がランタイム構成ファイルに読み込まれるようにします。

重要

このサンプル構成は、開発専用です。 認証シークレットをプレーン テキストでローカル コンピューターに格納します。

サンプル アプリを実行する

ターミナルを開き、生成されたサンプル ディレクトリからサンプル アプリを実行します。

cd [your-path]\SharePoint-Embedded-Samples\Custom Apps\boilerplate-typescript-react
npm run start

サンプルは次のように開始します。

• Reactクライアントアプリケーション。
• Azure Functions アプリケーション サーバー。

両方のコンソール出力が表示されるまで待ちます。

その後で以下の手順に従います。

1. http://localhost:8080を開きます。
2. 同じ Microsoft 365 管理者アカウントでサインインします。
3. ホーム ページで [コンテナー ] を選択します。
4. コンテナーを作成し、サンプル UI からファイルをアップロードします。

注:

依存関係がインストールされ、両方のアプリケーションがビルドされる間、初期起動には数分かかることがあります。

スタートアップのトラブルシューティング

現象	チェック
ポートの競合	ポート 8080 が使用されている場合、アプリは次に利用可能なポートを試行します。
依存関係の失敗	npm install を実行してから、もう一度 npm run start を実行してください。
認証エラー	Microsoft Entra ID アプリに想定されるリダイレクト URI が含まれていることを確認します。
アクセスが拒否されました	登録と管理者の同意が成功したことを確認します。
課金が設定されていません	選択した Azure サブスクリプションに対する所有者または共同作成者のアクセス許可があることを確認し、[課金の添付] を使用します。

クリーンアップ

テストが完了すると、次の手順を実行します。

1. 不要になったテスト コンテナーを削除します。
2. このクイックスタート用に作成した Azure 課金リソースを確認します。
3. 不要になったローカル サンプル シークレットを削除します。

次の手順

コンテナーの種類のオプションの詳細については、「 コンテナーの種類の作成と構成」を参照してください。