Angular で PCF した話

PCF (PowerApps Component Framework) を Angular で作成してみることにトライしたレポートです。

Angular Elements で Custom Elements を作成し、 Custom Elements を PCF を用いて部品に変換し、 Solution zip file を Dynamics 365 C&E に設置します。

結果、サポートされていないので動きませんでした。

# 今回作ったソース
https://github.com/kojisaiki/pcf-meets-angular-elements

# 参考
- PCF
https://docs.microsoft.com/en-us/powerapps/developer/component-framework/overview
- Angular Elements
https://angular.jp/guide/elements
https://blog.bitsrc.io/using-angular-elements-why-and-how-part-1-35f7fd4f0457

Transcript

1. AngularでPCFした話 2019.07.07 KOJI SAIKI
2. 自己紹介  佐伯紘二（サイキ コウジ）  サポートエンジニア for Dynamics C&E / PowerApps / Flow （５か月目）  前職はスクラッチアプリエンジニア with Typescript / Java etc. （９年）  Twitter @saikou9901  Github @kojisaiki
3. AngularでPCFした話 きっかけ どうやる やってみた まとめ
4. きっかけ
5. PCF  PCF=PowerApps Component Framework (https://docs.microsoft.com/ja- jp/powerapps/developer/component-framework/overview)  フォームの部品をソースコード（Javascript/Typescript）で作成できる  まだまだプレビュー  現在はモデル駆動アプリ（= Dynamics C&E 統一インターフェイス = UCI） でのみ動作
6. PCF
7. 発生し得る課題 バージョン管理（本体、 依存ライブラリ） テスト ビルドプロセス 各種ブラウザのサポート （PowerApps、Dynamics に合わせる必要あり？）
8. 発生し得る課題 バージョン管理（本体、 依存ライブラリ） テスト ビルドプロセス 各種ブラウザのサポート （PowerApps、Dynamics に合わせる必要あり？） 既存のエコシステムに 任せて楽したい！
9. エコシステム  公式はReactのサポートを進め る動きがある https://powerapps.microsoft.com /en-us/blog/use-of-react-and- office-ui-fabric-react-in-the- powerapps-component- framework-is-now-available-for- public-preview/
10. エコシステム  公式はReactのサポートを進め る動きがある https://powerapps.microsoft.com /en-us/blog/use-of-react-and- office-ui-fabric-react-in-the- powerapps-component- framework-is-now-available-for- public-preview/ 俺はAngularが好き！
11. Angular（アンギュラー）  Google発のWebアプリケーショ ンフレームワーク  SPA=Single Page Application を開発できる  バージョン管理、ビルド、テス トなどいろんな機能あり
12. 幸せな未来しか見えない（手段の目的化）
13. どうやる
14. PCFとエコシステム をつなぐ  PCFは部品１つを開発する  エレメント作成から手作業 で書く必要がある
15. PCFとエコシステムをつ なぐ  Custom Elements (https://w3c.github.io/webcom ponents/spec/custom/)  Web Components の機能の１つ で、Web標準である  独自の機能をもったHTMLタグ を作成できる
16. PCFとエコシステム をつなぐ  一応こんな感じにすれば動 く
17. PCFとエコシステムをつ なぐ  Angular には Custom Elements を作成するための「Angular Elements」という機能が用意さ れている（まだ開発中だけど）。
18. 全体像 Angular エコシステム PCFビルド 動作確認環境 部品ソリュー ション
19. やってみた
20. AngularでPCF部品を つくる  まずはAngular Elementsの 部品を開発します
21. AngularでPCF部品を つくる  出来上がったJSファイルを PCFにもってきて…
22. AngularでPCF部品を つくる  Index.ts で Custom Elements を作成します
23. AngularでPCF部品を つくる  PCFのテストも動作OK！
24. AngularでPCF部品を つくる  ソリューションの作成も成 功！
25. 全体像 Angular エコシステム PCFビルド 動作確認環境 部品ソリュー ション
26. AngularでPCF部品を つくる  うおおおおおおおおお！
27. AngularでPCF部品を つくる  うおおおおおおおおお！
28. AngularでPCF部品を つくる  うおおおおおおおおお！
29. AngularでPCF部品を つくる
30. だめでした  runOutsideAngular という名前がスタックトレースに見える＋ PCF のテスト は動作したので、 Angular Elements と Dynamics の組み合わせっぽい  無限呼び出しっぽかったので、サポートされればワンチャン
31. まとめ
32. まとめ  明示的にサポートされたスタック、インタフェースでやりましょう……  ちなみに Custom Elements は IE 全般で対応していません  エコシステム的には React 覚えて GA サポート待つのが早いかも
33. まとめ  今回作ったソース  https://github.com/kojisaiki/pcf-meets-angular-elements  参考  PCF  https://docs.microsoft.com/en-us/powerapps/developer/component-framework/overview  Angular Elements  https://angular.jp/guide/elements  https://blog.bitsrc.io/using-angular-elements-why-and-how-part-1-35f7fd4f0457