固有技術の掛け算で事業推進に繋げるプロダクト開発

© PLAID, Inc. 2025.02.27　　｜　　#250227_PLSI_Engineering 固有技術の掛け算で事業推進に繋げるプロダクト開発⽇沢翔太 | 株式会社プレイド, KARTE
Blocks チーム © PLAID, Inc.

© PLAID, Inc.　|　Conﬁdential ⾃⼰紹介⽇沢翔太株式会社プレイド KARTE Blocks 2023.11に中途⼊社しました。公私共に、酒を飲みすぎては後悔する⽇々。
お酒🍺 29 © PLAID, Inc.　|　Conﬁdential 2 地⽅移住検討中 SEO⾒習い🔰

© PLAID, Inc.　|　Conﬁdential KARTEについて © PLAID, Inc.　|　Conﬁdential 3 CX(顧客体験)プラットフォーム⼀⼈ひとりに合わせた
顧客体験を提供 WebやAppの訪問者の⾏動を顧客ごとにリアルタイムに解析

© PLAID, Inc.　|　Conﬁdential Stats of KARTE © PLAID, Inc.　|　Conﬁdential 4
データ規模も爆発的に増加 199 億UU 累計ユーザー数 ※1 0.x 秒/解析解析速度 134,000 over 秒間トラッキング数 ※3 2.59 兆円年間解析流通⾦額 ※2 ※1 ローンチ〜2023年2⽉までのユニークユーザー数の実績 ※2 EC領域における解析流通⾦額。2022年3⽉〜2023年2⽉までの単年の実績 ※3 閲覧、クリック、購⼊などKARTEで計測しているユーザーの全イベントが対象。ローンチ〜2023年3⽉までにおける最⼤値

© PLAID, Inc.　|　Conﬁdential プレイドの全体戦略ユーザー軸によるリアルタイムのデータ可視化 / アクションを強みとするKARTEの提供を通じて、オンサイトマーケティング領域より事業を開始以降、カスタマーサポートやリサーチ等、各領域
に最適化したプロダクト / サービスの提供によってマルチチャネルを形成 ”マルチチャネル × 1st Party Customer Data × リアルタイム” をワンストップで提供するプラットフォーム実現に向けた基盤が構築されつつある © PLAID, Inc.　|　Conﬁdential 5 1st Party Customer Data 戦略策定/ 事業‧組織開発広告市場調査/ 顧客調査カスタマーサポートマーケティングオートメーションオフライン/OMO オンサイトマーケティング EmotionTech CX/EX KARTE Signals Databeat KARTE RightSupport STUDIO ZERO KARTE Message KARTE TALK KARTE Web/App KARTE Blocks

© PLAID, Inc.　|　Conﬁdential 本⽇のアジェンダ 1. はじめに 2. KARTE Blocks プロダクトについて
3. KARTE Blocks を取り巻く事業環境と戦略 4. ダイナミックブロックとは 5. ダイナミックブロックを構成する技術要素 6. さいごに © PLAID, Inc.　|　Conﬁdential 6

© PLAID, Inc.　|　Conﬁdential はじめに © PLAID, Inc.　|　Conﬁdential 7 • 技術的なコアコンピタンスの掛け合わせによって
• 他社がキャッチアップしづらい価値ある機能を⽣み出し • 強⼒に事業を推進することができる💡 本⽇お伝えしたいこと💬

© PLAID, Inc.　|　Conﬁdential KARTE Blocks プロダクトについて © PLAID, Inc.　|　Conﬁdential 9
• サイト改善における悩みは様々 ◦ 「継続してできない」「安⼼してできない」「⾃由にできない」 • KARTE Blocksは、「サイト改修‧更新の効率化」「テストによる仮説検証やパーソナライズ」「データによる課題発⾒」までをワンストップで実現 • サイト運営の複雑性を緩和‧解消し、安⼼‧⾃由に⾏えるようにするプロダクトですあなたのサイト改善あっという間に。継続的に。

© PLAID, Inc.　|　Conﬁdential KARTE Blocks プロダクトについて KARTE Blocksが⽬指す新しいサイト運営のアプローチ ©
PLAID, Inc.　|　Conﬁdential 11

