Visual Studio で Office アドインをデバッグする
この記事では、Visual Studio 2022 のいずれかの Office アドイン プロジェクト テンプレートで作成された Office アドインのクライアント側コードをデバッグする方法について説明します。 Office アドインでのサーバー側コードのデバッグの詳細については、「 Office アドインのデバッグの概要 - サーバー側またはクライアント側」を参照してください。
注:
Visual Studio を使用して Office on Mac でアドインをデバッグすることはできません。 Mac でのデバッグの詳細については、「Mac での Office アドインのデバッグ」を参照してください。
ビルドとデバッグのプロパティの確認
デバッグを開始する前に、各プロジェクトのプロパティを確認して、Visual Studio が目的の Office アプリケーションを開き、その他のビルドプロパティとデバッグ プロパティが適切に設定されていることを確認します。
アドイン プロジェクトのプロパティ
アドイン プロジェクトの [プロパティ ] ウィンドウを開き、プロジェクトのプロパティを確認します。
ソリューション エクスプローラーで、(Web アプリケーション プロジェクトではなく) アドイン プロジェクトを選択します。
メニュー バーから [表示]、[プロパティ ウィンドウ] の順に選択します。
次の表では、アドイン プロジェクトのプロパティについて説明します。
| プロパティ | 説明 |
|---|---|
| 開始動作 | ご自身のアドインに対してデバッグ モードを指定します。 これは、Windows 上の Microsoft 365 でデバッグする場合は、 Office デスクトップ クライアント に設定する必要があります。 Web 上の Microsoft 365 でデバッグするには、 Microsoft Edge に設定する必要があります。 |
|
開始ドキュメント (Excel、PowerPoint、Word アドインのみ) |
プロジェクトの開始時に開くドキュメントを指定します。 新しいプロジェクトでは、[新しい Excel ブック]、[新しい Word 文書]、または [新しいPowerPointプレゼンテーション] に設定されます。 特定のドキュメントを指定するには、「 既存のドキュメントを使用してアドインをデバッグする」の手順に従います。 |
| Web プロジェクト | アドインに関連付けられている Web プロジェクトの名前を指定します。 |
|
メール アドレス (Outlook アドインのみ) |
Outlook アドインのテストに使用する Exchange Server または Exchange Online のユーザー アカウントのメール アドレスを指定します。 空白のままにすると、デバッグを開始するときに電子メール アドレスの入力を求められます。 |
|
EWS の URL (Outlook アドインのみ) |
Exchange Web サービス URL を指定します (例: https://www.contoso.com/ews/exchange.aspx)。 このプロパティは空白のままにすることができます。 |
|
OWA の URL (Outlook アドインのみ) |
Outlook on the Web URL を指定します (例: https://www.contoso.com/owa)。 このプロパティは空白のままにすることができます。 |
|
多要素認証を使用する (Outlook アドインのみ) |
多要素認証を使用するかどうかを示すブール値を指定します。 既定値は false ですが、プロパティには実用的な効果はありません。 通常、電子メール アカウントにログインするための 2 番目の要素を指定する必要がある場合は、デバッグを開始するときに にメッセージが表示されます。 |
|
ユーザー名 (Outlook アドインのみ) |
Outlook アドインのテストに使用する Exchange Server または Exchange Online のユーザー アカウントの名前を指定します。 このプロパティは空白のままにすることができます。 |
| プロジェクト ファイル | ビルド、構成、およびその他のプロジェクト情報が含まれているファイルの名前を指定します。 |
| プロジェクト フォルダー | プロジェクト ファイルの場所を指定します。 |
|
アクティブな展開の構成 (Excel をデバッグする場合にのみ存在します。 PowerPoint、または Word on the web) |
デプロイ構成を指定します。 これは [既定値] に設定する必要があります。 |
|
サーバー接続 (Excel をデバッグする場合にのみ存在します。 PowerPoint、または Word on the web) |
[サイト URL] プロパティで指定された SharePoint サービスにプロジェクトが接続するかどうかを指定します。 これは [オンライン] に設定する必要があります。 |
|
サイトの URL (Excel をデバッグする場合にのみ存在します。 PowerPoint、または Word on the web) |
デバッグ時にアドイン ページをホストする SharePoint テナントの完全な絶対 URL を指定します。 例えば https://mysite.sharepoint.com/ |
注:
Outlook アドインの場合は、[プロパティ] ウィンドウで 1 つ以上の Outlook アドインのみのプロパティの値を指定することもできますが、必要ありません。
Web アプリケーション プロジェクトのプロパティ
Web アプリケーション プロジェクトの [プロパティ ] ウィンドウを開き、プロジェクトのプロパティを確認します。
ソリューション エクスプローラーで、Web アプリケーション プロジェクトを選択します。
メニュー バーから [表示]、[プロパティ ウィンドウ] の順に選択します。
次の表では、Office アドイン プロジェクトに最も関連する Web アプリケーション プロジェクトのプロパティについて説明します。
| プロパティ | 説明 |
|---|---|
| SSL 有効 | サイトで SSL を有効にするかどうかを指定します。 Office アドイン プロジェクトの場合、このプロパティを True に設定する必要があります。 |
| SSL URL | サイトにセキュリティで保護された HTTPS URL を指定します。 読み取り専用です。 |
| URL | サイトに HTTP URL を指定します。 読み取り専用です。 |
| プロジェクト ファイル | ビルド、構成、およびその他のプロジェクト情報が含まれているファイルの名前を指定します。 |
| プロジェクト フォルダー | プロジェクト ファイルの場所を指定します。 読み取り専用です。 Visual Studio で実行時に生成されるマニフェスト ファイルは、この場所の bin\Debug\OfficeAppManifests フォルダーに書き込まれます。 |
Windows デスクトップでアドイン プロジェクトをデバッグする
このセクションでは、Windows 上のデスクトップ Office でアドインを起動してデバッグする方法について説明します。つまり、アドイン プロジェクトの Start Action プロパティが Office Desktop Client に設定されている場合です。
アドイン プロジェクトを開始する
メニュー バーから [デバッグ] > [デバッグの開始] を選択するか、F5 ボタンを押してプロジェクトを開始します。 Visual Studio によってソリューションが自動的にビルドされ、Office ホスト アプリケーションが起動します。
Visual Studio によってプロジェクトがビルドされると、次のタスクが実行されます。
アドインのみのマニフェスト ファイルのコピーを作成し、
_ProjectName_\bin\Debug\OfficeAppManifestsディレクトリに追加します。 アドインをホストする Office アプリケーションは、Visual Studio を起動してアドインをデバッグするときにこのコピーを使用します。アドインを Office アプリケーションに表示できるようにする一連のレジストリ エントリを Windows コンピューターに作成します。
Web アプリケーション プロジェクトをビルドし、ローカルの IIS Web サーバー (
https://localhost) にデプロイします。ローカルの IIS Web サーバーに展開した最初のアドイン プロジェクトの場合は、現在のユーザーの信頼されたルート証明書ストアに Self-Signed 証明書をインストールするように求められる場合があります。 これは、IIS Express がアドインの内容を正しく表示するために必要です。
注:
Office で Edge レガシ Webview コントロール (EdgeHTML) を使用して Windows コンピューターでアドインを実行する場合、ローカル ネットワーク ループバック除外の追加を求めるメッセージが表示される場合があります。 これは、Webview コントロールがローカルの IIS Web サーバーにデプロイされた Web サイトにアクセスできるようにするために必要です。 この設定は、Visual Studio の[ツール]>[オプション]>[Office ツール (Web)]>[Web アドインのデバッグ] の順に選択して変更することもできます。 Windows コンピューターで使用される Webview コントロールについては、「 Office アドインで使用されるブラウザーと Webview コントロール」を参照してください。
次に、Visual Studio で次の操作が行われます。
~remoteAppUrlトークンをスタート ページの完全修飾アドレス (たとえば、https://localhost:44302/Home.html) に置き換えることによって、アドインのみのマニフェスト ファイル (_ProjectName_\bin\Debug\OfficeAppManifestsディレクトリにコピーされた) の SourceLocation 要素を変更します。IIS Express で Web アプリケーション プロジェクトを起動します。
マニフェストを検証します。
重要
マニフェストの検証エラーが発生した場合は、Visual Studio のマニフェスト スキーマ ファイルが最新の機能をサポートするように更新されていない可能性があります。 最初のトラブルシューティング手順は、これらのファイルの 1 つ以上を最新バージョンに置き換える必要があります。 詳細な手順については、「 Visual Studio プロジェクトのマニフェスト スキーマ検証エラー」を参照してください。
Office アプリケーションを開き、アドインをサイドロードします。
アドインをデバッグする
Visual Studio 2022 でアドインをデバッグするための最適な方法は、アドインが WebView2 で実行されているかどうかによって異なります。これは、Microsoft Edge (Chromium) に関連付けられている Webview コントロールか、古い Webview コントロールです。 使用されている Webview コントロールを確認するには、「 Office アドインで使用されるブラウザーと Webview コントロール」を参照してください。コンピューターで WebView2 を使用している場合は、「 組み込みの Visual Studio デバッガーを使用してデスクトップでデバッグする」を参照してください。 その他の Webview コントロールについては、「 ブラウザー開発者ツールを使用してデスクトップでデバッグする」を参照してください。
組み込みの Visual Studio デバッガーを使用してデスクトップでデバッグする
ソース JavaScript または TypeScript ファイルで、必要に応じてブレークポイントを設定します。 これは、前のセクション「アドイン プロジェクトを開始する」で説明されているように、アドインを 開始する前または後に実行できます。 ブレークポイントを設定すると、インターネット インフォメーション サービス (IIS) サーバーがシャットダウンする場合は、ブレークポイントを設定した後にデバッグを再起動します。
アドインが実行されている場合は、アドインの UI を使用して、ブレークポイントを含むコードを実行します。
重要
Office.initializeまたはOffice.onReadyに設定されたブレークポイントがヒットしません。 これらのメソッドをデバッグするには、「 initialize 関数と onReady 関数をデバッグする」を参照してください。
ヒント
問題が発生した場合は、「 Visual Studio で JavaScript または TypeScript アプリをデバッグする」を参照してください。
ブラウザー開発者ツールを使用してデスクトップでデバッグする
前のセクション「 アドイン プロジェクトを開始する」の手順に従います。
まだ開いていない場合は、Office アプリケーションでアドインを起動します。 たとえば、作業ウィンドウ アドインの場合は、[ ホーム ] リボン ([ タスクウィンドウの表示 ] ボタンなど) にボタンが追加されます。 リボンのボタンを選択します。
注:
アドインが Visual Studio によってサイドロードされていない場合は、手動でサイドロードできます。 手順に従って、プラットフォーム のテスト用の Office アドインをサイドロード します。
使用可能なアドインのリストから [開発者向けアドイン] セクションを見つけ、ご利用のアドインを選択して登録します。
ヒント
作業ウィンドウは、最初に開いたときに空白で表示される場合があります。 その場合は、後の手順でデバッグ ツールを起動したときに正しくレンダリングされます。
パーソナリティ メニューを開き、[デバッガーのアタッチ] を選択します。 このアクションにより、Office が Windows コンピューターでアドインを実行するために使用している Webview コントロールのデバッグ ツールが開きます。 ブレークポイントを設定し、次のいずれかの記事で説明するようにコードをステップスルーできます。
コードを変更するには、まず Visual Studio でデバッグ セッションを停止し、Office アプリケーションを閉じます。 変更を加え、新しいデバッグ セッションを開始します。
Web 上の Microsoft 365 でアドイン プロジェクトをデバッグする
このセクションでは、Web 上のデスクトップ Office でアドインを開始およびデバッグする方法について説明します。つまり、アドイン プロジェクトの Start Action プロパティが Microsoft Edge に設定されている場合です。
Web でアドイン プロジェクトを開始する
メニュー バーから [デバッグ] > [デバッグの開始] を選択するか、F5 ボタンを押してプロジェクトを開始します。 Visual Studio によってソリューションが自動的にビルドされ、Microsoft 365 テナントの Office アプリケーション ホスト ページが起動します。
注:
Web 上でアドインをデバッグしているときに、次のようなAADSTS50011 エラーが発生する可能性があります。
"要求で指定されたリダイレクト URI {Full absolute URL to add-in home page} が、アプリケーション用に構成されたリダイレクト URI と一致しません。.."
これは、SharePoint に展開される新しい Web アプリケーションが使用可能になるまでに最大 24 時間かかる場合があるために発生します。 アドインをすぐにデバッグできるようにするには、次の手順を実行します。
Visual Studio でデバッグを停止します。
次の行を含む PowerShell スクリプトを作成します。 プレースホルダー
{Full absolute URL to add-in home page}を、エラー メッセージのリダイレクト URL ("https://contoso-79d42f062409ae.sharepoint.com/_forms/default.aspx"" など) に置き換えます。Connect-MgGraph -Scopes Application.ReadWrite.All $sharepointPrincipal = Get-MgServiceprincipal -Filter "AppId eq '00000003-0000-0ff1-ce00-000000000000'" $sharepointPrincipal | fl $replyUrls = $sharepointPrincipal.ReplyUrls $replyUrls += "{Full absolute URL to add-in home page}" Update-MgServiceprincipal -ServicePrincipalId $sharepointPrincipal.Id -ReplyUrls $replyUrlsPowerShell でスクリプトを実行します。
メニュー バーから [デバッグ] > [デバッグの開始] を選択してプロジェクトを再起動するか、F5 ボタンを押します。
Visual Studio がプロジェクトをビルドすると、次のタスクが実行されます。
ログイン資格情報の入力を求めるメッセージが表示されます。 繰り返しサインインするように求められた場合、または承認されていないというエラーが表示された場合は、Microsoft 365 テナントのアカウントに対して Basic Auth が無効になる可能性があります。 この場合、代わりに Microsoft アカウントを使用してみます。 アドイン プロジェクトのプロパティ ウィンドウで、[ 多要素認証を使用 する] プロパティを True に設定することもできます。 「 アドイン プロジェクトのプロパティ」を参照してください。
アドインのみのマニフェスト ファイルのコピーを作成し、
_ProjectName_\bin\Debug\OfficeAppManifestsディレクトリに追加します。 Microsoft 365 では、Visual Studio を起動してアドインをデバッグするときに、このコピーが使用されます。Web アプリケーション プロジェクトをビルドし、Microsoft 365 テナントにデプロイします。
次に、Visual Studio で次の操作が行われます。
~remoteAppUrlトークンをスタート ページの完全修飾アドレス (たとえば、https://contoso-79d42f062409ae.sharepoint.com/_forms/default.aspx) に置き換えることによって、アドインのみのマニフェスト ファイル (_ProjectName_\bin\Debug\OfficeAppManifestsディレクトリにコピーされた) の SourceLocation 要素を変更します。Web アプリケーション プロジェクトを開始します。
マニフェストを検証します。
重要
マニフェストの検証エラーが発生した場合は、Visual Studio のマニフェスト スキーマ ファイルが最新の機能をサポートするように更新されていない可能性があります。 最初のトラブルシューティング手順は、これらのファイルの 1 つ以上を最新バージョンに置き換える必要があります。 詳細な手順については、「 Visual Studio プロジェクトのマニフェスト スキーマ検証エラー」を参照してください。
Microsoft Edge で Microsoft 365 テナントの Office アプリケーション ホスト ページを開きます。
Web 上のアドインをデバッグする
Visual Studio 2022 でアドインをデバッグするための最適な方法は、アドインが WebView2 で実行されているかどうかによって異なります。これは、Microsoft Edge (Chromium) に関連付けられている Webview コントロールか、古い Webview コントロールです。 使用されている Webview コントロールを確認するには、「 Office アドインで使用されるブラウザーと Webview コントロール」を参照してください。コンピューターで WebView2 を使用している場合は、「 組み込みの Visual Studio デバッガーを使用して Web 上でデバッグする」を参照してください。 その他の Webview コントロールについては、「 ブラウザー開発者ツールを使用して Web 上でデバッグする」を参照してください。
組み込みの Visual Studio デバッガーを使用して Web 上でデバッグする
ソース JavaScript または TypeScript ファイルで、必要に応じてブレークポイントを設定します。 これは、前のセクション「Web でアドイン プロジェクトを開始する」で説明されているように、アドイン を開始する前または後で実行できます。
アドインが実行されている場合は、アドインの UI を使用して、ブレークポイントを含むコードを実行します。
ヒント
- Outlook on the web では、Visual Studio デバッガーがアタッチされない場合があります。 ヒットしないことを示すブレークポイントでエラーが発生した場合は、ブラウザー開発者ツールを使用して Visual Studio デバッガーにアタッチします。F5 キーを押してデバッグを開始し、Web 上の Outlook が開いたら、「 ブラウザー開発者ツールを使用して Web でデバッグする」の最初の 4 つの手順に従います。 (Microsoft Edge (Chromium ベース) の手順を使用します)。 ブラウザー ツールでブレークポイントを設定し、ヒットすると、ブラウザー ツールと Visual Studio の両方のブレークポイントで実行が一時停止します。 これは、Visual Studio デバッガーがアタッチされていることを示します。 この時点で、ブラウザー ツールを閉じ、Visual Studio で通常と同様にブレークポイントを追加できます。
- 問題が発生した場合は、「 Visual Studio で JavaScript または TypeScript アプリをデバッグする」を参照してください。
ブラウザー開発者ツールを使用して Web 上でデバッグする
Outlook を除く任意のホストのアドインの場合は、Office ホスト アプリケーション ページで F12 キーを押してデバッグ ツールを開きます。
Outlook アドインの場合、アドインのマニフェストが読み取り画面用に構成されている場合は、電子メール メッセージまたは予定アイテムを選択して独自のウィンドウで開きます。 アドインが新規作成画面のみに対して構成されている場合は、新しいメッセージ、メッセージへの返信、または新しい予定ウィンドウを開きます。 適切なウィンドウにフォーカスがあることを確認し、F12 キーを押してデバッグ ツールにペンを付けます。
ツールが開いた後、アドインを起動します。 正確な手順は、アドインの設計によって異なります。 通常、ボタンを押して作業ウィンドウを開きます。 Outlook のウィンドウの上部にあるツール バーで、[ その他のアプリ ] ボタンを選択し、開いた吹き出しからアドインを選択します。
![[その他のアプリ] ボタンと、アドインの名前とアイコンを他のアプリ アイコンと共に表示して開く吹き出し。](../images/outlook-more-apps-button.png)
ブレークポイントを設定し、コードをステップ実行するには、次のいずれかの記事の手順を使用します。 それぞれに、より詳細なガイダンスへのリンクがあります。
ヒント
Office.initialize関数またはアドインが開いたときに実行されるOffice.onReady関数で実行されるコードをデバッグするには、ブレークポイントを設定してから、アドインを閉じてもう一度開きます。 これらの関数の詳細については、「 Office アドインを初期化する」を参照してください。コードを変更するには、まず Visual Studio でデバッグ セッションを停止し、Outlook ページを閉じます。 変更を加え、新しいデバッグ セッションを開始します。
既存のドキュメントを使用してアドインをデバッグする
Excel、PowerPoint、または Word アドインのデバッグ時に使用するテスト データを含むドキュメントがある場合、プロジェクトの開始時にドキュメントが開くように、Visual Studio を構成できます。 アドインのデバッグ時に使用する既存のドキュメントを指定するには、次の手順を完了します。
ソリューション エクスプローラーで、(Web アプリケーション プロジェクトではなく) アドイン プロジェクトを選択します。
メニュー バーから [プロジェクト]、[既存のアイテムを追加] の順に選択します。
[既存のアイテムを追加] ダイアログ ボックスで、追加するドキュメントを探して選択します。
[追加] を選択して、ドキュメントをプロジェクトに追加します。
ソリューション エクスプローラーで、(Web アプリケーション プロジェクトではなく) アドイン プロジェクトを選択します。
メニュー バーから [表示]、[プロパティ ウィンドウ] の順に選択します。
[プロパティ] ウィンドウで、[ドキュメントの開始] リストを選択して、プロジェクトに追加したドキュメントを選択します。 現在、このプロジェクトは、そのドキュメントでアドインを起動するように構成されています。
次のステップ
アドインが意図したとおりに動作した後、アドインをユーザーに配布する方法については、「Office アドインを展開し、発行する」を参照してください。
Office Add-ins