Outlookにはいろいろな機能などを追加するためにCOMアドインとWebアドインがあります。クラシックOutlookはCOMアドインとWebアドインに対応していますが、新しいOutlookではWebアドインのみの対応になるとのことです。
新しいOutlook(左)、クラシックOutlook(右)のアイコンは以下のようになっています。
Outlook on the webはWebアプリなのでWebアドインを使いますが、新しいOutlookもOutlook on the webと内部的構造が同じものになるようなのでWebアドインだけになるのだと思います。
COMアドインはC#などを使うWindows上で使うプログラムですが、WebアドインはJavaScriptなどを使うWebアプリになっています。そのため開発手法は全然異なったものになります。
Webアドインは、Visual StudioまたはNode.jsで開発することが出来ますが、JavaScriptを使おうと思っているので、Node.jsを選択しました。#自分の忘備録14
Node.jsをインストールする
ここ(Windows に Node.js をインストールする)を参考にして、「nvm-windows、node.js、および npm をインストールする」を実行する。nvm(Node Version Manager)を使ってNode.jsをインストールします。
Release - coreybutler/nvm-windowsからnvm-setup.zipをダウンロードして取り出したnvm-setup.exeを実行してnvmをインストールする(7-Zipなどでnvm-setup.zipから直接nvm-setup.exeを実行すると、Microsoft Defender SmartScreenが発動されることもあるので注意してください)。
nvmで最新のLTSバージョンのNode.jsをインストールして、そのインストールしたNode.jsを有効にする(このあとのcodeブロックの"#"で始まる行は、その前のコマンドの出力例です)。
nvm ls
#No installations recognized. ← 最初空っぽ
nvm list available ← 最新バージョンを調べる
#| CURRENT | LTS | OLD STABLE | OLD UNSTABLE |
#|--------------|--------------|--------------|--------------|
#| 25.9.0 | 24.15.0 | 0.12.18 | 0.11.16 |
nvm install 24.15.0
nvm ls
# 24.15.0
nvm use 24.15.0 ← UAC(管理者権限必要)
nvm ls
# * 24.15.0 (Currently using 64-bit executable)
node --version
#v24.15.0
Webアドインプロジェクトを作成する
ここ(最初の Outlook アドインをビルドする)を参考にして、Yeomanジェネレーターを使ってJavaScriptのWebアドインプロジェクトを作成します。
Yo Officeをnpmでインストールして、Outlook用のWebアドインプロジェクトを作成します(プロジェクト名はMailChkAddinとしておきます)。Yeomanジェネレーターを最初に使用すると、Microsoft 365アカウントにサインインするように求められますが、Outlookで使っているアカウントなどでログインしておきます。
npm install -g yo generator-office
yo office
#✔ Choose a project type: Office Add-in Task Pane project
#✔ Choose a script type: JavaScript
#✔ What do you want to name your add-in? MailChkAddin
#✔ Which Office client application would you like to support? Outlook
#✔ Which manifest type would you like to use? Add-in only manifest
とりあえずアドインの名称を変えておきます(manifest.xmlの「Contoso Add-in」を「MailChkAddin」に変更)。
Webアドインサーバを起動する
ここではnpm startではなく、npm run dev-serverでWebアドインデバッグ用のローカルサーバを直接起動します。実行すると最後に「webpack .*. compiled successfully in **** ms」のようなメッセージが出れば、Webアドインが読み込むサーバが起動されています。
サーバはHTTPSである必要があるため、途中デバッグ用のサーバ証明書とルート証明書がダウンロードされます。PCにはそのルート証明書がインストールされます(以下のダイアログが出て来ます)。
cd MailChkAddin
npm audit fix
npm run dev-server
以下のどちらかの操作で、Webアドインを登録する「Outlook用アドイン」ダイアログを表示することが出来ます。
- Outlook (classic)を使った操作では、メニュー > ファイル > [アドインの管理]ボタンを押す
- Outlook on the web (sideload) をクリック
どちらの操作でもOutlook on the webが開いて、「Outlook用アドイン」ダイアログが表示されます。以下の操作でアドインのマニフェストファイル(manifest.xml)を読み込みます。
- 個人用アドイン > +カスタムアドインの追加 > ファイルから追加(下の左図の〇のところ)
- MailChkAddinのマニュフェストファイルmanifest.xmlを選択すると、カスタムアドインにMailChkAddinが追加済みになる(下の右図の〇のところ)
Outlook (classic)+Webアドインを起動する
Outlookを起動するとWebアドインサーバからMailChkAddinが読み込まれて、右上にアドインのリボンボタンが追加されます。リボンボタン「Show Task Pane」を押すとメールビューにタスクペインが表示されます。
この後タスクペインを拡張して、メールのヘッダーをいろいろ確認するアドインにしようかと思います。





