「Outlook Webアドインプロジェクトを作ってみる」で作ったOutlook Webアドインのタスクペインを拡張してメールのヘッダーをいろいろ確認するアドインにします。＃自分の忘備録16
Webアドインプロジェクトの中を見てみる
- Yeomanジェネレーターで作成したOutlook WebアドインMailChkAddinの最初のソース構造は以下のようになっています。
MailChkAddin\
manifest.xml Webアドインマニフェストファイル
webpack.config.js 使用するjs/html/cssモジュール情報ファイル
assets\
icon-*.png アイコンファイル(大きさ6種類)
src\
commands\
commands.html 必要なjsスクリプト指定など
commands.js アクションイベントのコールバック関数を追加する
taskpane\
taskpane.html タスクペインの画面を作成する
taskpane.js タスクペインイベントのコールバック関数を追加する
taskpane.css タスクペインの見た目を設定する
node_modules\ Node.jsモジュール
- MailChkAddinにメールヘッダー情報を表示するためにはタスクペインだけでは少々スペース的に狭いので、情報表示用のダイアログUIを使用します。
ダイアログUIは、MicrosoftのLearn「チュートリアル: メッセージ作成 Outlook アドインのビルド」の「最初の実行エクスペリエンスを実装する」を参考にして追加します。
- メールヘッダー情報を表示するためのダイアログUI（ディレクトリsettings以下のファイルdialog.*）を追加
- タスクペインに情報選択のボタンを追加
- その他、もろもろの追加変更、使用しないファイルの削除（ディレクトリcommands以下のファイルcommands.*）
MailChkAddin\
manifest.xml (Webアドインマニフェストファイル)
webpack.config.js settingsのdialog.*の設定を追加変更、commandsの設定削除
assets\
icon-*.png MailChkAddinのアイコンに変更
src\
settings\
dialog.html ダイアログUIの画面を作成する
dialog.js ダイアログUIの内容表示関数を追加する
dialog.css ダイアログUIの見た目を設定する
taskpane\
taskpane.html タスクペインにメールヘッダ情報表示のボタンの追加
taskpane.js タスクペインイベントのコールバック関数を追加
taskpane.css (タスクペインの見た目を設定する)
node_modules\ Node.jsモジュール
簡易Webアドインサーバを作成する
今回作成したWebアドインはサーバサイドの処理が無いので、単純なWebサーバにすることが出来ます。
npm run dev-serverで起動したサーバでも構わないのですが、通常のWebサーバにWebアドインをホストする例を示します。
ただしオレオレ証明書（自己署名証明書）ではないHTTPSサーバにする必要があります。
そのためにwebpackサーバ起動時に作成された証明書ファイルを使用します。
その証明書ファイルは以下のディレクトリに格納されています。
%USERPROFILE%\.office-addin-dev-certs
ca.crt ルートCA証明書(Windowsの証明書ストアにインストールされている)
localhost.crt Webサーバ証明書
localhost.key 秘密鍵
(mailchk_svr.py - python 簡易Webアドインサーバ例)
import os
import sys
import http.server
import ssl
userprofile = os.environ['USERPROFILE']
certfile = f'{userprofile}/.office-addin-dev-certs/localhost.crt'
keyfile = f'{userprofile}/.office-addin-dev-certs/localhost.key'
host = '0.0.0.0'
port = 8443
docroot = '.'
class MyHandler(http.server.SimpleHTTPRequestHandler): #ConnectionResetErrorエラーが出た時のメッセージ抑制(これは無くてもいいかも)
def handle_one_request(self):
try:
super().handle_one_request()
except ConnectionResetError:
print("ConnectionResetError")
def run_svr():
os.chdir(docroot)
handler = MyHandler #http.server.SimpleHTTPRequestHandler
httpd = http.server.HTTPServer((host, port), handler)
context = ssl.SSLContext(ssl.PROTOCOL_TLS_SERVER)
context.load_cert_chain(certfile=certfile, keyfile=keyfile)
httpd.socket = context.wrap_socket(httpd.socket, server_side=True)
print(f"server={host}:{port} docroot={os.path.abspath(docroot)}")
try:
httpd.serve_forever()
except KeyboardInterrupt:
httpd.server_close()
sys.exit(0)
if __name__ == '__main__':
run_svr()
簡易WebアドインサーバでWebアドインを使用する
証明書ファイルはデフォルトで有効期限が1ヶ月で作成されます。
以下のコマンドで有効期限が変更できます。
(証明書作成例)
cd MailChkAddin
node_modules\.bin\office-addin-dev-certs uninstall ルートCA証明書が既にインストールされているのでアンインストールする
node_modules\.bin\office-addin-dev-certs install --days 365 新しい証明書を作成・CA証明書インストールする(ここでは有効期限を365日にしている)
ビルド版のWebアドインを作成します。
それに伴ってmanifest.xmlの「localhost:3000」を「localhost:8443/dist」にしたマニフェストファイルmanifest_svr.xmlを作成します。
(ビルド版Webアドイン作成例)
npm run build
python mailchk_svr.py 簡易Webアドインサーバ起動(pythonインストールが前提)
簡易Webアドインサーバ起動して、Outlookでマニフェストファイルmanifest_svr.xmlを読み込むと、Webアドインが起動します（pythonのWindows Firewall設定が出るかも知れませんがローカルなので無視)。
OutlookでのWebアドインMailChkAddinの見た目
Outlookの右上にアドインのリボンボタン（「Show Task Pane」のみ）が追加されます。
そのリボンボタンを押すとメールビューにタスクペインが表示されます（ダークモードで表示）。
タスクペインのInformationをクリックすると、InformationのダイアログUIが表示されます。
簡易Webアドインサーバの実行の様子。
最終的なWebアドインプロジェクトの中身
最終的なソース構造は以下のようになっています。
MailChkAddin\
manifest_svr.xml Webアドインマニフェストファイル(ビルド版)
dist\ Webアドインソース(ビルド版)
*.js,*.cssなど
assets\
icon-*.png
mailchk_svr.py python 簡易Webアドインサーバ
manifest.xml (ここ以下は開発・デバッグ用)
webpack.config.js
assets\
icon-*.png
src\
settings\
dialog.html
dialog.js
dialog.css
taskpane\
taskpane.html
taskpane.js
taskpane.css
node_modules\
作成したWebアドインMailChkAddin（gokabo-043 / MailChkAddin）は、初めてのGitHubにあたふたしながらあげてみました
宜しかったらお試しください。