Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular で PCF した話

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

7b6a54411a3fd465b1f60275a394db97?s=128

Koji Saiki

July 09, 2019
Tweet

Transcript

  1. AngularでPCFした話 2019.07.07 KOJI SAIKI

  2. 自己紹介  佐伯紘二(サイキ コウジ)  サポートエンジニア for Dynamics C&E /

    PowerApps / Flow (5か月目)  前職はスクラッチアプリエンジニア with Typescript / Java etc. (9年)  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は部品1つを開発する  エレメント作成から手作業 で書く必要がある

  15. PCFとエコシステムをつ なぐ  Custom Elements (https://w3c.github.io/webcom ponents/spec/custom/)  Web Components

    の機能の1つ で、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