Outlookのアドインの開発をしている橋田です。

クリアコードではTypicalReplyという、以下のような機能を提供するOutlookアドインを提供しています。

• 受信したメールに定型の内容の返信メールを作成するボタンを追加する
  • 例: 「通報」ボタンを押すと以下の内容の返信メールを作成する
    • 件名: 迷惑メールの通報
    • 宛先: 社内のシステム管理部門
    • 元のメールを添付
• ボタンの設定を組織単位で集中管理する

TypicalReplyはVSTOというフレームワーク上で開発されていました。VSTOアドインはクラシックOutlookでのみ動作し、新しいOutlookでは動作しません。 今回、お客様から新しいOutlookでもTypicalReplyを使用したいという要望を頂き、新しいOutlookでも動作するTypicalReplyを新規開発しました。 新しいOutlookで動作するアドインを作成するためには、Officeアドインプラットフォームでアドインを作成する必要があります。

今回は、この開発事例を元に、OfficeアドインでのOutlookのアドイン開発の流れを紹介します。

背景: Outlookのアドインについて

Outlook向けのアドインの開発の背景として、2026年現在のOutlookおよびOutlookのアドインの状況について説明します。

Outlookの種類

現在、Windows向けのOutlookにはクラシックOutlook、新しいOutlookの二種類が存在します。 また、Web上で使用可能なOutlookとしてOutlook on the webが存在します。

• クラシックOutlook: Windowsアプリケーションとして開発されていた従来のOutlookクライアントです。
• 新しいOutlook: Webベースで開発された新しいOutlookクライアントです。
• Outlook on the web: ブラウザ上で動作するWebベースのOutlookクライアントです。

Microsoft社はクラシックOutlookから新しいOutlookへの移行を進めており、2029年にクラシックOutlookはサポート外となる予定です。

参考情報:

• https://learn.microsoft.com/ja-jp/microsoft-365-apps/outlook/get-started/guide-product-availability

VSTOとOfficeアドイン

VSTOは.NET Frameworkに依存したクラシックOutlook向けのアドイン開発フレームワークです。 VSTOアドインは、.vstoファイルとして作成され、Outlookで.vstoファイルを読み込むことで有効になります。 新しいOutlookはWebベースであるため、.NET Frameworkに依存しているVSTOアドインは新しいOutlook上では動作しません。

一方、Officeアドインは、WebベースのOfficeアドインプラットフォームで動作するアドインです。 Officeアドインはマニフェストファイル¹とWebアプリケーション²の二つのコンポーネントで構成されています。 Officeアドインは、クラシックOutlook、新しいOutlook、Outlook on the webの全てのクライアント上で動作します。

参考情報:

• https://learn.microsoft.com/ja-jp/visualstudio/vsto/getting-started-programming-vsto-add-ins?view=visualstudio
• https://learn.microsoft.com/ja-jp/office/dev/add-ins/overview/office-add-ins

新しいOutlook向けのTypicalReplyの開発

新規プロジェクトの作成

Officeアドイン用Yeomanジェネレーターを使用して空のプロジェクトを作成します。

1. Node.jsをインストールします
2. コマンドプロンプトを起動します
3. 以下のコマンドでYeomanとOfficeアドイン用のYeomanジェネレーターをインストールします
   • npm install -g yo generator-office
4. 以下のコマンドで新規プロジェクトを作成します
   • yo office
5. Yeomanジェネレーターが起動するため、作成するプロジェクトに関する質問に回答します。今回は以下の内容で回答しました。
   • プロジェクトの種類: Office Add-in Task Pane project
   • スクリプトタイプ: JavaScript
   • アドイン名: TypicalReply
   • サポートするOfficeクライアント: Outlook
   • マニフェストの種類: Add-in only manifest

以上の手順で、ベースとなる新規プロジェクトがTypicalReplyフォルダとして作成されます。

デバッグ方法

「新規プロジェクトの作成」の手順でプロジェクトを作成した段階で、npmのスクリプトでデバッグできる状態になっています。 以下の手順により、クラシックOutlook、新しいOutlook、Outlook on the webの各クライアントでアドインをデバッグ可能です。

1. 開発モードでビルドを実行します
   • コマンドプロンプトを起動します
   • npm run build:devを実行します
     • 開発モードの静的サイトのコンテンツ（HTML/JavaScript/CSS）としてプロジェクトのdist配下にファイルが出力されます
     • ビルドはwebpackで実行され、ビルドの定義はプロジェクトのwebpack.config.jsに記載されています
     • 代わりにnpm run watchを実行することで、ソースファイルの変更差分を自動で検知して、変更差分が生じるたびに自動でビルドすることも可能です
2. マニフェストの読み込みおよびデバッグ用Webサーバーを起動します
   • 管理者権限でコマンドプロンプトを起動します
   • npm run start manifest.xmlを実行します
     • マニフェストファイル(manifest.xml)がOutlookに登録されます
       • Outlookを使用しているMicrosoftアカウントへのログオンを求められます
     • ローカルマシン上で、テスト用のWebサーバーが起動します。コンテンツの内容はビルドしたdist配下の内容となっています
       • デフォルトではURLはhttps://localhost:3000/となります
     • Microsoft Edge WebViewにループバックの除外を許可するように求められる場合があります。求められた場合は許可します。
       • 許可するには、管理者権限でコマンドプロンプトを起動している必要があります。
     • HTTPSで動作させるため、Yeomonジェネレーターが提供するテスト用の証明書のインストールを求められる場合があります。求められた場合は許可します。
       • 許可するには、管理者権限でコマンドプロンプトを起動している必要があります。

