iPad と Mac で Office アドインをデバッグするDebug Office Add-ins on iPad and Mac

Windows でのアドインの開発とデバッグには Visual Studio を使用できますが、iPad と Mac で使用して アドインをデバッグすることはできません。アドインは HTML と Javascript を使用して開発されているため、さまざまなプラットフォームで機能するように設計されていますが、さまざまなブラウザーで HTML の表示方法に微妙な違いがあります。この記事では、iPad または Mac で動作するアドインをデバッグする方法を説明します。You can use Visual Studio to develop and debug add-ins on Windows, but you can't use it to debug add-ins on the iPad or Mac. Because add-ins are developed using HTML and Javascript, they are designed to work across platforms, but there might be subtle differences in how different browsers render the HTML. This article describes how to debug add-ins running on an iPad or Mac.

Mac での Safari Web インスペクタを使用したデバッグDebugging with Safari Web Inspector on a Mac

タスクペインまたはコンテンツアドインに UI を表示するアドインがある場合は、Safari Web インスペクター を使用して Office アドインをデバッグできます。If you have add-in that shows UI in a taskpane or in a content add-in, you can debug an Office add-in using Safari Web Inspector.

Mac で Office アドインをデバッグできるようにするには、Mac OS High Sierra および Mac Office バージョン 16.9.1(ビルド 18012504)以降が必要です。To be able to debug Office Add-ins on Mac, you must have Mac OS High Sierra AND Mac Office Version: 16.9.1 (Build 18012504) or later. Office Mac ビルドをお持ちでない場合は、 Office 365 開発者向けプログラムに加入すると入手できます。If you don't have an Office Mac build, you can get one by joining the Office 365 Developer program.

開始するには、端末を開いて、以下のとおりに OfficeWebAddinDeveloperExtras 関連する Office アプリケーションのプロパティを設定します。To start, open a terminal and set the OfficeWebAddinDeveloperExtras property for the relevant Office application as follows:

  • defaults write com.microsoft.Word OfficeWebAddinDeveloperExtras -bool true

  • defaults write com.microsoft.Excel OfficeWebAddinDeveloperExtras -bool true

  • defaults write com.microsoft.Powerpoint OfficeWebAddinDeveloperExtras -bool true

  • defaults write com.microsoft.Outlook OfficeWebAddinDeveloperExtras -bool true

次に、Office アプリケーションを開き、アドインを挿入します。Then, open the Office application and insert your add-in. アドインを右クリックすると、コンテキストメニューで [要素の検査] オプションが表示されます。Right-click the add-in and you should see an Inspect Element option in the context menu. そのオプションを選択すると、インスペクタが起動します。インスペクタで、ブレークポイントを設定してアドインをデバッグできます。Select that option and it will pop the Inspector, where you can set breakpoints and debug your add-in.

注意

これは実験的な機能であり、Office アプリケーションの今後のバージョンでこの機能が維持されるという保証はありません。Please note that this is an experimental feature and there are no guarantees that we will preserve this functionality in future versions of Office applications.

iPad または Mac での Vorlon.JS を使用したデバッグDebugging with Vorlon.JS on a iPad or Mac

iPad または Mac でアドインをデバッグするには、F12 ツールに似た Web ページのデバッガである Vorlon.JS を使用します。To debug an add-in on iPad or Mac, you can use Vorlon.JS, a debugger for web pages that is similar to the F12 tools. リモートで動作するように設計されているため、異なるデバイス間で Web ページをデバッグすることができます。It is designed to work remotely and it enables you to debug web pages across different devices. 詳細については、Vorlon の Web サイトを参照してください。For more information, see the Vorlon website.

Vorlon.JS のインストールとセットアップInstall and set up up Vorlon.JS on a Mac or iPad

  1. 管理者としてデバイスにログオンします。Log on to the device as an administrator.

  2. まだ Node.js をインストールしていない場合は、インストールします。Install Node.js if it isn't already installed.

  3. [ターミナル] ウィンドウを開き、コマンド npm i -g vorlon を入力します。ツールが /usr/local/lib/node_modules/vorlon にインストールされます。Open a Terminal window and enter the command npm i -g vorlon. The tool is installed to /usr/local/lib/node_modules/vorlon.

Vorlon.JS を構成して HTTPS を使用するConfigure Vorlon.JS to use HTTPS

