SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Developers Summit 2023 セッションレポート(AD)

肥大化したコードを1/10に軽量化、Webサービスの継続的な開発に取り組む「KARTE」が実現した仕組みとは?

【9-C-8】これから先も戦えるサードパーティスクリプト — 1/10に軽量化・柔軟な拡張性・互換性の担保 —

  • X ポスト
  • このエントリーをはてなブックマークに追加

 Webサービスの継続的な開発では、ビジネスの成長とともに肥大化した機能の整理が不可欠になる。Webサイト上での訪問者の行動分析をおこなうCXプラットフォーム「KARTE」を開発・運営する株式会社プレイドでも、この課題に取り組んできた。2015年のリリース以来、継ぎ足しで改善してきた計測タグとサードパーティスクリプトについて、スクリプトサイズを1/10に軽量化、複数のプロダクトにも対応できるプラグイン機能を実現した。プレイドのエンジニアである西村優汰氏が「KARTE」の技術的な詳細を説明した。Webサービスの継続的な開発に取り組むエンジニアの参考になるだろう。

  • X ポスト
  • このエントリーをはてなブックマークに追加

サービスの成長と環境変化に追いつくためアップデートを実施

 最初に、西村氏はKARTEの基本的な機能を紹介した。

 「KARTEでは、今現在サイト上にどんなユーザーが訪問しているか知ることができ、エンドユーザーが実際にどんな動きをしているかを確認できます。」

 エンドユーザーの行動に応じたアクションも配信可能になっており、ポップアップやチャットなどを提供できるのだ。たとえば、サイトの初回訪問者のみにクーポンを配布するなど、エンドユーザーの状態に応じたアクションを打てる顧客体験を改善・強化できるマーケティングのためのWebサービスだ。

 この機能を実現するため、「計測タグ」と呼ぶ専用タグを顧客のWebサイトに埋め込んでもらう。そして、KARTEが提供するサードパーティスクリプトを読み込むことで機能を実現している。

 サードパーティスクリプトは、訪問者の状態に応じたイベントデータをサーバーに送信し、サーバーから返却されたポップアップなどのアクションの描画をおこなうJavaScriptのコードだ。

 計測タグは、全てのお客さまのWebサイトに埋め込まれており、共通のサードパーティスクリプトをCDNを介して読み込むというシステム構成になっている。

 KARTEでは、2015年のサービスリリース以来、継ぎ足しで計測タグとサードパーティスクリプトを改善してきたが、3つの課題を持っていた。

 「1つ目の課題は、スクリプトサイズの肥大化が目立ってきたことです。一部のプロジェクトにしか必要ない機能が存在しており、またブラウザの進化などにより不要なコードが増加していました。」

 さらに、Web全体でのトレンドの変化への対応も要因のひとつだ。GoogleによるCore Web Vitalsの導入以降、それまで非機能要件であったWebサイトのパフォーマンスが、SEOを重視するサイトで一種の機能要件と見なされていたのだ。

旧計測タグとサードパーティスクリプトの課題
旧計測タグとサードパーティスクリプトの課題

 「2つ目の課題は、サードパーティスクリプト上で動作するKARTEプロダクトの増加です。複数のプロダクトを動かす統一的な仕組みがなく、プロダクトごとに自由に開発している状態でした。3つ目の課題は、計測タグ自体の拡張性に制限があり、新しい機能を開発しづらい状態になっていました。」

 KARTEでは、こうした課題に対処するため、スクリプトサイズの軽量化、サードパーティスクリプト上で動作するプロダクトのプラグイン化、計測タグ自体の拡張を目指すことにした。

次のページ
肥大化したコードサイズを約1/10に軽量化

関連リンク

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Developers Summit 2023 セッションレポート連載記事一覧

もっと読む

この記事の著者

可知 豊(カチ ユタカ)

フリーランスのテクニカルライター 興味の対象はオープンソースの日常利用、ライセンス、プログラミング学習など。 著書「知る、読む、使う! オープンソースライセンス」。https://www.catch.jp

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

CodeZine編集部(コードジンヘンシュウブ)

CodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

提供:株式会社プレイド

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/17394 2023/04/21 12:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング