私が WebComponents ｵﾈｰｻﾝ です

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

@twitter
https://twitter.com/negimic

Transcript

1. 私が WebComponents ｵﾈｰｻﾝ です
   株式会社サイバーエージェント
   根岸 未来
   @negimic
   

   View Slide

2. WebComponents と
   PaymentRequestAPI（PRA） で
   Ameba Pay を作った話
   

   View Slide

3. Ameba Pay とは？
   

   View Slide

4. Amebaの新しい共通決済システム
   セキュアでシンプルな決済体験を提供する
   

   View Slide

5. ・決済機能を使いたいサービスにAmebaPayを導入
   ・購入ボタンを押すと、PRAが実行される
   ・サービスからページ離脱しないで決済が完了できる
   ※PRA未対応のブラウザは、決済代行業者の決済ページへ遷移させている
   

   View Slide

6. つまり、AmebaPay（SDK）とは
   

   View Slide

7. ボタン です。決済基盤を使うための。
   

   View Slide

8. 採用技術 について
   

   View Slide

9. CustomElements + ShadowDOM
   カプセル化
   購入
   

   View Slide

10. ESModules
    sdk.js => importとかそのままのやつ。
    bundle.js => sdk.jsをrollupで依存ファイルをバンドルしたやつ。
    

    View Slide

11. PaymentRequestAPI（PRA）
    ブラウザネイティブの決済用フォーム（ブラウザに保存してる情報が使えたり）
    

    View Slide

12. まぁ、詳細は・・・
    https://1000ch.net/posts/2018/webcomponents-in-production.html
    

    View Slide

13. 反省 というか感想？２つあります〜
    

    View Slide

14. WebComponents を
    IE11、Edge、FF 他
    で動かすのが 大変 でした。
    

    View Slide

15. https://github.com/webcomponents/webcomponentsjs
    Edge では
    webcomponents-sd-ce.js
    IE11 では
    webcomponents-lite.js
    じゃないと動かなくて、悲しい出し分けが発生。
    

    View Slide

16. IE11 で HTMLElement の constructor が function じゃない問題で
    CustomElements がエラーになるので、悲しいpatchをあてました。
    

    View Slide

17. PaymentRequestAPI の動作確認が
    結構 大変 でした。
    

    View Slide

18. 開発が活発なので（？）、
    突然動かなくなったりした。
    

    View Slide

19. ・日本語入力で濁点が打てない問題
    ・1025円以上の決済でエラー
    ・shimの想定外の実装
    などなど
    

    View Slide

20. Chromeの開発チームに修正依頼、
    新境地でした（その節はありがとうございました）
    ・日本語入力で濁点が打てない問題
    ・1025円以上の決済でエラー
    ・shimの想定外の実装
    などなど
    

    View Slide

21. ・日本語入力で濁点が打てない問題
    ・1025円以上の決済でエラー
    ・shimの想定外の実装
    などなど
    Twitterでnullつらい〜ってつぶやいたら解
    決しました（その節は本当にありがとうございました）
    

    View Slide

22. 大変だったけど、
    やってよかった〜
    

    View Slide