Officeアドインを、Office Onlineで実行するための手順です。

「Office Online」でOfficeアドインを実行するためには、アプリ本体となるhtmlファイル・各種プログラムをサーバーにアップロードしなければいけない・・・と考えがちですが、実はそんなことはなく、localhostにアプリを配置したまま、アプリを実行し、デバッグ・検証することができます。
以下、その手順を記載します。

前提条件

執筆時環境・バージョン

• Windows10
• Microsoft Office (Microsoft365版) ビルド13530.20376
• Edge 88.0.705.53(Chromeでも可)
• VSCode 1.52.1
• Live Server v5.6.1

前提

• すでにOfficeアドイン(クライアント版)を、ローカル環境で動作するための手順が整っていること

実行環境

• ローカル環境URL：https://127.0.0.1:5500 （Live Server）

必要ソフトウェア

• OpenSSL ※自己証明書を作るために必要です。証明書がすでにあったり、別の方法で証明書が作成可能な場合は、不要になります。

手順

自己証明書作成

Office Onlineでは、https通信で実行する必要があるようです。
そのため、証明書を作成します。すでに証明書がある場合は不要です。

• 証明書を配置するフォルダで、以下のコマンドを実行します。
  ※Windows用です。OpenSSLが"C:\Program Files\OpenSSL-Win64"にリリースされている前提です。その他諸々は、自己責任でお願いします。

"C:\Program Files\OpenSSL-Win64\bin\openssl.exe" req -x509 -newkey rsa:4096 -sha256 -nodes -keyout vscode_live_server.key.pem -out vscode_live_server.cert.pem  -subj "/CN=example.com" -days 3650

• これで、コマンドを実行したフォルダに、証明書"vscode_live_server.key.pem", "vscode_live_server.cert.pem"の2つが作成されます。

VSCode設定

• VSCodeを開き、アプリ本体(htmlファイルなど)のあるフォルダを開きます。

• Live Serverをhttpsで開くための設定を行います。
  VSCodeのメニューより、「ファイル」→「ユーザー設定」→「設定」を選択します。

• 「ワークスペース」タブの、「拡張機能」→「Live Server Setting」を選択します。

• Settingsの「Https」項目を探し、値を変更します。
  • enable : true
  • cert : 作成した証明書のcertファイルのフルパス
  • key : 作成した証明書のkeyファイルのフルパス
  • passphase : 空欄

• 右下の「Go Live」ボタンをクリックします。

• ブラウザで、証明書の確認メッセージが表示されますので、一旦承認し、アクセスを許可します。（この過程がないと、アプリが起動しませんでした）

マニフェストファイル修正

• マニフェストファイルのURLが、httpになっている場合、httpsに修正してください。デバッグとして必要な最低限は、以下の2箇所です。

①DefaultSettings->SourceLocation

②Contoso.Taskpane.Url

Office Onlineでアプリ実行

• そのブラウザのまま、Microsoft365などで、Office Onlineを開きます。
  ※キャプチャではWordですが、Excel・PowerPointなどでも手順は一緒なはずです。OneNoteやOutlookは同じか怪しいかも

• メニューの 「挿入」をクリックし、「アドイン」 を選択します。

• 「個人用アドイン」の中の「個人用アドインの管理」をクリックし、「マイ アドインのアップロード」をクリックします。

• これで、マニフェストファイルがアップロードされます。クライアント版Officeと同じような手順でアプリを実行することで、アプリが読み込まれます。

localhostで実行されている環境にも関わらず、アプリが読み込まれました。
※もちろん、Live Serverを実行している端末以外で、Office Onlineを起動しマニフェストファイルを読み込んでも、アプリは実行されませんので、ご了承ください

デバッグする

いろんな場所で記載していますが、OfficeアドインはWebアプリケーションです。そのため、ブラウザのデバッグ機能をそのまま実行できます。

• Edgeの場合、F12をクリックし、「ソース」タブを開きます。

