Microsoft Azure 上での Office アドインのホストHost an Office Add-in on Microsoft Azure

最も簡単な Office アドインは、XML マニフェスト ファイルと HTML ページで成り立っています。XML マニフェスト ファイルには、アドインの特性 (アドインの名前や実行可能な Office クライアント アプリケーションの種類、アドインの HTML ページの URL など) を記述します。HTML ページには、ユーザーが Office クライアント アプリケーションにアドインをインストールして実行したときに操作する、Web アプリが含まれています。Office アドインの Web アプリは、Azure を含む、あらゆる Web ホスティング プラットフォームでホストできます。The simplest Office Add-in is made up of an XML manifest file and an HTML page. The XML manifest file describes the add-in's characteristics, such as its name, what Office client applications it can run in, and the URL for the add-in's HTML page. The HTML page is contained in a web app that users interact with when they install and run your add-in within an Office client application. You can host the web app of an Office Add-in on any web hosting platform, including Azure.

この記事では、アドイン Web アプリを Azure に展開して、Office クライアント アプリケーションでテストのためにアドインをサイドロードする方法について説明します。This article describes how to deploy an add-in web app to Azure and sideload the add-in for testing in an Office client application.

前提条件Prerequisites

  1. Visual Studio 2017 をインストールします。このとき、Azure 開発ワークロードを含めるようにします。Install Visual Studio 2017 and choose to include the Azure development workload.

    注意

    既に Visual Studio 2017 がインストールされている場合は、Visual Studio インストーラーを使用して、Azure 開発ワークロードがインストールされていることを確認してください。If you've previously installed Visual Studio 2017, use the Visual Studio Installer to ensure that the Azure development workload is installed.

  2. Office をインストールします。Install Office.

    注意

    まだ Office を所持していない場合は、1 か月間無料試用版の登録が可能です。If you don't already have Office 2016, you can register for a free 1-month trial.

  3. Azure サブスクリプションを取得します。Obtain an Azure subscription.

    注意

    まだ Azure サブスクリプションを所持していない場合、このサブスクリプションは Visual Studio サブスクリプションの一部として取得できます。また、無料試用版の登録も可能です。If don't already have an Azure subscription, you can get one as part of your MSDN subscription or register for a free trial.

手順 1: アドインの XML マニフェスト ファイルをホストするための共有フォルダーを作成するStep 1: Create a shared folder to host your add-in XML manifest file

  1. 開発用のコンピューターでエクスプローラーを開きます。Open File Explorer on your development computer.

  2. C:\ ドライブを右クリックして、[新規] > [フォルダー] をクリックします。Right-click the C:\ drive and then choose New > Folder.

  3. 新規フォルダーに「AddinManifests」という名前を付けます。Name the new folder AddinManifests.

  4. [AddinManifests] フォルダーを右クリックして、[共有相手] > [特定の人] をクリックします。Right-click the AddinManifests folder and then choose Share with > Specific people.

  5. [ファイル共有] で、ドロップダウンの矢印をクリックして、[すべてのユーザー] > [追加] > [共有] をクリックします。In File Sharing, choose the drop-down arrow and then choose Everyone > Add > Share.

注意

このチュートリアルでは、信頼できるカタログとしてローカルのファイル共有を使用します。アドインの XML マニフェスト ファイルは、この場所に保存することになります。現実のシナリオでは、SharePoint カタログに XML マニフェスト ファイルを展開するか、AppSource にアドインを発行することもできます。In this walkthrough, you're using a local file share as a trusted catalog where you'll store the add-in XML manifest file. In a real-world scenario, you might instead choose to deploy the XML manifest file to a SharePoint catalog or publish the add-in to AppSource.

