- Microsoft 365 developer programへの参加
- https://learn.microsoft.com/ja-jp/office/developer-program/microsoft-365-developer-program
- OutlookのWindowsクライアントもダウンロードしておく
- Adminセンター->Admin->Subscriptions->Microsoft 365 E5 Developer 試用版->Download and install softwareからダウンロードする
- Go
- Node.jsおよびnpm
- リポジトリのホームに移動し、
build.batを実行する- アドイン用サイトをビルドする。成果物の静的サイト用ファイルはdistフォルダに作成される。
これは、以下の処理を実行している。
npm install- npmの必要なモジュールをインストール（リポジトリのモジュールが更新された場合には再実行）
nxp webpack- JavaScriptをまとめつつ、リリース用フォルダのdistフォルダに成果物の静的サイト用ファイルを出力する
- リポジトリのホームに移動し、管理者権限のコマンドプロンプトから
build-web-server.batを実行するlocal-web-server-keysフォルダにローカルHTTPSサーバー用の自己署名証明書を作成する。- 自己署名証明書を信頼されたルート証明機関の証明書としてインポートする
local-web-serverフォルダにHTTPSサーバーのexeおよび必要なキーファイルを作成する（local-web-server-keysフォルダからのコピー）
これは、以下の処理を実行している。
実際の処理はbuild-and-import-keys.batおよびbuild-web-server.batを参照のこと。
go run tools\generate_cert\generate_cert.go --host 127.0.0.1- 自己証明書およびサーバー秘密鍵用の作成
copy cert.pem cert.crt- 自己署名証明書をインストール可能な形式に変更
certutil -addstore ROOT cert.crt- 自己署名証明書を信頼されたルート証明機関の証明書としてインポートする
go build tools\https_server\https_server.go
パーソナルHTTPS Webサーバーの仕様は以下の通り。
ファイル名: https_server.exe
引数: --root Webサーバーのルートパスを指定する。デフォルトは.\web
概要: --rootで指定されたパスをhttps://127.0.0.1:10041でホスティングする。
https_server.exeと同じフォルダにkey.pem（サーバー用秘密鍵）とcert.pem（自己署名証明書）が必要。
tests\run-test-serverに移動し、管理者権限のコマンドプロンプトからrun-test-server.batを実行する。
実行すると、以下の処理を実行する。
- アドインの静的サイトファイルを
distに作成 - 自己署名証明書およびサーバー秘密鍵がなければ作成
- 自己署名証明書のインポート
- パーソナルHTTPS Webサーバーのビルド
distをtests\run-test-server\webにコピー- テスト用の設定ファイル
tests\run-test-server\configsをtests\run-test-server\webにコピー - パーソナルHTTPS Webサーバーで
tests\run-test-server\webをホスティング
run-test-server.batを実行中に、src配下への変更をtests\run-test-server\webに自動で反映したい場合、
別のコマンドプロンプトを開き、本リポジトリのルートで以下のnpmコマンドを実行する。
npm run watch:run-test-server
上記のコマンドを実行すると、10秒ごとにsrcの変更を監視し、変更があればリビルドしてtests\run-test-server\webに出力する。
上記コマンド実行時、証明書のインポートを求められた場合はインポートすること。
本アドインが開くダイアログはポップアップウィンドウの形を取るため、Web UIを利用する場合はブラウザーのポップアップブロック機能によってダイアログがブロックされる恐れがある。 ダイアログが確実に開かれるようにするため、事前にポップアップブロック機能の例外を登録しておく。
- Edgeの場合：
edge://settings/content/popupsでhttps://outlook.office.com:443を許可リストに登録する。 - Chromeの場合：
chrome://settings/content/popupsでhttps://outlook.office.com:443を許可リストに登録する。 - Firefoxの場合：
about:preferences#privacyの「許可設定」→「ポップアップウィンドウをブロックする」→「許可サイト」でhttps://outlook.office.com:443を許可リストに登録する。
- 以下のいずれかの方法でアドイン追加ページを呼び出す
- デスクトップアプリ
- 「テスト用にパーソナルHTTPS Webサーバーを起動する」の手順を実施し、Webサーバーを起動する
- Windowsクライアント版のOutlookを起動する
- [ファイル]->[アドインの管理]を選択する
- Webアプリ
- https://aka.ms/olksideload にアクセスする
- デスクトップアプリ
- Webブラウザで[Outlook 用アドイン]ページが開く
- [個人用アドイン]->[カスタムアドイン]->[カスタムアドインの追加]を選択する
- [ファイルから追加]を選択する
flex-confirm-mail-outlook-webリポジトリのmanifest.xmlを指定する- [カスタムアドイン]にFlexConfirmMailが追加される
何らかのメールを送信しようとしたときに「FlexConfirmMail が要求を処理しています」というメッセージや、「FlexConfirmMail」というタイトルのダイアログが表示されれば正しくインストールできている。
なお、現状では、設定用のリボンのボタンなども存在しない。 設定はWebサーバーのconfigsフォルダー配下のファイルを直接編集する。
F12で開発者ツールを開くことができるので、ログやデバッガーで動作を確認する。 アドインのHTMLやJavaScriptが読み込まれるのは、実際にアドインが使用されるときであるのに注意。 例えば、メール送信時のアドインは、メールを送信したときに呼び出される。
FlexConfirmMailの警告ダイアログなど、すべてHTMLで実装されているページについては、F12で開発者ツールを開くことができる。 以降はWeb版と同様にデバッグが可能。
また、以下の手順にしたがい、フレームワークを利用したデバッグをすることも可能。 本プロジェクトの場合、Node.jsでのデバッグとなる。
https://learn.microsoft.com/ja-jp/office/dev/add-ins/testing/debug-add-ins-overview