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

SPFx と CDS Web API を使ってアプリ作ってみた！第 2 回
Japan M365 Dev User Group 勉強会 2020年12月8日岡田尚也

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

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 と扱うことにします。

SPFxってなに？ SharePoint Framework (SPFx) は、クライアント側の SharePoint の開発モデル https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/sharepoint-framework- overview から抜粋
サーバなどを用意しなくても、SharePoint Online さえあればクライアント側のアプリケーションを開発することができる、お手軽な手法です。 Graph API やさまざまな Azure AD で保護された API との連携のシナリオが想定されています。

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

アプリ開発のポイント Project Oakdale 環境では環境URLが確認できにくくなっているので、まずは普通に Power Apps per app ライセンスを割り当てた環境でアプリを作り、その後接続先の環境を変えたいと思います。
以下の手順で、SPFx に CDS Web API への接続を許可することで、あとは自由に接続できます。その後、実行したい処理を作っていきます。 1. package-solution.json に CDS への接続を記述する 2. 一度サイトに展開する 3. SharePoint 管理センターから APIアクセスを許可 4. 実行したい処理を作成する

1. package-solution.jsonに CDS への接続を記述する以下のように package-solution.json に記述します。 "webApiPermissionRequests": [ {
"resource": "Common Data Service", "scope": "user_impersonation" } ],

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

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

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

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

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 のバージョンによって変わります。

アプリ開発のポイント(参考) ◆ 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

デモ

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

まとめ ◆ 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 のライセンスが高くて稟議が通らないなどお悩みの方は、こんな拡張もできるよ！とか言ってみてもいいかもしれません。

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

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

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

Naoya Okada

More Decks by Naoya Okada

Other Decks in Technology

Featured

Transcript