DOM とランタイム環境を読み込むLoading the DOM and runtime environment

アドインでは、DOM と Office アドイン両方のランタイム環境が、独自のカスタム ロジックを実行する前に読み込まれていることを確認する必要があります。An add-in must ensure that both the DOM and the Office Add-ins runtime environment are loaded before running its own custom logic.

コンテンツまたは作業ウィンドウ アドインの起動Startup of a content or task pane add-in

次の図は、Excel、PowerPoint、Project、Word、または Access でコンテンツ アドインまたは作業ウィンドウ アドインの起動に関連するイベントのフローを示しています。The following figure shows the flow of events involved in starting a content or task pane add-in in Excel, PowerPoint, Project, Word, or Access.

コンテンツ アドインまたは作業ウィンドウ アドイン起動時のイベントのフロー

コンテンツ アドインまたは作業ウィンドウ アドインが起動すると、次のイベントが発生します。The following events occur when a content or task pane add-in starts:

  1. ユーザーは、既にアドインが含まれているドキュメントを開くか、ドキュメントにアドインを挿入します。The user opens a document that already contains an add-in or inserts an add-in in the document.

  2. Office ホスト アプリケーションが、アドインの XML マニフェストを AppSource、SharePoint のアドイン カタログ、またはアドインの発生元である共有フォルダー カタログから読み取ります。The Office host application reads the add-in's XML manifest from AppSource, an add-in catalog on SharePoint, or the shared folder catalog it originates from.

  3. Office ホスト アプリケーションが、ブラウザー コントロールにアドインの HTML ページを開きます。The Office host application opens the add-in's HTML page in a browser control.

    次の手順 4. と 5. は、同時に実行されることも、同時に実行されないこともあります。したがって、次の処理に進む前に、DOM とアドイン ランタイム環境の両方の読み込みが完了したことをアドインのコードで確認する必要があります。The next two steps, steps 4 and 5, occur asynchronously and in parallel. For this reason, your add-in's code must make sure that both the DOM and the add-in runtime environment have finished loading before proceeding.

  4. ブラウザー コントロールが、DOM と HTML 本文を読み込み、 window.onload イベントに対するイベント ハンドラーを呼び出します。The browser control loads the DOM and HTML body, and calls the event handler for the window.onload event.

  5. Office ホスト アプリケーションがランタイム環境を読み込みます (このランタイム環境は、コンテンツ配布ネットワーク (CDN) サーバーから JavaScript API for JavaScript ライブラリ ファイルをダウンロードしてキャッシュします)。その後、 Office オブジェクトの initialize イベントに対するアドインのイベント ハンドラーを呼び出します。The Office host application loads the runtime environment, which downloads and caches the JavaScript API for JavaScript library files from the content distribution network (CDN) server, and then calls the add-in's event handler for the initialize event of the Office object.

  6. DOM と HTML 本文の読み込み、およびアドインの初期化が完了すると、アドインのメイン関数は処理を続行できます。When the DOM and HTML body finish loading and the add-in finishes initializing, the main function of the add-in can proceed.

Outlook アドインの起動Startup of an Outlook add-in

次の図は、デスクトップ、タブレット、スマートフォンで実行される Outlook アドインの起動に関係するイベントのフローを示しています。The following figure shows the flow of events involved in starting an Outlook add-in running on the desktop, tablet, or smartphone.

Outlook アドイン起動時のイベントのフロー

