古いMicrosoftブラウザーと Office バージョンをサポートする

  • [アーティクル]

重要

Internet Explorer と Microsoft Edge 従来版 は Office アドインで引き続き使用されます

Office 2019 を通じた永続的なバージョンを含む、プラットフォームと Office バージョンの組み合わせによっては、Office アドインで使用されるブラウザーで説明されているように、Internet Explorer 11 と Microsoft Edge 従来版 (EdgeHTML ベース) に付属する Webview コントロールを使用してアドインをホストします。これらの Web ビューでアドインを起動したときに、アドインのユーザーに正常なエラー メッセージを提供することで、これらの組み合わせを少なくとも最小限の方法でサポートすることをお勧めします (ただし、必要ありません)。 次の点に注意してください。

  • Internet Explorer または Microsoft Edge 従来版 で開かなくなったOffice on the web。 そのため、AppSource では、これらのブラウザーのOffice on the webでアドインはテストされません。
  • AppSource は引き続き、Internet Explorer と Microsoft Edge 従来版 を使用するプラットフォームと Office デスクトップ バージョンの組み合わせをテストします。 ただし、アドインでこれらのブラウザーがサポートされていない場合にのみ警告が発行されます。 アドインは AppSource によって拒否されません。
  • Script Lab ツールは Internet Explorer をサポートしなくなりました。

Office アドインは、Office on the webで実行するときに IFrame 内に表示される Web アプリケーションです。 Office アドインは、Windows 上の Office または Mac 上の Office で実行するときに、埋め込みブラウザー コントロールを使用して表示されます。 埋め込みブラウザー コントロールは、オペレーティング システムまたはユーザーのコンピューターにインストールされているブラウザーによって提供されます。

古いバージョンの Windows と Office をサポートする予定の場合、アドインは、これらのバージョンで使用される埋め込み可能なブラウザー コントロールで動作する必要があります。 たとえば、Internet Explorer 11 (IE11) または Microsoft Edge 従来版 (EdgeHTML ベース) に基づくブラウザー コントロールなどです。 これらのブラウザー コントロールを使用する Windows と Office の組み合わせについては、「 Office アドインで使用されるブラウザー」を参照してください。

アドインが実行時に実行されているブラウザーを確認する

アドインは、 window.navigator.userAgent プロパティを読み取ることで、実行されているブラウザーを検出できます。 これにより、アドインは代替エクスペリエンスを提供するか、正常に失敗します。 次の例は、アドインが IE11 で実行されているか、Microsoft Edge 従来版で実行されているかを決定する例です。

if (navigator.userAgent.indexOf("Trident") !== -1) {
    /*
       IE11 is the browser in use. Do one of the following:
        1. Provide an alternate add-in experience that doesn't use any of the HTML5
           features that aren't supported in IE11.
        2. Enable the add-in to gracefully fail by adding a message to the UI that
           says something similar to:
           "This add-in won't run in your version of Office. Please upgrade either to
           perpetual Office 2021 or to a Microsoft 365 account."
    */
} else if (navigator.userAgent.indexOf("Edge") !== -1) {
    /*
       Microsoft Edge Legacy is the browser in use. Do one of the following:
        1. Provide an alternate add-in experience that's supported in Microsoft Edge Legacy.
        2. Enable the add-in to gracefully fail by adding a message to the UI that
           says something similar to:
           "This add-in won't run in your version of Office. Please upgrade either to
           perpetual Office 2021 or to a Microsoft 365 account."
    */
} else {
    /* 
       Another browser, other than IE11 or Microsoft Edge Legacy, is in use.
       Provide a full-featured version of the add-in here.
    */
}

重要

通常、プロパティを読む userAgent のは良い方法ではありません。 ユーザー エージェントを使用したブラウザーの検出に関する記事に精通していることを確認してください。これには、推奨事項や読み取userAgentりの代替手段が含まれます。 特に、Internet Explorer 11 の使用をサポートする代替アドイン エクスペリエンスを提供する場合は、ユーザー エージェントのテストではなく機能検出の使用を検討してください。

2021 年 9 月 30 日の時点で、「 探している情報がユーザー エージェントのどの部分に含まれているか 」セクションのテキストは、Internet Explorer 11 がリリースされる前の日付です。 これは一般的に正確であり、英語版の記事のセクションの テーブル は最新の状態です。 同様に、英語以外のバージョンの記事のテキストとほとんどの場合、テーブルは古いものです。