• 左リストの中の、「ぺージ」から、「top」→「WebApplicationFrame」→「{"baseFrameName:....}」→「ローカル環境のURL(127.0.0.1:5500)」と開くことによって、作成したhtmlやスクリプトが開けます。

• 後は、各々で作成したコードにブレークポイントを置いて、実行することで、デバッグが実施できます。

まとめ

クライアント版のOfficeの方が安定感がありますが、前回の記事で書いたように、どうにも環境依存で動く・動かないがあるようです。
この手順なら、ごく普通のブラウザで動作・デバッグ可能ですので、場合によっては、Office Onlineでの開発も検討してみてください。

参考

https://docs.microsoft.com/ja-jp/office/dev/add-ins/testing/sideload-office-add-ins-for-testing
https://qiita.com/ma2shita/items/297c812a6cd09b5e82c8

Officeアドイン（クライアント）のデバッグを、VSCodeで実行するための手順です。

Visual Studio 201XのOfficeソリューションであったり、nodeを使用した環境であれば、デバッグの方法についてはちょいちょい出てくるのですが、それ以外の環境で、VSCodeを使用した手順がなかなか出てこなかったので、まとめました。

今回はサーバーにLive Serverを使用していますが、XAMPP、IIS、Apacheなど、環境は何でも良いと思います。

また、どういうわけか同じ手順を踏んでいても、なぜかデバッグが正常に動かなかったり、ブレークポイントに引っかからなかったりということが発生していました。
そのため、もしこの手順でデバッグが正常に動かない場合は、お手数ですが、端末の再起動、VSCodeの再起動など、お試しください。
それでも駄目なら、なにか別の理由があると思いますが、今は分かりません。ごめんなさい。

前提条件

執筆時環境・バージョン

• Windows10
• Microsoft Office (Microsoft365版) ビルド13530.20376
• Edge 88.0.705.53
• VSCode 1.52.1
• Microsoft Office Add-in Debugger v0.2.0
• Live Server v5.6.1

前提

• すでにOfficeアドイン(クライアント版)を、ローカル環境で動作するための手順が整っていること

実行環境

• ローカル環境URL：http://127.0.0.1:5500 （Live Server）

手順

• スタートメニューで、「Visual Studio」と入力すると、「Visual Studio Code」が表示されます。

• そこで、「管理者として実行」をクリックします。 (※)

• 正常に開けた場合、VSCodeのタイトルに[管理者]と表示されます。

• 左メニューの「拡張機能」で、「Microsoft Office Add-in Debugger」で検索し、インストールします。
  

• 左メニューより「実行」を選択し、「launch.jsonファイルを作成します」リンクをクリックし、「Office Addin」を選択します。
  

• launch.jsonファイルが作成されます。
  

• launch.jsonに、行を追加します。※最初の行に「,」を追加してください
  ※ここで、"url"の値の"?"の前に、「/」を付けてください。これが無いと、正常に動きませんでした。
  ※逆に、「/」があると動かないケースもあるかもしれません。この値は、有る無しで切り替えてみてほしいです。

        ,
        {
            "type": "office-addin",
            "request": "attach",
            "name": "Attach to Office Add-ins",
            "port": 9222,
            "trace": "verbose",
            "url": "http://127.0.0.1:5500/?_host_Info=Word$Win32$16.01$ja-JP$$$$0",
            "webRoot": "${workspaceFolder}",
            "timeout": 3000
          }

• VSCodeで、任意の場所にブレークポイントを置きます。
  

• Live Serverで実施する場合、右下の「Go Live」ボタンをクリックします。 (※)
  

• Wordを起動し、Officeアドインを開きます。 (※)
  

• VSCodeに戻り、左メニューの「実行」をクリック後、左上の「Launch」と書かれている再生ボタンの右の一覧をクリックし、「Attach to Office Add-ins」を選択します。 (※)
  

• そのまま、左上の「Launch」と書かれている再生ボタンをクリックします。 (※)
  正常にデバッグが完了すれば、VSCodeのページ上部に下記キャプチャのような表示が行われます。
  

• Wordのアプリのjs処理を実行してみます。 (※)
  

• VSCodeで、ブレークポイントで停止しました。
  

再度、デバッグを実施する場合

端末の再起動などで、再度デバッグを実施する場合は、手順に(※)と記載の部分のみ、実施を行ってください。

やっぱり動かない場合

どうもこのOfficeアドインのデバッグは不安定なようで、どうやっても正常に動作しない、というご報告をいただいていました。
そのため、Office Onlineでの動作手順も、今後記事にしようと思っています。気長にお待ちください。