$30 off During Our Annual Pro Sale. View Details »

私が WebComponents オネーサン です

私が WebComponents オネーサン です

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

@twitter
https://twitter.com/negimic

negishi miku

March 09, 2018
Tweet

More Decks by negishi miku

Other Decks in Technology

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. 反省 というか感想?2つあります〜

    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