Tweet
Tweet

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

エコシステム  公式は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が好き！

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