手順 2: 信頼できるアドイン カタログにファイル共有を追加するStep 2: Add the file share to the Trusted Add-ins catalog

  1. Word を起動して、ドキュメントを作成します。Start Word 2016 and create a document.

    注意

    この例では Word を使用していますが、Office アドインをサポートしている任意の Office アプリケーションを使用できます (Excel、Outlook、PowerPoint、Project 2016 など)。Although this example uses Word 2016, you can use any Office application that supports Office Add-ins such as Excel, Outlook, PowerPoint, or Project 2016.

  2. [ファイル] > [オプション] をクリックします。Choose File > Options.

  3. [Word オプション] ダイアログ ボックスで、[セキュリティ センター] をクリックして、[セキュリティ センターの設定] をクリックします。In the Word Options dialog box, choose Trust Center and then choose Trust Center Settings.

  4. [セキュリティ センター] ダイアログ ボックスで、[信頼できるアドイン カタログ] をクリックします。[カタログの URL] として、前の手順で作成したファイル共有の汎用名前付け規則 (UNC) パス (たとえば、\\YourMachineName\AddinManifests) を入力して、[カタログの追加] をクリックします。In the Trust Center dialog box, choose Trusted Add-in Catalogs. Enter the universal naming convention (UNC) path for the file share you created earlier as the Catalog URL (for example, \\YourMachineName\AddinManifests), and then choose Add catalog.

  5. [メニューに表示する] チェック ボックスをオンにします。Select the check box for Show in Menu.

    注意

    信頼できるアドイン カタログとして指定されている共有にアドインの XML マニフェスト ファイルを保存すると、そのアドインは、ユーザーがリボンの [挿入] タブから [個人用アドイン] をクリックしたときに、[Office アドイン] ダイアログ ボックスの [共有フォルダー] に表示されるようになります。When you store an add-in XML manifest file on a share that is specified as a trusted web add-in catalog, the add-in appears under Shared Folder in the Office Add-ins dialog box when the user navigates to the Insert tab in the ribbon and chooses My Add-ins.

  6. Word を終了します。Close Word.

手順 3: Azure に Web アプリを作成するStep 3: Create a web app in Azure

Azure に空の Web アプリを作成するには、Visual Studio 2017 または Azure ポータルのどちらかを使用します。Create an empty web app in Azure either by using Visual Studio 2017 or by using the Azure portal.

Visual Studio 2017 を使用する場合Using Visual Studio 2017

Visual Studio 2017 を使用して Web アプリを作成するには、次の手順を実行します。To create the web app using Visual Studio 2017, complete the following steps.

  1. Visual Studio の [表示] メニューで、[サーバー エクスプローラー] をクリックします。[Azure] を右クリックして、[Microsoft Azure サブスクリプションへの接続] をクリックします。Azure サブスクリプションに接続するための指示に従います。In Visual Studio, in the View menu, choose Server Explorer. Right-click Azure and choose Connect to Microsoft Azure subscription. Follow the instructions for connecting to your Azure subscription.

  2. Visual Studio の [サーバー エクスプローラー] で、[Azure] を展開し、[App Service] を右クリックして [新しい App Service の作成] をクリックします。In Visual Studio, in Server Explorer, expand Azure, right-click App Service, and then choose Create New App Service.

  3. [App Service の作成] ダイアログ ボックスで、次の情報を指定します。In the Create App Service dialog box, provide this information:

    • サイトの一意の [Web アプリの名前] を入力します。Azure は、サイト名が azurewebsites.net ドメイン全体で一意であることを確認します。Enter a unique Web App Name for your site. Azure verifies that the site name is unique across the azurewebsites.net domain.

    • このサイトの作成に使用する [サブスクリプション] を選択します。Choose the Subscription to use for creating this site.

    • サイトの [リソース グループ] を選択します。新しいグループを作成する場合は、そのグループに名前を指定する必要もあります。Choose the Resource Group for your site. If you create a new group, you also need to name it.

    • このサイトの作成に使用する [App Service プラン] を選択します。新しいプランを作成する場合は、そのプランに名前を指定する必要もあります。Choose the App Service Plan to use for creating this site. If you create a new plan, you also need to name it.

    • [作成] を選択します。Choose Create.

      新しい Web アプリが、[サーバー エクスプローラー][Azure] >> [App Service] >> (選択したリソース グループ) に表示されます。The new web app appears in Server Explorer under Azure >> App Service >> (the chosen resouce group).

  4. 新しい Web アプリを右クリックして、[ブラウザーで表示] をクリックします。ブラウザーが開いて、「App Service アプリが作成されました」というメッセージを示す Web ページが表示されます。Right-click the new web app and then choose View in Browser. Your browser opens and displays a webpage with the message "Your App Service app has been created."

  5. ブラウザーのアドレス バーで、HTTPS を使用するように Web アプリの URL を変更してから Enter キーを押して、HTTPS プロトコルが有効であることを確認します。In the browser address bar, change the URL for the web app so that it uses HTTPS and press Enter to confirm that the HTTPS protocol is enabled.

    重要

    すべてのアドインのシナリオで厳密に求められるわけではないものの、アドインに対して HTTPS エンドポイントを使用することを強くお勧めします。While not strictly required in all add-in scenarios, using an HTTPS endpoint for your add-in is strongly recommended. SSL で保護されている (HTTPS) のではないアドインは、使用中に、保護されていないコンテンツの警告やエラーを生成します。Add-ins that are not SSL-secured (HTTPS) generate unsecure content warnings and errors during use. Office Online でアドインを実行するか、AppSource にアドインを発行する場合は、アドインを SSL でセキュリティ保護する必要があります。If you plan to run your add-in in Office Online or publish your add-in to AppSource, it must be SSL-secured. アドインが外部データやサービスにアクセスする場合、アドインを SSL で保護して送信中のデータを保護する必要があります。If your add-in accesses external data and services, it should be SSL-secured to protect data in transit. 自己署名証明書がローカル マシンで信頼されている限り、この証明書は開発とテストに使用できます。Self-signed certificates can be used for development and testing, so long as the certificate is trusted on the local machine. Azure の web サイトは、自動的に HTTPS エンドポイントを提供します。Azure websites automatically provide an HTTPS endpoint.

