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

適用対象: 開発者

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

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

前提条件

開始する前に、次の情報があることを確認してください。

• 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 Embedded] アイコンを選択します。

サインイン

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

重要

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

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

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

コンテナーの種類は、一連の SharePoint Embedded コンテナーのリレーションシップ、アクセス権限、課金アビリティ、選択した動作を定義します。

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. 不要になったローカル サンプル シークレットを削除します。

次の手順

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