以前の Microsoft Webview と Office バージョンをサポートする
Office アドインは、Office on the webで実行するときに iframe 内に表示される Web アプリケーションです。 Office アドインは、Windows 上の Office または Mac 上の Office で実行するときに、埋め込みブラウザー コントロール (Web ビューとも呼ばれます) を使用して表示されます。 埋め込みブラウザー コントロールは、オペレーティング システムまたはユーザーのコンピューターにインストールされているブラウザーによって提供されます。
重要
インターネット エクスプローラーとMicrosoft Edge 従来版からの Web ビューは、Office アドインで引き続き使用されます
Office 2019 を通じたボリューム ライセンスの永続的なバージョンを含む一部のプラットフォームと Office バージョンの組み合わせは、Office アドインで使用されるブラウザーと Webview コントロールで説明されているように、インターネット エクスプローラー 11 ("Trident" と呼ばれます) と Microsoft Edge 従来版 ("EdgeHTML" と呼ばれます) に付属する Webview コントロールを使用してアドインをホストします。インターネット エクスプローラー 11 は、2023 年 2 月にWindows 10とWindows 11で無効になり、起動するための UI は削除されましたが、これらのオペレーティング システムでは引き続きインストールされています。 そのため、Trident やその他のインターネット エクスプローラーの機能は、引き続き Office からプログラムで呼び出すことができます。
これらの Web ビューでアドインを起動したときに、アドインのユーザーに正常なエラー メッセージを提供することで、これらの組み合わせを少なくとも最小限の方法でサポートすることをお勧めします (ただし、必要ありません)。 次の点に注意してください。
- インターネット エクスプローラーまたはMicrosoft Edge 従来版で開かなくなったOffice on the web。 そのため、AppSource では、これらのブラウザーのOffice on the webでアドインはテストされません。
- AppSource では、Trident または EdgeHTML を使用するプラットフォームと Office デスクトップ バージョンの組み合わせが引き続きテストされます。 ただし、アドインでこれらの Web ビューがサポートされていない場合にのみ警告が発行されます。アドインは AppSource によって拒否されません。
- Script Lab ツールは Trident をサポートしなくなりました。
古いバージョンの Windows と Office をサポートする予定の場合、アドインは、これらのバージョンで使用される埋め込み可能なブラウザー コントロールで動作する必要があります。 たとえば、インターネット エクスプローラー 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 エクスプローラー 11 メンションしなくなりました。 ブラウザー名とバージョンの表では、インターネット エクスプローラー 11 の行は次のとおりです。
| Engine | 含める必要があるもの | を含めてはいけません |
|---|---|---|
| Internet Explorer 11 | Trident/7.0; .*rv:xyz |
レンダリング エンジンのテーブルでは、Trident の行は次のとおりです。
| Engine | 含める必要があるもの | コメント |
|---|---|---|
| トライデント | Trident/xyz |
インターネット エクスプローラーは、このフラグメントを User-Agent 文字列のコメント セクションに配置します。 |
Webview と Office バージョンのサポート情報を確認する
特定の Web ビューと Office バージョンをサポートする方法の詳細については、該当するタブを選択してください。
Trident に関連付けられている JavaScript エンジンでは、ES5 より後の JavaScript バージョンはサポートされていません。 最新バージョンの JavaScript を使用する場合、または TypeScript を使用する場合は、 JavaScript の最新バージョンのサポートに関するページを参照してください。
重要
Trident では、メディア、記録、場所など、一部の HTML5 機能はサポートされていません。 アドインで Trident をサポートする必要がある場合は、これらのサポートされていない機能を回避するようにアドインを設計するか、アドインで Trident がいつ使用されているかを検出し、サポートされていない機能を使用しない代替エクスペリエンスを提供する必要があります。 詳細については、「 実行時にアドインが実行されている Web ビューを決定する」を参照してください。
Trident (インターネット エクスプローラー) でアドインをテストする
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 (インターネット エクスプローラー 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」を参照してください。
関連項目
Office Add-ins
フィードバック
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「https://aka.ms/ContentUserFeedback」を参照してください。
フィードバックの送信と表示