Azure ポータルの使用Using the Azure portal

Azure ポータルを使用して Web アプリケーションを作成するには、次の手順を実行します。To create the web app using the Azure portal, complete the following steps.

  1. Azure の資格情報を使用して、Azure ポータルにログオンします。Log on to the Azure portal using your Azure credentials.

  2. [新規] > [Web + モバイル] > [Web アプリ] をクリックします。Choose New > Web + Mobile > Web App.

  3. [Web アプリの作成] ダイアログ ボックスで、次の情報を指定します。In the Web App Create dialog box, provide this information:

    • サイトの一意の [アプリ名] を入力します。Azure は、サイト名が azureweb apps.net ドメイン全体で一意であることを確認します。Enter a unique App name for your site. Azure verifies that the site name is unique across the azureweb apps.net domain.

    • このサイトの作成に使用する [サブスクリプション] を選択します。Choose the Subscription to use for creating this site.

    • サイトの [リソース グループ] を選択します。新しいグループを作成する場合は、そのグループに名前を指定する必要もあります。Choose the Resource Group for your site. If you create a new group, you also need to name it.

    • サイトの [OS] を選択します。Choose the OS for your site.

    • このサイトの作成用に使用する [App Service プラン] を選択します。新しいプランを作成する場合は、そのプランに名前を指定する必要もあります。Choose the App Service plan to use for creating this site. If you create a new plan, you also need to name it.

    • [作成] を選択します。Choose Create.

  4. [通知] (Azure ポータルの上辺に配置されているベル アイコン) をクリックし、[デプロイメントが成功しました] の通知をクリックして Azure ポータルでサイトの [概要] ページを開きます。Choose Notifications (the bell icon that is located along the top edge of the Azure portal) and then choose the Deployments succeeded notification to open the site's Overview page in the Azure portal.

    注意

    この通知は、サイトのデプロイが完了した時点で [デプロイは進行中です] から [デプロイメントが成功しました] に変化します。The notification will change from Deployment in progress to Deployments succeeded when the site deployment completes.

  5. Azure ポータルのサイトの [概要] ページにある [要点] セクションで、[URL] の下に表示されている URL を選択します。ブラウザーが開いて、「App Service アプリが作成されました」というメッセージを示す Web ページが表示されます。In the Essentials section of the site's Overview page in the Azure portal, choose the URL that is displayed under URL. Your browser opens and displays a webpage with the message "Your App Service app has been created."

  6. ブラウザーのアドレス バーで、HTTPS を使用するように Web アプリの URL を変更してから Enter キーを押して、HTTPS プロトコルが有効であることを確認します。In the browser address bar, change the URL for the web app so that it uses HTTPS and press Enter to confirm that the HTTPS protocol is enabled.

    重要

    すべてのアドインのシナリオで厳密に求められるわけではないものの、アドインに対して HTTPS エンドポイントを使用することを強くお勧めします。While not strictly required in all add-in scenarios, using an HTTPS endpoint for your add-in is strongly recommended. SSL で保護されている (HTTPS) のではないアドインは、使用中に、保護されていないコンテンツの警告やエラーを生成します。Add-ins that are not SSL-secured (HTTPS) generate unsecure content warnings and errors during use. Office Online でアドインを実行するか、AppSource にアドインを発行する場合は、アドインを SSL でセキュリティ保護する必要があります。If you plan to run your add-in in Office Online or publish your add-in to AppSource, it must be SSL-secured. アドインが外部データやサービスにアクセスする場合、アドインを SSL で保護して送信中のデータを保護する必要があります。If your add-in accesses external data and services, it should be SSL-secured to protect data in transit. 自己署名証明書がローカル マシンで信頼されている限り、この証明書は開発とテストに使用できます。Self-signed certificates can be used for development and testing, so long as the certificate is trusted on the local machine. Azure の web サイトは、自動的に HTTPS エンドポイントを提供します。Azure websites automatically provide an HTTPS endpoint.

