私が WebComponents ｵﾈｰｻﾝ です

Frontrend Vol.11 - 2017年度フロントエンド大反省会
https://frontrend.connpass.com/event/78896/

@twitter
https://twitter.com/negimic

Transcript

1. 私が WebComponents ｵﾈｰｻﾝ です 株式会社サイバーエージェント 根岸 未来 @negimic
2. WebComponents と PaymentRequestAPI（PRA） で Ameba Pay を作った話
3. Ameba Pay とは？
4. Amebaの新しい共通決済システム セキュアでシンプルな決済体験を提供する
5. ・決済機能を使いたいサービスにAmebaPayを導入 ・購入ボタンを押すと、PRAが実行される ・サービスからページ離脱しないで決済が完了できる ※PRA未対応のブラウザは、決済代行業者の決済ページへ遷移させている
6. つまり、AmebaPay（SDK）とは
7. ボタン です。決済基盤を使うための。
8. 採用技術 について
9. CustomElements + ShadowDOM カプセル化 <ameba-pay>購入</ameba-pay>
10. ESModules sdk.js => importとかそのままのやつ。 bundle.js => sdk.jsをrollupで依存ファイルをバンドルしたやつ。
11. PaymentRequestAPI（PRA） ブラウザネイティブの決済用フォーム（ブラウザに保存してる情報が使えたり）
12. まぁ、詳細は・・・ https://1000ch.net/posts/2018/webcomponents-in-production.html
13. 反省 というか感想？２つあります〜
14. WebComponents を IE11、Edge、FF 他 で動かすのが 大変 でした。
15. https://github.com/webcomponents/webcomponentsjs Edge では webcomponents-sd-ce.js IE11 では webcomponents-lite.js じゃないと動かなくて、悲しい出し分けが発生。
16. IE11 で HTMLElement の constructor が function じゃない問題で CustomElements がエラーになるので、悲しいpatchをあてました。
17. PaymentRequestAPI の動作確認が 結構 大変 でした。
18. 開発が活発なので（？）、 突然動かなくなったりした。
19. ・日本語入力で濁点が打てない問題 ・1025円以上の決済でエラー ・shimの想定外の実装 などなど
20. Chromeの開発チームに修正依頼、 新境地でした（その節はありがとうございました） ・日本語入力で濁点が打てない問題 ・1025円以上の決済でエラー ・shimの想定外の実装 などなど
21. ・日本語入力で濁点が打てない問題 ・1025円以上の決済でエラー ・shimの想定外の実装 などなど Twitterでnullつらい〜ってつぶやいたら解 決しました（その節は本当にありがとうございました）
22. 大変だったけど、 やってよかった〜