Microsoft Edge レガシの開発者ツールを使用してアドインをデバッグする

  • [アーティクル]

この記事では、元の Edge Webview コントロールである EdgeHTML を使用する Windows と Office のバージョンの組み合わせをコンピューターが使用している場合に、アドインのクライアント側コード (JavaScript または TypeScript) をデバッグする方法について説明します。

使用しているブラウザーまたは Web ビューを特定するには、「 Office アドインで使用されるブラウザーと Webview コントロール」を参照してください。

ヒント

最近のバージョンの Office では、Office が使用している Webview コントロールを識別する 1 つの方法は、使用可能なアドインの パーソナリティ メニュー を使用することです。 (Outlook ではパーソナリティ メニューはサポートされていません)。メニューを開き、[ セキュリティ情報] を選択します。 Windows の [ セキュリティ情報] ダイアログで、 ランタイム は Microsoft Edge、 Microsoft Edge レガシ、または Internet Explorer を報告します。 古いバージョンの Office では、ランタイムはダイアログに含まれていません。

注:

Edge レガシ Web ビューを使用するバージョンの Office をインストールする場合、または現在のバージョンの Office で Edge レガシを強制的に使用するには、「 Edge レガシ Web ビューに切り替える」を参照してください。

Microsoft Edge DevTools プレビューを使用して作業ウィンドウ アドインをデバッグする

  1. Microsoft Edge DevTools プレビューをインストールします。 ("Preview" という単語は、履歴上の理由から名前に含まれています。より新しいバージョンはありません)。

    注:

    アドインに関数を実行する アドイン コマンド がある場合、関数は、Microsoft Edge DevTools が検出またはアタッチできない非表示のブラウザー ランタイム プロセスで実行されるため、この記事で説明する手法を使用して関数内のコードをデバッグすることはできません。

  2. アドインをサイドロードして実行します。

  3. Microsoft Edge DevTools を実行します。

  4. ツールで、[ローカル] タブを開きます。アドインの名前が一覧表示されます。 (EdgeHTML で実行されているプロセスのみがタブに表示されます。このツールは、Microsoft Edge (WebView2) や Internet Explorer (Trident) など、他のブラウザーまたは Web ビューで実行されているプロセスにアタッチできません。

    レガシ-edge-debugging という名前のプロセスを示す Edge DevTools。

  5. アドイン名を選択して、ツールで開きます。

  6. [デバッガー] タブを開きます。

  7. 次の手順で、デバッグするファイルを開きます。

    1. デバッガー タスク バー で、[ファイル内の検索を表示] を選択します。 検索ウィンドウが開きます。
    2. デバッグするファイルのコード行を検索ボックスに入力します。 これは、他のファイルにはないはずです。
    3. [更新] ボタンを選択します。
    4. 検索結果で行を選択して、検索結果の上のペインでコード ファイルを開きます。

    Edge DevTools の [デバッグ] タブには、A から D のラベルが付いた 4 つのパーツがあります。

  8. ブレークポイントを設定するには、コード ファイル内の行を選択します。 ブレークポイントは、 呼び出し履歴 (右下) ウィンドウに登録されます。 コード ファイル内の行ごとに赤いドットが表示される場合もありますが、これは確実に表示されません。

  9. 必要に応じてアドインの関数を実行して、ブレークポイントをトリガーします。

ヒント

ツールの使用方法の詳細については、「 Microsoft Edge (EdgeHTML) 開発者ツール」を参照してください。

アドインでダイアログをデバッグする

アドインが Office Dialog API を使用している場合、ダイアログは作業ウィンドウとは別のプロセスで実行され (存在する場合)、ツールはそのプロセスにアタッチする必要があります。 次の手順に従ってください。

  1. アドインとツールを実行します。

  2. ダイアログを開き、ツールの [ 更新 ] ボタンを選択します。 ダイアログ プロセスが表示されます。 その名前は、ダイアログで開いている HTML ファイル内の <title> 要素から取得されます。

  3. 「 Microsoft Edge DevTools Preview を使用して作業ウィンドウ アドインをデバッグする」セクションの説明に従って、プロセスを選択して開き、デバッグします。

    [マイ ダイアログ] という名前のプロセスを示す Edge DevTools。

Edge レガシ Web ビューに切り替える

Edge レガシ Web ビューを切り替えるには、2 つの方法があります。 コマンド プロンプトで簡単なコマンドを実行することも、既定で Edge レガシを使用するバージョンの Office をインストールすることもできます。 最初の方法をお勧めします。 ただし、次のシナリオでは 2 つ目を使用する必要があります。

  • プロジェクトは Visual Studio と IIS で開発されました。 Node.js ベースではありません。
  • テストで絶対に堅牢である必要があります。
  • 何らかの理由でコマンド ライン ツールが機能しない場合。

コマンド ラインを使用して切り替える

プロジェクトが Node.js ベース (つまり、Visual Studio とインターネット情報サーバー (IIS) で開発されていない) 場合は、通常は最新の Web ビューを使用する Windows と Office のバージョンを組み合わせて使用する場合でも、アドインを実行するために Internet Explorer によって提供される Edge レガシまたは Trident Webview コントロールのいずれかを使用するように Windows 上の Office に強制できます。 Windows と Office のバージョンのさまざまな組み合わせで使用されるブラウザーと Web ビューの詳細については、「 Office アドインで使用されるブラウザーと Webview コントロール」を参照してください。

注:

Webview の変更を強制するために使用されるツールは、Microsoft 365 のベータ サブスクリプション チャネルでのみサポートされます。 Microsoft 365 Insider プログラムに参加し、[ベータ チャネル] オプションを選択して Office Beta ビルドにアクセスします。 「 Office について: 使用している Office のバージョン」も参照してください。

厳密には、ベータ チャネルが必要なのは、このツールの webview スイッチです ( 手順 2 を参照)。 このツールには、この要件を持たない他のスイッチがあります。

  1. プロジェクトが Office アドイン用 Yeoman ジェネレーターを使用して作成されていない場合は、office-addin-dev-settings ツールをインストールする必要があります。 コマンド プロンプトで次のコマンドを実行します。

    npm install office-addin-dev-settings --save-dev

    重要

    Office-addin-dev-settings ツールは Mac ではサポートされていません。

  2. プロジェクトのルートにあるコマンド プロンプトで、Office で次のコマンドで使用する Web ビューを指定します。 <path-to-manifest>を相対パスに置き換えます。これは、プロジェクトのルートにある場合はマニフェスト ファイル名だけです。 <webview>をieまたはedge-legacyに置き換えます。 オプションの名前は、Web ビューが作成されたブラウザーの名前に注意してください。 ie オプションは "Trident" を意味し、edge-legacy オプションは "EdgeHTML" を意味します。

    npx office-addin-dev-settings webview <path-to-manifest> <webview>

    次に例を示します。

    npx office-addin-dev-settings webview manifest.xml ie

    npx office-addin-dev-settings webview manifest.json edge-legacy

    コマンド ラインに、Webview の種類が IE (または Edge レガシ) に設定されていることを示すメッセージが表示されます。

  3. 完了したら、次のコマンドを使用して、Windows と Office のバージョンの組み合わせの既定の Web ビューを使用して再開するように Office を設定します。

    npx office-addin-dev-settings webview <path-to-manifest> default

Edge レガシを使用するバージョンの Office をインストールする

次の手順に従って、Microsoft Edge レガシ Web ビュー (EdgeHTML) を使用してアドインを実行する Office のバージョン (Microsoft 365 サブスクリプションからダウンロード) または Internet Explorer (Trident) を使用するバージョンをインストールします。

  1. 任意の Office アプリケーションで、リボンの [ ファイル ] タブを開き、[ Office アカウント ] または [アカウント] を選択 します。 [About host-name]\(ホスト名について\) ボタン (Word についてなど) を選択します。

  2. 開いたダイアログで、xx.x.xxxxx.xxxxx の完全なビルド番号を見つけて、そのコピーをどこかに作成します。

  3. Office 展開ツールをダウンロードします。

  4. ダウンロードしたファイルを実行して、ツールを抽出します。 ツールをインストールする場所を選択するように求められます。

  5. ツールをインストールしたフォルダー ( setup.exe ファイルがある場所) で、 config.xml という名前のテキスト ファイルを作成し、次の内容を追加します。

    <Configuration>
  <Add OfficeClientEdition="64" Channel="SemiAnnual" Version="16.0.xxxxx.xxxxx">
    <Product ID="O365ProPlusRetail">
      <Language ID="en-us" />
    </Product>
  </Add>
</Configuration>

  6. Version値を変更します。

    • EdgeHTML を使用するバージョンをインストールするには、 16.0.11929.20946に変更します。
    • Trident を使用するバージョンをインストールするには、 16.0.10730.20348に変更します。

  7. 必要に応じて、 OfficeClientEdition の値を "32" に変更して 32 ビット Office をインストールし、必要に応じて Language ID 値を変更して Office を別の言語でインストールします。

  8. 管理者としてコマンド プロンプトを開きます。

  9. setup.exeとconfig.xml ファイルを含むフォルダーに移動します。

  10. 次のコマンドを実行します。

    setup.exe /configure config.xml

    このコマンドは Office をインストールします。 このプロセスには数分かかる場合があります。

  11. Office キャッシュをクリアします。

重要

インストール後は、Office の自動更新をオフにして、使用を完了する前に使用する Webview を使用しないバージョンに Office が更新されないようにしてください。 これは、インストールから数分以内に発生する可能性があります。 次の手順に従ってください。

  1. Office アプリケーションを起動し、新しいドキュメントを開きます。
  2. リボンの [ ファイル ] タブを開き、[ Office アカウント ] または [アカウント] を選択 します。
  3. [ 製品情報 ] 列で、[ 更新オプション] を選択し、[ 更新プログラムの無効化] を選択します。 このオプションを使用できない場合、Office は自動的に更新されないように既に構成されています。

古いバージョンの Office の使用が完了したら、 config.xml ファイルを編集し、 Version を以前にコピーしたビルド番号に変更して、新しいバージョンを再インストールします。 次に、管理者コマンド プロンプトで setup.exe /configure config.xml コマンドを繰り返します。 必要に応じて、自動更新を再度有効にします。