今回の開発時は、主にOutlook on the web上でデバッグを行いました。Outlook on the webはWebブラウザ上で動作するため、ブラウザの開発者ツールでアドインのHTML/JavaScript/CSSをデバッグすることが可能で、デバッグしやすかったためです。

アドインの処理の実装

デフォルトのプロジェクトのマニフェストファイルとWebアプリケーションのコンテンツを変更し、TypicalReplyの機能を実装していきます。

マニフェストファイルでは、TypicalReplyが動作するAPIのバージョン、TypicalReplyのボタンの定義、TypicalReplyのボタンが押された際に呼び出すWebアプリケーションの場所（URLおよびJavaScriptの関数名）の指定を行います。

Webアプリケーションでは、TypicalReplyの設定の読み込み、ボタンが押された際に返信メールを作成する処理を実装します。

具体的な実装内容については本記事では取り上げませんが、以下のリポジトリにOSSとして公開しています。

https://github.com/clear-code/typical-reply-outlook-office-addin

本番用モジュールのビルド、展開手順

Officeアドインの本番用モジュールのビルドは以下の手順で行います。

1. 既にdistフォルダーが存在する場合は、削除するかリネームします
2. 本番環境（検証環境）で使用するWebサーバーのURLを決めます
3. webpack.config.jsをエディターで開きます
4. urlProdの値を上記で決めたURLに置き換えます
5. リリースモードでビルドを実行します
   • コマンドプロンプトを起動します
   • npm run buildを実行します
     • distフォルダーにリリースモードのビルド結果が出力されます
6. distの出力結果のうち、manifest.xmlはマニフェストファイルで、Webサーバーでホストする必要がないため、別の場所に移動します
7. 残ったdistの内容を手順2のWebサーバーに配置し、ホストします
   • これで本番環境（検証環境）のWebサーバーがアドインサーバーとして動作します
   • Webサーバー上にアドイン用の設定ファイルなどが必要な場合は、このホストするタイミングで同時に配置します。
8. 手順6で移動したmanifest.xmlをOutlookに読み込みます
   • 各ユーザーが独自に読み込む場合、サイドロード用URLからmanifest.xmlを読み込みます
   • 管理者が集中管理する場合は、Microsoft 365の管理画面から組織やグループ単位でmanifest.xmlを展開します

補足: Officeアドイン版の制約

Officeアドインの仕様上の制約があり、VSTOアドインと完全に互換性を保つことが難しいケースがあります。

一例として、今回のOfficeアドイン版のTypicalReply開発に関係する部分では、以下の制約がありました。 これらはいずれもVSTO版のTypicalReply（＋クラシックOutlook）では存在しなかった制約でした。

• メールサーバーがExchangeである必要がある³
• コンテキストメニューへのボタン追加が非サポート（Outlook向けのOfficeアドインのみ）
  • ボタンの追加自体が不可
• 新しいOutlook/Outlook on the webでは、メールの閲覧時のリボンの「アドイン」配下に追加されたボタンが動作しない
  • ボタンは追加されるが、ボタンを押しても動作しない
  • メールの閲覧ウィンドウのクイックアクセスの「アドイン」配下に追加されたボタンは動作する
• 新しいOutlook/Outlook on the webでは、ボタンのグループのラベルを個別に指定不可（常にアドインの表示名となり、別のラベルに変更できない）
• アドインで追加するボタンの位置を変更できない
• アドイン読み込み後にボタンの表示内容を変更できない
  • ボタンの定義はアドインのマニフェストに静的に記載する必要があり、その内容をWebサーバーから動的に変更することができないため。

Officeアドイン自体がサポートしていないため、Officeアドイン版のTypicalReplyでも、これらの機能はサポート対象外としました。

まとめ

新しいOutlook、Outlook on the web向けの新しいアドイン開発の事例を紹介しました。

以上のように、クリアコードでは新しいOutlook向けのアドイン開発を行っています。 クラシックOutlookから新しいOutlookへの移行に際し、動作しなくなったアドインと同等のアドインを作成したい場合など、Outlookのアドインの開発・サポートをご希望の場合、お気軽にお問い合わせよりご連絡ください。

1. マニフェストファイルはアドインそのものの情報（動作するAPIの最低バージョン等）、リボンやボタンの定義、Webアプリケーションの場所を記載します。マニフェストファイルはMS365の管理者が組織単位に読み込むか、各ユーザーが個別に読み込む必要があります。 ↩

2. WebアプリケーションはOffice JavaScript APIを使用してのOfficeの操作を提供します。WebサーバーやWebホスティングサービスなどを使って、アドインを使用する各端末がアクセス可能な場所にホストされている必要があります。 ↩

3. オンプレミス版のExchange Server、Microsoft 365を含むクラウド版のExchange Onlineのいずれも可 ↩