© PLAID, Inc.　|　Conﬁdential KARTE Blocks を取り巻く事業環境と戦略 © PLAID, Inc.　|　Conﬁdential
13 KARTE Blocksはサイトの「更新‧管理」および「サイト改善」に対する課題を持つユーザ層を想定したプロダクト。この領域においては、既に多くのプレイヤーが存在します👀 • CMS（Headfull/Headless） • Web接客ツール • A/Bテストツール • LPO‧EFOツール • ユーザー分析ツール（n1） • ヒートマップ • etc...

© PLAID, Inc.　|　Confidential KARTE Blocks を取り巻く事業環境と戦略 © PLAID, Inc.　|　Confidential
14 個々のツールとの機能⽐較に終始して機能開発を⾏っても、後発の KARTE Blocksが短期で優位性を獲得することは難しいです。このような市場環境で戦うためには、明確な負け理由（PoF）を減らしつつも他社と差別化した独⾃の価値（PoD）によって競争優位を⽣み出し、「Blocksでなければならない理由」を作ることが重要です🗝 出典: https://note.com/secky/n/nccc12ffd4083

© PLAID, Inc.　|　Conﬁdential コンセプト‧設計思想による差別化 © PLAID, Inc.　|　Conﬁdential サイト運営・改善の取り組みをワンストップで実現するツールやプロダクト、あるいはデータの分断が、複雑性を生み
出してしまっている。ワンストップで施策実行から検証までの機能を提供することで、その複雑性を取り払い、安心・安全にサイト運営を継続できる状態を実現する。 15 KARTE Blocks を取り巻く事業環境と戦略

© PLAID, Inc.　|　Conﬁdential © PLAID, Inc.　|　Conﬁdential 16 KARTE Blocks を取り巻く
事業環境と戦略機能による差別化 • 自由で直感的なノーコードエディタ • 高度なパーソナライズ • 定量分析・定性分析それぞれからサイトの課題を深掘り • etc…

© PLAID, Inc.　|　Conﬁdential 機能による差別化 © PLAID, Inc.　|　Conﬁdential 17 KARTE Blocks
を取り巻く事業環境と戦略 • 自由で直感的なノーコードエディタ • 高度なパーソナライズ • 定量分析・定性分析それぞれからサイトの課題を深掘り • etc… コンセプトによる差別化と⽐較すると競合にキャッチアップされやすい群にすることで「Blocksでなければならない強烈な理由」に昇華する

© PLAID, Inc.　|　Conﬁdential 本⽇の事例: ダイナミックブロック © PLAID, Inc.　|　Conﬁdential 18 KARTE
Blocks を取り巻く事業環境と戦略

© PLAID, Inc.　|　Conﬁdential ダイナミックブロックとは元となるデータのアップデートに応じて配信するコンテンツを⾃動更新。 ex )ランキング、新着商品など。ユーザーの⾏動履歴や年齢‧性別などを元に、特定の条件でコンテンツを表⽰し、パーソナライズ。
ex）類似商品‧広告バナーなど。動的なコンテンツ配信をサポートすることによって、より⼀層⾃由なサイト運営を実現 🎉 ダイナミックブロック © PLAID, Inc.　|　Conﬁdential 20

© PLAID, Inc.　|　Conﬁdential ダイナミックブロックとはアーキテクチャ © PLAID, Inc.　|　Conﬁdential 22 アクションテーブル
⾃社データデータの⾃動取り込みデータ連携ジョブを設定ブロックを編集‧保存 ‧ファイルアップロード ‧データ抽出条件設定クライアントサイト Blocks 書き換えスクリプト（builder.js）設定を元に配信解析基盤（Blitz） KARTE 計測スクリプト

⾃社データデータの⾃動取り込みデータ連携ジョブを設定ブロックを編集‧保存 ‧ファイルアップロード ‧データ抽出条件設定クライアントサイト Blocks 書き換えスクリプト（builder.js）解析基盤（Blitz） KARTE スクリプト ①サイトにアクセス ③KARTEスクリプトを配信 with ユーザ情報 ②閲覧イベントをトリガー KARTE 計測スクリプト設定を元に配信

