0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Outlook Webアドインプロジェクトを作ってみる

0
Posted at

Outlookにはいろいろな機能などを追加するためにCOMアドインとWebアドインがあります。クラシックOutlookはCOMアドインとWebアドインに対応していますが、新しいOutlookではWebアドインのみの対応になるとのことです。
新しいOutlook(左)、クラシックOutlook(右)のアイコンは以下のようになっています。

Outlookアイコン.png

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にはそのルート証明書がインストールされます(以下のダイアログが出て来ます)。

ルート証明書インストール.png

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用アドインダイアログ1.png Outlook用アドインダイアログ2.png

Outlook (classic)+Webアドインを起動する

Outlookを起動するとWebアドインサーバからMailChkAddinが読み込まれて、右上にアドインのリボンボタンが追加されます。リボンボタン「Show Task Pane」を押すとメールビューにタスクペインが表示されます。

Outlook-classic-addin1.png Outlook-classic-addin2.png

この後タスクペインを拡張して、メールのヘッダーをいろいろ確認するアドインにしようかと思います。

参考にしたサイト

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?