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

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

Office アドイン

2020.05.25

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

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

2020.05.21

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

Microsoftの開発者向けイベント「Build 2020」がオンラインで開催され、発表された新しい機能やサービスがニュースサイトでもすでにまとめられています。有難いことに、キーノートも@Tai...

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

事前準備

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

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

2018.11.02

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

2018年10月27日(土)、品川の日本マイクロソフト本社で「2018 Global Office 365 Developer Bootcamp Japan」が開催されました。 Global Office 365 Developer Bootcampとは...

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

Visual Studio Codeを管理者権限で起動し、開発用のフォルダを開きます。

「拡張機能」(CTRL + SHIFT + X)から「Microsoft Office」キーワードで検索し、「Microsoft Office Add-in Debugger」をインストールします。

YO OFFICEでプロジェクトを作成し(今回はExcel用作業ウィンドウアドイン)、作成したプロジェクトのフォルダを開きます。

「.vscode」フォルダにある「launch.json」ファイルを開きます。
「configurations」セクションに下記コードを追加します。「url」は環境に応じて適宜変更します(下記の場合は日本語版Excelの作業ウィンドウアドイン)。

{
  "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
}

「taskpane.js」のコードを下記のように変更します。セルへの書き込みとアドレスの読み込みを行うだけの簡単なコードです。

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);
  }
}