次の方法で共有


以前の 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) は、ユーザー エージェントとして 1 つ以上のバージョンの数字と 0 個以上.の区切り記号 (例: edg/76.0.167.1) を返edg/します。 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 のインストールと構成については、いずれかのドキュメントを参照してください。 トランスパイルを自動化するには、 GruntWebPack などのタスク ランナーを使用することをお勧めします。 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) では実行されません。 メソッドを定義して実装する ES5 で記述されたポリフィル ライブラリがあります startsWithcore-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」を参照してください。

関連項目