演習 - メールアドインの基本 - Training

7 分

この演習では、Outlook アドインプロジェクトを初めて作成し、Outlook クライアントに読み込む方法について説明します。

前提条件

Outlook アドインの開発には、Outlook 2016 以降または Outlook on the web が必要です。

このモジュールでは、Node.js を使用して、カスタム Outlook アドインを作成します。このモジュールの演習では、開発者のワークステーションに、次のツールがインストールされていることを前提としています。

重要

ほとんどの場合、次のツールの最新バージョンをインストールすることをお勧めします。ここに記載されているバージョンのリストは、このモジュールが発行され、最後にテストしたときに使用されたものです。

Node.js (アクティブ LTS バージョン)
npm (Node.js と共にインストール)
Yeoman - v4.x (以上)
Microsoft Office 用 Yeoman ジェネレーター - v1.9.5
Visual Studio Code (VS Code) またはお好みのコードエディター

これらの前提条件の最小バージョンがワークステーションにインストールされている必要があります。

この演習の場合、GitHub アカウントも必要です。

セットアップ

このチュートリアルで作成するアドインは、ユーザーの GitHub アカウントから Gist を読み込み、選択した Gist をメッセージの本文に追加します。ビルドするアドインのテストに使用可能な 2 つの新しい Gist を作成するには、次の手順を実行します。

GitHub にサインインします。
新しい Gist を作成します。
- [Gist description...] フィールドに、「Hello World Markdown」と入力します。
- [Filename including extension...] フィールドに、「test.md」と入力します。
- 複数行テキストボックスに、次のマークダウンを追加します。
```
# Hello World

This is content converted from Markdown!

Here's a JSON sample:

  ```json
    {
      "foo": "bar"
    }
  ```
```
- [Create Public Gist] ボタンを選択します。
もう 1 つの新しい Gist を作成します。
- [Gist description...] フィールドに、「Hello World Html」と入力します。
- [Filename including extension...] フィールドに、「test.html」と入力します。
- 複数行テキストボックスに、次のマークダウンを追加します。
```
<html>
  <head>
    <style>
    h1 {
      font-family: Calibri;
    }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is a test</p>
  </body>
</html>
```
- [Create Public Gist] ボタンを選択します。

Outlook アドインプロジェクトを作成する

次のコマンドを実行し、Yeoman ジェネレーターを使用してアドインプロジェクトを作成します。
```
yo office
```
注:

yo office コマンドを実行すると、Yeoman のデータ収集ポリシーと Office アドイン CLI ツールに関するプロンプトが表示される場合があります。提供された情報を使用して、必要に応じてプロンプトに応答します。

プロンプトが表示されたら、以下の情報を入力してアドインプロジェクトを作成します。
- プロジェクトの種類の選択 - Office Add-in Task Pane プロジェクト
- スクリプトの種類の選択 - JavaScript
- What would you want to name your add-in? (アドインの名前を何にしますか) - Gist の Git
- どの Office クライアントアプリケーションをサポートしますか - Outlook
ウィザードが完了したら、ジェネレーター (My Office アドイン) によって作成されたプロジェクトフォルダーに変更し、npm インストールを実行して npm モジュールをインストールします。

ヒント

アドインプロジェクトの作成後に Yeoman ジェネレーターが提供する次の手順ガイダンスは無視できます。このユニットの残りの部分では、実施する必要のあるすべてのステップを示します。
プロジェクトのルートディレクトリに移動します。
```
cd "Git the gist"
```
このアドインは以下のライブラリを使用します。
- MarkdownをHTMLに変換するShowdownライブラリ
- 相対URLを構築するためのURI.jsライブラリ。
- DOMとの相互操作を単純化するためのjqueryライブラリ。
これらのツールをプロジェクトにインストールするには、プロジェクトのルートディレクトリで次のコマンドを実行します。
```
npm install showdown urijs jquery --SE
```
VS Code またはお好みのコードエディターでプロジェクトを開きます。

ヒント

Windows では、コマンドラインを使用してプロジェクトのルートディレクトリに移動し、 コードを 入力して VS Code でそのフォルダーを開くことができます。 macOS では、まず code コマンドをパスに追加した後に、VS Code でプロジェクトフォルダーを開くためにそのコマンドを使用する必要があります。

マニフェストを更新する

アドインのマニフェストは、Outlook での表示方法に影響します。またマニフェストは、アドインをアドイン一覧に表示する方法とリボンに表示するボタンを定義し、アドインによって使用される HTML ファイルと JavaScript ファイルの URL を設定します。

基本的な情報を指定する

manifest.xml ファイルを更新してアドインに関する基本的な情報をいくつか指定します。

ProviderName 要素を探し、既定値を会社名に置き換えます。
```
<ProviderName>Contoso</ProviderName>
```
Description 要素を探し、既定値をアドインの説明に置き換えて、ファイルを保存します。
```
<Description DefaultValue="Allows users to access their GitHub gists."/>
```

生成されたアドインをテストする

この先に進める前に、ジェネレーターによって生成されたアドインをテストして、プロジェクトが正しく設定されていることを確認します。

注:

開発の最中でも、OfficeアドインはHTTPではなくHTTPSを使用する必要があります。次のコマンドを実行した後に証明書をインストールするように求められた場合は、Yeoman ジェネレーターによって提供される証明書をインストールするプロンプトを受け入れます。変更を行うには、管理者としてコマンドプロンプトまたはターミナルを実行する必要がある場合もあります。

プロジェクトのルートディレクトリから次のコマンドを実行します。このコマンドを実行すると、ローカル Web サーバーが起動し、アドインがサイドロードされます。
```
npm start
```
Outlookで既存のメッセージを開き、タスクパネルを表示ボタンを選択します。
WebView Stop On Load ダイアログボックスでプロンプトが表示されたら、OK を選択します。

注:

[キャンセル] を選択すると、このアドインのインスタンスの実行中はダイアログが表示されなくなります。ただし、アドインを再起動すると、ダイアログはもう一度表示されます。

正しく設定されていれば、作業ウィンドウが開き、アドインのウェルカムページが表示されます。

要約

この演習では、Outlook アドインプロジェクトを初めて作成し、Outlook クライアントに読み込む方法について説明しました。

自分の知識をテストする

Outlook でサポートされているメールアドインの種類は次のうちどれですか?

アドインコマンドおよびアクション

モジュール拡張機能アドイン

コンテキストアドイン

メッセージ作成アドイン

送信時アドイン

上記すべて

新しいアドインプロジェクトを作成する 2 つの主要なオプションは、次のうちどれですか?

Visual Studio と Office Yeoman ジェネレーター

Visual Studio と Office CLI Project Creator

Visual Studio と Node.js ベースプロジェクト用のダウンロード可能なスタータープロジェクト

作業を確認する前にすべての問題に回答する必要があります。

続行

演習 - メール アドインの基本