手順 4: Visual Studio で Office アドインを作成するStep 4: Create an Office Add-in in Visual Studio

  1. 管理者として Visual Studio を起動します。Start Visual Studio as an administrator.

  2. [ファイル] > [新規作成] > [プロジェクト] をクリックします。Choose File > New > Project.

  3. [テンプレート][Visual C#] (または [Visual Basic]) を展開し、[Office/SharePoint] を展開して [アドイン] をクリックします。Under Templates, expand Visual C# (or Visual Basic), expand Office/SharePoint, and then choose Add-ins.

  4. [Word Web アドイン] を選択してから、[OK] をクリックして、既定の設定を使用します。Choose Word Web Add-in, and then choose OK to accept the default settings.

Visual Studio により、基本的な Word アドインが作成されます。このアドインは、Web プロジェクトに一切変更を加えることなく、そのままの状態で発行できます。Visual Studio creates a basic Word add-in that you'll be able to publish as-is, without making any changes to its web project.

手順 5: Azure に Office アドイン Web アプリを発行するStep 5: Publish your Office Add-in web app to Azure

  1. Visual Studio でアドイン プロジェクトを開き、[ソリューション エクスプローラー] のソリューション ノードを展開して、ソリューションの両方のプロジェクトが表示されるようにします。With your add-in project open in Visual Studio, expand the solution node in Solution Explorer so that you see both projects for the solution.

  2. Web プロジェクトを右クリックして、[発行] をクリックします。Web プロジェクトには Office アドイン Web アプリのファイルが含まれているため、このプロジェクトを Azure に発行することになります。Right-click the web project and then choose Publish. The web project contains Office Add-in web app files so this is the project that you publish to Azure.

  3. [発行] タブで、次の操作を実行します。On the Publish tab:

    • [Microsoft Azure App Service] をクリックします。Choose Microsoft Azure App Service.

    • [既存のものを選択] をクリックします。Choose Select Existing.

    • [発行] をクリックします。Choose Publish.

  4. [App Service] ダイアログ ボックスで、「手順 3: Azure に Web アプリを作成する」で作成した Web アプリを見つけて、そのアプリを選択してから [OK] をクリックします。In the App Service dialog box, find and choose the web app that you created in Step 3: Create a web app in Azure and then choose OK.

    Visual Studio により、Office アドインの Web プロジェクトが Azure Web アプリに発行されます。Visual Studio による Web プロジェクトの発行が完了すると、ブラウザーが開いて、「App Service アプリが作成されました」というテキストを示す Web ページが表示されます。これは、Web アプリの現在の既定のページです。Visual Studio publishes the web project for your Office Add-in to your Azure web app. When Visual Studio finishes publishing the web project, your browser opens and shows a webpage with the text "Your App Service app has been created." This is the current default page for the web app.

  5. アドインのWebページを表示するには、URLを変更してHTTPSを使用し、アドインのHTMLページのパスを指定します (例 : https://YourDomain.azurewebsites.net/Home.html)。To see the webpage for your add-in, change the URL so that it uses HTTPS and specifies the path of your add-in's HTML page (for example: https://YourDomain.azurewebsites.net/Home.html). これにより、アドインの Web アプリが Azure でホストされていることが確認されます。This confirms that your add-in's website is now hosted on Azure. ルート URL をコピーします (例 : https://YourDomain.azurewebsites.net)、この資料の後半でアドイン マニフェスト ファイルを編集するときに必要になります。Copy this URL because you'll need it when you edit the add-in manifest file later in this topic.

手順 6: アドインの XML マニフェスト ファイルを編集して展開するStep 6: Edit and deploy the add-in XML manifest file

  1. Visual Studio の [ソリューション エクスプローラー] でサンプルの Office アドインを開いて、ソリューションを展開し、両方のプロジェクトが表示されるようにします。In Visual Studio with the sample Office Add-in open in Solution Explorer, expand the solution so that both projects show.

  2. Office アドイン プロジェクト (たとえば、WordWebAddIn) を展開し、マニフェスト フォルダーを右クリックして [開く] をクリックします。アドインの XML マニフェスト ファイルが開きます。Expand the Office Add-in project (for example WordWebAddIn), right-click the manifest folder, and then choose Open. The add-in XML manifest file opens.

  3. XML マニフェスト ファイルで、 "〜remoteAppUrl" のすべてのインスタンスを検索し、Azure 上のアドイン Web アプリケーションのルート URL に置き換えます。In the XML manifest file, find and replace all instances of "~remoteAppUrl" with the root URL of the add-in web app on Azure. This is the URL that you copied earlier after you published the add-in web app to Azure (for example: https://YourDomain.azurewebsites.net). これは、アドイン Web アプリを Azure に公開した後、事前にコピーした URL です (例 : https://YourDomain.azurewebsites.net)。This is the URL that you copied earlier after you published the add-in web app to Azure (for example: https://YourDomain.azurewebsites.net).

  4. [ファイル] をクリックして、[すべてを保存] をクリックします。アドインの XML マニフェスト ファイルを閉じます。Choose File and then choose Save All. Close the add-in XML manifest file.

  5. [ソリューション エクスプローラー] に戻って、マニフェストのフォルダーを右クリックして、[エクスプローラーでフォルダーを開く] をクリックします。Back in Solution Explorer, right-click the manifest folder and choose Open Folder In File Explorer.

  6. アドインの XML マニフェスト ファイル (たとえば、WordWebAddIn.xml) をコピーします。Copy the add-in XML manifest file (for example, WordWebAddIn.xml).

  7. 手順 1: 共有フォルダーを作成する」で作成したネットワーク ファイル共有を参照して、そのフォルダー内にマニフェスト ファイルを貼り付けます。Browse to the network file share that you created in Step 1: Create a shared folder and paste the manifest file into the folder.

手順 7: Office クライアント アプリケーションにアプリを挿入し、実行するStep 7: Insert and run the add-in in the Office client application

  1. Word を起動して、ドキュメントを作成します。Start Word 2016 and create a document.

  2. リボンで、[挿入] > [個人用アドイン] をクリックします。On the ribbon, choose Insert > My Add-ins.

  3. [Office アドイン] ダイアログ ボックスで、[共有フォルダー] をクリックします。Word により、信頼できるアドイン カタログとしてリストしたフォルダー (「手順 2: 信頼できるアドイン カタログにファイル共有を追加する」で指定したもの) がスキャンされ、アドインがダイアログ ボックスに表示されます。サンプル アドインのアイコンが表示されます。In the Office Add-ins dialog box, choose SHARED FOLDER. Word scans the folder that you listed as a trusted add-ins catalog (in Step 2: Add the file share to the Trusted Add-ins catalog) and shows the add-ins in the dialog box. You should see an icon for your sample add-in.

  4. アドインを選択して、[追加] をクリックします。リボンに、そのアドインの [作業ウィンドウの表示] ボタンが追加されます。Choose the icon for your add-in and then choose Add. A Show Taskpane button for your add-in is added to the ribbon.

  5. [ホーム] タブのリボンで、[作業ウィンドウの表示] ボタンをクリックします。現在のドキュメントの右側の作業ウィンドウ内でアドインが開きます。On the ribbon of the Home tab, choose the Show Taskpane button. The add-in opens in a task pane to the right of the current document.

  6. アドインが動作していることを確認するために、ドキュメント内のテキストを選択して、作業ウィンド内の [Highlight!] ボタンをクリックします。Verify that the add-in works by selecting some text in the document and choosing the Highlight! button in the task pane.

関連項目See also