Slide 1
Slide 1 text
｜ © PLAID Inc. 2023.07.27 ｜ Developers Summit 2023 ｜ 1
ユーザー体験と編集体験を支える
ビルドアーキテクチャ
株式会社プレイド 片居木
Developers Summit Summer 2023
Slide 2
Slide 2 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 2
片居木 誠
Makoto Kataigi
Github : @mkataigi
Twitter : @mkataigi
株式会社プレイド
● アクションエディタ開発チームリード
● 解析エンジンも作ってました
● バックエンド好き
自己紹介
2023.07.27 ｜ Developers Summit 2023 ｜
Slide 3
Slide 3 text
｜ © PLAID Inc. 2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 3
2023.07.27 ｜ Developers Summit 2023 ｜
株式会社プレイド
東京都中央区銀座6-10-1 GINZA SIX 10F
設⽴：2011年10⽉
従業員：282名 ※2023年3⽉末時点
会社紹介
Slide 4
Slide 4 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 4
CX(顧客体験)プラットフォーム
Webサイトの訪問者の⾏動を
顧客ごとにリアルタイムに解析
⼀⼈ひとりに合わせた
顧客体験を提供
プロダクト紹介
Slide 5
Slide 5 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 5
アクション：
ポップアップに限らない
様々な顧客体験
HTMLだけでなく
JavaScriptによる動きも
アクション
システム連携
カウントダウン
Slide 6
Slide 6 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 6
アクションを
WYSIWYGで編集する
エディタ
TypeScriptのコードも編集できる
エディタ
Slide 7
Slide 7 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc.
本日のテーマ
7
ユーザー体験と
編集体験を支える
ビルドアーキテクチャ
ビルドの工夫
話すこと
ビルドアーキテクチャと
ユーザー体験と編集体験
ビルドを両立させる工夫
Slide 8
Slide 8 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc.
本日のテーマ
8
ユーザー体験と
編集体験を支える
ビルドアーキテクチャ
ビルドの工夫
話すこと
ビルドアーキテクチャと
ユーザー体験と編集体験
ビルドを両立させる工夫
🏻
Slide 9
Slide 9 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc.
webサイト
解析サーバ
アクションストレージ(CDN)
実行
コード
9
今日の話の前提：配信アーキテクチャ
過去データ
1. イベント送信
例) 閲覧
2. アクション情報返却
例)
https://bs.karte.io/action/foobar/index.js
3. アクションのコード取得＆実行
Slide 10
Slide 10 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc.
編集
ソース
KARTE Actionエディタ
ビルドサーバ
10
今日の話の本題：ビルドアーキテクチャ
実行
コード
アクションストレージ(CDN)
Slide 11
Slide 11 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc.
編集
ソース
KARTE Actionエディタ
ビルドサーバ
11
今日の話の本題：ビルドアーキテクチャ
実行
コード
アクションストレージ
(CDN)
実行コード生成
build on Server
1. エディタで編集するとソースコードが
変更される
2. 保存すると、ソースコードがサーバに
送られ、実行できるコードに変換
3. 実行コードをストレージ（CDN）に保存
Slide 12
Slide 12 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc.
編集
ソース
KARTE Actionエディタ
ビルドサーバ
12
今日の話の本題：ビルドアーキテクチャ
実行
コード
アクションストレージ
(CDN)
実行コード生成
build on Server
1. エディタで編集するとソースコードが
変更される
2. 保存すると、ソースコードがサーバに
送られ、実行できるコードに変換
3. 実行コードをストレージ（CDN）に保存
サーバ上で1回だけビルド
多くのエンドユーザーのブラウザ上で実行される
ビルド時間がかかっても良いので
実行速度を優先したい
Slide 13
Slide 13 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc.
編集
ソース
KARTE Actionエディタ
ビルドサーバ
13
今日の話の本題：ビルドアーキテクチャ
実行
コード
アクションストレージ(CDN)
実行コード生成
build on Server
プレビュー用
build on Browser
1. エディタで編集するとソースコードが
変更される
2. 変更がプレビューに
反映される
Slide 14
Slide 14 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc.
編集
ソース
KARTE Actionエディタ
ビルドサーバ
14
今日の話の本題：ビルドアーキテクチャ
実行
コード
アクションストレージ
(CDN)
実行コード生成
build on Server
プレビュー用
build on Browser
1. エディタで編集するとソースコードが
変更される
2. 変更がプレビューに
反映される
エディタでの編集するたびにプレビューが更新される
編集者の思考の妨げにならないようにしたい
実行速度より
ビルド時間を優先したい
Slide 15
Slide 15 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc.
編集
ソース
KARTE Actionエディタ
ビルドサーバ
15
今日の話の本題：ビルドアーキテクチャ
実行
コード
アクションストレージ(CDN)
実行コード生成
build on Server
プレビュー用
build on Browser
ビルド時間最適化
実行速度最適化
Slide 16
Slide 16 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 16
TypeScriptやその他ソースコードを
ブラウザで実行可能な状態にすること
ビルド
用語定義
• TypeScript のトランスパイル
• npmなどからのパッケージの取得
• バンドル（ファイルをまとめる）
• minify
• その他最適化
今回はrollup.jsを利用
Slide 17
Slide 17 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 17
配信毎に変わるコード
（ビジュアルなど）
Action SDK
アクション共通で使うコード
エディタで編集
SDKとして分離
（npmに登録してる）
Slide 18
Slide 18 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 18
SDKのビルドは
CIでのコマンドラインでのビルド
Action SDK
コードを分離することで、
事前にビルドできる
SDKのビルドも､実行用と
プレビュー用で分けている
‧
Slide 19
Slide 19 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc.
npmなど
プレビュー
SDK
事前build
ビルド時間最適化
実行
コード
実行コード生成
build on Server
プレビュー用
build on Browser
実行速度最適化
編集
ソース
SDK
ソース
実行SDK
19
サイト
エディタ
プレビュー
コード
ビルドフロー全体
毎回編集されるコード
さまざまなアクションで共通で使われるコード
Slide 20
Slide 20 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 20
アクションの
サイト上での実行速度と
エディタでのビルド時間を
両立するための
ビルドアーキテクチャ
本日のテーマ 話すこと
ビルドの工夫
ビルドアーキテクチャと
ユーザー体験と編集体験
ビルドを両立させる工夫
🏻
Slide 21
Slide 21 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc.
npmなど
プレビュー
SDK
事前build
ビルド時間最適化
実行
コード
実行コード生成
build on Server
プレビュー用
build on Browser
実行速度最適化
編集
ソース
SDK
ソース
実行SDK
21
サイト
エディタ
プレビュー
コード
ビルドフロー全体
Slide 22
Slide 22 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 22
実行速度 ≒ スクリプトのサイズ
ポイント：いかにスクリプトのサイズを小さくできるか
実行
SDK
事前build
実行コード生成
build on Server
実行
コード
実行速度最適化
編集
ソース
SDK
ソース
実行コード生成ビルド方針
Slide 23
Slide 23 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 23
tree-shakingで削除される
実行コード生成ビルドの工夫-1
実行
SDK
事前build
実行コード生成
build on Server
実行
コード
実行速度最適化
編集
ソース
SDK
ソース
実行コード生成のビルドでは rollup.js は
基本的な使い方をしている
rollup.js の tree-shaking で不要なコード
を削除している
Slide 24
Slide 24 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 24
SDKの工夫-1
実行
SDK
事前build
実行コード生成
build on Server
実行
コード
実行速度最適化
編集
ソース
SDK
ソース
実行コード生成のビルドするときに
tree-shaking しやすいようにしておく
exports を分割することで､ importの
単位を細かくする
Slide 25
Slide 25 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 25
SDKの工夫-2
実行
SDK
事前build
実行コード生成
build on Server
実行
コード
実行速度最適化
編集
ソース
SDK
ソース
実行コード生成のビルドするときに
tree-shaking しやすいようにしておく
実行時に不要なコードを分離しやすい
コードを書く
Slide 26
Slide 26 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 26
アクションのViewにSvelteを使うことで、
事前にビルドできるようにし、
重い実行時ランタイム不要で実行できるようにしている
実行コード生成ビルドの工夫-2
実行
SDK
事前build
実行コード生成
build on Server
実行
コード
実行速度最適化
編集
ソース
SDK
ソース
Slide 27
Slide 27 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 27
以前のアクションでは、vue.jsを
活用していた
pros：Web標準のHTML風な記法で記載できるため、
非エンジニアにも書きやすい
cons：ランタイムが必要で実行時に重い
Svelteが今回の要件にマッチ
同じくWeb標準のHTML風な記法で書ける
ランタイム不要で事前ビルドできるので軽量
Slide 28
Slide 28 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 28
HTML, Style, Scriptも分離しているので、
WYSIWYGエディタを作る上でも
編集しやすかった
余談...
この後のプレビュービルド時にも活用してる
Slide 29
Slide 29 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 29
• tree-shakingされて､コードが削減されやすいようにする
• Svelteを使って､実行時ランタイムを削減する
実行コード生成ビルドの工夫まとめ
実行
SDK
事前build
実行コード生成
build on Server
実行
コード
実行速度最適化
編集
ソース
SDK
ソース
Slide 30
Slide 30 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc.
npmなど
プレビュー
SDK
事前build
ビルド時間最適化
実行
コード
実行コード生成
build on Server
プレビュー用
build on Browser
実行速度最適化
編集
ソース
SDK
ソース
実行SDK
30
サイト
エディタ
プレビュー
コード
ビルドフロー全体
Slide 31
Slide 31 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 31
ビルド時間を早くするには､
いかに不要な変換を減らせるかがポイント
プレビュー
SDK
事前build
プレビュー用
build on Browser
実行
コード
ビルド時間最適化
SDK
ソース
編集
ソース
プレビュービルド方針
• ビルドするためのコード自体もブラウザにロードが必要
• なるべくサイズの小さいビルドパッケージ＆rollup pluginを利用する
Slide 32
Slide 32 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 32
プレビュービルドの工夫-1
プレビュー
SDK
事前build
プレビュー用
build on Browser
実行
コード
ビルド時間最適化
SDK
ソース
編集
ソース
プレビュー用ビルドでは全更新ではなく､差分更新できるようにしたい
SDKでは後工程で差分更新できるように
するための対応を入れる
Slide 33
Slide 33 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 33
SvelteのHydration機能を活用して､
コンポーネントの表示を高速化
Hydration
• Fetch: サーバー上でコンポーネントを HTML にレン
ダリングする
• Render: その HTML がクライアントに送信され、ブ
ラウザでレンダリングされる
• Load: アプリケーション内のコンポーネント用の
JavaScript を読み込む
• Hydrate: それらのロジックをブラウザでレンダリン
グされている HTML に接続していく
※ 通常はSSRで使われる
プレビューSDKのビルド時にHydrationの
設定が必要
Slide 34
Slide 34 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 34
SDKの工夫
プレビュー
SDK
事前build
プレビュー用
build on Browser
実行
コード
ビルド時間最適化
SDK
ソース
編集
ソース
SvelteのHydrationを使ってプレビューの
UIコンポーネントを差分更新させる
• プレビューSDKはHydrationの設定を入れた状態でビルドしておく
Slide 35
Slide 35 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 35
プレビュービルドの工夫-1
プレビュー
SDK
事前build
プレビュー用
build on Browser
実行
コード
ビルド時間最適化
SDK
ソース
編集
ソース
プレビューを差分更新にする
描画開始までにかかる時間
(66.7ms)を短縮
Slide 36
Slide 36 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 36
プレビュービルドの工夫-2
プレビュー
SDK
事前build
プレビュー用
build on Browser
実行
コード
ビルド時間最適化
SDK
ソース
編集
ソース
不要な処理はしない
minifyはしない
Slide 37
Slide 37 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 37
プレビュービルドの工夫-3
プレビュー
SDK
事前build
プレビュー用
build on Browser
実行
コード
ビルド時間最適化
SDK
ソース
編集
ソース
ビルド処理自体のコードサイズが小さいを処理を使う
• TypeScriptのトランスパイルには sucrase を利用
https://www.npmjs.com/package/sucrase
•
@rollup/plugin-json ではなく､ブラウザのJSON.parser/JSON.stringify
を利用する
Slide 38
Slide 38 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 38
プレビュービルドの工夫-4
プレビュー
SDK
事前build
プレビュー用
build on Browser
実行
コード
ビルド時間最適化
SDK
ソース
編集
ソース
npm の多くのパッケージは ESM 対応されておらず、
ブラウザ上で利用しようとすると変換が必要
• ESM対応をするproxyサービス経由でパッケージを取得する
※ ブラウザではCommonJSのパッケージが動かない
例) esm.sh / skypack
Slide 39
Slide 39 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 39
• SvelteのHydrationを使って差分更新
• 余計な処理は実行しない
• ブラウザJSの標準関数を使う
• ESM対応のパッケージProxyからパッケージを取得
プレビュービルドの工夫まとめ
プレビュー
SDK
事前build
プレビュー用
build on Browser
実行
コード
ビルド時間最適化
SDK
ソース
編集
ソース
Slide 40
Slide 40 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 40
アクションの
ブラウザでの実行速度と
エディタでの編集速度を
両立するための
ビルドアーキテクチャ
本日のテーマ 話すこと
ビルドの工夫
ビルドアーキテクチャと
ユーザー体験と編集体験
ビルドを両立させる工夫
🏻
Slide 41
Slide 41 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 41
• パッケージバージョンのズレが原因
• Svelteの破壊的変更もあった
2つのビルドを運用する工夫-1
課題
実行時とプレビュー時で挙動に違いが...
Slide 42
Slide 42 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 42
ビルドサーバ
build package
I/F for プレビュー
I/F for 実行コード
編集
ソース
build package
I/F for プレビュー
I/F for 実行コード
エディタ
プレビュー
コード
サイト
実行可能
コード
2つのビルドを運用する工夫-1
ビルド処理を
単一パッケージにまとめる
• ライブラリバージョンを揃える
• 環境ごとの設定用に2つのI/Fを用意
Slide 43
Slide 43 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 43
2つのビルドを運用する工夫-2
• 実行時は実行時SDK､プレビュー時はプレビューSDKを
使えるようにしたい
• Hydration版はSDKもビルドが別になる
課題
SDK内のimport先が違う...
Slide 44
Slide 44 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 44
2つのビルドを運用する工夫-2
plugin-aliasを活用
• aliasを使い、ビルドプロセスによっ
て、読み込むパッケージ・SDKを切
り替えてしまう
• 開発用のSDKの切り替えもできるよ
うになった
Slide 45
Slide 45 text
2023.07.27 ｜ Developers Summit 2023 ｜
｜ © PLAID Inc. 45
実行用の実行速度優先のビルド
• tree-shakingとSvelteの活用
まとめ
プレビューのビルド時間優先のビルド
• 差分更新＆不要な処理はしない
build packageの共通化で
2つのビルドプロセスを効率よく運用
• パッケージの共通化とSDKの切り替え
アクションの
ブラウザでの実行速度と
エディタでの編集速度を
両立するための
ビルドアーキテクチャ
Slide 46
Slide 46 text
No content