SPFxとCDSWebAPIを使ってアプリ作ってみた!

Transcript

1. SPFx と CDS Web API を使って アプリ作ってみた！ 第 2 回

   Japan M365 Dev User Group 勉強会 2020年12月8日 岡田 尚也

2. 自己紹介 名前 岡田 尚也 Twitter @nanoka7o8 どんな人? 元SIerの営業でしたが、現在は SharePoint を中心に

   Microsoft 365 関連のアプリを 使った業務改善のお手伝いをお仕事にしています。 SharePoint や Power Platform に触れ、業種やスキルを問わず、誰もが自身でIT活 用していけることに魅力を感じ、どうせ仕事するならその世界の実現を支援できる 仕事に全振りしたいなと思って、とりあえず会社辞めちゃった人です。

3. CDS(Microsoft Dataverse※)ってなに？ クラウドベースのローコードデータサービスおよびアプリプラットフォーム・・・？ https://docs.microsoft.com/ja-jp/powerapps/maker/common-data-service/ の日本語訳から抜粋 身近なところでは、Project Oakdale として、Power Apps や

   Power Automate でア プリを作ったりするときのテーブルに使ったりしますよね？アレです。アレ！ よくわかりませんが、たくさんデータ格納できるだけでなくて、ビジネスロジックと かも設定できるようになっているらしい。Web API でデータ操作もできる。便利そう。 ※ちょっと前にMicrosoft Dataverse と名前が変わりました。 定義が同じかわかりませんが、本資料中では、CDS = Microsoft Dataverse と扱うことにします。

4. SPFxってなに？ SharePoint Framework (SPFx) は、クライアント側の SharePoint の開発モデル https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/sharepoint-framework- overview から抜粋

   サーバなどを用意しなくても、SharePoint Online さえあればクライアント側のアプ リケーションを開発することができる、お手軽な手法です。 Graph API や さまざまな Azure AD で保護された API との連携のシナリオが想定され ています。

5. じゃあ SPFx から簡単に CDS 操作できそうじゃん！ Project Oakdale で使えたら僕の考えた最強の格安アプリ環境の完成やないの？ ということで、とりあえずやってみたというのが今回の動機です。

6. アプリ開発のポイント Project Oakdale 環境では環境URLが確認できにくくなっているので、まずは普通に Power Apps per app ライセンスを割り当てた環境でアプリを作り、その後接続先の環境 を変えたいと思います。

   以下の手順で、SPFx に CDS Web API への接続を許可することで、あとは自由に接続で きます。その後、実行したい処理を作っていきます。 1. package-solution.json に CDS への接続を記述する 2. 一度サイトに展開する 3. SharePoint 管理センターから APIアクセスを許可 4. 実行したい処理を作成する

7. 1. package-solution.jsonに CDS への接続を記述する 以下のように package-solution.json に記述します。 "webApiPermissionRequests": [ {

   "resource": "Common Data Service", "scope": "user_impersonation" } ],

8. 2. 一度サイトに展開する 次に、SPFx のアプリをビルドしサイトに展開します。

9. 3. SharePoint 管理センターから APIアクセスを許可 SharePoint 管理センターの以下の画面に、要求が来ていますので、承認します。

10. 4. 実行したい処理を作成(1/3) CDS の環境URLは、管理センターの画面から確認できます。

11. 4. 実行したい処理を作成(2/3) Project Oakdale 環境は、管理センターの画面から確認できないので、Teams をブラ ウザで開いて、開発者ツールで確認します。

12. 4. 実行したい処理を作成(3/3) 環境URL の値を使ってURIを作成します。あとは処理を書くだけです。 基本のURI※ {環境URLの黒塗り}.api.crm7.dynamics.com/api/data/v9.1/ 操作したいエンティティのURI {基本のURI}{操作したいエンティティの複数形} {基本のURI}{操作したいエンティティの複数形}({エンティティのID}) 例えば

    mytodo というエンティティの場合 {環境URLの黒塗り}.api.crm7.dynamics.com/api/data/v9.1/cr699_mytodos ※crm7 の部分は環境がある国によって変わります。 V9.1 の部分は API のバージョンによって変わります。

13. アプリ開発のポイント(参考) ◆ SPFx から CDS への接続 https://blog.karamem0.jp/entry/2020/04/20/150000 からめもぶろぐ。(篠原さ んのブログ) https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/use-aadhttpclient

    ◆ CDS Web API のあれこれ https://kageura.hatenadiary.jp/ Morning Girl(杉本さんのブログ) https://www.cdatablog.jp/entry/dynamics365postman CDataさんのブログ https://docs.microsoft.com/ja-jp/powerapps/developer/common-data- service/webapi/overview

14. デモ

15. で結局 Project Oakdale で使えるの？ 環境URL を調査して、実行してみましたが 401 でした。。。 以下のページにダメって書いてるっぽいです。残念むねん。 https://docs.microsoft.com/ja-jp/power-platform/admin/about-teams-

    environment

16. まとめ ◆ CDS の Web API を使えば、エンティティの取得や、更新、削除ができる。 ◆ SPFx には

    CDS Web API など Azure AD でセキュリティ保護された API を利用す るときに、割と楽できる方法がある。 ◆ Power Apps per app ライセンスがあれば、CDS Web API も利用ができる。 ◆ Project Oakdale は APIでのアクセスはできなさそう。 今回(難しくて)試していませんが、Dynamics 365 の知識があれば、いろいろな関数 などもWeb API から動作させることができるようです。 お好みでビジネスプロセスフローなんかと組み合わせると面白いかもしれません。 Power Apps のライセンスが高くて稟議が通らないなどお悩みの方は、こんな拡張も できるよ！とか言ってみてもいいかもしれません。

17. ご清聴ありがとうございました