⾃社データデータの⾃動取り込みデータ連携ジョブを設定ブロックを編集‧保存 ‧ファイルアップロード ‧データ抽出条件設定クライアントサイト Blocks 書き換えスクリプト（builder.js）解析基盤（Blitz） KARTE スクリプト ①サイトにアクセス ③KARTEスクリプトを配信 with ユーザ情報 ④ユーザ情報を利⽤してデータをクエリ ⑤データを返却 ②閲覧イベントをトリガー KARTE 計測スクリプト設定を元に配信

⾃社データデータの⾃動取り込みデータ連携ジョブを設定ブロックを編集‧保存 ‧ファイルアップロード ‧データ抽出条件設定クライアントサイト Blocks 書き換えスクリプト（builder.js）解析基盤（Blitz） KARTE スクリプト ①サイトにアクセス ③KARTEスクリプトを配信 with ユーザ情報 ④ユーザ情報を利⽤してデータをクエリ ⑤データを返却 ⑥ユーザ情報とデータをセット ⑦動的コンテンツで書き換え ②閲覧イベントをトリガー KARTE 計測スクリプト設定を元に配信

© PLAID, Inc.　|　Conﬁdential ダイナミックブロックとはダイナミックブロックの強み💪 © PLAID, Inc.　|　Conﬁdential 27
• データを流し込むブロックを、ノーコードで直感的に編集できる • アクセスユーザを解析基盤で瞬時に識別し、個⼈に合わせた⾼度なパーソナライズを実現できる • データ連携の設定がGUIで完結する • データ抽出ロジックを⾃分たちの仮説に合わせて⾃由にSQLレスで設定でき、検証できる

© PLAID, Inc.　|　Conﬁdential ダイナミックブロックを構成する技術要素ダイナミックブロックは、⼤きく4つのユニークな要素で成り⽴っている機能です。本⽇は、特にその中からKARTE Blocksが有するサードパーティスクリプト「builder.js」の詳細についてご説明します。
© PLAID, Inc.　|　Conﬁdential 29 • 直感的なノーコードエディタ • 柔軟なサイト書き換えを実現する独⾃サードパーティスクリプト builder.js👈 • リアルタイム解析基盤 Blitz • アクションテーブル

© PLAID, Inc.　|　Conﬁdential ダイナミックブロックを構成する技術要素 KARTE Blocksのブロック書き換え⽤サードパーティスクリプトのことを、builder.js と呼んでいます。ここからは、builder.jsによるブロック書き換えの仕組みを⾒ていき
ます。 © PLAID, Inc.　|　Conﬁdential 31

© PLAID, Inc.　|　Conﬁdential ダイナミックブロックを構成する技術要素 builder.jsは「書き換えロジックのソース」 + 「各プロジェクトの設定値」で構成されています。 KARTE
Blocksでユーザが操作を保存すると、それが書き換えに関連する内容である場合は、直ちに書き換え⽤のスクリプトが新たにビルドされ、配信されます。 © PLAID, Inc.　|　Conﬁdential 32 管理画⾯サーバ builder.js ビルドサーバ { … } 設定値をペイロードとしてビルドをトリガー設定値を埋め込んで builder.jsをビルド&アップロード設定を保存 CDNを通じて builder.jsを配信クライアントサイト管理画⾯ builder.js クラウドストレージ 👈冗⻑化 👈冗⻑化

© PLAID, Inc.　|　Conﬁdential ダイナミックブロックを構成する技術要素 builder.jsによる書き換えの仕組みは、極限まで単純化すると右記のようなものです。バンドルされた設定値に基づいて、セレクタで書き換え対象の要素を取得して、書き換え後のHTMLで上書きするといったような処理を⾏っています。
© PLAID, Inc.　|　Conﬁdential 33 // Blocksの設定の部分的な例 const CONFIG = [{ selector: 'body > img', html: '<img src="https://via.placeholder.com/150/0000FF/FFFFFF?text=New%20Image"/>' }]; // 書き換えロジック const rewrite = () => { CONFIG.forEach(({ selector, html }) => { const element = document.querySelector(selector); if (!element) return; element.outerHTML = html; }); }; const onReady = (callback) => { if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => { callback(); }); } else { callback(); } }; // main onReady(() => { rewrite(); });

