Outlook アドインの開発をこれからはじめる方向けに、アドイン開発のはじめ方、仕組みについてご紹介します。

1. Outlook アドイン 開発入門
- サンプルを動かして全体を理解する -
@HiroakiOikawa
2017/12/14
http://sharepoint.orivers.jp

2. 目次
 はじめに
 サンプルを実行してみる
 アドインの仕組み
 まとめ
2
© SharePoint Developer
sharepoint.orivers.jp

3. はじめに この資料の位置づけの説明
3

4. はじめに
 この資料では、Outlook アドインの開発をこれから始める方の
ために、Outlook アドインの開発方法、仕組みについて入門
レベルの説明をしています。
4

5. サンプルを実行して
みる
何はともあれ、まずは実行してみる
5

6. 必要な環境
 開発に必要な環境を整えましょう。
⁃ 開発ツール
⁃ Visual Studio Community 2017 (無償版)
⁃ ダウンロード Url
https://www.visualstudio.com/ja/thank-you-downloading-visual-
studio/?sku=Community&rel=15
⁃ セットアップ時に忘れずに「Office/SharePoint 開発」のオプションをインス
トールしてください。
⁃ Office 365
⁃ Office 365 のサブスクリプション(試用版、正規版問わず)を１ライセンス
© SharePoint Developer
sharepoint.orivers.jp 6

7. Outlook Web アドインプロジェクトを作成
 Visual Studio で新しいプロジェクトを作成します。
© SharePoint Developer
sharepoint.orivers.jp 7
Outlook Web
アドインを選択

8. Exchange への接続 1
 早速デバッグ実行をしてみるとダイアログが・・・
© SharePoint Developer
sharepoint.orivers.jp 8
Office 365 のログインで使用す
るメールアドレスとパスワードを入力
して [接続] をクリックすると・・・
Autodiscover service が見つ
からないというエラーになります。。。

9. Exchange への接続 2
 [詳細設定]をクリックすると表示される設定を入力すると、無
事接続できます。
© SharePoint Developer
sharepoint.orivers.jp 9
Office 365 のログインで使用す
るメールアドレスとパスワードを入力
してください。
Office 365 のログインで使用す
るメールアドレスを入力してください。
https://outlook.office365.c
om/ews/exchange.asmx
https://outlook.office365.c
om/owa/

10. アドインを起動する
 デバッグ実行が始まると、ブラウザが起動します。
 ブラウザが起動したら、適当なメールを１件クリックして本文を
表示してください。
 赤枠部分がアドイン起動ボタンです。
© SharePoint Developer
sharepoint.orivers.jp
10
ここにアドイン起動用のアイコンが表示
されます。
これをクリックするとアドインが起動します。

11. サンプルアドインの表示
 アドインが起動すると、右領域にアドインが表示されます。
© SharePoint Developer
sharepoint.orivers.jp 11
ここにアドインが表示されます。
サンプルアドインは、選択したメールの全
プロパティを列挙します。

12. アドインの仕組み サンプルをもとに、アドインの仕組みを理解
する
12

13. ソリューションを眺めてみる
 Visual Studio により作成されたソリューションの全体を見て
みると、仕組みが見えてきます。
13
© SharePoint Developer
sharepoint.orivers.jp
アドインの定義ファイルを含むプロジェクト。
アドイン本体となる Web サイトプロジェクト。
アドイン本体で使用する CSS 群。
情報バーにステータスを表示する処理を含む
HTML と JS ファイル。
アドインのアイコンやアドイン内で使用する画像。
アドインで使用する各種 JS ライブラリ。
アドイン本体の HTML, JS, CSS。

14. アドイン = Web アプリ
 ソリューションを見て分かる通り、アドインは HTML, JS, CSS
を使った Web アプリです。
 Outlook 専用の JS ライブラリを使うことで、メールの内容にア
クセスします。
 つまり、アドイン開発は office.js ライブラリの使い方が分かれ
ば、Web アプリ開発のスキルで開発が可能になります！
14
© SharePoint Developer
sharepoint.orivers.jp
MessageRead.html
アドイン領域に表示する
ページ
MessageRead.js
ページを表示するロジック
office.js
メールデータにアクセスす
るための専用ライブラリ
Outlook アドイン

15. office.js ライブラリ
 office.js ライブラリは、メール (Outlook) だけでなく Excel、
Word、PowerPoint などの Office クライアント用のアドイン
を開発する際に使用するライブラリです。
 office.js ライブラリを使用することで、Web アプリ開発のスキ
ルを活かして、アドインが開発できるようになります。
 こうして作成するアドインを「Office アドイン」と呼びます。
参考サイト:
Understanding the JavaScript API for Office
https://docs.microsoft.com/en-us/office/dev/add-ins/develop/understanding-the-javascript-api-for-office
15
© SharePoint Developer
sharepoint.orivers.jp

16. カスタマイズの足掛かり
 全体像が見えたので、カスタマイズのやり方について簡単に紹
介します。
⁃ カスタマイズは以下のファイルに対して行ってください。
⁃ MessageRead.html
⁃ MessageRead.js
⁃ MessageRead.css
⁃ Icon16.png、Icon32.png、Icon64.png、Icon80.png
⁃ より高度なカスタマイズが必要な場合は、マニフェストファイルの変更など
が必要になりますが、詳しくはこちらを参照してください。
⁃ Office Add-ins platform overview (残念ながら英語しかありません)
https://docs.microsoft.com/ja-jp/office/dev/add-ins/overview/office-add-ins
16
© SharePoint Developer
sharepoint.orivers.jp

17. まとめ 本資料のまとめ
17

18. まとめ – Let's Enjoy Office Add-ins
18
© SharePoint Developer
sharepoint.orivers.jp
 Web アプリ開発のスキルが重要
⁃ Office アドイン開発は、Web アプリ開発のスキルが必要です。
逆に言うと、それしか必要ないため、学習コストが低く多くの開発者が取
り掛かりやすいものとなっています。
 配布するにはもうひと手間・・・
⁃ 今回はデバッグ実行して仕組みを理解するところまでを紹介しましたが、
実際に Office 365 上に展開する場合や、Office クライアントに展開
する場合にはもうひと手間必要です。
⁃ 詳しくはこちらを参照ください。
展開先に応じた展開方法が記載されています。(英語ですが・・・)
Deploy and publish your Office Add-in
https://docs.microsoft.com/ja-jp/office/dev/add-ins/publish/publish