Office アドイン

VS Code向けのOffice アドイン用デバッガーを試してみました。

下記記事でも書いた通り、Build 2020ではOffice アドイン周りの機能追加も発表されました。

個人的に一番気になっていた「Visual Studio Code向けのOffice アドイン用デバッガー」、さっそく試してみました。

事前準備

デバッガーは「YO OFFICE(Yeoman)」によるアドイン開発が前提となっています。

まずは「Visual Studio Code」や「Node.js」をインストールし、開発環境を整える必要があります(下記記事参照)。

VS Code向けのOffice アドイン用デバッガーのインストール

  1. Visual Studio Codeを管理者権限で起動し、開発用のフォルダを開きます。
  2. 「拡張機能」(CTRL + SHIFT + X)から「Microsoft Office」キーワードで検索し、「Microsoft Office Add-in Debugger」をインストールします。
  3. YO OFFICEでプロジェクトを作成し(今回はExcel用作業ウィンドウアドイン)、作成したプロジェクトのフォルダを開きます。
  4. .vscode」フォルダにある「launch.json」ファイルを開きます。
  5. 「configurations」セクションに下記コードを追加します。「url」は環境に応じて適宜変更します(下記の場合は日本語版Excelの作業ウィンドウアドイン)。
  6. {
      "type": "office-addin",
      "request": "attach",
      "name": "Attach to Office Add-ins",
      "port": 9222,
      "trace": "verbose",
      "url": "https://localhost:3000/taskpane.html?_host_Info=Excel$Win32$16.01$ja-JP$$$$0",
      "webRoot": "${workspaceFolder}",
      "timeout": 45000
    }

  7. 「taskpane.js」のコードを下記のように変更します。セルへの書き込みとアドレスの読み込みを行うだけの簡単なコードです。
  8. Office.onReady(info => {
      if (info.host === Office.HostType.Excel) {
        document.getElementById("sideload-msg").style.display = "none";
        document.getElementById("app-body").style.display = "flex";
        document.getElementById("run").onclick = run;
      }
    });
    
    export async function run() {
      try {
        await Excel.run(async context => {
          const range = context.workbook.getSelectedRange().load("address");
          range.values = [["こんにちは、世界!"]];
          await context.sync();
          const addr = range.address;
          console.log(`The range address was ${addr}.`);
        });
      } catch (error) {
        console.error(error);
      }
    }
  9. ターミナルから「npm start」を実行し、開発用のサーバーを立ち上げます。
  10. Excelが起動し、作成したアドインも自動的に読み込まれます。作業ウィンドウから「Run」をクリックすると、コードが問題なく実行されることが確認できます。
  11. Visual Studio Codeに戻り、「CTRL + SHIFT + D」キーを入力して「実行」(デバッグビュー)に切り替えます。
  12. デバッグオプションから「Attach to Office Add-ins.」を選択します。
  13. デバッグの開始」ボタンをクリックします。
  14. ブレークポイントを設定し、再びアドインの動作確認を行うと、設定したブレークポイントで処理が止まることが確認できます。
  15. デバッグを終了する際は「切断」ボタンをクリックします。

以上のように、Microsoft Office Add-in Debuggerを使うと、非常に簡単な手順でOffice アドインのデバッグができることが確認できました。

まだプレビュー版とはいえ中々使い勝手が良く、これからのOffice アドイン開発環境の鉄板は、

  1. Visual Studio Code
  2. Node.js
  3. YO OFFICE
  4. Office Add-in Debugger

となりそうです。

Build 2020で個人的に気になったOfficeやPower Automateの発表前のページ

[Office Scripts]Power Automateのフローでパラメーターの受け渡しを行う方法次のページ

関連記事

  1. Office アドイン

    [Officeアドイン]マニフェストファイルをデバッグする方法

    Office アドイン本体はF12ツール等を使ってデバッグすることがで…

  2. Office アドイン

    OneNote用Office アドインで画像やHTMLを挿入してみる。

    先日書いた記事で、OneNote OnlineでOffice アドイン…

  3. Office アドイン

    Office Scripts機能によってWeb版Officeの操作を自動化する

    前回、Ignite 2019で発表されたPower Automate(…

  4. Office アドイン

    [Office用アプリ]Random Data Generator

    Random Data Generatorはテスト用の個人情報データを…

  5. Office アドイン

    Office アドインの概要と開発方法を学ぶための自習書

    2018年10月27日(土)、品川の日本マイクロソフト本社で「2018…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

Time limit is exhausted. Please reload CAPTCHA.

※本ページはプロモーションが含まれています。

Translate

最近の記事

アーカイブ

PAGE TOP