【SharePoint Framework】Outlook add-ins を作成する

SharePoint Framework 1.10 から Outlook add-ins の作成に対応いたしました。
本記事は、実際に試しに作ったときのメモ書きです。

developer.microsoft.com

動作イメージ

#Outlook の add-ins もできた！ #SharePoint #SPFx pic.twitter.com/klKCtVKvko

— てっちゃん (@techan_k) 2020年1月23日

Yeoman SharePoint generator のアップデート

以下のコマンドを実行し、Yeoman SharePoint generator をアップデートします。

npm update -g @microsoft/generator-sharepoint  

プロジェクトの作成

通常の Webパーツ開発のように、以下のコマンドからスキャフォールディングしていきます。

yo @microsoft/sharepoint --plusbeta   

※2020/01/26時点ではプレビュー機能のため、--plusbeta オプションを追加しています。

今回は、以下のように回答して作成しました。

configファイルの編集

config フォルダーの 「package-solution.json」を開き、"webApiPermissionRequests" を追加します。

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    "name": "outlook-addin-client-side-solution",
    "id": "fcdf0f83-cd4a-4550-9eb4-837a9222f044",
    "version": "1.0.0.0",
    "includeClientSideAssets": true,
    "isDomainIsolated": false,
    "skipFeatureDeployment": true,
    "webApiPermissionRequests": [
      {
        "resource": "Microsoft Graph",
        "scope": "User.ReadBasic.All"
      }
    ]
  },
  "paths": {
    "zippedPackage": "solution/outlook-addin.sppkg"
  }
}

パッケージ・展開

以下のコマンドを実行し、 バンドル・パッケージします。

gulp bundle --ship  
gulp package-solution --ship  

完了すると、「sharepoint/src」フォルダーにパッケージファイル（.sppkg）が作成されます。
作成されたパッケージファイルを、アプリカタログにアップロードしします。

アドインの追加

Outlook を開き、メールを開きます。
メールの閲覧画面に表示されている [・・・] をクリックし、[アドインを取得] をクリックします。

[個人用アドイン] > [カスタムアドインの追加] > [ファイルの追加] の順にクリックします。

ファイルの選択画面が表示されます。
先程作成したプロジェクトの、「OutlookAddin」フォルダーに作成されているXMLファイルを選択します。

[インストール] をクリックします。

インストールが完了すると、「カスタムアドイン」に作成したアドインが表示されます。

アドインを利用するには、メールの閲覧画面に表示されている [・・・] をクリックし、アドインをクリックします。