© PLAID, Inc.　|　Conﬁdential ダイナミックブロックを構成する技術要素 © PLAID, Inc.　|　Conﬁdential 34 ダイナミックブロックの書き換え
前⾴にて例⽰したように、通常の書き換えブロックに関する設定については、通常のHTML形式で書き換え後の値が保存されていました。では、動的にコンテンツを埋め込むダイナミックブロックではどのようにしているのでしょうか？

© PLAID, Inc.　|　Confidential ダイナミックブロックを構成する技術要素ダイナミックブロックの書き換え上が通常のHTMLデータサンプル、下がダイナミックブロックに対応した書き換えHTMLデータ（ダイナミックブロックテンプレート）のサンプルです。なんとなく、馴染みのある構⽂ではないでしょうか？
© PLAID, Inc.　|　Confidential 35 <ul> <li> <a href="/blocks/items/details/denim-shirts.html"> <img src="/blocks/assets/images/item-01-thumb.png" alt=""> <figcaption> BRANDNAME ¥18,900 </figcaption> </a> </li> </ul> <ul> <li krt-for="item in data.items"> // krt-forで動的にli要素を生成 <a :href="item.link"> // href属性に変数を bind <img :src="item.image_url" alt=""> <figcaption> #{item.category} // マスタッシュ構文でテキスト展開 ¥#{item.price} </figcaption> </a> </li> </ul>

© PLAID, Inc.　|　Confidential ダイナミックブロックを構成する技術要素 © PLAID, Inc.　|　Confidential 36 <ul>
<li> <a href="/blocks/items/details/denim-shirts.html"> <img src="/blocks/assets/images/item-01-thumb.png" alt=""> <figcaption> BRANDNAME ¥18,900 </figcaption> </a> </li> </ul> <ul> <li krt-for="item in data.items"> // krt-forで動的にli要素を生成 <a :href="item.link"> // href属性に変数を bind <img :src="item.image_url" alt=""> <figcaption> #{item.category} // マスタッシュ構文でテキスト展開 ¥#{item.price} </figcaption> </a> </li> </ul> ダイナミックブロックの書き換え実は、ダイナミックブロックテンプレートは Petite-Vueというライブラリをベースに作っています。 Petite-VueはEvan Youによって開発された、軽量版 Vue.jsのようなライブラリです。

© PLAID, Inc.　|　Conﬁdential Why Petite-Vue ? © PLAID, Inc.　|　Conﬁdential •
データをUIに反映する際、HTMLを動的に書き換える仕組みが必要 • しかし、ノーコードでJavaScriptコードを生成・管理するのは難易度が高いため、宣言的な記法でコンテンツ書き換えを実現したい • ランタイムサイズが軽量であること • HTML互換であること • JSX/TSXやSvelteの構文はこれに当てはまらない • ASTとして扱えること • 多くの人にとって馴染みがある記法であること 37 ダイナミックブロックを構成する技術要素

© PLAID, Inc.　|　Confidential ダイナミックブロックを構成する技術要素ダイナミックブロックの書き換え次に、ダイナミックテンプレートを利⽤したブロックの書き換え処理をみていきます。 KARTE Blocksの書き換え処理は、チラつき（フリッカー現象）を防
⽌するために基本的に元ページの描画前に差し込んで同期的に実⾏されます。ダイナミックブロックにおいても、まずは同期的な書き換えを⾏います。つまり、書き換え対象の要素をセレクタで取得し、保存されたダイナミックブロックテンプレートで書き換えを⾏います。 © PLAID, Inc.　|　Confidential 38 const CONFIG = [{ selector: '#target', html: '<ul><li krt-for="item in data.items"><a :href="item.link"><img :src="item.image_url" alt=""><figcaption>#{item.category} ¥#{item.price}</figcaption></a></li></ul>', variablesQueriy: [...] }];

