<p>こんにちは、プレイドの@wikrshです。</p>
<p>弊社の<a href="https://karte.io/">KARTE</a> では属性データやサイト上での行動情報など様々なデータを元に来訪したユーザーの状況をリアルタイムに可視化しており、どのような情報の見せ方をすればよりユーザーへの理解を深められるのか、社内では日々議論・改良を重ねています。</p>
<p>今回は現在KARTEで行っているものとは異なる表現を実験してみたい + アニメーションを作るのが面白そうという動機で、「各ユーザーがサイト内の各ページを遷移している様子」の可視化に取り組んでみましたので紹介いたします。</p>
<h1>作成するアニメーションのイメージ</h1>
<p>各ページをノードとして表し、ユーザーを表すノードが各ページのノードを移っていく形で表現することを考えました。</p>
<p><code>/page1</code>を見ていたあるユーザーが<code>/page2</code>にアクセスした場合は、<code>/page1</code>を表すノードから<code>/page2</code>を表すノードへユーザーを表すノードが移動するイメージです。</p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/890d6805-9a38-4b41-b9b8-4fd9fc66baeb/blog.001.jpeg" alt=""></p>
<p>このノードを各ページ・各ユーザーについて表示して、時刻を変化させる（再生する）ことで、各時刻でユーザーがどのように移動しているかを可視化することが今回の目標です。<br>
実装にはチュートリアルや例が豊富でありアニメーションも容易な <a href="https://d3js.org/">D3.js</a> を使用し、ブラウザ上にSVGで表示を行うことにしました。</p>
<h1>ページの表現</h1>
<p>サイト内の各ページの配置方法は様々考えられますが、今回はサイト間のページ構造に依らずに適用でき、かつ実装も容易であるため環状に配置することを考えました。</p>
<p>各ページ間の遷移についてはこれらのノード間を移動させることで表現できますが、セッションの初回アクセスは表現できません。<br>
そのため、中心にノードを一つ配置し初回アクセス時は中心のノードからアクセスページへ移動するものとします。</p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/faccdde3-0d1f-4e0e-8ede-6d39c2355504/blog.002.jpeg" alt=""></p>
<p>また、各ページを閲覧しているユーザー数はページのノードの大きさで表現することにしました。<br>
SVGの<code>circle</code>の大きさは半径で指定しますが、面積をユーザー数に比例させたいので半径はユーザー数の平方根に比例させるようにします。</p>
<iframe width="100%" height="200" src="//jsfiddle.net/wikrsh2/a4owsx0d/embedded/result,js/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<h1>閲覧中のユーザーの取得</h1>
<p>今回は一般的なアクセスログを想定し、一つのレコードが、</p>
<ul>
<li>アクセス日時</li>
<li>ユーザーID</li>
<li>アクセスしたページ</li>
</ul>
<p>の情報からなるデータを使用します。</p>
<p>このデータに従ってある時刻<code>t</code>で発生したページアクセスを表示すれば良いのですが、このデータからはユーザーがいつページの閲覧を止めたか（離脱したか）は分かりません。<br>
ページアクセス以外のデータを組み合わせればより正確な離脱の計測も可能ですが、今回は簡単のためページアクセスから一定時間<code>T</code>経ったら閲覧を止めたとみなすことにします。</p>
<p>この条件の元である時刻<code>t</code>でサイトを閲覧中のユーザーを考えると、ページアクセスの時系列データの内、時刻<code>t-T</code>〜<code>t</code>でページアクセスをしたユーザーになります。</p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/a19b9522-01e0-464c-8e71-9d1dd7378a1b/blog.003.jpeg" alt=""></p>
<p>アニメーションの再生時は、この時刻<code>t</code>を進める→閲覧中のユーザーを更新という流れを繰り返して表示を行います。</p>
<h1>ユーザーのページ遷移アニメーション</h1>
<p>ユーザーがページ間を遷移するアニメーションはD3.jsの <a href="https://github.com/d3/d3-transition">transition</a>で実装します。<br>
詳細については多くのチュートリアルや例があるので割愛しますが、D3.jsを使用するとシンプルにアニメーションを実装できます。</p>
<iframe width="100%" height="200" src="//jsfiddle.net/wikrsh2/hbgb5v3v/embedded/result,js/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<p>注意点としては、ユーザーとノードを対応させるためにユーザーIDをキーとして渡す必要があります。<br>
これを行わないと、異なるユーザーのノードが使われてしまう可能性があります。</p>
<p>キー指定無し：</p>
<iframe width="100%" height="200" src="//jsfiddle.net/wikrsh2/bjzkmnfe/embedded/result,js/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<p>キー指定有り：</p>
<iframe width="100%" height="200" src="//jsfiddle.net/wikrsh2/sdcuzkxp/embedded/result,js/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<p>上の例ではデータ上は2人のユーザーがページを遷移していますが、キー指定無しの場合はノードとユーザーの紐付けが行われないため、遷移が起こっていないように見えてしまいます。</p>
<h1>作成したアニメーション</h1>
<p>弊社の運営する<a href="http://shopping-tribe.com/">Shopping Tribe</a>へのある日のアクセスデータをサンプリングした上で抽出してアニメーションを作成してみました。<br>
ノード数を抑えるためにアクセス数の上位49ページをそれぞれ一つのノードで表し、残りのページへのアクセスは一つのノード（<code>others</code>）にまとめて表現しました。</p>
<iframe src="https://player.vimeo.com/video/207268708" width="640" height="668" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p>作成したアニメーションを眺めていると、</p>
<ul>
<li>各ページへのアクセスのほとんどはサイト外からの流入で行われており、トップページ等サイト内での遷移からのアクセスの割合は多くない</li>
<li>アクセスの集中しているページとその他のページ間の遷移が多いわけではなく、決まった遷移の流れにはなっていない</li>
<li>アクセス数が上位49ページに入っていないページへのアクセス割合が比較的大きく、幅広くアクセスが発生している</li>
</ul>
<p>といった大まかな傾向は見てとれますが、新しい知見を得るためにはまだまだ改良が必要そうです。</p>
<h1>最後に</h1>
<p>今回行ってみたユーザー行動の可視化では、大まかなユーザーの動きの傾向や時間帯ごとの動きの違い程度の傾向はつかめるように思いますが、データから新しい知見を得るという点までは達しておらず、サイトに来訪したユーザーについての理解を深めるためには改良が必要そうです。</p>
<p>ここから意義のある知見を得られるレベルまで改良するには、</p>
<ul>
<li>個々のユーザーをどのように表現するか</li>
<li>各ページのノードをどのように配置するのが良いか</li>
</ul>
<p>が主なポイントになるかと思います。</p>
<p>特に、個々のユーザーの表現方法については、KARTEに取り込まれたユーザー情報やセグメント情報と合わせればより多くの知見を得られるのではなかと思いますので、より良い表現を考えたいところです。<br>
また、今回は閲覧データのみを使用しましたが、KARTE上には購入や会員登録を含む様々な行動データが存在するため、閲覧よりもより細かい行動の遷移を見るのも面白そうです。</p>
<p>ウェブ接客プラットフォーム「<a href="https://karte.io/">KARTE</a>」を運営するプレイドでは、KARTEを使ってこんなアプリケーションが作りたい！ KARTE自体の開発に興味がある！というエンジニア（インターンも！）を募集しています。<br>
詳しくは<a href="https://plaid.co.jp/recruit/engineer.html">弊社採用ページ</a><br>
または<a href="https://www.wantedly.com/companies/plaid/projects">Wantedly</a><br>
をご覧ください。 もしくはお気軽に、下記の「話を聞きに行きたい」ボタンを押してください！</p>
<div class="wantedly-visit-button" data-visit-button-id="lyE_IgY4VF5ukBo_EUKZLg" data-width="300" data-height="60"></div>
<script>
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "https://platform.wantedly.com/visit_buttons/script.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, "script", "wantedly-visit-buttons-wjs"));
</script>


