Angular で PCF した話

by Koji Saiki

Slide 1

Slide 1 text

AngularでPCFした話 2019.07.07 KOJI SAIKI

Slide 2

Slide 2 text

自己紹介  佐伯紘二（サイキコウジ）  サポートエンジニア for Dynamics C&E / PowerApps / Flow （５か月目）  前職はスクラッチアプリエンジニア with Typescript / Java etc. （９年）  Twitter @saikou9901  Github @kojisaiki

Slide 3

Slide 3 text

AngularでPCFした話きっかけどうやるやってみたまとめ

Slide 4

Slide 4 text

きっかけ

Slide 5

Slide 5 text

PCF  PCF=PowerApps Component Framework (https://docs.microsoft.com/ja- jp/powerapps/developer/component-framework/overview)  フォームの部品をソースコード（Javascript/Typescript）で作成できる  まだまだプレビュー  現在はモデル駆動アプリ（= Dynamics C&E 統一インターフェイス = UCI）でのみ動作

Slide 6

Slide 6 text

PCF

Slide 7

Slide 7 text

発生し得る課題バージョン管理（本体、依存ライブラリ）テストビルドプロセス各種ブラウザのサポート（PowerApps、Dynamics に合わせる必要あり？）

Slide 8

Slide 8 text

発生し得る課題バージョン管理（本体、依存ライブラリ）テストビルドプロセス各種ブラウザのサポート（PowerApps、Dynamics に合わせる必要あり？）既存のエコシステムに任せて楽したい！

Slide 9

Slide 9 text

エコシステム  公式は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/

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Angular（アンギュラー）  Google発のWebアプリケーションフレームワーク  SPA=Single Page Application を開発できる  バージョン管理、ビルド、テストなどいろんな機能あり

Slide 12

Slide 12 text

幸せな未来しか見えない（手段の目的化）

Slide 13

Slide 13 text

どうやる

Slide 14

Slide 14 text

PCFとエコシステムをつなぐ  PCFは部品１つを開発する  エレメント作成から手作業で書く必要がある

Slide 15

Slide 15 text

PCFとエコシステムをつなぐ  Custom Elements (https://w3c.github.io/webcom ponents/spec/custom/)  Web Components の機能の１つで、Web標準である  独自の機能をもったHTMLタグを作成できる

Slide 16

Slide 16 text

PCFとエコシステムをつなぐ  一応こんな感じにすれば動く

Slide 17

Slide 17 text

PCFとエコシステムをつなぐ  Angular には Custom Elements を作成するための「Angular Elements」という機能が用意されている（まだ開発中だけど）。

Slide 18

Slide 18 text

全体像 Angular エコシステム PCFビルド動作確認環境部品ソリューション

Slide 19

Slide 19 text

やってみた

Slide 20

Slide 20 text

AngularでPCF部品をつくる  まずはAngular Elementsの部品を開発します

Slide 21

Slide 21 text

AngularでPCF部品をつくる  出来上がったJSファイルを PCFにもってきて…

Slide 22

Slide 22 text

AngularでPCF部品をつくる  Index.ts で Custom Elements を作成します

Slide 23

Slide 23 text

AngularでPCF部品をつくる  PCFのテストも動作OK！

Slide 24

Slide 24 text

AngularでPCF部品をつくる  ソリューションの作成も成功！

Slide 25

Slide 25 text

全体像 Angular エコシステム PCFビルド動作確認環境部品ソリューション

Slide 26

Slide 26 text

AngularでPCF部品をつくる  うおおおおおおおおお！

Slide 27

Slide 27 text

AngularでPCF部品をつくる  うおおおおおおおおお！

Slide 28

Slide 28 text

AngularでPCF部品をつくる  うおおおおおおおおお！

Slide 29

Slide 29 text

AngularでPCF部品をつくる

Slide 30

Slide 30 text

だめでした  runOutsideAngular という名前がスタックトレースに見える＋ PCF のテストは動作したので、 Angular Elements と Dynamics の組み合わせっぽい  無限呼び出しっぽかったので、サポートされればワンチャン

Slide 31

Slide 31 text

まとめ

Slide 32

Slide 32 text

まとめ  明示的にサポートされたスタック、インタフェースでやりましょう……  ちなみに Custom Elements は IE 全般で対応していません  エコシステム的には React 覚えて GA サポート待つのが早いかも

Slide 33

Slide 33 text

まとめ  今回作ったソース  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