Upgrade to Pro — share decks privately, control downloads, hide ads and more …

デザインもドメインも違うサイト上のプレビュー機能をフロントエンドのみで実現したらユーザーもエンジニアもハッピーになった話 / How to preview on cross domain

デザインもドメインも違うサイト上のプレビュー機能をフロントエンドのみで実現したらユーザーもエンジニアもハッピーになった話 / How to preview on cross domain

GMO Developers Night #10 ペパボ EC テックカンファレンス 2020.06.24
https://pepabo.connpass.com/event/179445/

windyakin

June 24, 2020
Tweet

More Decks by windyakin

Other Decks in Programming

Transcript

  1. 1
    デザインもドメインも違うサイト
    上のプレビュー機能をフロントエ
    ンドのみで実現したらユーザーも
    エンジニアもハッピーになった話
    2020-06-24 ペパボECテックカンファレンス
    カラーミーショップ プロダクトチーム

    View Slide

  2. 2
    2
    長いタイトルで失礼します

    View Slide

  3. 3
    3
    GMOペパボ EC事業部
    カラーミーショップグループ
    プロダクトチーム
    神﨑 拓人
    windyakin a.k.a. じゅりあん
    @windyakin
    @MITLicense
    KANZAKI Takuto

    View Slide

  4. 4
    カラーミーショップ
    アプリストアについて
    Section 1
    4

    View Slide

  5. 5
    5
    アプリストアについて


    View Slide

  6. 6
    ● 昨年5月にサービス提供開始
    ● カラーミーショップを使う上で便利な機能を「アプリ」と
    してショップオーナー様が手軽に導入できる
    ● それまで連携機能は各社で開発・宣伝されていた
    ● 「アプリストア」という形でショップオーナー様向けの
    ショーケースを提供
    ● 専用APIやカラーミーショップによる利用料金の回収
    6
    アプリストアについて
    カラーミーショップ アプリストア

    View Slide

  7. 7
    https://app.shop-pro.jp/
    「カラーミーショップアプリストア」で検索!
    7

    View Slide

  8. 8
    アプリストアと
    デベロッパーサイト
    Section 2
    8

    View Slide

  9. 9
    9
    プレビュー機能の需要
    アプリストアとデベロッパーサイト
    ● 申請の入力画面上では入力している内容がどこに表示さ
    れるのかが分かりづらい
    ● Markdownがどのように表示されるかわからない

    View Slide

  10. 10
    10
    アプリストアとデベロッパーサイト

    View Slide

  11. 11
    ● アプリの開発に必要なダッシュボード機能を提供
    ○ APIを利用するためのOAuth認証に関する基本設定
    ○ アプリストアに掲載される内容の「公開申請」
    ● アプリストアと同じメンバーが開発・運用をしている
    ○ ただしアプリストアとデベロッパーサイトは別のリポジトリ
    ○ 両者とも Nuxt.js(TypeScript) + Vuetify だがバージョンなどに差異
    11
    アプリストアとデベロッパーサイト
    デベロッパーサイトとは

    View Slide

  12. 12
    ● アプリストアへ掲載する情報の更新には審査が必要
    ○ アプリストアのアプリ詳細ページは「カラーミーショップ」として
    提供・掲載しているのでカラーミー側で内容を把握したい
    ● デベロッパーが掲載したい内容を「申請」
    ○ ここをデベロッパーサイトで掲載したい内容を記入して提出
    ● カラーミー側でその内容を「審査」
    ● 審査OKであれば公開申請の内容を「反映」できる
    ○ 公開申請とアプリストアの掲載情報のテーブルは別のもの
    12
    アプリストアとデベロッパーサイト
    デベロッパーサイトの「公開申請」

    View Slide

  13. 13
    13
    アプリストアとデベロッパーサイト

    ショップオーナー様 アプリデベロッパー
    カラーミーショップ
    アプリストア
    (App)
    デベロッパーサイト
    (Dev)
    ①申請
    ③反映
    ②審査
    ④閲覧
    アプリストアへ掲載する情報の更新には審査が必要

    View Slide

  14. 14
    プレビュー機能の開発
    Section 3
    14

    View Slide

  15. 15
    15
    プレビュー機能の要件
    プレビュー機能の開発
    セキュリティ
    ● 入力途中の申請はアプリのデベロッパーのみに表示されるべき秘匿情報
    ⏱ リアルタイム性
    ● プレビューなので「いま」入力している内容がどうかを確認したい
    メンテナンスコスト
    ● アプリページとプレビューを別々に実装してしまうと変更コストが倍

    View Slide

  16. 16
    16
    実装にあたってのいくつかの案 1
    プレビュー機能の開発
    入力とプレビューがAPIを介して申請内容をやりとりする
    ● プレビューを行うたびにサーバー側に負荷がかかる
    ○ リアルタイム性が低い ⏱⬇
    ● AppとDevはセッションもログイン情報も異なる
    ○ プレビューするときにログイン画面を出す必要 ユーザビリティ ⬇
    ● 改良としてユーザ認証をJWTでやる案
    ○ セキュリティ的にかなり逃げの実装 ⬇

    View Slide

  17. 17
    17
    実装にあたってのいくつかの案 2
    プレビュー機能の開発
    JWTを発行してそれを使ってAPIから情報を取得する
    ● 案1の改良型
    ● プレビュー時にGETパラメータでJWTを渡す
    ○ これでApp側のログイン画面は回避できる
    ○ ユーザビリティの点は回避
    ○ ただしセキュリティ的にかなり逃げな実装になりそうなのは明らか
    ● これもAPIを介する点は変わらない

    View Slide

  18. 18
    18
    実装にあたってのいくつかの案 2
    プレビュー機能の開発
    Vue.jsのWeb Componentsを使ってDev上に構築
    ● Appの更新があるたびにWeb Componentsを作り直し
    ○ 見た目の細かい修正でも2つのリポジトリに対応する必要がある
    ○ メンテナンスコストが高い
    ● Vue.js(Nuxt) や Vuetify のバージョンが違う
    ○ Web Components導入の知見がチーム内にない
    ○ もしかしたらできるかも の見切り発車

    View Slide

  19. 19
    19
    実装にあたってのいくつかの案 3
    プレビュー機能の開発
    window.postMessage + iframe を使う案
    ● ページ内の特定のiframeなど任意メッセージを送る機能
    ○ 登場したのは2008年で実はIEですら8で対応している古典的機能
    https://caniuse.com/#feat=mdn-api_window_postmessage 


    View Slide

  20. 20
    20
    セキュリティ的な懸念の解消のために
    プレビュー機能の開発
    ● window.postMessageはどこからでも送れる
    ○ 何もしないと関係ないサイトから iframe などでデータを送れる
    ○ 存在しないアプリページが作れる機能になる
    ○ セキュリティ的によくない ⚠
    ● 送られたデータを受け取るときに送信元を精査
    ○ postMessage を受け取るイベントメッセージ中に Origin が含まる
    例) event.origin ➡ “https://developer.shop-pro.jp”
    ○ ここに入る値を設定しているのはブラウザ側なので偽装はできない

    View Slide

  21. 21
    21
    どういった形で実現したか
    プレビュー機能の開発
    ● App側にpostMessageを受け取るページを用意
    ○ アプリ個別ページのクラスを継承する形にすることで実装を簡略化
    ○ postMessageで受け取ったデータを表示用に整形する
    ● DevにAppのプレビューページをiframeで表示する
    ○ postMessageの呼び出しだけDev側にコンポーネントとして実装

    View Slide

  22. 22
    22
    プレビュー機能の開発

    入力画面 プレビュー画面
    アプリデベロッパー
    postMessageで
    入力内容を送信
    掲載したい内容を
    入力
    受け取った
    データを整形
    プレビューを表示

    View Slide

  23. 23
    23
    DEMO
    する時間があるかな?

    View Slide

  24. 24
    まとめ
    Section 4
    24

    View Slide

  25. 25
    25
    実際に実装・運用してみてわかったこと
    まとめ
    当初の目論見通りメンテナンスコストは低い!
    ○ 多少の表示の変更ならApp側のアプリページを編集するだけでOK
    ○ 新項目の追加はDev側も変更する必要があるがこれは当然
    一部の表示はAPI側で計算する必要があった
    ○ 税込価格の税率をJS側に持たせたくない理由でサーバー側に
    ○ APIで計算する部分は最後の確認画面でのみで表示するように変更

    View Slide

  26. 26
    26
    まとめ・今後の展開
    まとめ
    ● フロントエンドで柔軟なプレビューの実装ができた
    ○ postMessage はクロスドメインでのデータのやり取りしたいという
    ニーズに十分応えられるものだと感じた
    ● 新カートページにカスタム要素追加した際のプレビュー
    ○ 何かしらのカスタム要素を追加ができる機能ができたとき
    ● 新アプリの開発のアーキテクチャとして活用できるかも
    ○ ショップページに埋め込んだscriptタグとiframeとで連携できそう

    View Slide

  27. 27
    27
    おわり

    View Slide

  28. 28
    28

    View Slide