以前の Microsoft Webview と Office バージョンをサポートする

  • [アーティクル]

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

重要

Internet Explorer と Microsoft Edge レガシからの Web ビューは、Office アドインで引き続き使用されます

Office 2019 を通じたボリューム ライセンスの永続的なバージョンを含む、一部のプラットフォームと Office バージョンの組み合わせは、引き続き、Internet Explorer 11 ("Trident" と呼ばれる) と Microsoft Edge レガシ ("EdgeHTML" と呼ばれる) に付属する Webview コントロールを使用してアドインをホストします(「 ブラウザーと Office アドインで使用される Webview コントロール」を参照)。Internet Explorer 11 は、2023 年 2 月に Windows 10 と Windows 11 で無効になっており、起動するための UI が削除されました。しかし、それはまだそれらのオペレーティングシステムと一緒にインストールされています。 そのため、Internet Explorer の Trident やその他の機能は、引き続き Office からプログラムで呼び出すことができます。

これらの Web ビューでアドインを起動したときに、アドインのユーザーに正常なエラー メッセージを提供することで、これらの組み合わせを少なくとも最小限の方法でサポートすることをお勧めします (ただし、必要ありません)。 次の点に注意してください。

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

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

アドインが実行時に実行されている Web ビューを確認する

アドインは、 window.navigator.userAgent プロパティを読み取ることで、実行されている Web ビューを検出できます。 これにより、アドインは代替エクスペリエンスを提供するか、正常に失敗します。 次に、アドインが Trident または EdgeHTML で実行されているかどうかを判断する例を示します。

if (navigator.userAgent.indexOf("Trident") !== -1) {
    /*
       Trident is the webview 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 Trident (Internet Explorer 11).
        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 later) or to a Microsoft 365 account."
    */
} else if (navigator.userAgent.indexOf("Edge") !== -1) {
    /*
       EdgeHTML is the browser in use. Do one of the following:
        1. Provide an alternate add-in experience that's supported in EdgeHTML (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 later) or to a Microsoft 365 account."
    */
} else {
    /* 
       A webview other than Trident or EdgeHTML is in use.
       Provide a full-featured version of the add-in here.
    */
}

注:

Microsoft Edge (Chromium) は、 edg/ の後に 1 つ以上のバージョンの数字と 0 個以上の . 区切り記号をユーザー エージェントとして返します(たとえば、 edg/76.0.167.1)。 eは名前の末尾に存在しません。 "エッジ" ではなく "edg" です。

この JavaScript は、可能な限りアドインのスタートアップ プロセスの早い段階である必要があります。 Trident が検出されたときに Office をアップグレードするようにユーザーにアドバイスするアドイン ホーム ページの例を次に示します。

<!doctype html>
<html lang="en" data-framework="typescript">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Contoso Task Pane Add-in</title>

    <!-- Office JavaScript API -->
    <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
</head>

<body>
    <div id="main">
         <!-- 
            The add-in UI is here. 
         -->
    </div>

    <!-- 
        The script below makes the following div display if the
        webview is Trident, and hides the regular div. 
    -->
    <div id="tridentmessage" style="display: none; padding: 10;">
        This add-in will not run in your version of Office. Please upgrade either to 
        perpetual Office 2021 (or later) or to a Microsoft 365 account.
    </div>
    <script>
        if (navigator.userAgent.indexOf("Trident") !== -1) {
            var tridentMessage = document.getElementById("tridentmessage");
            var normalUI = document.getElementById("main");
            tridentMessage.style.display = "block";
            normalUI.style.display = "none";
        } 
    </script>
</body>
</html>

重要

userAgent プロパティを読み取るとは限りません。 ユーザー エージェントを使用したブラウザーの検出に関する記事 (userAgentの読み取りに関する推奨事項や代替策など) をよく理解していることを確認してください。 特に、Trident の使用をサポートする代替アドイン エクスペリエンスを提供する場合は、ユーザー エージェントのテストではなく機能検出の使用を検討してください。 ただし、この場合と同様に、Trident でアドインが機能しないことを通知するだけの場合は、 userAgent を使用することをお勧めします。

2023 年 7 月 24 日の時点で、英語以外のバージョンの記事はすべて古くから程度が異なります。12 年以上古いものもあります。

同じ日付の時点で、「 ユーザー エージェントのどの部分に探している情報が含まれているか 」セクションのテキストとテーブルは、 英語版 の記事の Trident または Internet Explorer 11 について言及しなくなりました。 [ブラウザー名とバージョン] の表の Internet Explorer 11 の行は次のとおりです。

Engine 含める必要があるもの を含めてはいけません
Internet Explorer 11 Trident/7.0; .*rv:xyz

レンダリング エンジンのテーブルでは、Trident の行は次のとおりです。

Engine 含める必要があるもの コメント
トライデント Trident/xyz Internet Explorer は、このフラグメントを User-Agent 文字列のコメント セクションに配置します。

Webview と Office バージョンのサポート情報を確認する

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

Trident に関連付けられている JavaScript エンジンでは、ES5 より後の JavaScript バージョンはサポートされていません。 最新バージョンの JavaScript を使用する場合、または TypeScript を使用する場合は、 JavaScript の最新バージョンのサポートに関するページを参照してください。

重要

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

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

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

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

コードが実行されている Web ビューまたはランタイムでサポートされているものより新しいバージョンの JavaScript の構文と機能を使用する場合、または TypeScript を使用する場合は、トランスパイラーまたはポリフィルまたはその両方を使用する必要があります。 たとえば、トランスパイラーは、ES5 で不明な => 演算子などの構文または演算子を ES5 に変換します。 ポリフィルは、新しいバージョンの JavaScript のメソッド、型、およびクラスを、以前のバージョンの同等の機能に置き換えます。

次のサブセクションでは、ターゲット JavaScript 標準が ES5 であることを前提としていますが、この情報は他のターゲットにも適用されます。 たとえば、ターゲットが ECMAScript 2016 の場合は、これらのサブセクションで "ES5" を "ECMAScript 2016" (および "post-ES5" を "post-ECMAScript 2016") に置き換えます。

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

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 の JavaScript と TypeScript に関するページを参照してください。 Visual Studio で babel を使用するには、ビルド スクリプトを作成するか、 WebPack タスク ランナーや NPM タスク ランナーなどのツールで Visual Studio のタスク ランナー エクスプローラーを使用します。

ポリフィルを使用する

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

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

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

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

関連項目