D3.jsを使ってユーザーがサイト内の各ページを遷移している様子をアクセスログから可視化してみました。

データの可視化に使えるD3.jsでユーザーのページ遷移を表現してみた | PLAID engineer blog

データの可視化に使えるD3.jsでユーザーのページ遷移を表現してみた

<html><head></head><body><p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/ab738df8-3e11-4248-b37b-c8b4f16dfd83/16196179_1291472420896304_1281133783_o--1-.png" alt=""></p>
<p>こんにちは！<br>
プレイド エンジニアの@ikemonnです。</p>
<p>2/22(水)に開催しました「<a href="https://plaidtech.connpass.com/event/49170/" target="_blank" rel="noreferrer">【KUFU×プレイド】Tech Meetup ~Docker編~</a>」のレポートをお届けしたいと思います。</p>
<h2 id="発表タイトル">発表タイトル</h2>
<ul>
<li>ECS を使って PR ごとに検証環境を用意した話</li>
<li>CIにWerckerを使うべき5つの理由</li>
<li>Building Minimal Docker Containers</li>
<li>Docker社が買った会社</li>
<li>効率的なdocker build用directory構造について</li>
</ul>
<h2 id="ECS を使って PR ごとに検証環境を用意した話">ECS を使って PR ごとに検証環境を用意した話</h2>
<p>まず<a href="http://kufuinc.com/" target="_blank" rel="noreferrer">KUFU</a> <a href="http://twitter.com/elbowroomer" target="_blank" rel="noreferrer">@elbowroomer</a>さんから「ECS を使って PR ごとに検証環境を用意した話」というテーマで発表がありました。</p>
<p>もともと検証環境が1台だったところを、ECS &amp; Dockerを使ってPRごとに検証できるようにされたとのことでした！</p>
<p>修正内容を、文字やスクリーンショットベースではなく、実際に触って試せるのは良いですね！</p>
<iframe src="//www.slideshare.net/slideshow/embed_code/key/gZ4hajTEanBRb" width="100%" height="533" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen=""> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/AtsushiYoshinari1/ecs-pr-72456169" title="ECS を使って PR ごとに検証環境を用意した話" target="_blank">ECS を使って PR ごとに検証環境を用意した話</a> </strong> from <strong><a target="_blank" href="//www.slideshare.net/AtsushiYoshinari1">Atsushi Yoshinari</a></strong> </div>