© PLAID, Inc.　|　Confidential ダイナミックブロックを構成する技術要素 © PLAID, Inc.　|　Confidential 39 export
function createPetiteVueDynamicRenderer({ selectors, PetiteVuePkg, }: { selectors: string[]; PetiteVuePkg: PetiteVue; }): DynamicRenderer { const rootElementsMap: Record<string, Element> = {}; const reactiveScopeValuesMap: Record<string, { _setData: any; _getData: any }> = {}; let app: PetiteVueApp | undefined; const render: DynamicRenderer['render'] = () => { const { createApp } = PetiteVuePkg; selectors.forEach(selector => { const element = document.querySelector(selector); if (element) { rootElementsMap[selector] = element; } }); Object.entries(rootElementsMap).forEach(([selector, element]) => { setAttributesForRender(element, selector); }); app = createApp({ Scope, $delimiters: ['#{', '}'], }); app.directive(EXPORT_DIRECTIVE_NAME, exportDirective).mount(); }; const setData: DynamicRenderer['setData'] = (selector, data) => { reactiveScopeValuesMap[selector]?._setData(data); }; const getData: DynamicRenderer['getData'] = selector => { return reactiveScopeValuesMap[selector]?._getData(); }; return { render, setData, getData }; } ダイナミックブロックの書き換え次に、ダイナミックブロックのターゲットとなる要素全てに対してレンダリング⽤の前処理を⾏い、petite-vueのAppをbody要素にマウントします。 petite-vueは krt-scope というディレクティブが有効な要素をリアクティブに管理します。

© PLAID, Inc.　|　Confidential © PLAID, Inc.　|　Confidential 42 export function createPetiteVueDynamicRenderer({
selectors, PetiteVuePkg, }: { selectors: string[]; PetiteVuePkg: PetiteVue; }): DynamicRenderer { const rootElementsMap: Record<string, Element> = {}; const reactiveScopeValuesMap: Record<string, { _setData: any; _getData: any }> = {}; let app: PetiteVueApp | undefined; const render: DynamicRenderer['render'] = () => { const { createApp } = PetiteVuePkg; selectors.forEach(selector => { const element = document.querySelector(selector); if (element) { rootElementsMap[selector] = element; } }); Object.entries(rootElementsMap).forEach(([selector, element]) => { setAttributesForRender(element, selector); }); app = createApp({ Scope, $delimiters: ['#{', '}'], }); app.directive(EXPORT_DIRECTIVE_NAME, exportDirective).mount(); }; const setData: DynamicRenderer['setData'] = (selector, data) => { reactiveScopeValuesMap[selector]?._setData(data); }; const getData: DynamicRenderer['getData'] = selector => { return reactiveScopeValuesMap[selector]?._getData(); }; return { render, setData, getData }; } カスタムディレクティブによるgetter/setterのブリッジ get(exp) はカスタムディレクティブの実装において、バインドされた値を評価して返します。 _selector はターゲット要素のセレクタ、 _getData はデータプロパティの getter、 _setData はデータプロパティのsetterとそれぞれバインドされています。この処理で、 reactiveScopeValuesMap にgetter/setterをセレクタごとに保存し、petite-vueの外部からデータ操作関数にアクセス可能にしています。 const exportDirective: PetiteVueDirective = ({ get, effect, exp }) => { effect(() => { const value = get(exp); const selector = value?._selector; if (selector) { reactiveScopeValuesMap[selector] = { _getData: value._getData, _setData: value._setData, }; } }); }; ダイナミックブロックを構成する技術要素

© PLAID, Inc.　|　Confidential ダイナミックブロックを構成する技術要素 © PLAID, Inc.　|　Confidential 43 const
CONFIG = [{ selector: '#target', html: '<ul><li krt-for="item in data.items"><a :href="item.link"><img :src="item.image_url" alt=""><figcaption>#{item.category} ¥#{item.price}</figcaption></a></li></ul>', variablesQueriy: [...] }]; ☝ダイナミックブロックでは、 variablesQueryというプロパティが追加され、そこにデータ取得⽤のクエリ定義が含まれているダイナミックブロックの書き換え次に、書き換え設定に保存されたクエリ定義にしたがって、それぞれのダイナミックブロック描画に必要なデータの取得を⾮同期に⾏います。データ取得に成功したら、リアクティブデータを更新し、再レンダリングを発⽕します。