Outlook アドインが起動すると、次のイベントが発生します。The following events occur when an Outlook add-in starts:

  1. Outlook は起動時に、ユーザーの電子メール アカウント用にインストールされている Outlook アドインの XML マニフェストを読み取ります。When Outlook starts, Outlook reads the XML manifests for Outlook add-ins that have been installed for the user's email account.

  2. ユーザーが Outlook でアイテムを選択します。The user selects an item in Outlook.

  3. 選択されたアイテムが Outlook アドインのアクティブ化条件を満たしている場合は、Outlook がアドインをアクティブにし、ボタンを UI に表示します。If the selected item satisfies the activation conditions of an Outlook add-in, Outlook activates the add-in and makes its button visible in the UI.

  4. ユーザーがボタンをクリックして Outlook アドインを起動すると、Outlook がアプリの HTML ページをブラウザー コントロール内に表示します。次の手順 5 と 6 は同時に行われます。If the user clicks the button to start the Outlook add-in, Outlook opens the HTML page in a browser control. The next two steps, steps 5 and 6, occur in parallel.

  5. ブラウザー コントロールが DOM と HTML 本文を読み込んで、 onload イベントに対するイベント ハンドラーを呼び出します。The browser control loads the DOM and HTML body, and calls the event handler for the onload event.

  6. Outlook がアドインの Office オブジェクトの initialize イベントに対するイベント ハンドラーを呼び出します。Outlook calls the event handler for the initialize event of the Office object of the add-in.

  7. DOM および HTML 本文の読み込みが終わると、アドインは初期化を完了し、アドインのメイン関数は処理を続行できます。When the DOM and HTML body finish loading and the add-in finishes initializing, the main function of the add-in can proceed.

読み込み状態のチェックChecking the load status

DOM と ランタイム環境の両方の読み込みが完了したことを確認する方法の 1 つに、jQuery .ready()関数の $(document).ready() を使用する方法があります。たとえば、次の initialize イベント ハンドラー関数は、アプリを初期化する固有のコードを実行する前に、DOM が読み込まれていることを確認します。その後、 initialize イベント ハンドラーは mailbox.item プロパティを使用して、Outlook で現在選択されているアイテムを取得し、アプリのメイン関数 initDialer を呼び出します。One way to check that both the DOM and the runtime environment have finished loading is to use the jQuery .ready() function: $(document).ready(). For example, the following initialize event handler function makes sure the DOM is first loaded before the code specific to initializing the add-in runs. Subsequently, the initialize event handler proceeds to use the mailbox.item property to obtain the currently selected item in Outlook, and calls the main function of the add-in, initDialer.

Office.initialize = function () {
    // Checks for the DOM to load.
    $(document).ready(function () {
        // After the DOM is loaded, add-in-specific code can run.
        var mailbox = Office.context.mailbox;
        _Item = mailbox.item;
        initDialer();
    });
}

この方法は、任意の Office アドインの initialize ハンドラーで使用できます。This same technique can be used in the initialize handler of any Office Add-in.

ダイヤラー サンプル Outlook アドインでは、JavaScript のみを使用してこれらと同じ条件を確認するという少し異なる方法を使用しています。The phone dialer sample Outlook add-in shows a slightly different approach using only JavaScript to check these same conditions.

重要

アドインに実行する初期化タスクがない場合でも、次の例のような最小のイベント ハンドラー関数 Office.initialize が少なくとも 1 つ含まれている必要があります。Even if your add-in has no initialization tasks to perform, you must include at least a minimal Office.initialize event handler function like the following example.

Office.initialize = function () {
};

イベント ハンドラー Office.initialize を含めていないと、アドインの起動時にエラーが発生するおそれがあります。また、ユーザーが Excel Online、PowerPoint Online、または Outlook Web App などの Office Online Web クライアントでアドインを使用しようとする場合、アプリの実行が失敗します。If you fail to include an Office.initialize event handler, your add-in may raise an error when it starts. Also, if a user attempts to use your add-in with an Office Online web client, such as Excel Online, PowerPoint Online, or Outlook Web App, it will fail to run.

アドインに複数のページが含まれる場合、新しいページが読み込まれるときに、そのページに Office.initialize イベント ハンドラーが含まれるか、そのページからこのイベント ハンドラーを呼び出されなければなりません。If your add-in includes more than one page, whenever it loads a new page that page must include or call an Office.initialize event handler.

関連項目See also