Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Outlook アドイン開発入門

1,700 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

Outlook アドイン開発入門

  1. 1. Outlook アドイン 開発入門 - サンプルを動かして全体を理解する - @HiroakiOikawa 2017/12/14 http://sharepoint.orivers.jp
  2. 2. 目次  はじめに  サンプルを実行してみる  アドインの仕組み  まとめ 2 © SharePoint Developer sharepoint.orivers.jp
  3. 3. はじめに この資料の位置づけの説明 3
  4. 4. はじめに  この資料では、Outlook アドインの開発をこれから始める方の ために、Outlook アドインの開発方法、仕組みについて入門 レベルの説明をしています。 4
  5. 5. サンプルを実行して みる 何はともあれ、まずは実行してみる 5
  6. 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 のサブスクリプション(試用版、正規版問わず)を1ライセンス © SharePoint Developer sharepoint.orivers.jp 6
  7. 7. Outlook Web アドインプロジェクトを作成  Visual Studio で新しいプロジェクトを作成します。 © SharePoint Developer sharepoint.orivers.jp 7 Outlook Web アドインを選択
  8. 8. Exchange への接続 1  早速デバッグ実行をしてみるとダイアログが・・・ © SharePoint Developer sharepoint.orivers.jp 8 Office 365 のログインで使用す るメールアドレスとパスワードを入力 して [接続] をクリックすると・・・ Autodiscover service が見つ からないというエラーになります。。。
  9. 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. 10. アドインを起動する  デバッグ実行が始まると、ブラウザが起動します。  ブラウザが起動したら、適当なメールを1件クリックして本文を 表示してください。  赤枠部分がアドイン起動ボタンです。 © SharePoint Developer sharepoint.orivers.jp 10 ここにアドイン起動用のアイコンが表示 されます。 これをクリックするとアドインが起動します。
  11. 11. サンプルアドインの表示  アドインが起動すると、右領域にアドインが表示されます。 © SharePoint Developer sharepoint.orivers.jp 11 ここにアドインが表示されます。 サンプルアドインは、選択したメールの全 プロパティを列挙します。
  12. 12. アドインの仕組み サンプルをもとに、アドインの仕組みを理解 する 12
  13. 13. ソリューションを眺めてみる  Visual Studio により作成されたソリューションの全体を見て みると、仕組みが見えてきます。 13 © SharePoint Developer sharepoint.orivers.jp アドインの定義ファイルを含むプロジェクト。 アドイン本体となる Web サイトプロジェクト。 アドイン本体で使用する CSS 群。 情報バーにステータスを表示する処理を含む HTML と JS ファイル。 アドインのアイコンやアドイン内で使用する画像。 アドインで使用する各種 JS ライブラリ。 アドイン本体の HTML, JS, CSS。
  14. 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. 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. 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. まとめ 本資料のまとめ 17
  18. 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

×