Vorlon.JS を使用してアプリケーションをデバッグするには、既知の場所から Vorlon.JS スクリプトを読み込むアプリケーションの開始ページに <script> タグを追加します (詳細については、次の手順を参照してください)。アドインが SSL 保護付き (HTTPS) の場合、アドインで使用するすべてのスクリプトは HTTPS サーバーからホストされるように拡張する必要があります。これには、Vorlon.JS スクリプトも含まれます。そのため、アドインで Vorlon.JS を使用するには、Vorlon.JS を構成して SSL を使用することが必要になります。To debug an application using Vorlon.JS, you add a <script> tag to the opening page of the application that loads a Vorlon.JS script from a well-known location (for details, see the following procedure). If an add-in is SSL-secured (HTTPS), any scripts that it uses must be hosted from an HTTPS server, including the Vorlon.JS script. Therefore, you must configure Vorlon.JS to use SSL in order to use Vorlon.JS with add-ins.

重要

すべてのアドインのシナリオで厳密に求められるわけではないものの、アドインに対して 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.

  1. [Finder] で、/usr/local/lib/node_modules/vorlon に移動し、/Server フォルダーのコンテキスト メニュー (右クリック) を開き、[情報を見る] を選択します。In Finder, go to /usr/local/lib/node_modules/vorlon, open the context menu for (right-click) the /Server folder, and then select Get Info.

  2. [サーバー情報] ウィンドウの右下隅にある南京錠アイコンを選択して、フォルダーのロックを解除します。Choose the padlock icon in the lower right corner of the Server info window to unlock the folder.

  3. ウィンドウの [共有とアクセス権] セクションで、スタッフ グループの [特権][読み取り/書き込み] に設定します。In the Sharing and Permissions section of the window, set the Privilege for the staff group to Read & Write.

  4. 南京錠アイコンをもう一度選択して、フォルダーを再度ロックします。Choose the padlock icon again to relock the folder.

  5. [Finder] に戻り、/Server サブフォルダーを展開し、ファイル config.json を右クリックして、[情報を見る] を選択します。Back in Finder, expand the /Server subfolder, right-click the file config.json, and then select Get Info.

  6. [config.json 情報] ウィンドウで、親 /Server フォルダーに対して行ったものと同じ方法でファイルの特権を変更します。必ず再度ロックしてからウィンドウを閉じてください。In the config.json info window, change the privileges of the file exactly the way you did for its parent /Server folder. Be sure to relock and close the window.

  7. [Finder] に戻り、ファイル config.json を右クリックして、[このアプリケーションで開く][テキストエディット] の順に選択します。ファイルがテキスト エディターで開きます。Back in Finder, right-click the file config.json, select Open with, and then select TextEdit. The file opens in a text editor.

  8. useSSL プロパティの値を true に変更します。Change the value of the useSSL property to true.

  9. [プラグイン] セクションで、IDOFFICE名前Office Addin のプライグインを検索します。プラグインの enabled プロパティがまだ true になっていない場合は、true に設定します。In the plugins section, find the plugin with the id of OFFICE and the name of Office Addin. If the enabled property for the plug-in is not already true, set it to true.

  10. ファイルを保存し、エディターを閉じます。Save the file and close the editor.

  11. [検索]/usr/local/lib/node_modules/vorlon に移動して、Server サブフォルダーを右クリックし、[フォルダーの新しいターミナル] を選択します。In Finder, navigate to /usr/local/lib/node_modules/vorlon, right-click the Server subfolder, and select New terminal at folder.

  12. [ターミナル] ウィンドウで、sudo vorlon と入力します。管理者パスワードの入力を求めるダイアログ ボックスが表示されます。Vorlon サーバーが起動します。[ターミナル] ウィンドウを開いたままにしておきます。In the Terminal window, enter sudo vorlon. You will be prompted to enter your administrator password. The Vorlon server starts. Leave the Terminal window open.

  13. ブラウザー ウィンドウを開き、Vorlon.JS インターフェイスの https://localhost:1337 に進みます。ダイアログ ボックスが表示されたら、[常に] を選択して、セキュリティ証明書を信頼します。Open a browser window and go to https://localhost:1337, which is the Vorlon.JS interface. When prompted, choose Always to trust the security certificate.

    注意

    ダイアログ ボックスが表示されない場合は、手動で証明書を信頼する必要があります。証明書ファイルは /usr/local/lib/node_modules/vorlon/Server/cert/server.crt です。次の手順を実行し、問題が発生した場合は、Macintosh または iPad のヘルプを参照してください。If you are not prompted, you might need to trust the certificate manually. The certificate file is /usr/local/lib/node_modules/vorlon/Server/cert/server.crt. Try the following steps. If you have trouble, consult Macintosh or iPad help.

    1. ブラウザー ウィンドウを閉じ、Vorlon サーバーを実行している [ターミナル] ウィンドウで、Control-C を使用してサーバーを停止します。Close the browser window and in the Terminal window that is running the Vorlon server, use Control-C to stop the server.
    2. [Finder] で、server.crt ファイルを右クリックして、[キーチェーンアクセス] を選択します。[キーチェーンアクセス] ウィンドウが開きます。In Finder, right-click the server.crt file and select Keychain Access. The Keychain Access window opens.
    3. 左側の [キーチェーン] リストで、[ログイン] がまだ選択されていない場合は選択し、[カテゴリ] セクションで [証明書] を選択します。証明書 localhost が一覧表示されます。In the Keychains list on the left, select login if it is not already selected, and then select Certificates in the Category section. The certificate localhost is listed.
    4. 証明書 localhost を右クリックし、[情報を見る] を選択します。[localhost] ウィンドウが開きます。Right-click the certificate localhost and select Get Info. A localhost window opens.
    5. [信頼] セクションで、[この証明書を使用する場合] というラベルの付いたセレクターを選択し、[常に信頼する] を選択します。In the Trust section, open the selector labeled When using this certificate and select Always Trust.
    6. [localhost] ウィンドウを閉じます。アクションが成功すると、[キーチェーンアクセス] ウィンドウの localhost 証明書のアイコンに青い円で囲まれた白い十字が表示されます。Close the localhost window. If the action was successful, the localhost certificate in the Keychain Access window has a white cross in a blue circle on its icon.