ブラウザーと Office バージョンのサポート情報を確認する

特定のブラウザーと Office バージョンをサポートする方法の詳細については、該当するタブを選択してください。

重要

Internet Explorer 11 では、メディア、記録、場所など、一部の HTML5 機能はサポートされていません。 アドインで Internet Explorer 11 をサポートする必要がある場合は、これらのサポートされていない機能を回避するようにアドインを設計するか、アドインで Internet Explorer がいつ使用されているかを検出し、サポートされていない機能を使用しない代替エクスペリエンスを提供する必要があります。 詳細については、「 実行時にアドインが実行されているブラウザーを特定する」を参照してください。

JavaScript の最新バージョンのサポート

Internet Explorer 11 では、ES5 より後の JavaScript バージョンはサポートされていません。 ECMAScript 2015 以降または TypeScript の構文と機能を使用する場合は、この記事の説明に従って 2 つのオプションがあります。 これら 2 つの手法を組み合わせることもできます。

トランスパイラーを使用する

TypeScript またはモダン JavaScript でコードを記述し、ビルド時に ES5 JavaScript にコードをトランスパイルできます。 結果として得られる ES5 ファイルは、アドインの Web アプリケーションにアップロードするファイルです。

人気のあるトランスパイラーは 2 つあります。 どちらも、TypeScript または ES5 後の JavaScript のソース ファイルを操作できます。 また、React ファイル (.jsx および .tsx) でも動作します。

アドイン プロジェクトでの transpiler のインストールと構成については、いずれかのドキュメントを参照してください。 トランスパイルを自動化するには、 Grunt や WebPack などのタスク ランナーを使用することをお勧めします。 tsc を使用するサンプル アドインについては、「Office アドイン Microsoft Graph React」を参照してください。 babel を使用するサンプルについては、「 オフライン ストレージ アドイン」を参照してください。

注:

(Visual Studio Code ではなく) Visual Studio を使用している場合は、tsc を使用するのが最も簡単です。 nuget パッケージを使用してサポートをインストールできます。 詳細については、「 Visual Studio 2019 の JavaScript と TypeScript」を参照してください。 Visual Studio で babel を使用するには、ビルド スクリプトを作成するか、 WebPack タスク ランナーや NPM タスク ランナーなどのツールで Visual Studio のタスク ランナー エクスプローラーを使用します。

ポリフィルを使用する

ポリフィルは、より新しいバージョンの JavaScript の機能を複製する以前のバージョンの JavaScript です。 ポリフィルは、以降の JavaScript バージョンをサポートしていないブラウザーで機能します。 たとえば、文字列メソッド startsWith は ES5 バージョンの JavaScript に含まれていないため、Internet Explorer 11 では実行されません。 メソッドを定義して実装する ES5 で記述されたポリフィル ライブラリがあります startsWith 。 core-js ポリフィル ライブラリをお勧めします。

ポリフィル ライブラリを使用するには、他の JavaScript ファイルやモジュールと同様に読み込みます。 たとえば、アドインのホーム ページ HTML ファイル (たとえば<script src="/js/core-js.js"></script>) でタグを使用<script>したり、import 'core-js';JavaScript ファイルで ステートメントを使用importしたりできます (例: )。 JavaScript エンジンに のような startsWithメソッドが表示されると、最初にその名前のメソッドが言語に組み込まれているかどうかを確認します。 ある場合は、ネイティブ メソッドを呼び出します。 メソッドが組み込まれていない場合にのみ、エンジンは読み込まれたすべてのファイルを検索します。 そのため、ポリフィルされたバージョンは、ネイティブ バージョンをサポートするブラウザーでは使用されません。

core-js ライブラリ全体をインポートすると、すべての core-js 機能がインポートされます。 Office アドインで必要なポリフィルのみをインポートすることもできます。 これを行う方法については、 CommonJS API に関するページを参照してください。 core-js ライブラリには、必要なほとんどのポリフィルがあります。 core-js ドキュメントの 「不足している Polyfills 」セクションで詳しく説明されている例外がいくつかあります。 たとえば、サポートされていません fetchが、 フェッチ ポリフィルを使用できます。

core.jsを使用するサンプル アドインについては、「 Word アドイン Angular2 StyleChecker」を参照してください。

Internet Explorer でアドインをテストする

Internet Explorer 11 のテストに関するページを参照してください。

関連項目