© PLAID, Inc.　|　Conﬁdential ダイナミックブロックを構成する技術要素 © PLAID, Inc.　|　Conﬁdential 44 render(targets)
{ const selectors = targets.map(({ selector }) => selector); // 1⃣ Petite-Vue による Renderer のセットアップ const dynamicRenderer = createPetiteVueDynamicRenderer({ selectors, PetiteVuePkg: PetiteVue, }); renderState = { dynamicRenderer, targets }; dynamicRenderer.render(); // **同期レンダリング（ Petite-Vue の適用）** // 2⃣ 各要素ごとにデータ取得 targets.forEach(async ({ variation, selector }) => { // **createSetDataByUpdater() を展開** const setDataByUpdater = (updater) => { dynamicRenderer.setData(selector, updater(dynamicRenderer.getData(selector))); }; dispatchEvent(variation.variationId, 'beforeDataLoad'); // `variablesQuery` の取得 const variablesQuery = variation.variablesQuery; if (!variablesQuery) return; try { // 3⃣ データ取得前に `loading` ステータスを適用 setDataByUpdater(prev => ({ ...prev, _loadingStatus: 'loading' })); // 4⃣ `variablesQuery` を解決 const resolvedVariables = await resolveVariablesQuery(variablesQuery); // 5⃣ データ適用後に `success` ステータスを更新 setDataByUpdater(prev => ({ ...prev, ...resolvedVariables, _loadingStatus: 'success' })); await dynamicRenderer.nextTick(); dispatchEvent(variation.variationId, 'dataLoaded'); } catch (e) { setDataByUpdater(prev => ({ ...prev, _loadingStatus: 'error' })); dispatchEvent(variation.variationId, 'error', { raw: e }); } }); } ダイナミックブロックの書き換え次に、書き換え設定に保存されたクエリ定義にしたがって、それぞれのダイナミックブロック描画に必要なデータの取得を⾮同期に⾏います。データ取得に成功したら、リアクティブデータを更新し、再レンダリングを発⽕します。

© PLAID, Inc.　|　Conﬁdential おさらい © PLAID, Inc.　|　Conﬁdential • ダイナミックブロックの書き換え設定はPetite-Vueベースの構文でテンプレートを作成し、保存している
• 書き換え処理は、⬇のような流れで行われる • セレクタで要素を取得し、同期的にダイナミックブロックテンプレートで書き換え • 対象の要素にリアクティブ管理をするためのディレクティブを付与し、 Petite-Vueのアプリケーションをマウント • 書き換え設定に含まれるクエリ定義でデータの取得を非同期に行い、取得に完了したらリアクティブデータを更新し再レンダリング 45 ダイナミックブロックを構成する技術要素

© PLAID, Inc.　|　Conﬁdential 本⽇のまとめ © PLAID, Inc.　|　Conﬁdential KARTE Blocks は、競合プレイヤーが多い領域で後発として奮闘している。
そこで、“Blocksでなければならない理由 ”を生み出し、戦いの軸をずらす戦略をとっている。差別化の軸は、大きくコンセプト・設計レベルと機能レベルに分けられる。 • コンセプト・設計レベルの差別化は、競合がキャッチアップしづらく、長期的な強みになりやすい。 • 機能レベルの差別化は、模倣されやすいため、単体ではなく機能の群として独自価値に昇華することが重要。さらに、技術的固有価値を掛け合わせることで、キャッチアップしづらく、かつコンセプトにマッチした機能を生み出せば、強力な武器になる ⚔🔥 47 さいごに

固有技術の掛け算で事業推進に繋げるプロダクト開発

固有技術の掛け算で事業推進に繋げるプロダクト開発

More Decks by PLAID Tech

Other Decks in Technology

Featured

Transcript