Vorlon.JS デバッグ用のアドインを構成します。Configure the add-in for Vorlon.JS debugging

  1. 次のスクリプト タグを、アドインの home.html ファイル (またはメイン HTML ファイル) の <head> セクションに追加します。Add the following script tag to the <head> section of the home.html file (or main HTML file) of your add-in:

    <script src="https://localhost:1337/vorlon.js"></script>    
    
  2. Azure Web サイトなど、Mac または iPad からアクセス可能な Web サーバーにアドイン Web アプリケーションを展開します。Deploy the add-in web application to a web server that is accessible from the Mac or iPad, such as an Azure website.

  3. アドイン マニフェストに URL が表示されるすべての場所で、アドインの URL を更新します。Update the URL of the add-in in all the places where the URL appears in the add-in manifest.

  4. アドイン マニフェストを Mac または iPad 上の次のフォルダーにコピーします: /Users/{your_name_on_the_device}/Library/Containers/com.microsoft.{host_name}/Data/Documents/wef。ここで、{host_name} は、Word、Excel、PowerPoint、または Outlook です。Copy the add-in manifest to the following folder on the Mac or iPad: /Users/{your_name_on_the_device}/Library/Containers/com.microsoft.{host_name}/Data/Documents/wef, where {host_name} is Word, Excel, PowerPoint, or Outlook.

