MyNote365

Office365 , OneNote , SharePoint , PowerApps , MicrosoftFlow 関連の備忘録

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

f:id:tecchan365:20200126114257p:plain

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

developer.microsoft.com

動作イメージ

Yeoman SharePoint generator のアップデート

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

npm update -g @microsoft/generator-sharepoint  

f:id:tecchan365:20200118164923p:plain

プロジェクトの作成

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

yo @microsoft/sharepoint --plusbeta   

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

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

f:id:tecchan365:20200126110850p:plain

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"
  }
}

f:id:tecchan365:20200126111301p:plain

パッケージ・展開

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

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

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

f:id:tecchan365:20200126111602p:plain

f:id:tecchan365:20200118171154p:plain

アドインの追加

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

f:id:tecchan365:20200126112205p:plain

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

f:id:tecchan365:20200126112337p:plain

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

f:id:tecchan365:20200126112544p:plain

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

f:id:tecchan365:20200126112901p:plain

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

f:id:tecchan365:20200126113002p:plain

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

f:id:tecchan365:20200126114051p:plain