<p>詳細はブログに書いてくださっているので、併せてお読みください！</p>
<p><a href="http://tech.smarthr.jp/tech/466" target="_blank" rel="noreferrer">「ECS を使って PR ごとに検証環境を用意した話」というテーマで登壇しました！ | SmartHR Tech Blog</a></p>
<h2 id="CIにWerckerを使うべき5つの理由">CIにWerckerを使うべき5つの理由</h2>
<p>次に<a href="https://plaid.co.jp/" target="_blank" rel="noreferrer">PLAID</a> <a href="https://twitter.com/algas" target="_blank" rel="noreferrer">@algas</a>から<a href="https://algas.github.io/plaid-meetup-20170222/#1" target="_blank" rel="noreferrer">CIにWerckerを使うべき5つの理由</a>というテーマで発表がありました。</p>
<p>CIをしていると</p>
<ul>
<li>CIが何をしているのか把握できない</li>
<li>CIと同じ環境を構築できない</li>
<li>CIで起こった問題が再現できない</li>
</ul>
<p>という部分でハマりがちです。</p>
<p>「ローカルでは動くのにCIでコケた」のような状況を、<a href="http://www.wercker.com/" target="_blank" rel="noreferrer">Wercker</a> というDockerネイティブなCIサービスを使えば解決できるという話でした！</p>
<p>弊社ではお客様に配布するJSファイルをbuildする部分からWerckerを取り入れ始めています！</p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/01a66a0e-7bfc-4347-a54e-762f53ce81d1/----------2017-03-01-14.47.46-1.png" alt=""></p>
<p><a href="https://algas.github.io/plaid-meetup-20170222/#1" target="_blank" rel="noreferrer">スライドはこちら！</a></p>
<h2 id="Building Minimal Docker Containers">Building Minimal Docker Containers</h2>
<p>続いて<a href="https://twitter.com/yepn" target="_blank" rel="noreferrer">@gavinzhm</a> さんから「Building Minimal Docker Containers」というテーマで発表がありました。</p>
<p>軽量なLinuxディストリビューションである<a href="https://www.alpinelinux.org/" target="_blank" rel="noreferrer">alpine Linux</a>を用いてイメージを作ったり、必要なレイヤーだけを注意深く選ぶことでビルド時間を短縮したりと実践的な内容でした！</p>
<script async="" class="speakerdeck-embed" data-id="bd98fa070456443096f8ebffc688b9c5" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
<h2 id="Docker社が買った会社">Docker社が買った会社</h2>
<p>次にPLAID <a href="https://twitter.com/otoan52" target="_blank" rel="noreferrer">@otolab</a>から「Docker社が買った会社」というテーマで発表がありました。</p>
<p>Docker社が今まで買収した会社と、その買収によってどのような機能が実装されてきたか &amp; 今後どのような機能が実装されそうかということを発表してもらいました！</p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/bbc96057-b5ad-48cc-a922-cf38fa68f556/----------2017-03-02-11.09.23.png" alt=""></p>
<p><a href="https://otolab.github.io/plaid-meetup-20170222/#1" target="_blank" rel="noreferrer">スライドはこちら！</a></p>
<h2 id="効率的なdocker build用directory構造について">効率的なdocker build用directory構造について</h2>
<p>最後に<a href="https://twitter.com/negabaro" target="_blank" rel="noreferrer">@kimsehwa</a>さんから「効率的なdocker build用directory構造について<br>
」というテーマで発表がありました。</p>
<p><code>Git push -&gt; CI -&gt; Docker build, run, push</code> といったフローを行いたい時に、どのようなディレクトリ構成にするのが効率的かという内容でした！</p>
<script async="" class="speakerdeck-embed" data-id="f12a99e526614ad58a2cf5dadf610191" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
<h2 id="最後に">最後に</h2>
<p>ウェブ接客プラットフォーム「<a href="https://karte.io/" target="_blank" rel="noreferrer">KARTE</a>」を運営するプレイドでは、KARTEを支えるマルチプラットフォームインフラに興味がある！KARTEを使ってこんなアプリケーションが作りたい！ KARTE自体の開発に興味がある！というエンジニア（インターンも！）を募集しています。<br>
詳しくは<a href="https://plaid.co.jp/recruit/engineer.html" target="_blank" rel="noreferrer">弊社採用ページ</a><br>
または<a href="https://www.wantedly.com/companies/plaid/projects" target="_blank" rel="noreferrer">Wantedly</a><br>
をご覧ください。</p>
</body></html>

2/22(水)に開催しました【KUFU×プレイド】Tech Meetup ~Docker編~のレポートです。
「ECS を使って PR ごとに検証環境を用意した話」「CIにWerckerを使うべき5

【KUFU×プレイド】Tech Meetup ~Docker編~を開催しました！

エディタ、ターミナル、UNIXシェルについて、PLAIDのエンジニアが何を使っているのか、アンケート形式で訊いてみた。果たして、1位のエディタは？