Vorlon.JS でアドインを検査するInspect an add-in in Vorlon.JS

  1. Vorlon サーバーが実行されていない場合、[Finder]/usr/local/lib/node_modules/vorlon に移動して、Server サブフォルダーを右クリックし、[フォルダーの新しいターミナル] を選択します。If the Vorlon server is not running, in Finder, navigate to /usr/local/lib/node_modules/vorlon, right-click the Server subfolder, and select New terminal at folder.

  2. [ターミナル] ウィンドウで、sudo vorlon と入力します。管理者パスワードの入力を求めるダイアログ ボックスが表示されます。Vorlon サーバーが起動します。[ターミナル] ウィンドウを開いたままにしておきます。In the Terminal window, enter sudo vorlon. You will be prompted to enter your administrator password. The Vorlon server starts. Leave the Terminal window open.

  3. ブラウザー ウィンドウを開き、Vorlon.JS インターフェイスの https://localhost:1337 に進みます。Open a browser window and go to https://localhost:1337, which is the Vorlon.JS interface.

  4. アドインをサイドロードします。アドインが Excel、PowerPoint、または Word 用の場合は、「iPad または Mac で Office アドインをサイドロードする」の説明に従ってサイドロードします。アドインが Outlook アドインである場合は、「テストのために Outlook アドインをサイドロードする」の説明に従ってサイドロードします。アドインでアドイン コマンドを使用しない場合は、アドインが直ちに開きます。それ以外の場合は、ボタンを選択してアドインを開きます。Office ホスト アプリケーションのビルドに応じて、ボタンは [ホーム] タブまたは [アドイン] タブのいずれかに表示されます。Sideload the add-in. If it is for Excel, PowerPoint, or Word, sideload it as described in Sideload an Office Add-in on iPad and Mac. If it is an Outlook add-in, sideload it as described in Sideload Outlook Add-ins for testing. If the add-in does not use add-in commands, it will open immediately. Otherwise, choose the button to open the add-in. Depending on the build of the Office host application, the button will be on either the Home tab or an Add-in tab.

アドインは、Vorlon.JS のクライアントのリスト (Vorlon.JS インターフェイスの左側) に {OS} - n として表示されます。n は数値、{OS} は "Macintosh" などのデバイスの種類です。The add-in will show up in the list of Clients in Vorlon.JS (on the left side of the Vorlon.JS interface) as {OS} - n, for some number n, and where {OS} is the device type, such as "Macintosh".

Vorlon.js インターフェイスを示すスクリーン ショット

Vorlon ツールには、さまざまなプラグインがあります。現在有効になっているプラグインはツールの上部にタブとして表示されます。(左側にある歯車アイコンを選択すると、さらに別のプラグインを有効にすることができます。)これらのプラグインは、F12 ツールの機能に似ています。たとえば、DOM 要素の強調表示、コマンドの実行などを行えます。詳細については、Vorlon ドキュメントの「コア プラグイン」を参照してください。The Vorlon tool has a variety of plug-ins. The ones that are currently enabled appear as tabs at the top of the tool. (You can enable more plug-ins by choosing the gears icon on the left.) These plug-ins are similar to the functions in F12 tools. For example, you can highlight DOM elements, execute commands, and more. For more details, see Vorlon Documentation Core Plugins

Office アドイン プラグインにより Office.js に特別な機能 (オブジェクト モデルを調査する機能、Office.js の呼び出しを実行する機能、およびオブジェクト プロパティの値を読み取る機能など) が追加されます。手順については、「Office アドインをデバッグするための VorlonJS プラグイン」を参照してください。An Office Addin plug-in adds extra capabilities for Office.js, such as exploring the object model, executing Office.js calls, and reading the values of object properties. For instructions, see VorlonJS plugin for debugging Office Add-in.

注意

Vorlon.JS にブレーク ポイントを設定する方法はありません。There is no way to set break points in Vorlon.JS.

Mac または iPad 上の Office アプリケーションのキャッシュのクリアClearing the Office application's cache on a Mac or iPad

アドインはパフォーマンス上の理由から、Office for Mac でキャッシュされることが多いです。通常、キャッシュはアドインを再読み込みすることでクリアされます。同じドキュメント内に複数のアドインが存在する場合、再読み込み時にキャッシュを自動的にクリアするプロセスは信頼できない場合があります。Add-ins are cached often in Office for Mac, for performance reasons. Normally, the cache is cleared by reloading the add-in. If more than one add-in exists in the same document, the process of automatically clearing the cache on reload might not be reliable.

Mac では、/Users/{your_name_on_the_device}/Library/Containers/com.Microsoft.OsfWebHost/Data/ フォルダー内にあるすべてを削除することによってキャッシュを手動でクリアできます。On a Mac, you can clear the cache manually by deleting everything in the /Users/{your_name_on_the_device}/Library/Containers/com.Microsoft.OsfWebHost/Data/ folder.

iPad では、アドインの JavaScript から window.location.reload(true) を呼び出して、強制的に再読み込みすることができます。または、Office を再インストールすることができます。On an iPad, you can call window.location.reload(true) from JavaScript in the add-in to force a reload. Alternatively, you can reinstall Office.