Solution Blog

Kazuhisa Fukuda

Kazunori Kamiya

Yusuke Kobayashi

Masamichi Kanakubo

Kazuki Shimizu

Shin Yamamoto

Yuichiro Kohata

Shiori Megumi

Kai Murakami

Shogo Michihata

Yuji Yoshida

Akihiro Nakano

Kasumi Shimamoto

Daikichi Sasamori

Yuusuke Hasegawa

Jumpei Ikegami

Manabu Yazawa

Yusuke Yajima

Kippei Wada

Ikumi Watanabe

Jumpei Koshio

<p>こんにちは、Customer Engineerのkazです！最近、『チ。-地球の運動について-』に夢中になっています。学生時代に感じた物理への憧れを思い出させてくれる作品で、ぜひ皆さんにもおすすめしたいです。私はピャスト伯が好きです。</p>
<p>さて、近年企業が顧客理解を深めるためにアンケートやレビューなどの1st Partyデータを活用することが一般的になっています。しかし、膨大な量のフリーテキスト回答データを人手で分析するのは大変な作業です。</p>
<p>KARTE Craft AI Modules では、アンケートなどで収集された自由記述データに対して、文意の成分ごとの大きさをベクトルサイズで表現する機能を提供します。これにより、肯定的な感情を含む回答を効率的に抽出したり、回答の傾向を数値化することができます。</p>
<p>具体的な活用事例としては、大規模アンケートの感情分析や、商品・サービスに対するユーザーの評価把握などが考えられます。KARTE Craftのこの機能を使えば、膨大なテキストデータの中から重要なインサイトを見出すことができるでしょう。</p>
<p>ぜひ、KARTE Craft AIモジュールを活用して、テキストデータの高度な分析に挑戦してみてください。</p>
<h2>アウトプットイメージ</h2>
<p>最終的なアウトプットイメージは次の通りです。<br>
今回は、一例として食品についてのレビューに「商品に満足している」「商品に不満がある」という文意が、それぞれどの程度含まれているかを分析しました。</p>
<p>分析を実行すると、スプレッドシーに入力されているテキストごとに、Craft Functions変数で指定したキーワードの文意の含有量が計算され、 Google スプレッドシートに出力されます。</p>
<p><img src="https://ik.imagekit.io/plaid/4ee22366-446e-452e-8653-dbfaa0fdf048/Monosnapsurvey_demo_data-Google%E3%82%B9%E3%83%95%E3%82%9A%E3%83%AC%E3%83%83%E3%83%88%E3%82%99%E3%82%B7%E3%83%BC%E3%83%882024-04-0514-40-59.png" alt="Monosnapsurvey_demo_data-Googleスプレッドシート2024-04-0514-40-59.png"></p>
<p>文意の大きさは 0~1 の数値で 1 に近いほど文意が強いことを表しています。<br>
一例として2行目の商品レビューを例にデータを読み解いてみると、文意の大きさは</p>
<ul>
<li>「商品に満足している」: 0.392</li>
<li>「商品に不満がある」：0.301</li>
</ul>
<p>となっています。そのため、このレビューは「商品に満足している」という意味合いの強いレビューだと解釈することができます。このように、この分析によるアウトプットは膨大な量のフリーテキストから定量的に文意を抽出することで、回答の傾向を数値化するのに役立つでしょう。</p>
<h2>注意点</h2>
<p>前提として、次の点に注意をしてください。</p>
<ul>
<li>KARTE Craft Functions, KARTE Craft AI Modules を利用していることを前提としています。</li>
<li>Google SpreadSheet API を使用することを推奨しています。</li>
<li>本ソリューションは Google Spread Sheet API を通わずに使用することも可能ですが、配布しているテンプレートは SpreadSheet を使ってデータの入出力を行うように作られているため、Spread Sheet APIを使用しない場合は Functions を適宜カスタマイズしてご利用ください。</li>
</ul>
<h2>設定手順</h2>
<p>設定の手順は次の通りです。</p>
<ol>
<li>API v2 アプリを作成する</li>
<li>API v2 アプリの アクセストークンを Craft Secret Manager に登録する</li>
<li>Googleサービスアカウントを作成する</li>
<li>GoogleサービスアカウントのJSONキーファイルの中身を Craft Secret Manager に登録する</li>
<li>Googleサービスアカウントに対象スプレッドシートへの権限を付与する</li>
<li>Craft Functionsのファンクションを作成する</li>
<li>Craft Functionsのエンドポイントを作成する</li>
</ol>
<p>順番に見てみましょう。</p>
<h3>1. API v2 アプリを作成する</h3>
<p>KARTEのAPIを利用するために、API v2アプリを作成します。<br>
<img src="https://ik.imagekit.io/plaid/a1b20746-4140-441d-8e46-3a5a74dc11ab/create_API_v2_App.png" alt="create_API_v2_App.png"></p>
<ul>
<li>[ストア &gt; API v2設定] からアプリを新規作成</li>
<li>[アプリタイプ] を <code>Craft</code> に設定</li>
<li>必要なscopeを追加
<ul>
<li><code>beta.craft.aimodules.openai.embeddings</code></li>
</ul>
</li>
<li>アプリを保存し、一度だけ表示されるアクセストークンをメモしておく</li>
</ul>
<h3>2. API v2 アプリの アクセストークンを Craft Secret Manager に登録する</h3>
<p>API v2 アプリのアクセストークンをCraft Functionsから安全に利用するために、Craft Secret Manager に登録します。</p>
<p><img src="https://ik.imagekit.io/plaid/6f229ee9-39aa-4e47-be81-f615f3b448f8/create_craft_secret.png" alt="create_craft_secret.png"></p>
<ul>
<li>[Craft &gt; シークレット] からシークレットを新規作成</li>
<li>[名前] に、わかりやすい名前を入力</li>
<li>メモしておいたAPI v2 アプリのアクセストークンを [シークレットの値] に入力し、作成</li>
<li>シークレット名をメモしておく</li>
</ul>
<h3>3. Googleサービスアカウントを作成する</h3>
<p>GoogleのサービスでAPIを利用するために、Googleサービスアカウントを作成します。</p>
<ul>
<li>Google Cloudのコンソール画面を開く
<ul>
<li>アカウントやプロジェクトが無い場合は作成してください</li>
</ul>
</li>
<li>[IAMと管理 &gt; サービスアカウント &gt; サービスアカウントを作成] から適当な名称のサービスアカウントを作成</li>
</ul>
<p><img src="https://ik.imagekit.io/plaid/227adf6a-c6bc-42ea-8235-8f3c762422eb/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-1413.15.34.png" alt="スクリーンショット2023-08-1413.15.34.png"></p>
<ul>
<li>作成したサービスアカウントを選択し、[キー &gt; 鍵を追加 &gt; 新しい鍵を作成] からJSON形式のキーファイルをダウンロード</li>
</ul>
<p><img src="https://ik.imagekit.io/plaid/faefbf7a-98af-4a2f-a672-e436f2e8cf0c/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-1413.16.12.png" alt="スクリーンショット2023-08-1413.16.12.png"></p>
<p>ダウンロードしたキーファイルは、後の手順で利用します。</p>
<h3>4. GoogleサービスアカウントのJSONキーファイルの中身を Craft Secret Manager に登録する</h3>
<p>Googleサービスアカウントの認証情報をCraft Functionsから安全に利用するために、Craft Secret Manager に登録します。</p>
<p><img src="https://ik.imagekit.io/plaid/1cb0539c-a074-47aa-b2f4-569647617236/create_service_account_secret.png" alt="create_service_account_secret.png"></p>
<ul>
<li>[Craft &gt; シークレット] からシークレットを新規作成</li>
<li>[名前] に、わかりやすい名前を入力</li>
<li>ダウンロードしたJSONキーファイルの中身を [シークレットの値] にそのまま入力し、作成</li>
<li>シークレット名をメモしておく</li>
</ul>
<h3>5. Googleサービスアカウントに対象スプレッドシートへの権限を付与する</h3>
<p>Google Sheets APIを有効化したとしても、個別のスプレッドシートに対して自由にアクセスできるわけではありません。スプレッドシート毎に、対象のGoogleサービスアカウントに対して権限を付与する必要があります。</p>
<ul>
<li>対象スプレッドシートを開き、右上の [共有]ボタンをクリック</li>
</ul>
<p><img src="https://ik.imagekit.io/plaid/1d490492-2ff5-409a-97e2-8f256b0eee49/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-1514.20.04.png" alt="スクリーンショット2023-08-1514.20.04.png"></p>
<ul>
<li>ダウンロードしたキーファイルに含まれるclient_emailの値を入力し、権限には [編集者] を選択して [送信]</li>
</ul>
<h3>6. Craft Functionsのファンクションを作成する</h3>
<p>Craft Functionsのファンクションを作成します。作成手順は次の通りです。</p>
<p><img src="https://ik.imagekit.io/plaid/f54845aa-6834-475f-ad9d-dfaf4b0ef4c5/create_craft_functions.png" alt="create_craft_functions.png"></p>
<ul>
<li>[Craft &gt; ファンクション &gt; 新規作成 &gt; テンプレートから作成] を選択</li>
<li>「 <strong>自由回答テキストに含まれる文意を Text Embedding で成分ごとにスコア化する</strong> 」というテンプレートを検索し[取得]ボタンをクリック</li>
<li>[反映] ボタンをクリック</li>
<li>[変数] タブで次の変数の値を設定する
<ul>
<li><code>LOG_LEVEL</code>
<ul>
<li>出力するログのレベル</li>
</ul>
</li>
<li><code>CRAFT_APP_TOKEN_SECRET_NAME</code>
<ul>
<li>API v2 アプリのアクセストークンを登録したシークレットの名前です。</li>
</ul>
</li>
<li><code>EMBEDDING_KEYWORDS</code>
<ul>
<li>に用いるキーワード</li>
<li>複数指定する場合はカンマ区切りで指定します。
<ul>
<li>例：<code>商品に満足している,商品に不満がある</code></li>
</ul>
</li>
</ul>
</li>
<li><code>SERVICE_ACCOUNT_KEY_SECRET</code>
<ul>
<li>Googleサービスアカウントを登録したシークレットの名前</li>
</ul>
</li>
<li><code>SPREADSHEET_ID</code>
<ul>
<li>GoogleスプレッドシートID</li>
<li>スプレッドシートのURLの <code>https://docs.google.com/spreadsheets/d/#{SPREADSHEET_ID}/</code> より取得できる英数字です。</li>
</ul>
</li>
<li><code>SHEET_NAME</code>
<ul>
<li>連携対象のGoogleスプレッドシートのシート名</li>
<li>例：<code>Sheet1</code></li>
</ul>
</li>
<li><code>TEXT_EMBEDDING_MODEL</code>
<ul>
<li>Text Embedding に使用するモデル名</li>
<li>現在使用できるモデルは <a href="https://developers.karte.io/reference/post_v2beta-craft-aimodules-openai-embeddings">Developer Portal - Enterprise grade embeddings</a> の <code>BODY PARAMS</code> より確認できます。</li>
</ul>
</li>
</ul>
</li>
<li>[保存] する</li>
<li>デプロイ完了後、[設定 &gt; ファンクションの有効化] にチェックを付ける</li>
</ul>
<p>なお、テンプレートのソースコードはGitHubで公開しています。<br>
<a href="https://github.com/plaidev/craft-codes/tree/main/craft-functions/survey-text-embedding-scoring">craft-codes/craft-functions/survey-text-embedding-scoring at main · plaidev/craft-codes</a></p>
<h2>7. Craft Functionsのエンドポイントを作成する</h2>
<p>作成したファンクションを外部から実行できるようにするためのエンドポイントを作成します。</p>
<p><img src="https://ik.imagekit.io/plaid/d76f89a5-49ec-425a-909c-729c7469bfa2/create_craft_functions_endpoint.png" alt="create_craft_functions_endpoint.png"></p>
<ul>
<li>作成したファンクションの編集画面から [設定 &gt; エンドポイント &gt; 作成] をクリック</li>
<li>表示されたエンドポイントURLをメモしておく</li>
</ul>
<h2>実際に動かしてみる</h2>
<p>実際に動作を確認してみましょう。まずスプレッドシートのA1に <code>input</code> というヘッダを作成し、続くA列のセルに分析したいテキストデータを入力します。</p>
<p><img src="https://ik.imagekit.io/plaid/443c9b62-01f7-4b3b-b660-143bbc5e0d6e/Monosnapsurvey_demo_data-Google%E3%82%B9%E3%83%95%E3%82%9A%E3%83%AC%E3%83%83%E3%83%88%E3%82%99%E3%82%B7%E3%83%BC%E3%83%882024-04-0516-19-46.png" alt="Monosnapsurvey_demo_data-Googleスプレッドシート2024-04-0516-19-46.png"></p>
<p>つづいて、[変数] タブの <code>EMBEDDING_KEYWORDS</code> に文意の大きさを測定したいキーワードを入力し、[保存]します。</p>
<p>最後に、ターミナルなどの適当な実行環境からエンドポイントへのリクエストを送信します。</p>
<pre><code class="language-bash">curl https://t.karte.io/hook/xxxxxxxx/craft/xxxxxxxx
</code></pre>
<p>問題なく設定できていれば、次のような表示が実現できるはずです。</p>
<p><img src="https://ik.imagekit.io/plaid/4ee22366-446e-452e-8653-dbfaa0fdf048/Monosnapsurvey_demo_data-Google%E3%82%B9%E3%83%95%E3%82%9A%E3%83%AC%E3%83%83%E3%83%88%E3%82%99%E3%82%B7%E3%83%BC%E3%83%882024-04-0514-40-59.png" alt="Monosnapsurvey_demo_data-Googleスプレッドシート2024-04-0514-40-59.png"></p>
<p>なおKARTE Datahubの<a href="https://developers.karte.io/docs/datahub-federation-table">フェデレーションテーブル</a>機能を使うことで、スプレッドシート上のデータに対してDatahubからSQLクエリを発行し、スプレッドシート上のデータを直接抽出することができます。その結果をDatahubのダッシュボードで可視化したり、紐付けテーブルにエクスポートしてKARTE上のユーザーに紐付けてセグメント条件に利用したりといった活用もできます。</p>
<h2>補遺1：スコアの算出の仕方</h2>
<p>文意の大きさを算出する際、本ソリューションでは以下の流れで数値計算を行なっています。</p>
<ol>
<li>Craft Functions変数で指定したキーワードを Text Embeddings によりベクトル化</li>
<li>スプレッドシートから入力されたテキストを Text Embeddings によりベクトル化</li>
<li>2つのベクトルのコサイン類似度を計算したものを文意の大きさとして採用</li>
</ol>
<h2>補遺2：ユークリッド距離を使って文意の大きさを算出する</h2>
<p>ユークリッド距離を使って文意の大きさを算出することもできます。ユークリッド距離を用いた文意の大きさの算出を有効化するには Craft Functions の[コード]の中から以下の行を検索し、該当行のコメントアウト、及びコメントインを行った上で[保存]してください。</p>
<pre><code class="language-javascript">async function outputData(sheets, scores) {
  const scoresFlatten = scores.slice(1).map(score =&gt; {
    const wk = [
      score.input,
      // コサイン類似度によりスコアリング
      ...score.scores.map(_score =&gt; _score.scoreDotProduct),
      // ユークリッド距離によりスコアリング
      // （使用するには、コサイン類似度によるスコアリングをコメントアウトし、以下の行をコメントインする）
      // ...score.scores.map(_score =&gt; _score.scoreEuclideanDistance),
    ];
    return wk;
  });
  const header = ['input', ...EMBEDDING_KEYWORDS.split(',')];

  // A1行にデータを出力
  updateSsValues(sheets, `${SHEET_NAME}!A1:Z`, [header, ...scoresFlatten]);
}
</code></pre>
<p>ユークリッド距離を使った算出では、埋め込みベクトル同士の幾何学的な距離（L2ノルム）を文書同士の類似度とみなします。ユークリッド距離を尺度とする場合、数値が0に近いほど元の文書の文意に近いと解釈します。コサイン類似度とは類似度の大小関係が逆になる点に注意してください。また、算出される数値の値域は 0~2 の間となります。</p>
<h2>おわりに</h2>
<p>今回は、KARTE Craft AIモジュールを使ったアンケートデータの高度な分析について紹介しました。大量のテキストデータの中から、感情情報や傾向を効率的に抽出できる強力な機能だと言えるでしょう。</p>
<p>アンケートを活用して顧客理解を深めることは、企業にとって重要な取り組みです。KARTE Craft AIモジュールを活用すれば、そのプロセスを大幅に効率化できます。ぜひ、この機能を活用して、アンケートデータの高度な分析に挑戦してみてください。</p>
<p>より深い顧客洞察が得られることで、製品・サービスの改善にもつながるはずです。KARTE Craft AIモジュールを最大限活用し、顧客理解を深めていきましょう！</p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！ぜひ気軽にお問い合わせください。</p>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
<p>↓ PLAIDで働きたい</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>


自由記述のテキストに含まれる感情の強さを、ベクトル埋め込みにより肯定的/否定的などの感情ごとにスコア化します。

AIがテキストの意味的要素を数値化！KARTE Craft AI Modulesを使ったテキスト分析

Craft FunctionsからGoogle Analytics Data APIを利用し、GA4のファネル分析レポートを作成する方法を紹介します。

Craft FunctionsからGoogle Analytics Data APIを利用し、GA4のファネル分析レポートを作成する方法

<p>こんにちは、Customer EngineerのUGです！最近、肩の筋トレの成果が出てきて喜んでいます！</p>
<p>みなさんはWebページに来訪してくれたユーザーが花粉がたくさん飛んでいるエリアからアクセスして来た時に花粉症対策用の製品のレコメンドしたりしたいと考えたことは有りませんか？そこまでピンポイントなことは考えていなくても、ユーザーアクセスしているエリアの花粉情報を使ってなんか施策が考えられるかもなぁくらいは思ったことがあるのではないでしょうか？今回はGoogle Maps Platformの新機能である<a href="https://developers.google.com/maps/documentation/pollen/overview?hl=ja">Pollen API</a>を使って、Webブラウザ側から取得したユーザーの緯度経度のエリアの花粉情報をKARTEにイベントとして連携してみたいと思います！</p>
<h2>アウトプットイメージ</h2>
<p>最終的なアウトプットイメージは次の通りです。下記の画像のようにユーザーのアクセスしてきたエリアの花粉情報がイベントとしてKARTE側に発生している状態になります。<br>
<img src="https://ik.imagekit.io/plaid/a29eaf2f-7eb2-4862-93b3-97bd3261faf7/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882024-03-1617.21.24.png" alt="スクリーンショット2024-03-1617.21.24.png"></p>
<p>位置情報を利用する前に下記のようなダイアログでエンドユーザーに許諾を取ります。<br>
<img src="https://ik.imagekit.io/plaid/04581ac8-8397-42f7-8acb-15164106335a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882024-02-2615.45.44.png" alt="スクリーンショット2024-02-2615.45.44.png"></p>
<p>構成図は次の通り。<br>
<img src="https://ik.imagekit.io/plaid/c673bc32-7b0c-4787-a57c-f61be62c3f7d/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882024-03-1618.09.55.png" alt="スクリーンショット2024-03-1618.09.55.png"></p>
<p>Webブラウザから緯度経度情報を取得してCraft Functionsに連携します。その情報を下にGoogle Maps PlatformのPollen APIを利用して、花粉情報を取得してKARTEイベントを発生させます。今回のブログでは緯度経度をWebブラウザ側から連携するためにKARTE Actionのスクリプト配信を利用します。スクリプト配信でなくとも今回のCraft Functionsは利用可能です。</p>
<h2>注意点</h2>
<p>前提として、次の点に注意をしてください。</p>
<ul>
<li>CraftのGrowthプラン以上を利用していることを前提としています</li>
<li>KARTE Webのスクリプト配信を利用していることを前提としています
<ul>
<li>スクリプト配信を利用しなくても今回のCraft Functionsは利用可能ですが今回のブログではスクリプト配信を利用することを前提に話していきます</li>
</ul>
</li>
<li>Google Maps Platformの利用を前提としています
<ul>
<li>リクエスト数に応じて<a href="https://developers.google.com/maps/billing/gmp-billing?hl=ja#geocoding">課金が発生する可能性</a>があります</li>
</ul>
</li>
</ul>
<h2>設定手順</h2>
<p>設定の手順は次の通りです。</p>
<ol>
<li>Craft Functionsのファンクションを作成する</li>
<li>Craft Functionsのエンドポイントを作成する</li>
<li>API v2 アプリを作成する</li>
<li>API v2 アプリの アクセストークンを Craft Secret Manager に登録する</li>
<li>Google Cloud PlatformでAPIキーを発行する</li>
<li>KARTE Actionからスクリプト接客を配信する</li>
</ol>
<p>順番に見てみましょう。</p>
<h3>1. Craft Functionsのファンクションを作成する</h3>
<p>Craft Functionsのファンクションを作成します。作成手順は次の通りです。</p>
<p><img src="https://ik.imagekit.io/plaid/f54845aa-6834-475f-ad9d-dfaf4b0ef4c5/create_craft_functions.png" alt="create_craft_functions.png"></p>
<ul>
<li>[Craft &gt; ファンクション &gt; 新規作成 &gt; テンプレートから作成] を選択</li>
<li>「 <strong>ブラウザ側から緯度経度の情報を取得して、Craft functionsからGoogle Maps PlatformのPollen APIを利用して花粉情報を取得してKARTEイベントを発生させる</strong> 」というテンプレートを検索し[取得]ボタンをクリック</li>
<li>[反映] ボタンをクリック</li>
<li>[変数] タブで次の変数の値を設定する
<ul>
<li><code>LOG_LEVEL</code>
<ul>
<li>出力するログのレベルです。ERROR/WARN/INFO/DEBUGから指定してください</li>
</ul>
</li>
<li><code>KARTE_APP_TOKEN_SECRET</code>
<ul>
<li>KARTE API v2アプリのtokenを登録したシークレット名を指定してください</li>
</ul>
</li>
<li><code>GOOGLE_MAPS_APIKEY</code>
<ul>
<li>Google Cloud Platformで発行したAPI Keyを指定してください</li>
</ul>
</li>
<li><code>EVENT_NAME</code>
<ul>
<li>KARTEで発生させるイベント名を指定してください</li>
</ul>
</li>
<li><code>FIELD</code>
<ul>
<li>イベント内で花粉情報を連携する際のフィールド名を指定してください</li>
</ul>
</li>
<li>[設定 &gt; ファンクションの有効化] にチェックを付けて [保存]</li>
</ul>
</li>
</ul>
<p>なお、テンプレートのソースコードはGitHubで公開しています。<br>
<a href="https://github.com/plaidev/craft-codes/tree/main/craft-functions/pollen-api">craft-codes/craft-functions/pollen-api at main · plaidev/craft-codes</a></p>
<h3>2. Craft Functionsのエンドポイントを作成する</h3>
<p>作成したファンクションを外部から実行できるようにするためのエンドポイントを作成します。</p>
<p><img src="https://ik.imagekit.io/plaid/d76f89a5-49ec-425a-909c-729c7469bfa2/create_craft_functions_endpoint.png" alt="create_craft_functions_endpoint.png"></p>
<ul>
<li>作成したファンクションの編集画面から [設定 &gt; エンドポイント &gt; 作成] をクリック</li>
<li>表示されたエンドポイントURLをメモしておく</li>
</ul>
<h3>3. API v2 アプリを作成する</h3>
<p>KARTEのAPIを利用するために、API v2アプリを作成します。<br>
<img src="https://ik.imagekit.io/plaid/a1b20746-4140-441d-8e46-3a5a74dc11ab/create_API_v2_App.png" alt="create_API_v2_App.png"></p>
<ul>
<li>[ストア &gt; API v2設定] からアプリを新規作成</li>
<li>[アプリタイプ] を <code>token</code> に設定</li>
<li>必要なscopeを追加
<ul>
<li><code>track.event.write</code></li>
</ul>
</li>
<li>アプリを保存し、一度だけ表示されるアクセストークンをメモしておく</li>
</ul>
<h3>4. API v2 アプリの アクセストークンを Craft Secret Manager に登録する</h3>
<p>API v2 アプリのアクセストークンをCraft Functionsから安全に利用するために、Craft Secret Manager に登録します。</p>
<p><img src="https://ik.imagekit.io/plaid/6f229ee9-39aa-4e47-be81-f615f3b448f8/create_craft_secret.png" alt="create_craft_secret.png"></p>
<ul>
<li>[Craft &gt; シークレット] からシークレットを新規作成</li>
<li>[名前] に、わかりやすい名前を入力</li>
<li>メモしておいたAPI v2 アプリのアクセストークンを [シークレットの値] に入力し、作成</li>
<li>シークレット名をメモしておく</li>
</ul>
<h3>5. Google Cloud PlatformでAPIキーを発行する</h3>
<p>Google Maps APIを利用するために、GCPにてAPIキーを発行します。<br>
GCPを利用したことがない方に関してはプロジェクトの作成から始めてください。参考までに<a href="https://cloud.google.com/resource-manager/docs/creating-managing-projects?hl=ja">GCPの公式ドキュメントはこちら</a>になります。</p>
<ul>
<li>[APIとサービス &gt; 認証情報 &gt; 認証情報を作成] からAPIキーを作成する</li>
<li>作成したAPIキーが以下のAPIを利用できるか確認してください
<ul>
<li>Pollen API</li>
</ul>
</li>
</ul>
<p>参考までに私が作成した際のコンソールの画面は下記になります。<br>
<img src="https://ik.imagekit.io/plaid/56a350ca-1bcf-477d-b5b0-c455bec7446d/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882024-03-1618.19.29.png" alt="スクリーンショット2024-03-1618.19.29.png"></p>
<h3>6. KARTE Actionからスクリプト接客を配信する</h3>
<p>Webブラウザから緯度経度情報をCraft Functionsに連携するために、KARTE Actionの接客サービスからスクリプト配信します。</p>
<ul>
<li>[KARTE Action &gt; 接客サービス] からスクリプト配信の接客を作成する</li>
<li>緯度経度を取得したいページとタイミングで配信する</li>
</ul>
<p>スクリプトの例として今回のブログの検証では下記のスクリプトを配信しています。参考スクリプトと接客アクションの編集画面は以下になります。<br>
<img src="https://ik.imagekit.io/plaid/935bb34f-1d7a-4e3c-8541-63cfe829619d/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882024-02-2813.59.08.png" alt="スクリーンショット2024-02-2813.59.08.png"></p>
<pre><code>if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(sendPositionToServer, handleError);
} else {
    alert(&quot;Geolocation is not supported by this browser.&quot;);
}

function sendPositionToServer(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;

    var endpoint = &quot;xxx&quot;;  // 送信先のCraft Functionsのエンドポイントを指定

    // HTTP POSTリクエストの設定
    fetch(endpoint, {
        method: &quot;POST&quot;,
        headers: {
            &quot;Content-Type&quot;: &quot;application/json&quot;,
        },
        body: JSON.stringify({
            latitude: latitude,
            longitude: longitude,
            visitor_id: &quot;#{visitor_id}&quot;,
        }),
    })
    .then(function(response) {
        if (!response.ok) {
            throw new Error(&quot;Network response was not ok&quot;);
        }
        return response.json();
    })
    .then(function(data) {
        console.log(&quot;Server response:&quot;, data);
    })
    .catch(function(error) {
        console.error(&quot;Error during fetch operation:&quot;, error);
    });
}

function handleError(error) {
    console.error(&quot;Error getting geolocation:&quot;, error.message);
}

</code></pre>
<p>問題なければ以下のように緯度経度取得のためのダイアログが表示されます。<br>
<img src="https://ik.imagekit.io/plaid/04581ac8-8397-42f7-8acb-15164106335a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882024-02-2615.45.44.png" alt="スクリーンショット2024-02-2615.45.44.png"></p>
<h2>実際に動かしてみる</h2>
<p>実際に動作を確認してみましょう。<br>
まずはスクリプト配信をしているページでユーザーが訪問したら以下のようなダイアログが表示されます。<br>
<img src="https://ik.imagekit.io/plaid/04581ac8-8397-42f7-8acb-15164106335a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882024-02-2615.45.44.png" alt="スクリーンショット2024-02-2615.45.44.png"></p>
<p>Craft Functions側でエラーが発生しなければ下記のようなイベントが発生するはずです。<br>
<img src="https://ik.imagekit.io/plaid/a29eaf2f-7eb2-4862-93b3-97bd3261faf7/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882024-03-1617.21.24.png" alt="スクリーンショット2024-03-1617.21.24.png"></p>
<h2>おわりに</h2>
<p>今回はWebブラウザ側から取得したユーザーの緯度経度のエリアの花粉情報をCraft Functions × Google Maps PlatformのPollen APIで取得してKARTEのに連携してみました。</p>
<p>これによりユーザーが花粉の多い地域からアクセスしてきた場合に花粉対策商品をレコメンドするといったような事が可能になります！これからのシーズン花粉症で苦しむ方も多いと思いますので是非活用してみてください！</p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！ぜひ気軽にお問い合わせください。</p>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
<p>↓ PLAIDで働きたい</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>


KARTE Webのスクリプト配信機能を利用してブラウザ側から緯度経度の情報をCraft functionsに連携して、その情報を元にGoogle Maps PlatformのPollen APIを利用して花粉情報を取得してKARTEイベントを発生させるSolution

「緯度経度」からCraft Functions × Google Maps PlatformのPollen APIで「花粉情報」を取得してKARTEに連携する

Craft FunctionsからGoogle Analytics Data APIを利用し、GA4のユーザーセグメント分析レポートを作成する方法の紹介です。Google Analytics Data APIを使うと、GA4のデータ分析を簡単に行うことができ、今回はユーザーセグメント分析の方法をご紹介します。

Craft FunctionsからGoogle Analytics Data APIを利用し、GA4のユーザーセグメント分析レポートを作成する方法

<p>こんにちは、Customer Engineerの島本です！</p>
<p>先日友達と築地にあるトーセイホテル ココネ築地銀座プレミアに行ってきました！サウナよりも湯船に浸かっている時にどこからか吹いてくる冷風が気持ちよかったです。<br>
<img src="https://ik.imagekit.io/plaid/9cdd01c2-38c0-4f90-ba2a-ae3fadb22528/IMG_1719.jpg" alt="IMG_1719.jpg"></p>
<p>さて、Craft Functionsを使用すると、社内外のさまざまなシステムから情報を取得し、KARTEとの連携をスムーズに行うことができます。ただし、1 実行あたりの起動時間の上限が 10 秒という制約や、KARTE のサーバーサイドAPIのリクエスト制限があるため、複数件レコードを一括で連携するには設計上で工夫が必要でした。</p>
<p>しかし、Craft Functionsを使用してGoogle Cloud Storage にファイル保存することで、複数件レコードを一括で連携することができます！</p>
<h2>構成図</h2>
<p>構成図は次の通り。<br>
<img src="https://ik.imagekit.io/plaid/14fa7717-737d-4ff0-b5ab-ad5dcb5b35aa/blog%E7%94%A8.png" alt="blog用.png"></p>
<p>また、そもそも保存先のGCS の用意ができないという方もいると思いますが、<a href="https://developers.karte.io/docs/about-datahub">KARTE Datahub</a> をご利用頂いている場合は、KARTE からGCS バケットを払い出すことができます！<br>
今回はKARTE が払い出したGCS バケットを利用する方法で紹介します。</p>
<h2>注意点</h2>
<p>取得するデータサイズが大きくなると、APIからデータを取得する時間およびGCS への書き込み時間が伸びて、Craft Functions の実行時間制限を超過する可能性があります。</p>
<p>また、取得したデータがメモリサイズを超過することにより、Craft Functions が異常終了する可能性もあります。実際に処理できるデータ量を検証の上で本ソリューションの利用を検討してください。</p>
<h2>設定手順</h2>
<p>設定の手順は次の通りです。</p>
<ol>
<li>KARTE が払い出したGCS バケットへの権限付与を有効化する</li>
<li>Googleサービスアカウントを払い出す</li>
<li>サービスアカウントに対象バケットへの権限を付与する</li>
<li>サービスアカウントのJSONキーファイルの中身を Craft Secret Manager に登録する</li>
<li>Craft Functions でそのサービスアカウントを使ってファイルを保存する</li>
</ol>
<p>順番に見てみましょう。</p>
<h3>1. KARTE が払い出したGCS バケットへの権限付与を有効化する</h3>
<p>まず、KARTE Datahub の管理画面からGCS バケットへの権限付与を有効化します。</p>
<ul>
<li>グローバルナビゲーションの[データハブ設定]を開く</li>
<li>[サービスアカウント管理]のタブを開く</li>
<li>[GCSバケットへの権限付与済みGoogleサービスアカウント]の部分で、[権限付与]ボタンが表示されているか確認</li>
</ul>
<p><img src="https://ik.imagekit.io/plaid/895df45f-3a23-4868-a17c-4f42a9813625/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882024-04-0123.19.18.png" alt="スクリーンショット2024-04-0123.19.18.png"></p>
<p>有効化されていない場合は、営業担当にお問い合わせください。</p>
<h3>2. Googleサービスアカウントを作成する</h3>
<p>払い出しGCS バケットへの権限付与をするGoogleサービスアカウントを払い出します。</p>
<ul>
<li>[Datahub設定] &gt; [サービスアカウント管理]タブを開く</li>
<li>[払い出しGoogleサービスアカウント]の[Googleサービスアカウント作成]ボタンを押す</li>
<li>ダウンロードするkeyFileのキータイプを次の選択肢から選ぶ
<ul>
<li>JSON(推奨)</li>
<li>P12</li>
</ul>
</li>
<li>認証用のkeyFileが自動でダウンロードされる
<ul>
<li><strong>一度しかダウンロードできないため、大切に保管してください</strong></li>
</ul>
</li>
</ul>
<p><img src="https://ik.imagekit.io/plaid/836ee1fa-2e98-4aa6-ad9e-6fdc698db791/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882024-04-0123.23.35.png" alt="スクリーンショット2024-04-0123.23.35.png"></p>
<p>ダウンロードしたkeyFileは、後の手順で利用します。</p>
<h3>3. サービスアカウントに対象バケットへの権限を付与する</h3>
<p>払い出したサービスアカウントに対して権限を付与します。</p>
<ul>
<li>[GCSバケットへの権限付与済みGoogleサービスアカウント]の領域で、[権限付与]ボタンを押す</li>
<li>プルダウンから、先ほど払い出したサービスアカウントを選択する</li>
</ul>
<p><img src="https://ik.imagekit.io/plaid/fe23e8b4-3690-474d-8689-59656e6a2343/%E3%83%86%E3%82%99%E3%83%BC%E3%82%BF%E3%83%8F%E3%83%95%E3%82%99%E8%A8%AD%E5%AE%9A_-_%E7%A4%BE%E5%86%85%E6%A4%9C%E8%A8%BC%E7%94%A8_kasumi_shimamoto_-_KARTE.png" alt="データハブ設定_-社内検証用_kasumi_shimamoto-_KARTE.png"></p>
<h3>4. サービスアカウントのJSONキーファイルの中身を Craft Secret Manager に登録する</h3>
<p>Googleサービスアカウントの認証情報をCraft Functions から安全に利用するために、Craft Secret Manager に登録します。</p>
<p><img src="https://ik.imagekit.io/plaid/1cb0539c-a074-47aa-b2f4-569647617236/create_service_account_secret.png" alt="create_service_account_secret.png"></p>
<ul>
<li>[Craft &gt; シークレット] からシークレットを新規作成</li>
<li>[名前] に、わかりやすい名前を入力</li>
<li>ダウンロードしたJSONキーファイルの中身を [シークレットの値] にそのまま入力し、作成</li>
<li>シークレット名をメモしておく</li>
</ul>
<h3>5. Craft Functions でそのサービスアカウントを使ってファイルを保存する</h3>
<p>最後に、実際にCraft Functionsから外部APIを叩いて、GCS バケットに保存してみます。<br>
今回は情報を取得するAPIとして、<a href="https://jsonplaceholder.typicode.com/">JSONPlaceholder</a> を利用します。</p>
<p>作成手順は次の通りです。<br>
<img src="https://ik.imagekit.io/plaid/f54845aa-6834-475f-ad9d-dfaf4b0ef4c5/create_craft_functions.png" alt="create_craft_functions.png"></p>
<ul>
<li>[Craft &gt; ファンクション &gt; 新規作成 &gt; テンプレートから作成] を選択</li>
<li>「 <strong>外部APIから取得したデータをGoogle Cloud Storageにファイル保存する</strong> 」というテンプレートを検索し[取得]ボタンをクリック</li>
<li>[反映] ボタンをクリック</li>
<li>[変数] タブで次の変数の値を設定する
<ul>
<li><code>LOG_LEVEL</code>
<ul>
<li>出力するログのレベルです</li>
</ul>
</li>
<li><code>SERVICE_ACCOUNT_KEY_SECRET</code>
<ul>
<li>先ほど作成したシークレットの名前を指定します</li>
</ul>
</li>
<li><code>API_ENDPOINT</code>
<ul>
<li>データ取得元である外部サービスのAPIエンドポイントです</li>
<li>例：https://jsonplaceholder.typicode.com/posts</li>
</ul>
</li>
<li><code>BUCKET_NAME</code>
<ul>
<li>保存する先のGCS のバケット名です</li>
<li>例：karte-data-{{api_key}}
<ul>
<li>{{api_key}}の部分は、実際のapi_keyに置き換えてください</li>
</ul>
</li>
</ul>
</li>
<li><code>FILE_PATH</code>
<ul>
<li>保存するファイルのパスです</li>
<li>例：test/demo_data.json</li>
</ul>
</li>
</ul>
</li>
<li>[保存] する</li>
<li>デプロイ完了後、[設定 &gt; ファンクションの有効化] にチェックを付ける</li>
</ul>
<p>なお、サンプルコードは、下記URLで公開しています。<br>
<a href="https://github.com/plaidev/craft-codes/tree/main/craft-functions/fetch-external-api-and-save-file-to-gcs">craft-codes/craft-functions/fetch-external-api-and-save-file-to-gcs at main · plaidev/craft-codes</a></p>
<p>以下、重要な点をかいつまんで説明します。</p>
<p>サンプルコードでは、GCS バケット上のファイルをKARTE Datahub に連携したいケースを想定して、Datahub で取り込み可能な改行区切りのJSON データに加工しています。</p>
<p>実際に利用する際には、APIのレスポンスデータ形式に合わせて変更してください。</p>
<pre><code>function formatDataToJSONLines(responseData) {
  return responseData.map(obj =&gt; JSON.stringify(obj)).join('\n');
}
</code></pre>
<p>下記関数でバケット名、ファイルのパスを指定してGCS バケットにファイルをアップロードしています。</p>
<pre><code>async function uploadDataToStorage(bucketName, filePath, jsonLinesData, jsonKey, logger) {
  const storage = new Storage({ credentials: jsonKey });
  const bucket = storage.bucket(bucketName);

  const blob = bucket.file(filePath);
  const stream = blob.createWriteStream({
    metadata: {
      contentType: 'application/json',
    },
  });

  return new Promise((resolve, reject) =&gt; {
    stream.on('error', err =&gt; {
      logger.error('Upload Error:', err);
      reject(err);
    });

    stream.on('finish', () =&gt; {
      logger.log(`Uploaded: ${filePath}`);
      resolve();
    });

    stream.end(jsonLinesData);
  });
}
</code></pre>
<p>とても簡単ですね！</p>
<p>最後に定期的にAPI からデータを取得するために、Craft Scheduler の設定をします。</p>
<p><img src="https://ik.imagekit.io/plaid/1a603aa3-3952-4232-ba1a-b4575047dedd/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882024-02-1318.25.41.png" alt="スクリーンショット2024-02-1318.25.41.png"></p>
<ul>
<li>Craft Functionsの<code>設定タブ</code>を開きます</li>
<li>スケジュールを有効化し、cron形式（JST）で実行時間を指定します</li>
</ul>
<p>設定は以上になります。</p>
<h2>実際に動かしてみる</h2>
<p>実際に動作を確認してみましょう！</p>
<p>前述のサンプルコードに必要な定数を入力した内容でCraft Functionsを作成し、実際に実行してみます。</p>
<p><img src="https://ik.imagekit.io/plaid/3fabf6ee-50c0-4ab5-a195-5ad77a389c16/%E3%83%86%E3%82%99%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%95%E3%82%9A_%E2%80%94_-zsh_%E2%80%94_173%C3%9746.png" alt="デスクトップ_—-zsh—_173×46.png"></p>
<p>gsutilを使ってGCS バケット上に保存されていることを確認できました！</p>
<p><img src="https://ik.imagekit.io/plaid/b19f0ee2-7122-409a-aa43-ef9e617ca054/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882024-03-2610.03.39.png" alt="スクリーンショット2024-03-2610.03.39.png"><br>
また、ファイルの中身も改行区切りのJSON データで保存されていることが確認できます。<br>
これで問題なくKARTE Datahub に連携できますね！</p>
<h2>おわりに</h2>
<p>今回は外部APIから取得したデータをGoogle Cloud Storageにファイル保存する方法について紹介しました。</p>
<p>このソリューションを活用すれば、社内外のさまざまなシステムから情報を取得してKARTE Datahub に連携することができるため、できることの幅が広がりますね！ぜひ皆さんも試してみてください！</p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！ぜひ気軽にお問い合わせください。</p>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
<p>↓ PLAIDで働きたい</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>


外部APIから取得したデータを改行区切りのJSON形式に整形し、Google Cloud Storageにファイル保存します。

外部APIから取得したデータをGoogle Cloud Storageにファイル保存する

<p>こんにちは。AkiことAkihiro Nakanoです。</p>
<p>さて、皆さん。<br>
<a href="https://solution.plaid.co.jp/202305-karte-recommend">以前の記事</a>でも「KARTEで実装するレコメンド」の紹介があったので、おそらく、</p>
<p>” 私もKARTEでレコメンド機能を実装したい！”</p>
<p>と思った方も沢山いらっしゃるかと思います。<br>
実際にクライアントの皆様から、”レコメンドを実装したい！”といったお問い合わせを沢山頂いているのですが、実際に実装を行う上で最初の入り口・障壁となるのは何でしょうか。</p>
<p>そう、 <strong>「商品マスタ」</strong> です。よね。</p>
<p>とてもざっくり前提を説明すると、レコメンド機能は、「KARTEで取得した行動データ」＋「商品マスタ」、この2つをインプットデータとして動きます。</p>
<p>私も、皆さんから相談を受けたはいいものの、実際には</p>
<p><strong>”商品マスタ。。ごめんなさいすぐ用意出来ないです。。”<br>
”商品マスタ、膨大な量あるんですよ。。”<br>
”膨大な量の商品マスタが定期的に入れ替わるから、その都度運用者が更新するのが面倒臭いし、ミスの元になりそうです。。”</strong></p>
<p>と言った声も頂きます。</p>
<p>そういった声を踏まえて、この度発明したのが</p>
<p><strong>「え。商品マスタを連携するのが難しければ、KARTEを使って自動で作っちゃおうぜ！！」</strong></p>
<p>というアバンギャルドなソリューションです。<br>
今回の記事では、この商品マスタ生成ソリューションについてご紹介していきます。</p>
<h1>そもそもレコメンドとは？</h1>
<p>KARTEで実装するレコメンドについての詳細は、<a href="https://solution.plaid.co.jp/202305-karte-recommend">以前の記事</a>でもご紹介しておりますが、<br>
サマリーを述べると、下記の通りです。</p>
<ul>
<li>KARTEで実現する標準的なレコメンドは、A【「ユーザー」と「アイテム」の紐付け】、B【その「アイテム」と「関連アイテム」の紐付け】を行う。</li>
<li>これを実現するためには、view_item（商品閲覧）イベントなどの行動データ、アイテムのマスタデータが必要。<br>
<img src="https://ik.imagekit.io/plaid/d39c29f8-cfa6-4ae4-8509-112b0aa3b77f/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-04-2811.44.51.webp" alt="スクリーンショット2023-04-2811.44.51.webp"></li>
</ul>
<h1>レコメンドの実装手順をおさらい</h1>
<p>上に続いて、レコメンドの実装手順もおさらいしておきましょう。<br>
下に図示してみます。<br>
<img src="https://ik.imagekit.io/plaid/ccf54e1c-1e50-41b5-b50e-837de4fb470d/image(41).png" alt="image(41).png"></p>
<p>こんな形でしたね。<br>
「view_itemイベントの実装」と、「商品マスタの連携」が必要でした。実装の詳細は<a href="https://solution.plaid.co.jp/202305-karte-recommend">こちらの記事</a>に記載しておりますので、併せてご覧ください。</p>
<p>今回は、、、↓<br>
<img src="https://ik.imagekit.io/plaid/2e2124d2-e63d-488b-bbba-3c2ca45ada6e/image(42).png" alt="image(42).png"><br>
こちらの右側の「商品マスタを連携する」部分をKARTEで実装していきます。</p>
<h1>実際に商品マスタをKARTEで生成する！</h1>
<p>お待たせしました。では実際に実装していきましょう！！</p>
<h3>◉全体像</h3>
<p>最初に、今回の実装の全体像を公開してしまいます。↓<br>
<img src="https://ik.imagekit.io/plaid/649a02b9-4fff-4553-9239-daec01aef4da/image(52).png" alt="image(52).png"></p>
<p>このような形です。<br>
まだ何を言っているか分からないですよね。<br>
アイテムの紐付けにも用いるview_itemイベントを使用して、商品マスタを生成していきます。<br>
その上で必要なものは、下記の2つです。</p>
<ul>
<li>item_masterというテーブルと、</li>
<li>それを更新するジョブフロー</li>
</ul>
<p>順を追って見ていきましょう！！</p>
<h3>◉前提</h3>
<p>前提として、今回view_itemイベントで取得しているデータは下記のような形です。こちらを元に商品マスタを生成していきます。<br>
<img src="https://ik.imagekit.io/plaid/b47cab83-8f21-4559-8c3d-e926c3cd03fe/image(53).png" alt="image(53).png"></p>
<h3>◉商品データを入れる空のテーブルを作成する</h3>
<p>まずは、item_masterという空のテーブルを用意しましょう。</p>
<p>任意のデータセットを作成し、その中にitem_masterというテーブルを作成します。</p>
<p><img src="https://ik.imagekit.io/plaid/ed95371f-aa65-415c-b7fd-8adf6ebbe02f/image(54).png" alt="image(54).png"></p>
<p>item_masterテーブルは、この後のパートで作成するジョブフロー内で参照するため、スキーマを先に指定しておきます。<br>
テーブル作成時に、スキーマを指定して作成にチェックを入れ、<code>スキーマ（テキスト）</code>に下記の値を入力します。</p>
<pre><code>item_id:STRING,name:STRING,price:INTEGER,display_price:STRING,image:STRING,url:STRING,l_category_cd:STRING,l_category_name:STRING,brand_cd:INTEGER,updated_at:TIMESTAMP
</code></pre>
<p>このテーブルに対してジョブフローを作成し、「view_itemイベントを元に商品マスタを作成・更新」する処理を行います。</p>
<h3>◉ジョブフローを作成する</h3>
<p>上記で作成したテーブルに、view_itemイベントを元に取得した商品データを追加していきましょう！</p>
<p>具体的に実装する処理は、以下の2つです。</p>
<ul>
<li>最新の商品名、値段等を定期的に抽出する</li>
<li>前回更新したitem_masterとの差分を定期的に更新する</li>
</ul>
<p>まず、前者を図示すると、下記のイメージです。</p>
<p><img src="https://ik.imagekit.io/plaid/df0f3930-1c3d-4e62-af5a-9132ea583b36/image(44).png" alt="image(44).png"></p>
<p>エンドユーザが閲覧した商品詳細ページから、商品idや商品名、商品画像等をview_itemイベントにより連携し、item_id毎に<strong>最新の情報を定期的に</strong>抽出することで、テーブルを生成します（ここでは、テーブル名をitem_master_tempとしています）。</p>
<p>その処理をクエリで書くと、下記のような形になります。</p>
<pre><code class="language-sql">-- item_master_tempテーブルを作成するクエリ
WITH raw AS (
SELECT
  JSON_VALUE(values, '$.view_item.item_id') AS item_id
  , ROW_NUMBER() OVER (PARTITION BY JSON_VALUE(values, '$.view_item.item_id') ORDER BY sync_date DESC) AS order_num
  , JSON_VALUE(values, '$.view_item.name') AS name
  , JSON_VALUE(values, '$.view_item.price') AS price
  -- , FORMAT(&quot;%'d&quot;,JSON_VALUE(values, '$.view_item.price'))AS display_price
  , JSON_VALUE(values, '$.view_item.item_image_url') AS image
  , JSON_VALUE(values, '$.view_item.item_url') AS url
  , JSON_VALUE(values, '$.view_item.l_category_cd') AS l_category_cd
  , JSON_VALUE(values, '$.view_item.l_category_name') AS l_category_name
  , JSON_VALUE(values, '$.view_item.brand_cd') AS brand_cd
FROM
  {% karte_event period[0], period[1] %}  -- Periodパラメータをパラメータ定義で設定
WHERE
  event_name = 'view_item'
)

SELECT
item_id
, name
, CAST(price AS INT64) AS price
, CONCAT(FORMAT(&quot;%'d&quot;, CAST(price AS INT64)), '円（税込）') AS display_price
, image
, url
, l_category_cd
, l_category_name
, CAST(brand_cd AS INT64) AS brand_cd
FROM raw
WHERE order_num = 1
</code></pre>
<pre><code class="language-YAML">-- パラメータ部分
period:
  type: period
  label: 期間型パラメータ
  value: past 1 day
</code></pre>
<p>view_itemイベントを抽出する期間は、パラメータで指定出来る様にしています。<br>
今回は、UU数が十分に多い（つまり、毎日商品詳細ページが十分量閲覧されている）と仮定して、消費するクエリリソースの観点から、抽出期間を1日と設定しました。<br>
UU数が少ない場合は、出来るだけ多くの商品が抽出出来る様に、抽出期間を長くする等の調整が必要となります。</p>
<hr>
<p>上記で作成したテーブル（item_master_temp）自体も商品マスタとして使用することは可能なのですが、一つ困りごとがあります。<br>
それは、「<strong>特定の期間でのみ閲覧（view_item）された商品しかマスタとして使用できない</strong>」ということです。<br>
先ほどのクエリでview_itemイベントを抽出する期間を1日としていると、その期間外でも商品はサイト上に存在しているが、期間内に閲覧されていない商品は商品マスタから除外されてしまいます。</p>
<p>そこで、2つ目のテーブル（最終的な商品マスタ）を作成し、「前回更新した商品マスタとの差分を定期的に更新する」という処理を実装します。これで商品マスタが完成です！</p>
<p>下記はそのイメージです。古い商品マスタの中で、既存の002というアイテムに変更が生じ、新規の004というアイテムが追加されています。<br>
<img src="https://ik.imagekit.io/plaid/a2f779ac-faa2-4edf-9938-284a97bc0ddb/image(45).png" alt="image(45).png"></p>
<p>その処理をクエリで書くと、下記の通りです。</p>
<pre><code class="language-sql">WITH current_master AS ( -- 既存マスタデータ
  SELECT
    item_id -- 以下、実際のカラム名を指定
    , ANY_VALUE(name) AS name -- 以下、万が一重複レコードが混入したケースを考慮
    , ANY_VALUE(price) AS price
    , ANY_VALUE(display_price) AS display_price
    , ANY_VALUE(image) AS image
    , ANY_VALUE(url) AS url
    , ANY_VALUE(l_category_cd) AS l_category_cd
    , ANY_VALUE(l_category_name) AS l_category_name
    , ANY_VALUE(brand_cd) AS brand_cd
    , ANY_VALUE(updated_at) AS updated_at
  FROM `prd-karte-per-client.aaa_xxxxxxxxxx.item_master` -- 実際のマスタテーブル名を指定してください
  WHERE NOT item_id IS NULL
  GROUP BY item_id
)
, new_data AS ( -- 変更対象のレコード
  SELECT
    item_id -- 以下、実際のカラム名を指定
    , name
    , price
    , display_price
    , image
    , url
    , l_category_cd
    , l_category_name
    , brand_cd
    , CURRENT_TIMESTAMP() AS updated_at
  FROM item_master_temp -- 実際の一時テーブル名を指定してください
  WHERE NOT item_id IS NULL
)
, non_updated_master AS ( -- 変更対象ではない既存マスタデータのレコード
  SELECT
    a.item_id -- 以下、実際のカラム名を指定
    , a.name
    , a.price
    , a.display_price
    , a.image
    , a.url
    , a.l_category_cd
    , a.l_category_name
    , a.brand_cd
    , a.updated_at
  FROM current_master AS a
  LEFT OUTER JOIN new_data AS b
  ON a.item_id = b.item_id
  WHERE b.item_id IS NULL
)

SELECT * FROM non_updated_master
UNION DISTINCT
SELECT * FROM new_data
</code></pre>
<p>↑<br>
上記2つのクエリを1つのクエリにして、ジョブフローとして定期的に実行していきます！</p>
<p>では、一緒に作っていきましょう！</p>
<p>Datahub ＞ クエリからクエリを作成し、任意の名前で保存します。ここでは、<code>item_master_query</code>としました。</p>
<p><img src="https://ik.imagekit.io/plaid/f2700337-0539-4640-95f1-6e405a7aa19e/image(55).png" alt="image(55).png"></p>
<p>ここで記載したクエリは、下記の通りです。</p>
<pre><code class="language-sql">WITH raw AS (
  SELECT
    JSON_VALUE(values, '$.view_item.item_id') AS item_id
    , ROW_NUMBER() OVER (PARTITION BY JSON_VALUE(values, '$.view_item.item_id') ORDER BY sync_date DESC) AS order_num
    , JSON_VALUE(values, '$.view_item.name') AS name
    , JSON_VALUE(values, '$.view_item.price') AS price
    -- , FORMAT(&quot;%'d&quot;,JSON_VALUE(values, '$.view_item.price'))AS display_price
    , JSON_VALUE(values, '$.view_item.item_image_url') AS image
    , JSON_VALUE(values, '$.view_item.item_url') AS url
    , JSON_VALUE(values, '$.view_item.l_category_cd') AS l_category_cd
    , JSON_VALUE(values, '$.view_item.l_category_name') AS l_category_name
    , JSON_VALUE(values, '$.view_item.brand_cd') AS brand_cd
  FROM
    {% karte_event period[0], period[1] %}  -- Periodパラメータをパラメータ定義で設定
  WHERE
    event_name = 'view_item'
)

, item_master_temp AS(
  SELECT
    item_id
    , name
    , CAST(price AS INT64) AS price
    , CONCAT(FORMAT(&quot;%'d&quot;, CAST(price AS INT64)), '円（税込）') AS display_price
    , image
    , url
    , l_category_cd
    , l_category_name
    , CAST(brand_cd AS INT64) AS brand_cd
  FROM raw
  WHERE order_num = 1
)

, current_master AS ( -- 既存マスタデータ
  SELECT
    item_id -- 以下、実際のカラム名を指定
    , ANY_VALUE(name) AS name -- 以下、万が一重複レコードが混入したケースを考慮
    , ANY_VALUE(price) AS price
    , ANY_VALUE(display_price) AS display_price
    , ANY_VALUE(image) AS image
    , ANY_VALUE(url) AS url
    , ANY_VALUE(l_category_cd) AS l_category_cd
    , ANY_VALUE(l_category_name) AS l_category_name
    , ANY_VALUE(brand_cd) AS brand_cd
    , ANY_VALUE(updated_at) AS updated_at
  FROM `prd-karte-per-client.aaa_xxxxxxxxxx.item_master` -- 実際のマスタテーブル名を指定してください
  WHERE NOT item_id IS NULL
  GROUP BY item_id
)
, new_data AS ( -- 変更対象のレコード
  SELECT
    item_id -- 以下、実際のカラム名を指定
    , name
    , price
    , display_price
    , image
    , url
    , l_category_cd
    , l_category_name
    , brand_cd
    , CURRENT_TIMESTAMP() AS updated_at
  FROM item_master_temp -- 実際の一時テーブル名を指定してください
  WHERE NOT item_id IS NULL
)
, non_updated_master AS ( -- 変更対象ではない既存マスタデータのレコード
  SELECT
    a.item_id -- 以下、実際のカラム名を指定
    , a.name
    , a.price
    , a.display_price
    , a.image
    , a.url
    , a.l_category_cd
    , a.l_category_name
    , a.brand_cd
    , a.updated_at
  FROM current_master AS a
  LEFT OUTER JOIN new_data AS b
  ON a.item_id = b.item_id
  WHERE b.item_id IS NULL
)

SELECT * FROM non_updated_master
UNION DISTINCT
SELECT * FROM new_data
</code></pre>
<pre><code class="language-YAML">-- パラメータ部分
period:
  type: period
  label: 期間型パラメータ
  value: past 1 day
</code></pre>
<p>その後、Datahub ＞ ジョブフローから、下記画像のようにジョブフローを作成します。インポート先のテーブルは先ほど作成したitem_masterを指定し、ルールは「置き換え」るように実行を行います。</p>
<p><img src="https://ik.imagekit.io/plaid/75026f70-bff9-4013-968e-2ca0dfcacb7c/image(58).png" alt="image(58).png"></p>
<p>オプションから、「スケジュール実行」「繰り返し実行」を有効にします。今回は、商品マスタが1日おきに入れ替わることを想定して、「<strong>毎日0時に実行する</strong>」という設定にしています。サイトに表示する商品の入れ替わる頻度によって、この期間を長くするなどの調整が必要となります。</p>
<p><img src="https://ik.imagekit.io/plaid/c1a04745-78c3-431b-9aa2-56a2977e2c11/image(59).png" alt="image(59).png"></p>
<p>「今すぐ実行」を押下し、少し経ってitem_masterテーブルにデータがインポートされていれば、商品マスタの作成は成功です（右側に、<strong>そのアイテムデータをアップデートした日時</strong>が記載されています）！<br>
その後はこの商品マスタを使って、<a href="https://solution.plaid.co.jp/202305-karte-recommend">こちらの記事</a>を参考にレコメンドが実装できます！！</p>
<p><img src="https://ik.imagekit.io/plaid/900b21a6-49a5-40e6-8aac-c0a358f602a8/image(57).png" alt="image(57).png"></p>
<h1>まとめ</h1>
<p>いかがだったでしょうか？<br>
まさか、KARTEで商品マスタまで作成できると思っていましたでしょうか。<br>
このソリューションの面白い点は「KARTEで錬金術のように商品マスタが作れた！」という点だけではなく、<strong>サイトの商品ページ上にお客様が来訪してさえいれば「半永久的、かつ自動的に商品マスタが更新されていく」点</strong>なのです。<br>
ぜひ、皆さんも試してみてくださいね👍</p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！<br>
ぜひ気軽にお問い合わせください。</p>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem<br>
</a></li>
</ul>
<p>↓ PLAIDで働きたい</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>


レコメンド施策で必要な、商品マスタをKARTEのview_itemイベントから自動生成する方法についてまとめました。

簡易商品マスタをKARTEのイベントから自動生成する

<p>こんにちは、PLAIDでCustomer EngineerをしておりますUGと申します。</p>
<p>最近はきゅうりの漬物にハマっており、毎日つけてはポリポリ食べております。</p>
<p>（Customer Engineerがどんな職種か気になった方は、ぜひ<a href="https://blog.plaid.co.jp/n/n6d87538d003f">こちら</a>をご一読ください。）</p>
<h1>概要</h1>
<p>本日はKARTEからS3バケットに対して、ジョブフローを用いてデータ連携する際にAssume Role With WebIdentityを使用して、AWS側で作成したIAM RoleにAssume RoleしてS3バケットにアクセスする方法に関して紹介していきます。</p>
<p>これによりシークレットアクセスキーを使用せず、S3を介したDatahubへのデータ連携が可能になります。<br>
シークレットアクセスキーの使用を避けることで、アクセスキーの流出リスク等々を解消できるため、よりセキュアに便利にアクセスすることができます。</p>
<p>（今回紹介する連携方法はKARTE側から払い出したS3ではご利用頂けませんのでご了承ください。）</p>
<h1>構成図</h1>
<p>今回の構成図は下記の通りです。<br>
<img src="https://ik.imagekit.io/plaid/be061bf6-63ca-4061-b219-651a0c8829e6/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-2114.33.59.png" alt="スクリーンショット2023-08-2114.33.59.png"></p>
<p>シークレットアクセスキーで認証して、KARTE側からS3側にデータ連携をする際の構成図と変わりはほとんどありませんが、S3バケットにアクセスする際のアクセス方法にAssume Roleを使用することだけ違います。</p>
<h1>手順</h1>
<p>今回のSolution Blogのハンズオンの手順は下記の通りです。</p>
<p>（本ハンズオンは検証で使用できるAWSアカウントを開設していることを前提にしています。）</p>
<ol>
<li>検証用のAWS環境に接続用のS3バケットを作成</li>
<li>検証用のAWS環境に新規のIAM Roleを作成</li>
<li>1で作成したIAM Roleを使用して、S3バケットに接続するためのDatahub側の設定を行う</li>
<li>DatahubからサンプルのファイルをS3バケットに対して連携する</li>
</ol>
<p>既にご自身のAWS環境に検証用のS3バケットがある場合は、手順の1を読み飛ばして頂けますと幸いです。</p>
<h1>AWS側でS3バケットを作成</h1>
<p>※既に検証用のS3バケットが用意されている場合はこちらの章は読み飛ばしてください。</p>
<p>ご自身のAWSマネージメントコンソールにログインしてください。</p>
<p>その際にS3バケットを新規に作成できるロールであることを確認してください。</p>
<p>ログインが完了したら、Home画面上部の検索バーからS3と検索してS3の設定画面に遷移してください。その後、S3の設定画面から「バケットを作成」をクリックしてください。<br>
<img src="https://ik.imagekit.io/plaid/f653f0ac-76ee-4fc6-a7ff-ac2347e03092/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-2115.03.24.png" alt="スクリーンショット2023-08-2115.03.24.png"></p>
<p>バケットの新規作成画面に遷移したら、下記の画像を参考にS3バケットを新規に作成してください。</p>
<p>バケット名、リージョン、タグ等の詳細な設定はご自身の環境に合わせて、適宜変えてください。<br>
<img src="https://ik.imagekit.io/plaid/8fd54b8a-d428-4afe-ba9b-969299347031/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-2114.58.56(1).png" alt="スクリーンショット2023-08-2114.58.56(1).png"><br>
<img src="https://ik.imagekit.io/plaid/2a6a34d9-1aee-4aa1-81ab-640ab323b0d9/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-2114.59.09.png" alt="スクリーンショット2023-08-2114.59.09.png"><br>
<img src="https://ik.imagekit.io/plaid/c624d46b-ec98-4e34-bf6a-ba0e66cd552f/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-2114.59.29.png" alt="スクリーンショット2023-08-2114.59.29.png"></p>
<p>設定が完了したら、最後に「バケットを作成」をクリックして、設定したバケットが作成されているかを確認してください。</p>
<h1>AWS側でIAM Roleを作成</h1>
<p>ご自身のAWSマネージメントコンソールにログインしてください。</p>
<p>その際にIAM Roleを新規に作成できるロールであることを確認してください。</p>
<p>ログインが完了したら、Home画面上部の検索バーからIAMと検索してIAMの設定画面に遷移してください。その後、左側のナビゲーションバーからロールを選択して、「ロールの作成」をクリックしてください。</p>
<p><img src="https://ik.imagekit.io/plaid/b792cca5-d942-4426-8fc1-626e6d31dc58/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-2116.22.58.png" alt="スクリーンショット2023-08-2116.22.58.png"></p>
<p>ロールの新規作成画面に遷移したら、<a href="https://developers.karte.io/docs/s3#aws%E5%81%B4%E3%81%AE%E8%A8%AD%E5%AE%9A">IAM Role作成のドキュメント</a>を参考にIAM Roleを作成してください。</p>
<p>作成したら、IAM RoleのARNのコピーしておいてください。後続の設定で使用します。</p>
<h1>作成したIAM Roleを使用して、S3バケットに接続するためのDatahub側の設定を行う</h1>
<p>ここから、作成したIAM Roleを使用して、S3バケットにアクセスするために必要なDatahub側の設定をしていきます。設定方法に関してはこちらのサポートサイトは<a href="https://developers.karte.io/docs/amazon-s3#datahub%E3%82%B8%E3%83%A7%E3%83%96%E8%A8%AD%E5%AE%9A">こちら</a></p>
<p>ジョブフローの設定画面から「接続先の作成・管理」をクリックしてください。<br>
<img src="https://ik.imagekit.io/plaid/3212d666-6ee7-4850-a3a3-0dcdb16dc7c5/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-2116.54.53.png" alt="スクリーンショット2023-08-2116.54.53.png"></p>
<p>作成＞Amazon S3を選択してください。<br>
<img src="https://ik.imagekit.io/plaid/4d6bffa7-600a-46dd-9ea4-0910232f73eb/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-2117.03.46.png" alt="スクリーンショット2023-08-2117.03.46.png"></p>
<p>先ほど作成したIAM RoleのARNをロールARNの欄にペーストしてください。<br>
<img src="https://ik.imagekit.io/plaid/7267af08-b7b5-49ed-a37d-9d1a1a433e3f/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-2811.30.07.png" alt="スクリーンショット2023-08-2811.30.07.png"></p>
<p>これで検証用のS3に対して、IAM Roleでアクセスする準備は完了です。</p>
<p>ジョブフローを用いて、実際にファイルを連携してみましょう。</p>
<h1>DatahubからサンプルのファイルをS3バケットに対して連携する</h1>
<p>下記の画像を参考にジョブフローを設定してください。</p>
<p>接続先は先ほど設定した、S3の接続先をご使用ください。</p>
<p>バケット名はAWS側で作成したものをペーストしてください。</p>
<p>ファイルパス等々はご自身の環境に合わせて、適宜変えてください。<br>
<img src="https://ik.imagekit.io/plaid/66b7df4b-25f1-4af3-ad87-46a5bb3f8e03/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-2117.18.46.png" alt="スクリーンショット2023-08-2117.18.46.png"></p>
<p>設定が完了したら、接続の確認ボタンを押してください。</p>
<p>設定が間違っていない場合、成功と表示されます。<br>
<img src="https://ik.imagekit.io/plaid/3e390965-7047-4202-8320-af6e489bbe61/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-2117.27.22.png" alt="スクリーンショット2023-08-2117.27.22.png"></p>
<p>ここまでの設定が完了したら、保存して、ジョブフローを実行してください。</p>
<p>問題なければ、実行済みと表示されます。<br>
<img src="https://ik.imagekit.io/plaid/a3700eb2-fc71-4a83-8dd4-2ca6d73844c3/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-2117.34.15.png" alt="スクリーンショット2023-08-2117.34.15.png"></p>
<p>実行済みと表示されたら、念の為、S3バケットの設定画面でファイルが連携されていることを確認してください。先ほど、設定したファイルが連携されています。<br>
<img src="https://ik.imagekit.io/plaid/bfc87f01-6d91-45c8-895e-f530fb57eabd/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-2117.36.48.png" alt="スクリーンショット2023-08-2117.36.48.png"></p>
<h1>最後に</h1>
<p>ここまでで、IAM Roleを使用してDatahubからS3バケットにアクセスする方法を紹介してきました。</p>
<p>この方法により、今まではシークレットアクセスキーで認証していたものから、よりセキュアに柔軟にご自身のS3バケットに対してアクセスできるようになります。</p>
<p>皆様も是非試してみてください！</p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！<br>
ぜひ気軽にお問い合わせください。</p>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
<p>↓ PLAIDで働きたい</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>


KARTEからS3バケットに対して、ジョブフローを用いてデータ連携する際にAssume Role With WebIdentityを使用して、AWS側で作成したIAM RoleにAssume RoleしてS3バケットにアクセスする方法に関して紹介していきます。

Assume Roleを使ってDatahubからS3に安全にアクセスする

<p>こんにちは、Customer Engineerの道畑です！<br>
リモートワークのお供は無印良品の「コーンスナックチョコ」です！</p>
<p>さて、KARTEにはアンケートテンプレがありますが、<br>
テンプレの通りに使っていると「リアルタイムでの結果表示」ができず、「おしいんだよな〜」って思ったことありませんか？<br>
Datahubを使用して特定期間に集計した結果の表示はできるのですが、<strong>リアルタイム</strong>となるとひと手間もふた手間も対応が必要でした。</p>
<p>しかし、それがひと手間くらいで実現できるようになりました。<br>
そう、KARTE Craftならね(言いたいだけ)。</p>
<p>ということで、今回は<strong>Craftを使ったアンケート結果のリアルタイム表示</strong>について紹介します。</p>
<h1>全体像</h1>
<p>実現する処理の全体像は、次の通りです。<br>
画像にも記載していますが、実際のコードの内容とはちょっとだけ差がある形で表現しています。<br>
わかりやすく雰囲気を掴んでいただきたく、直感的なフローで記載しています。<br>
差のある部分については次項「4」の手順にて記載します。<br>
<img src="https://ik.imagekit.io/plaid/539854db-4568-42e3-8438-1231cae108d4/Untitled(1).jpg" alt="Untitled(1).jpg"></p>
<h1>実装手順</h1>
<p>実装の手順は次の通りです。<br>
手順としては多いのですが、記述するコードはあまり多くはありません。<br>
そう、KARTE Craftならね()。</p>
<ol>
<li>アンケート接客を作成する</li>
<li>Craft Functionsを作成する</li>
<li>Craft Functionsのエンドポイントを作成する</li>
<li>アンケート接客とCraft Functionsを連携させる</li>
</ol>
<p>順番に説明します。</p>
<h2>1.アンケート接客を作成する</h2>
<p>まず、画面に表示させるアンケート接客を用意します。<br>
今回は「ユーザーに聞く &gt; アンケート &gt; プルダウン」のテンプレを使用しました。</p>
<p><img src="https://ik.imagekit.io/plaid/e4fd32df-edf4-4af6-bd8d-0eb44504d1fc/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-07-2610.07.53.png" alt="スクリーンショット2023-07-2610.07.53.png"></p>
<h2>2.アンケート結果をCraft KVSに保存するためのCraft Functionsを作成する</h2>
<p>次に、Craft Functionsを用意します。<br>
Craft Functionsに記述するコードのポイントは次の2つです。</p>
<ol>
<li>Craft KVSに保存すること</li>
<li>Craft KVSからデータを取得する</li>
</ol>
<p>下記、サンプルコードを参考に実装してみてください。<br>
サンプルコード内では「1」が「updateKVS」に、「2」が「getKVS」にそれぞれ対応しています。<br>
1つのCraft Functionsから両方を実行するので、「リクエストされている処理がどちらなのか」を判定してから合致する処理を実行するように記述しています。</p>
<details>
<summary>サンプルコード(CraftのJavaScript)</summary>
<pre><code>const LOG_LEVEL = &quot;ERROR&quot;;

async function getKVS(kvs, logger, enqueteId) {
  logger.log(&quot;start getKVS&quot;);
  const FIRST_ANSWER_CODE = &quot;FIRST_ANSWER&quot;;

  const answerValue = await getValue(kvs, enqueteId);
  const answer = answerValue[enqueteId] === undefined ? [FIRST_ANSWER_CODE] : answerValue[enqueteId]?.value;

  logger.debug(`return value ${answer}`);
  logger.log(&quot;end getKVS&quot;);

  return answer;
}

async function getValue(kvs, key) {
  let value = await kvs.get({ key });
  return value;
}

async function updateKVS(kvs, logger, enqueteId, choiceIndex, maxIndex) {
  logger.log(&quot;start updateKVS&quot;);

  let value = await getValue(kvs, enqueteId);
  let newData = [];
  let incCount = 0;

  if (value[enqueteId] == null) {
    for (let i = 1; i &lt;= maxIndex; i++) {
      if (parseInt(choiceIndex) === i) {
        newData.push(1);
      } else {
        newData.push(0);
      }
    }
  } else {
    let currentData = value[enqueteId].value;
    incCount = parseInt(currentData[choiceIndex - 1]) + 1;
    currentData[choiceIndex - 1] = String(incCount);
    newData = currentData;
  }

  const now = new Date().getTime();
  await kvs.checkAndWrite({
    key: enqueteId,
    value: newData,
    operator: '&lt;=',
    unixtimeMs: now
  });

  logger.debug(`Incremented value for key ${enqueteId} to ${newData}`);
  logger.log(&quot;end updateKVS&quot;);
}

export default async function (data, { MODULES }) {
  const { kvs, initLogger } = MODULES;
  const logger = initLogger({ logLevel: LOG_LEVEL });

  const bodyValue = data.jsonPayload.data.hook_data.body;
  const queryValue = data.jsonPayload.data.hook_data.query;

  const isPostReq = Object.keys(bodyValue).length &gt; 0;
  const isGetReq = Object.keys(queryValue).length &gt; 0;

  let requestType = &quot;&quot;;
  let enqueteId = &quot;&quot;;
  let choiceIndex = &quot;&quot;;
  let maxIndex = &quot;&quot;;

  if (isPostReq) {
    const jsonKey = Object.keys(bodyValue)[0];
    const parsedKey = JSON.parse(jsonKey);
    requestType = parsedKey.request
    enqueteId = parsedKey.enquete_id
    choiceIndex = parsedKey.choice_index
    maxIndex = parsedKey.max_index
  } else if (isGetReq) {
    enqueteId = data.jsonPayload.data.hook_data.query.enquete_id
  }

//enqueteIdがリクエストに含まれてない場合は処理を止める
  if(enqueteId === &quot;&quot;){
    return;
  }

  if (requestType === &quot;POST&quot;) {
    await updateKVS(kvs, logger, enqueteId, choiceIndex, maxIndex);
  } else {
    const kvsData = await getKVS(kvs, logger, enqueteId);
    return kvsData;
  }
}
</code></pre>
</details>
<p>※KARTE Craftとは？という方は、<a href="https://support.karte.io/post/2GeCWy2PDHxX2YmWYBmtJe">こちら</a>もご参照ください。</p>
<h2>3.Craft Functionsのエンドポイントを作成する</h2>
<p>Craft KVSに保存するためのCraft Functionsが作成できたら、アンケート接客で実行出来るようにするためのエンドポイントを作成します。<br>
「エンドポイント設定」タブから「作成」を押します。<br>
このエンドポイントを使用することで接客側から実行できるようになります。</p>
<p><img src="https://ik.imagekit.io/plaid/0ae67b40-3d0a-4c5b-b0da-823c9475ecaf/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-2312.17.38.png" alt="スクリーンショット2023-08-2312.17.38.png"></p>
<h2>4.アンケート接客とCraft Functionsを連携させる</h2>
<p>ここが実装時に工夫が必要なポイントでした。<br>
「全体像」に記載した図をおさらいすると、<br>
アンケート接客がKARTE Craftを実行してCraft KVSにデータを保存し、結果をアンケート接客に戻す、というものでした。</p>
<p>しかし、この構造で実装した場合、「KARTE Craft」のすべての処理が終わるまでアンケート結果が得られないということになります。<br>
アンケート回答して5秒後に回答結果が得られる、というイメージです。<br>
これだと回答結果を見る前に閉じてしまいますね。</p>
<p>そこで、今回の実装は次の図のように、アンケート回答前にその時点のアンケート結果を取得し、取得した件数に回答内容を反映させて表示させる、という処理にしています。<br>
Craft KVSにデータを保存する処理と、Craft KVSからデータを取得し、画面に表示する処理を直列ではなく並列とし、スムーズな画面描画を実現しています。</p>
<p><img src="https://ik.imagekit.io/plaid/47c3fdfb-84f4-4c1a-91fa-69f69ae8cda9/Untitled(2).jpg" alt="Untitled(2).jpg"></p>
<p>接客のJavaScriptをカスタマイズして対応します。<br>
こちらのポイントは次の3つです。</p>
<ol>
<li>「2」のエンドポイントを実行して接客表示のタイミングでアンケート結果を取得する</li>
<li>「2」のエンドポイントにアンケート結果を送って保存する</li>
<li>アンケート結果に対して、今入力した結果も加算して画面に表示する</li>
</ol>
<p>こちらも次のサンプルコードを参考に実装してみてください。<br>
サンプルコード内では「1」が「getCraft」、<br>
「2」が「widget.method(&quot;submit&quot;, function ()」の「sendCraft」まで、「3」は「sendCraft」以降が対応しています。</p>
<p>※なお、コード内に記載のある「#{enquete_id}」は、テンプレートから変数追加したアンケート固有のIDとなります。</p>
<details>
<summary>サンプルコード(接客のhtml)</summary>
<pre><code>&lt;div class=&quot;karte-temp-whole&quot;&gt;
    &lt;div class=&quot;karte-temp-state1&quot; krt-if=&quot;state==1&quot;&gt;
        &lt;i class=&quot;karte-temp-close karte-close karte-temp-hover&quot; krt-if=&quot;#{close.use}&quot;&gt;&lt;/i&gt;
        &lt;div class=&quot;karte-temp-card&quot;&gt;
            &lt;div class=&quot;karte-temp-mainvisual&quot;&gt;&lt;img src=&quot;#{state1.mainvisual}&quot; alt=&quot;#{state1.mainvisual_alt}&quot; /&gt;&lt;/div&gt;
            &lt;div class=&quot;karte-temp-wrap&quot;&gt;
                &lt;div class=&quot;karte-temp-title&quot;&gt;#{state1.title}&lt;/div&gt;
                &lt;div class=&quot;karte-temp-description&quot;&gt;#{state1.description}&lt;/div&gt;
                &lt;div class=&quot;karte-temp-form&quot;&gt;
                    &lt;div class=&quot;karte-temp-select&quot;&gt;
                        &lt;select krt-model=&quot;answer1&quot; options=&quot;pulldowns&quot; id =&quot;pd&quot;&gt;
                            &lt;option value=&quot;&quot;&gt;回答を選択してください&lt;/option&gt;
                            &lt;option krt-for=&quot;pulldown in pulldowns&quot; :value=&quot;pulldown&quot;&gt;{{pulldown}}&lt;/option&gt;
                        &lt;/select&gt;
                        &lt;i class=&quot;karte-temp-arrow&quot;&gt;&lt;/i&gt;
                    &lt;/div&gt;
                    &lt;div krt-if=&quot;!sendable&quot; class=&quot;karte-temp-off&quot;&gt;#{state1.off}&lt;/div&gt;
                    &lt;input krt-if=&quot;sendable&quot; class=&quot;karte-temp-on karte-temp-hover&quot; type=&quot;submit&quot; value=&quot;#{state1.on}&quot; krt-on:click=&quot;submit()&quot; /&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;karte-temp-state2&quot; krt-if=&quot;state==2&quot;&gt;
        &lt;i class=&quot;karte-temp-close karte-close karte-temp-hover&quot; krt-if=&quot;#{close.use}&quot;&gt;&lt;/i&gt;
        &lt;div class=&quot;karte-temp-card&quot;&gt;
            &lt;div class=&quot;karte-temp-mainvisual&quot;&gt;&lt;img src=&quot;#{state2.mainvisual}&quot; alt=&quot;#{state2.mainvisual_alt}&quot; /&gt;&lt;/div&gt;
            &lt;div class=&quot;karte-temp-wrap&quot;&gt;
                &lt;div class=&quot;karte-temp-title&quot;&gt;#{state2.title}&lt;/div&gt;
                &lt;div class=&quot;karte-temp-description&quot;&gt;#{state2.description}
                &lt;p style=&quot;text-align:left&quot;&gt;▼現在の回答状況&lt;/p&gt;
            &lt;div class=&quot;bar-container&quot;&gt;
                &lt;p style=&quot;text-align:left&quot;&gt;もってる&lt;/p&gt;
                &lt;div id=&quot;bar0&quot; class=&quot;bar&quot; style=&quot;width: 30%;&quot;&gt;&lt;/div&gt;
                &lt;p style=&quot;text-align:left&quot;&gt;もってない&lt;/p&gt;
                &lt;div id=&quot;bar1&quot; class=&quot;bar&quot; style=&quot;width: 50%;&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
            &lt;br&gt;&lt;div class=&quot;karte-temp-btn karte-close karte-temp-hover&quot;&gt;#{state2.btn}&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</details>
<details>
<summary>サンプルコード(接客のJavaScript)</summary>
<pre><code>if (&quot;#{track_state_changed}&quot; === 'true') {
    widget.option({ track_state_changed: true });
}

// プルダウン項目の表示設定
var stringOptionsSplit = '#{state1.select}'.split(',');
var stringOptions = stringOptionsSplit.map(function (str) {
    return str.replace(/^\s+|\s+$/g, '');
});

widget.setVal(&quot;pulldowns&quot;, stringOptions);

// アンケート回答結果
widget.setVal(&quot;answer1&quot;, &quot;&quot;);
// 入力チェック用
widget.setVal(&quot;sendable&quot;, false);
widget.setVal(&quot;isNotEmpty_1&quot;, false);

// 入力チェック
var inputChecked = function () {
    if (
        // 必須回答から外す場合は、以下のチェックから対象の設問を除外する
        widget.getVal(&quot;isNotEmpty_1&quot;)
    ) {
        widget.setVal(&quot;sendable&quot;, true);
    } else {
        widget.setVal(&quot;sendable&quot;, false);
    }
};

//取得した回答の保持
var answerData = &quot;&quot;;
//初回回答フラグ
var isFirstUser = false;

getCraft(function (ans) {
    //現在の結果を取得しておく
    if (ans[0] === &quot;FIRST_ANSWER&quot;) {
        isFirstUser = true;
    }
    answerData = ans;
});

// 回答更新時の処理
widget.onChangeVal(&quot;answer1&quot;, function (x) {
    widget.setVal(&quot;isNotEmpty_1&quot;, x.newVal.length !== 0);
    inputChecked();
});

// 確定ボタン押下時の処理
widget.method(&quot;submit&quot;, function () {
    widget.addChoiceAnswer(&quot;1&quot;, widget.getVal(&quot;answer1&quot;));
    var selectObj = document.getElementById(&quot;pd&quot;);
    var selectIndex = selectObj.selectedIndex;

    sendCraft(selectIndex)
        .then(function () {
            widget.sendAnswers();
            widget.setVal(&quot;answer1&quot;, &quot;&quot;);
        });

    if (!isFirstUser) {
        var choiseResult = parseInt(answerData[selectIndex - 1]);
        answerData[selectIndex - 1] = String(choiseResult + 1);

        var total = 0;
        for (var i = 0; i &lt; answerData.length; i++) {
            total += parseInt(answerData[i]);
            console.log(total);
        }
    }

    widget.setState(2);

    setTimeout(function () {
        if (!isFirstUser) {
            for (var i = 0; i &lt; answerData.length; i++) {
                var percentage = Math.floor((answerData[i] / total) * 100);
                document.getElementById(&quot;bar&quot; + i).style.width = percentage + &quot;%&quot;;
                document.getElementById(&quot;bar&quot; + i).textContent = answerData[i] + &quot;件&quot; + &quot; &quot; + percentage + &quot;%&quot;;
            }
        } else {
            document.getElementById(&quot;bar&quot; + (selectIndex - 1)).style.width = 100 + &quot;%&quot;;
            document.getElementById(&quot;bar&quot; + (selectIndex - 1)).textContent = 1 + &quot;件&quot; + &quot; &quot; + 100 + &quot;%&quot;;
        }

    }, 100);

});

function sendCraft(selectIndex) {
    var url = &quot;エンドポイントのURL&quot;;

    var list = document.getElementById('pd')
    var options = list.options;
    var maxIndex = options.length - 1;

    var body = JSON.stringify({
        &quot;enquete_id&quot;: &quot;#{enquete_id}&quot;,
        &quot;choice_index&quot;: selectIndex,
        &quot;request&quot;: &quot;POST&quot;,
        &quot;max_index&quot;: maxIndex
    });

    return fetch(url, {
        method: &quot;POST&quot;,
        headers: {
            &quot;Content-Type&quot;: &quot;application/x-www-form-urlencoded&quot;
        },
        body: body
    })
        .then(function (response) {
            if (!response.ok) {
                throw new Error(&quot;HTTP error! status: &quot; + response.status);
            }
            return response.json();
        })
        .then(function (data) {
        })
        .catch(function (error) {
            console.log(&quot;Error: &quot;, error);
        });
}

function getCraft(cb) {
    fetchURL = 'エンドポイントのURL'
    fetchURL = fetchURL + &quot;?enquete_id=&quot; + &quot;#{enquete_id}&quot;;

    fetch(fetchURL, {
        method: &quot;GET&quot;
    })
        .then(function (res) {
            if (res.ok) {
                return res.json();
            } else {
                throw new Error(&quot;Network response was not ok&quot;);
            }
        })
        .then(function (fetchData) {
            return cb(fetchData);
        })
        .catch(function (error) {
            console.log(&quot;There has been a problem with your fetch operation: &quot;, error.message);
        });

}

widget.show();
</code></pre>
</details>
<h1>実際に動かしてみる</h1>
<p>上記まで実装できたら実際にアンケートに回答してみましょう！<br>
回答結果がリアルタイムで表示されることを確認出来ると思います。</p>
<p>イメージ：<br>
<img src="https://ik.imagekit.io/plaid/78a29d33-1d86-412c-8efd-37ce7a9e9b78/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-2311.30.44.png" alt="スクリーンショット2023-08-2311.30.44.png"><br>
<img src="https://ik.imagekit.io/plaid/000e0c8a-50a8-4fbe-8b5d-ff305569fde4/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-2311.31.19.png" alt="スクリーンショット2023-08-2311.31.19.png"><br>
<img src="https://ik.imagekit.io/plaid/2c466c4d-bb93-4551-9aff-a3924651827e/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-2311.31.36.png" alt="スクリーンショット2023-08-2311.31.36.png"></p>
<h1>おわりに</h1>
<p>今回はKARTE Craftを利用したアンケート結果のリアルタイム表示を紹介しました。<br>
長文となってしまいましたが、KARTE Craftや接客のカスタマイズの一歩としていかがでしょうか。</p>
<p>ぜひ皆さんも、実装してみてください！</p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！<br>
ぜひ気軽にお問い合わせください。</p>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
<p>↓ PLAIDで働きたい</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>


KARTE Craftを使用してアンケート結果をリアルタイムで表示します。

アンケート結果をリアルタイムで表示してみた

回答後に集計結果がリアルタイム表示されるアンケートを実装してみた

<p>こんにちは、Customer Engineerのgamiです！最近はピクミン4をやっていて、いま「王の穴」を攻略中です。</p>
<p>さて、Craft Functionsを使った自動化をしていると <strong>「Googleスプレッドシートにデータを書き込みたい」</strong> と思うことがあります。たとえば次のようなケースです。</p>
<ul>
<li><strong>スプレッドシートに手動で入力したスケジュールをベースに接客サービスの公開/非公開を切り替えたい</strong></li>
<li><strong>Craft Functions内で利用する設定値を運用者が簡単に変更できるようにスプレッドシートに外出ししたい</strong></li>
</ul>
<p>一方で、外部プログラムからスプレッドシートを操作するためのGoogle Sheets APIの認証フローは複雑で、スプレッドシートだけではなくGoogle Cloud Platform（以下GCP）の管理画面を触る必要があったりして、毎回手順を調べては思い出してを繰り返しています。</p>
<p>そこで今回は自分の備忘録も兼ねて、 <strong>Craft FunctionsからGoogleスプレッドシートを操作するための手順</strong> についてまとめます。</p>
<h1>手順</h1>
<p>手順は次の通りです。</p>
<ol>
<li>GCPプロジェクトでGoogle Sheets APIを有効化する</li>
<li>Googleサービスアカウントを作成し、キーをCraft Secret Managerに登録する</li>
<li>サービスアカウントに対象スプレッドシートへの権限を付与する</li>
<li>Craft Functionsでそのサービスアカウントを使ってスプレッドシートを操作する</li>
</ol>
<p>順番に説明します。</p>
<h2>1. GCPプロジェクトでGoogle Sheets APIを有効化する</h2>
<p>まず、Google Sheets APIを有効化します。<br>
公式ドキュメントに記載の通り、Google Workspaceだけでは完結せず、GCPプロジェクトを利用する必要があります。</p>
<p><a href="https://developers.google.com/workspace/guides/get-started?hl=ja">Google Workspace での開発  |  Google for Developers</a></p>
<p>適当なGCPプロジェクトを作成または選択し、[APIとサービス &gt; 有効なAPIとサービス &gt; APIとサービスの有効化] からGoogle Sheets APIを検索し、有効化します。</p>
<p><img src="https://ik.imagekit.io/plaid/89b72e8a-0ffc-4a32-b29a-d4b97da78a08/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-1413.09.39.png" alt="スクリーンショット2023-08-1413.09.39.png"></p>
<p><img src="https://ik.imagekit.io/plaid/5c519b42-0c84-42de-b495-259a9e8ad867/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-1413.10.01.png" alt="スクリーンショット2023-08-1413.10.01.png"></p>
<p><img src="https://ik.imagekit.io/plaid/d026c746-7ed9-4167-adda-47729d7a6f96/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-1413.10.10.png" alt="スクリーンショット2023-08-1413.10.10.png"></p>
<h2>2. Googleサービスアカウントを作成し、キーをCraft Secret Managerに登録する</h2>
<p>次に、同一GCPプロジェクトでGoogleサービスアカウントを作成します。後にそのアカウントを使って認証をします。</p>
<p>[IAMと管理 &gt; サービスアカウント &gt; サービスアカウントを作成] から適当な名称のアカウントを作成します。</p>
<p><img src="https://ik.imagekit.io/plaid/227adf6a-c6bc-42ea-8235-8f3c762422eb/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-1413.15.34.png" alt="スクリーンショット2023-08-1413.15.34.png"></p>
<p>作成したサービスアカウントを選択し、[キー &gt; 鍵を追加 &gt; 新しい鍵を作成] からJSON形式のキーファイルをダウンロードします。</p>
<p><img src="https://ik.imagekit.io/plaid/faefbf7a-98af-4a2f-a672-e436f2e8cf0c/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-1413.16.12.png" alt="スクリーンショット2023-08-1413.16.12.png"></p>
<p>作成したサービスアカウントを使ってCraft Functionsで認証するために、ダウンロードしたJSONキーファイルの中身をCraft Secret Managerから利用可能にします。</p>
<p>KARTEの管理画面を開き [Craft &gt; シークレット &gt; 作成] からシークレットを作成し、適当な名称でJSONキーファイルの中身を登録します。</p>
<p><img src="https://ik.imagekit.io/plaid/1b4ab3e2-088a-4713-be63-52889d1c1e61/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-1413.23.18.png" alt="スクリーンショット2023-08-1413.23.18.png"></p>
<h2>3. サービスアカウントに対象スプレッドシートへの権限を付与する</h2>
<p>Google Sheets APIを有効化したとしても、個別のスプレッドシートに対して自由にアクセスできるわけではありません。スプレッドシート毎に、閲覧権限や編集権限を付与する必要があります。</p>
<p>Functionからデータを読み書きしたいスプレッドシートを開き、右上の [共有]ボタンから当該サービスアカウントに対する権限を付与します。</p>
<p><img src="https://ik.imagekit.io/plaid/1d490492-2ff5-409a-97e2-8f256b0eee49/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-1514.20.04.png" alt="スクリーンショット2023-08-1514.20.04.png"></p>
<p>JSONキーに含まれるclient_emailの値を入力し、権限には <code>編集者</code> を選択します。readだけしたい場合は <code>閲覧者</code> を指定しても問題ありません。</p>
<p>以上で、Functionからスプレッドシートにアクセスするための準備は完了です。</p>
<h2>4. Craft Functionsでそのサービスアカウントを使ってスプレッドシートを操作する</h2>
<p>最後に、実際にCraft Functionsからスプレッドシート上のデータを読み書きしてみます。</p>
<p>サンプルコードは、下記URLで公開しています。</p>
<p><a href="https://github.com/plaidev/craft-codes/tree/main/craft-functions/read-write-spreadsheet">https://github.com/plaidev/craft-codes/tree/main/craft-functions/read-write-spreadsheet</a></p>
<p>以下、重要な点をかいつまんで説明します。</p>
<p>まず、Craft Secret Managerに登録したJSONキーを利用して、今回作成したGoogleサービスアカウントでJWT方式の認証をします。</p>
<pre><code class="language-js">import { google } from &quot;googleapis&quot;;

// GoogleサービスアカウントのJSONキーをシークレットから取得
const secrets = await secret.get({ keys: [SERVICE_ACCOUNT_KEY_SECRET] });
const _jsonKey = secrets[SERVICE_ACCOUNT_KEY_SECRET];
const jsonKey = JSON.parse(_jsonKey);

// Google Drive APIの初期化
const jwtClient = new google.auth.JWT(
    jsonKey.client_email,
    null,
    jsonKey.private_key,
    [&quot;https://www.googleapis.com/auth/spreadsheets&quot;]
);
await jwtClient.authorize();
</code></pre>
<p>次にjwtClientをパラメータに渡して、Google Sheets APIを利用するためのオブジェクトを得ます。</p>
<pre><code class="language-js">const sheets = google.sheets({ version: &quot;v4&quot;, auth: jwtClient });
</code></pre>
<p>あとは、スプレッドシートID、シート名、範囲などを指定してgetやupdateをするだけです。</p>
<pre><code class="language-js">async function getSsValues(sheets, range) {
  const res = await sheets.spreadsheets.values.get({
      spreadsheetId: SPREADSHEET_ID,
      range,
  });
  return res.data.values || null;
}
async function updateSsValues(sheets, range, values) {
  await sheets.spreadsheets.values.update({
    spreadsheetId: SPREADSHEET_ID,
    range,
    valueInputOption: &quot;USER_ENTERED&quot;, // Userの入力値と同様に扱う
    resource: {
      values,
    },
  });
}
</code></pre>
<p>認証さえ突破してしまえば、あとは簡単ですね。</p>
<h1>実際に動かしてみる</h1>
<p>実際に動作を確認してみましょう。</p>
<p>前述のサンプルコードに必要な定数を入力した内容でCraft Functionsを作成し、実際に実行してみます。すると、関数が実行される度にスプレッドシート上のcountが1つずつインクリメントされるようになります。</p>
<p><img src="https://ik.imagekit.io/plaid/df3e5429-202f-420d-8433-684a67be984e/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-08-1514.05.18.png" alt="スクリーンショット2023-08-1514.05.18.png"></p>
<p>実際にreadとwriteがうまく動いていることが確認できました。</p>
<h1>おわりに</h1>
<p>今回はCraft FuncitonsからGoogleスプレッドシートを直接利用する方法について紹介しました。<br>
Googleスプレッドシートは多くの人にとって馴染み深いので、データ入稿やデータ確認などの運用を考えたときに採用しやすいプロダクトです。</p>
<p>ぜひ皆さんも、Craft + Googleスプレッドシートを使ったソリューションを考えて開発してみてください！</p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！<br>
ぜひ気軽にお問い合わせください。</p>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
<p>↓ PLAIDで働きたい</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>


Craft FunctionsからGoogleスプレッドシートのデータを読み書きするために必要な作業やFunctionの実装についてまとめました。

Craft Functionsからスプレッドシートのデータを読み書きする

<p>こんにちは。エンジニアの矢澤です。</p>
<p>KARTEでは主要な機能をAPIとして公開しています。APIを利用することで、プログラムからKARTEに対してさまざまな操作ができます。</p>
<p><a href="https://ecosystem.plaid.co.jp/karte-api">KARTE API</a></p>
<p>そして、このKARTE APIにKARTE Craft向けの機能が追加されました。実装例も交えて紹介します。</p>
<h1>Craft Type App</h1>
<p>KARTEのAPIでは「アプリ」という単位でAPIの認証情報・権限情報を管理します。通常、プログラムや外部サービスからAPIを利用する際には <code>token</code> というタイプのアプリを作成してアクセストークンを発行します。<br>
今回、<code>craft</code> という<strong>KARTE Craftからのみ利用できる</strong>アプリタイプを追加しました。<code>craft</code> タイプのアプリは <code>token</code> タイプのアプリと同様に権限管理と認証情報の発行ができます。ただし、<code>craft</code> タイプのアプリはCraft Functionsのクライアントからのみ利用できます。それ以外の環境から呼び出した場合はエラーとなります。</p>
<p><img src="https://ik.imagekit.io/plaid/d82cb5a7-d7e3-4915-ac0c-b68b78a6901e/craft-type-app.png" alt="craft-type-app.png"></p>
<p>これまでKARTEのAPIではアクセストークンによる認証のみサポートしていましたが、 <code>craft</code> タイプのアプリによって <strong>KARTE Craftを使ってアクセス制御が実装できる</strong> ようになりました。例えば次のような制御が実現できます。</p>
<ul>
<li>送信元IPアドレスによるアクセス制限</li>
<li>平日・休日、時間帯別の利用可否の設定</li>
<li>時間単位・ユーザー単位のリクエスト数制限</li>
</ul>
<p>この記事では <code>craft</code> タイプのアプリを使ったアクセス制御の例として、送信元IPによるアクセス制限を実装してみます。</p>
<h1>前提条件</h1>
<p>今回の実装にあたって以下の機能を利用します。機能有効化の申し込み・費用の問い合わせ等は営業・サクセス担当者にお問い合わせください。</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/product/karte-craft">KARTE Craft</a>
<ul>
<li>Growth以上のプランをご契約いただく必要があります。</li>
</ul>
</li>
<li><a href="https://ecosystem.plaid.co.jp/karte-api">KARTE API</a>
<ul>
<li>Freeプランで問題ありません。</li>
</ul>
</li>
</ul>
<h1>構成</h1>
<p>送信元IP制限の仕組みを図示すると次のようになります。</p>
<p><img src="https://ik.imagekit.io/plaid/960f1c65-c175-4852-99c2-e509fc435ba4/ip-restriction-arch-r1.png" alt="ip-restriction-arch-r1.png"></p>
<p>動作を説明します。</p>
<ul>
<li>今回は <a href="https://developers.karte.io/reference/post_v2-track-event-write">Send event to KARTE</a> APIに送信元IP制限を設定します。</li>
<li>APIのユーザーはCraft EndpointにAPIリクエストを行います。
<ul>
<li>現在Craft Endpointはヘッダー情報の送信をサポートしていないので、bodyにアクセストークンを埋め込みます。</li>
<li>APIリクエストは次のようになります。</li>
</ul>
</li>
</ul>
<pre><code class="language-sh">curl -X POST 'https://t.karte.io/hook/{{ Craft Endpoint Path }}' \
-H 'Content-Type: application/json' \
-d '{
    &quot;access_token&quot;: &quot;{{ API v2 Access Token }}&quot;,
    &quot;request_body&quot;: {
      &quot;keys&quot;: {
        &quot;user_id&quot;: &quot;manabu.yazawa&quot;
      },
      &quot;event&quot;: {
        &quot;event_name&quot;: &quot;ip_restriction_test_event&quot;,
        &quot;values&quot;: {
          &quot;from&quot;: &quot;plaid_office&quot;
        }
      }
    }
  }'
</code></pre>
<ul>
<li>Craft Functionsで以下の処理を実行します。
<ul>
<li>送信元IPアドレスによるアクセス制御
<ul>
<li>許可対象のIPに含まれていれば処理を続けます</li>
<li>含まれていない場合はエラーを返します</li>
</ul>
</li>
<li>Craft Type App専用クライアントを使ってAPIをコール</li>
<li>API実行結果を返却</li>
</ul>
</li>
</ul>
<h1>実装手順</h1>
<p>実装の手順を紹介します。</p>
<h2>API v2 Craft Type App の作成</h2>
<p>サポートサイトを参考にアプリを作成します。<br>
<a href="https://support.karte.io/post/5RwTOxJDAbNG8zqN7VBOt8">API v2画面 | ドキュメント / ストア / API | KARTEサポートサイト</a></p>
<ul>
<li>アプリの種類として「CRAFT」を選択します</li>
<li>API実行に必要なScopeを追加します。今回は <code>track.event.write</code> を追加します。</li>
<li>アプリ作成直後に表示されるアクセストークンを控えておきます。</li>
</ul>
<h2>Craft Functions の作成</h2>
<p>以下のページを参考にCraft Functionsのファンクションを作成します。<br>
<a href="https://developers.karte.io/docs/create-craft-funcitons">Craft Functionsを作成する</a></p>
<ul>
<li>ファンクションのコードはGitHubにアップロードしました。index.jsをcodeに、modules.jsonをmodulesに貼り付けてください。
<ul>
<li><a href="https://github.com/plaidev/craft-codes/tree/main/craft-functions/apiv2-ip-restriction">craft-codes/craft-functions/apiv2-ip-restriction at main · plaidev/craft-codes</a></li>
</ul>
</li>
<li><code>ALLOWED_IPS</code> 変数にアクセス許可対象のIPアドレスを記載します。</li>
</ul>
<pre><code class="language-js">// 許可対象のIPを配列形式で設定する
const ALLOWED_IPS = [
  &quot;192.168.0.1&quot;,
  &quot;172.17.0.1&quot;,
  // ...
];
</code></pre>
<ul>
<li>[保存]を選択し、ファンクションを作成します。</li>
</ul>
<p>ファンクションの作成が終了して <code>SUCCESS</code> になったことを確認したら、当該ファンクションの [エンドポイント設定] を開いてエンドポイントを作成します。<a href="https://developers.karte.io/docs/craft-endpoint#%E8%A8%AD%E5%AE%9A%E6%89%8B%E9%A0%86">Craft Endpoint</a>を参考に作成したら、エンドポイントのURLを控えておきます。</p>
<h1>動作確認</h1>
<p>実際に動作確認してみます。許可対象のIPアドレスを持つ拠点からCraft Endpointに対してHTTPリクエストを実行すると、次のようにSend event to KARTE APIの正常レスポンスが返却されます。</p>
<pre><code>&gt; curl -X POST 'https://t.karte.io/hook/{{ Craft Endpoint Path }}' \
  -H 'Content-Type: application/json' \
  -d '{
      &quot;access_token&quot;: &quot;{{ API v2 Access Token }}&quot;,
      &quot;request_body&quot;: {
        &quot;keys&quot;: {
          &quot;user_id&quot;: &quot;manabu.yazawa&quot;
        },
        &quot;event&quot;: {
          &quot;event_name&quot;: &quot;ip_restriction_test_event&quot;,
          &quot;values&quot;: {
            &quot;from&quot;: &quot;plaid_office&quot;
          }
        }
      }
    }'
{&quot;id&quot;:&quot;35fa4e2b-5ff1-4ec4-8ea9-5c95b0766d6a&quot;}
</code></pre>
<p>一方、許可対象外のIPからリクエストを行うと、次のようにエラーメッセージが返却されます。</p>
<pre><code>{&quot;craft_status_code&quot;:401,&quot;message&quot;:&quot;unauthorized&quot;}
</code></pre>
<h1>まとめ</h1>
<p>KARTEのAPIに追加されたKARTE Craft向けのアプリタイプとして <code>craft</code> タイプを公開しました。<code>craft</code> タイプのアプリを使うことで、KARTE CraftでAPIのアクセス制御ができるようになります。KARTE API単体では実現できない要件がある場合はこちらを検討してみてください！</p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！<br>
ぜひ気軽にお問い合わせください。</p>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
<p>↓ PLAIDで働きたい</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>


KARTEのAPI v2にはKARTE Craft経由でのみ呼び出し可能な craft アプリタイプがあります。この記事では craft タイプのアプリを利用して、KARTE APIの送信元IP制限を実装します。

KARTE Craftを使ってKARTE APIの送信元IPを制限する

KARTE Craftを使ってKARTE APIの送信元IP制限を実装する

<p>こんにちは、Customer Engineerの島本です！最近銀座にできたオールドルーキーが気になってます。</p>
<p>さて、KARTE ではユーザーの特定の行動をきっかけにLINE やメールなどの配信ができますが、「<strong>あるユーザーの行動をきっかけに関連する別のユーザーに通知をしたいな</strong>」と思ったことはありませんか？</p>
<p>例えば、次のようなサービスでは有効な施策になると考えています。</p>
<ul>
<li>サービスの契約者と利用者が異なるような教育系サービス</li>
<li>金融や不動産、BtoBなど顧客に対して担当者がつくサービス</li>
</ul>
<p>サービスの契約者と利用者が異なるような教育系サービスであれば、利用者のサービス利用状況を契約者に通知することで両者の満足度を向上することができますし、他にも金融や不動産、BtoBなど顧客に対して担当者がつく場合も、顧客の行動情報を担当者に通知することで成約率の向上に繋げることができます。</p>
<p>ただ、現在のKARTE ではあるユーザーの行動をきっかけに関連する別のユーザーに接客サービスの配信することが出来ません。</p>
<p>しかし、KARTE Craft を使うことで実現することができます！</p>
<p>今回は「ユーザーA が特定のページを閲覧したことをきっかけに関連するユーザーB にLINE で通知する」方法について紹介します。</p>
<h1>処理の流れ</h1>
<p>全体の処理の流れは、次の通りです。<br>
<img src="https://ik.imagekit.io/plaid/e659322e-3255-4869-903f-e16c6021333c/%E3%81%82%E3%82%8B%E3%83%A6%E3%83%BC%E3%82%B5%E3%82%99%E3%83%BC%E3%81%AE%E8%A1%8C%E5%8B%95%E3%82%92%E9%96%A2%E9%80%A3%E3%81%99%E3%82%8B%E5%88%A5%E3%81%AE%E3%83%A6%E3%83%BC%E3%82%B5%E3%82%99%E3%83%BC%E3%81%AB%E9%80%9A%E7%9F%A5%E3%81%99%E3%82%8B.png" alt="あるユーザーの行動を関連する別のユーザーに通知する.png"></p>
<p>実現する上で必要なプロダクトやオプションは以下になります。</p>
<ul>
<li><a href="https://karte.io/">KARTE</a></li>
<li><a href="https://karte.io/store/options/7kS38PtYsF/">KARTE for LINE</a></li>
<li><a href="https://ecosystem.plaid.co.jp/product/karte-craft">KARTE Craft</a></li>
</ul>
<p>また、Craft Functions とLINE 接客との連携では次の2つの機能を利用します。</p>
<ul>
<li><a href="https://craft.developers.karte.io/craft-functions/triggers/server-side-action">サーバーサイドアクショントリガー</a>
<ul>
<li>Craft 用接客アクションの実行をきっかけにFunctionを実行する</li>
</ul>
</li>
<li><a href="https://developers.karte.io/reference/post_v2beta-track-event-writeandexecaction">API v2 の Send event to KARTE and exec serverside-action API</a>
<ul>
<li>API 経由で KARTE にイベントを送信し、サーバサイドのアクションを実行する</li>
</ul>
</li>
</ul>
<h1>実装手順</h1>
<p>実装の手順は次の通りです。<br>
<strong>紹介する内容はKARTE でユーザーA とユーザーB の計測ができていることが前提条件となります。</strong></p>
<ol>
<li>相互に関連するユーザーのマッピングテーブルを用意する</li>
<li>紐づけテーブルに連携してユーザーにデータを紐付ける</li>
<li>Craft 用接客を作成する</li>
<li>API v2 アプリを作成する</li>
<li>API v2 アプリの アクセストークンを Craft Secret Manager に登録する</li>
<li>Craft Functions を作成する</li>
<li>LINE 接客を作成する</li>
</ol>
<p>順番に見てみましょう。</p>
<h2>1. 相互に関連するユーザーのマッピングテーブルを用意する</h2>
<p>まず、どのユーザーがどのユーザーと相互に関連するのかをKARTE 側で識別するために、マッピングテーブルをCSVファイル形式で用意します。以下のサンプルを参考に準備を進めてください。</p>
<p>今回はユーザーA のID を<code>user_id</code>、ユーザーB のID を <code>related_user_id</code>とします。</p>
<p>【マッピングテーブルのCSVデータ例】</p>
<table>
<thead>
<tr>
<th>user_id</th>
<th>related_user_id</th>
</tr>
</thead>
<tbody>
<tr>
<td>xxxxabc</td>
<td>xxxxdef</td>
</tr>
</tbody>
</table>
<h2>2. 紐づけテーブルに連携してユーザーにデータを紐付ける</h2>
<p>次に、用意したマッピングテーブルを紐づけテーブルに連携します。<br>
以下サポートサイトを参考に用意したマッピングテーブルを紐づけテーブルにインポートしてください。</p>
<ul>
<li><a href="https://support.karte.io/post/1k9iwpl1hTMjArbpi8KGYd">ユーザーにデータを紐付ける（CSVファイルを直接アップロードする場合）</a></li>
</ul>
<p>紐付け設定については、次のとおりに設定を行います。</p>
<ul>
<li>紐付けテーブルの「データ紐付け」タブをクリック</li>
<li>右上の「編集」をクリック</li>
<li>「紐付けテーブルの有効化」にチェックを入れ、以下の設定を行う
<ul>
<li>紐付け対象のフィールド：ユーザー情報 -&gt; <code>user_id</code></li>
<li>オプション：
<ul>
<li>データの追加先：ユーザー情報</li>
<li>データの上書き：既に紐付いているデータを上書きしたい場合はチェックを入れます（今回は新規で紐付けを行うのでチェックは不要です）</li>
</ul>
</li>
</ul>
</li>
<li>右上の「保存」をクリック</li>
</ul>
<p><img src="https://ik.imagekit.io/plaid/f4bed047-2067-47f4-a695-d458898cb2a6/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-07-2414.20.01.png" alt="スクリーンショット2023-07-2414.20.01.png"></p>
<p>これでユーザーAのID： <code>user_id</code> に対してユーザーBのID： <code>related_user_id</code> の紐づけ設定が完了しました。</p>
<h2>3. Craft 用接客を作成する</h2>
<p>Functionをトリガーする条件を指定するための接客サービスを作成します。</p>
<ul>
<li>接客サービス画面を開く</li>
<li><code>Craft Functions連携</code> テンプレートを利用してアクションを追加
<ul>
<li>※ テンプレートが表示されない場合は、<a href="https://ecosystem.plaid.co.jp/product/karte-craft">Craftの利用申請</a>が必要です</li>
</ul>
</li>
</ul>
<p><img src="https://ik.imagekit.io/plaid/95ec6bf5-4ebe-4cff-ab35-c486c3cbb9a1/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-07-2415.09.18.png" alt="スクリーンショット2023-07-2415.09.18.png"></p>
<p>今回は、ユーザーA が特定のページを閲覧したことをきっかけにFunction をトリガーするため、次のようにCraft  接客の配信設定を行います。</p>
<ul>
<li>「アクション」
<ul>
<li>配信率: 100%
<ul>
<li>※ アクションの中身の設定については後述</li>
</ul>
</li>
</ul>
</li>
<li>「対象ユーザー」
<ul>
<li>全員
<ul>
<li>※ 対象ユーザーを絞りたい場合は、条件を指定します</li>
<li>※ 検証中はテスト配信用のセグメントを設定してください</li>
</ul>
</li>
</ul>
</li>
<li>「対象イベント」
<ul>
<li>「〇〇ページを見た」という条件になるよう「閲覧イベント」に対する条件を指定</li>
</ul>
</li>
<li>「オプション」
<ul>
<li>同時配信: OK</li>
</ul>
</li>
<li>保存をする</li>
</ul>
<p>次に、接客サービスに登録したアクションの設定をしていきます。ここで設定した内容がCraft Functions 側に渡されます。</p>
<p>先程連携した紐づけテーブルで紐付けたデータは「ユーザー情報変数」で接客サービス内に埋め込むことができます。その機能を活用して、<code>related_user_id</code> をCraft Functions 側に渡す設定を行います。</p>
<ul>
<li>「アクション設定」を埋めていく
<ul>
<li>「ファンクション名」
<ul>
<li>トリガーしたいFunctionの名称（今回の例では notify-other-users ）を設定</li>
</ul>
</li>
<li>「name」
<ul>
<li>今回は利用しないので「ファンクション名」と同じ値を設定</li>
</ul>
</li>
<li>「data」
<ul>
<li>JSONで<code>related_user_id</code> を設定</li>
</ul>
</li>
</ul>
</li>
</ul>
<pre><code>{ 
 &quot;related_user_id&quot;: &quot;#{related_user_id}&quot;
}
</code></pre>
<ul>
<li>「データ管理」をクリック
<ul>
<li>ユーザー情報変数を次のとおりに設定
<ul>
<li>変数名：<code>related_user_id</code></li>
<li>すべての期間 &gt; ユーザー情報 &gt; <code>related_user_id</code> &gt; 最新の値<br>
<img src="https://ik.imagekit.io/plaid/da8b8b74-47b1-40a5-b1dc-5974433cc011/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-07-2515.00.58.png" alt="スクリーンショット2023-07-2515.00.58.png"></li>
</ul>
</li>
</ul>
</li>
<li>保存する</li>
</ul>
<p>以上で、ユーザーA が特定のページを閲覧したタイミングで、Craft Functions 側にユーザーB のユーザーIDを渡す設定が完了しました。</p>
<h2>4. API v2 アプリを作成する</h2>
<p>API 経由で KARTE にイベントを送信し、LINE接客アクションを実行するための設定を進めていきます。<br>
まずは、Send event to KARTE and exec serverside-action API を利用するためのAPI v2アプリを作成します。<br>
<img src="https://ik.imagekit.io/plaid/a1bc1daa-75ba-497e-802b-0638f94aabbf/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-07-2414.43.10.png" alt="スクリーンショット2023-07-2414.43.10.png"></p>
<ul>
<li>[ストア &gt; API v2設定] からアプリを新規作成</li>
<li>[アプリタイプ] を token に設定</li>
<li>必要なscopeを追加
<ul>
<li><code>beta.track.event.writeAndExecAction</code>: イベントを送信してサーバサイドのアクションを実行するのに必要</li>
</ul>
</li>
<li>アプリを保存し、一度だけ表示されるアクセストークンを控えておく</li>
</ul>
<p>「アプリタイプ」は後から変更できないため、誤って作成した場合は、アプリを再度作成し直してください。</p>
<h2>5. API v2 アプリの アクセストークンを Craft Secret Manager に登録する</h2>
<p>API v2 アプリのアクセストークンを Craft Secret Manager のシークレットとして登録します。それにより、秘匿すべきアクセストークンをファンクション上に直接記述する必要が無くなります。</p>
<p><img src="https://ik.imagekit.io/plaid/c4fc2906-e9a2-4ba1-b9cc-11681c429fac/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-07-2515.15.11.png" alt="スクリーンショット2023-07-2515.15.11.png"></p>
<ul>
<li>[Craft &gt; シークレット] からシークレットを新規作成</li>
<li>控えておいたアクセストークンを貼り付けて、適当な名前を付けて保存</li>
</ul>
<p>作成したシークレットの名前は、次に作成するCraft Functions のファンクション中に記載します。</p>
<h2>6. Craft Functions を作成する</h2>
<p>ユーザーB に対してイベントを送信するためのCraft Functions のファンクションを作成します。サンプルとなるソースコードは、GitHubで公開しています。<br>
<a href="https://github.com/plaidev/craft-codes/tree/main/craft-functions/notify-other-users">craft-codes/craft-functions/notify-other-users at main · plaidev/craft-codes · GitHub</a></p>
<p>実装内容は、次のとおりです。</p>
<ol>
<li>Craft 接客からユーザーB のuser_id を受け取る</li>
<li>ユーザーB に対してAPI v2 を使ってイベントを送信する</li>
</ol>
<p>Craft Functions作成画面のcode に サンプルコードのindex.js の内容を貼り付け、modules に modules.json の内容を貼り付けます。冒頭に以下の2つを定数に指定します。</p>
<ul>
<li>送信するイベント名
<ul>
<li>ユーザーB に対して送信するイベント名を指定する</li>
<li>イベントには使用できないイベント名があるため<a href="https://support.karte.io/post/44VkfBjO7JdRnDv9YOfbFB">サポートサイト</a>を参考にしてください</li>
</ul>
</li>
<li>シークレット名
<ul>
<li>Craft Secret Manager に登録したSecret名を貼り付ける</li>
</ul>
</li>
</ul>
<pre><code>const EVENT_NAME = ''; // 送信するイベント名を指定する
const SECRET_NAME = ''; // シークレット名を指定する
</code></pre>
<p>イベントを送信するユーザーのIDを指定する際には、アクション設定で記載したJSONのフィールド名と一致させてください。</p>
<pre><code>const userId = data.jsonPayload.data.related_user_id; // イベントを送信するユーザーのIDを指定する
</code></pre>
<h2>7. LINE 接客を作成する</h2>
<p>最後に、ユーザーB に対するLINE 接客を配信するための設定を行います。<br>
LINE 接客を作成する前に、以下LINE 連携の対応を完了させておいてください。</p>
<ul>
<li><a href="https://support.karte.io/post/1xH2Z6UG3EVX7hNkJagwgS">LINE連携 - 初期設定</a></li>
<li><a href="https://support.karte.io/post/6APq6Khn1fLe3rHoUx3QFq">接客サービスでLINE IDとユーザーIDを連携させる</a></li>
</ul>
<p>LINE 連携の設定完了後、接客サービスを作成からLINE 接客を作成します。</p>
<ul>
<li>
<p>接客サービス画面を開く</p>
</li>
<li>
<p>「LINE」のテンプレート一覧から適切なアクションを追加<br>
<img src="https://ik.imagekit.io/plaid/8839a2d0-db19-4a2a-a35b-7602a990e044/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-07-2518.11.08.png" alt="スクリーンショット2023-07-2518.11.08.png"></p>
</li>
<li>
<p>「アクション」</p>
<ul>
<li>配信率: 100%
<ul>
<li>テンプレートに合わせてユーザーB に通知したい内容をアクションの設定で行う</li>
</ul>
</li>
</ul>
</li>
<li>
<p>「配信モード」</p>
<ul>
<li>イベント応答配信</li>
</ul>
</li>
<li>
<p>「対象ユーザー」</p>
<ul>
<li>全員
<ul>
<li>※ 対象ユーザーを絞りたい場合は、条件を指定します</li>
<li>※ 検証中はテスト配信用のセグメントを設定してください</li>
</ul>
</li>
</ul>
</li>
<li>
<p>「対象イベント」</p>
<ul>
<li>「ユーザーB に対して送信したイベント」に対する条件を指定</li>
</ul>
</li>
<li>
<p>保存をする</p>
</li>
</ul>
<p>以上でユーザーB に対するLINE 接客アクションの設定が完了しました。</p>
<h2>実際に動かしてみる</h2>
<p>「ユーザーA が特定のページを閲覧したことをきっかけに関連するユーザーB にLINE で通知する」実装が完成したところで、実際に動作を確認しましょう。</p>
<p>まず、ユーザーA が特定のページを閲覧します。<br>
今回は商品詳細ページを閲覧した際にCraft 接客が実行される設定にしています。<br>
<img src="https://ik.imagekit.io/plaid/604e7611-1dfa-4b43-aa14-7728e8f57e17/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-07-2518.32.32.png" alt="スクリーンショット2023-07-2518.32.32.png"></p>
<p>ユーザーB のユーザーストーリー画面を見るとCraft functions から「notification」イベントが送信されていることが確認できます。<br>
<img src="https://ik.imagekit.io/plaid/42f6e95b-1003-431d-b1ec-bc52fb59a3f3/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-07-261.03.54.png" alt="スクリーンショット2023-07-261.03.54.png"></p>
<p>（※ KARTE ではイベントのライフサイクルが導入され、新規に送信されたカスタムイベントは、対応未設定のイベントとして扱われます。これらのイベントの挙動は暫定的に「解析しない」と同じ状態になっているため、<a href="https://support.karte.io/post/1QYBABpuv97HMqO0MlIE9C">こちら</a>のサポートサイトの状態の変更方法を参考に、イベントの用途に応じた状態を設定してください。）</p>
<p>そして、ユーザーB に対してLINE メッセージが送信されていますね！<br>
時間を見ると、商品詳細ページを閲覧したタイミングで届いていることが確認できます。<br>
<img src="https://ik.imagekit.io/plaid/63dbc9a7-882d-4310-8cd7-76be16b7530a/IMG_1204.png" alt="IMG_1204.png"></p>
<h2>おわりに</h2>
<p>今回は特定のページを閲覧した時をトリガーに LINE に通知を飛ばす方法を紹介しました。<br>
LINE 以外にもAPIが公開されており外部サービスとの連携ができるサービスに対して通知を飛ばすことができるので、あらゆるシーンでの活用ができます。</p>
<p>冒頭お伝えした通り以下のようなサービスでは有効な施策になると思います。</p>
<ul>
<li>サービスの契約者と利用者が異なるような教育系サービス</li>
<li>金融や不動産、BtoBなど顧客に対して担当者がつくサービス</li>
</ul>
<p>KARTE Craft を使ってみたいと思った際には是非一度ご相談くださいませ！</p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！<br>
ぜひ気軽にお問い合わせください。</p>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
<p>↓ PLAIDで働きたい</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>


KARTE Craftを使って「あるユーザーの行動をきっかけに関連する別のユーザーに通知する」方法について紹介します。

KARTE Craftを使ってあるユーザーの行動をきっかけに関連する別のユーザーに通知する

<p>こんにちは、Customer Engineerの池上です！最近は漫画『闇金ウシジマくん』を読み直しています。</p>
<p>さて、先日PLAIDのCustomer EngineerとAPI開発チームを中心に「ソリューション開発オフサイト」を開催しました。<br>
今回はオフサイトの様子と、そこで生まれたソリューションについて紹介します。</p>
<h1>ソリューション開発オフサイトとは？</h1>
<p>このソリューションブログで日々発信している通り、PLAIDが提供するKARTEは単なるSaaSの域を超えて、ソリューション開発基盤として利用できるようになってきました。</p>
<p>たとえば次のような機能です。</p>
<ul>
<li><a href="https://karte.io/product/action/">KARTE Action</a>: Webサイトやネイティブアプリに任意のJavaScriptを配信</li>
<li><a href="https://karte.io/product/datahub/">KARTE Datahub</a>: KARTE上のデータと外部データを組み合わせて自由にSQLで分析・加工</li>
<li><a href="https://ecosystem.plaid.co.jp/product/karte-craft">KARTE Craft</a>: サーバーサイドで実行できるFunctionをNode.jsで自由に開発</li>
</ul>
<p>「ソリューション開発オフサイト」では、そんなソリューション開発基盤としてのKARTEを使って、参加メンバー各自がもくもくとソリューション開発をしました。</p>
<h1>オフサイト会場</h1>
<p>今回の会場はAkasaka Zen Spaceさん。<br>
スタイリッシュな会議室に和室と日本庭園が付いた、快適なレンタルスペースでした。</p>
<p>（※以下、キレイな写真は<a href="https://zen-building.com/">公式サイト</a>より）</p>
<p><img src="https://ik.imagekit.io/plaid/1f2ca545-cae8-448f-8e32-371cee88c50d/17.jpg" alt="17.jpg"></p>
<p><img src="https://ik.imagekit.io/plaid/7cc168d2-fa7f-4b5e-8724-e128df6fcf12/23.jpg" alt="23.jpg"></p>
<h1>当日の様子</h1>
<p>オフサイトには、KARTEの技術サポートやソリューション開発などを担当するCustomer Engineerと、APIやCraftなどの開発を担当するEcosystem APIチームのエンジニアを中心に、総勢13名が参加しました。</p>
<p>まず最初に、各自が「今日作るソリューション」の宣言をしました。ソリューションの種となるアイデアは、元々チーム内で「こんなこともできるよね」と話していたものから、自分で独自に考えてきたものまで様々です。</p>
<p>その後は、各自でもくもくと開発。</p>
<p><img src="https://ik.imagekit.io/plaid/0ee21c0c-97fa-4c42-8360-11c5fa142128/PXL_20230719_013912340.jpg" alt="PXL_20230719_013912340.jpg"></p>
<p>ときには設計の相談や技術的な質問を他のメンバーにぶつけながら、アウトプットを形にしていきます。<br>
赤坂の街にランチに行った後も、少し眠くなりながら開発を続けました。</p>
<p>気分転換で、畳スペースで作業してみたり。</p>
<p><img src="https://ik.imagekit.io/plaid/06377d7e-cc5f-49a0-919c-b08c18dd5c6f/PXL_20230719_013921309.jpg" alt="PXL_20230719_013921309.jpg"></p>
<p>最後に、会場のモニターに投影しながら各自が開発したソリューションについてデモを交えながら発表しました。</p>
<p><img src="https://ik.imagekit.io/plaid/a3086cc6-8fb0-4346-9262-83d26e654c6e/31.jpg" alt="31.jpg"></p>
<p><strong>数時間の開発で実際に見せられるプロトタイプまで作ったメンバー</strong> もいて、「これは売れそう！」とか「もっとこうしたらいいんじゃないか」などの開発談義も盛り上がりました。</p>
<p>オフサイトの後は飲み会に繰り出し、楽しい夜を過ごしました。<br>
僕は一次会で帰りましたが、夜遅くまで楽しく飲んだメンバーもいたようです。</p>
<img width="300" src="https://ik.imagekit.io/plaid/44964d3f-7f6c-4b6c-84b0-9389ad4dc34a/PXL_20230719_113612183.jpg">
<h1>オフサイトで生まれた主なソリューション</h1>
<p>すでにソリューションブログに公開されたいくつかの記事は、今回のソリューション開発オフサイトでの開発がネタ元となっています。</p>
<ul>
<li><a href="https://solution.plaid.co.jp/202307-show-instagram-post">KARTEを使って自社Instagramの投稿を種別で絞り込んでWebサイト上に表示する</a></li>
<li><a href="https://solution.plaid.co.jp/202307-message_freequency">KARTE Messageでユーザー毎に配信頻度をコントロールできるようにしてみた</a></li>
<li><a href="https://solution.plaid.co.jp/202307-embed-google-map">KARTEでWebページの任意の箇所にGoogle Mapを動的表示する</a></li>
</ul>
<p>1日開発するだけでこのような価値あるソリューションが実装できるのは、ソリューション開発基盤としてのKARTEやCraftの非常に魅力的なところです。 <strong>汎用的なユーザー解析基盤やアクション配信基盤の機能に乗っかる形で開発するので、開発者は純粋に「実現したい価値」に集中してちょっとした実装をするだけでよい。</strong></p>
<p>こうしたプロダクト特性は、特に <strong>PLAIDのCustomer Engineerの業務がもつ「作って顧客に見せて実際に売る」まで一気通貫で関われるという面白さ</strong> に直結しています。楽しいですね。</p>
<h1>おわりに</h1>
<p>さて、特に僕も含むCustomer Engineerは、顧客や社内メンバーからの問い合わせを受けることも多く、日常業務の中でまとまった開発時間を確保することが難しいこともあります。</p>
<p>オフサイトで日々の業務を忘れて価値あるソリューションを生み出すことに集中できる時間を、みんな楽しんでいました。<br>
今回生み出したソリューションの種をブラッシュアップして、実際にエンドユーザーに価値を届けるところまでもっていけるよう、頑張っていきます！</p>
<p><img src="https://ik.imagekit.io/plaid/eb8faa7f-5127-4086-856e-8d7ca89d8166/PXL_20230719_085727156.jpg" alt="PXL_20230719_085727156.jpg"></p>
<hr>
<p>プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！<br>
ぜひ気軽にお問い合わせください。</p>
<p>↓ PLAIDで働きたい</p>
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>
<p>↓ パートナー企業になりたい</p>
<ul>
<li><a href="https://ecosystem.plaid.co.jp/">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>


ソリューション開発基盤としてのKARTEを使って参加メンバー各自がもくもくとソリューション開発をする、「ソリューション開発オフサイト」に行ってきました。

「ソリューション開発オフサイト」に行ってきました！

KARTEを使って「Google Mapを埋め込む接客Action」を実装してみました。その導入方法をご紹介します。

KARTEでWebページの任意の箇所にGoogle Mapを動的表示する

<p>みなさまこんにちは、長谷川です！<br>
理想のキーボードを探す旅を長らく続けてまいりましたが、<br>
KeychronのQ2というキーボードでようやくゴールを迎えそうです。</p>
<p>先日は「ソリューション開発オフサイト」に参加してまいりました。<br>
当日の開発成果として、前回の記事にてご紹介した<a href="https://solution.plaid.co.jp/202305-instagram"><strong>KARTEを使ってInstagramの投稿をWebサイト上に自由に表示する</strong></a>よりさらに一歩踏み込んだ、<br>
<strong>投稿の種別付けと絞り込み</strong>という概念と一例をご紹介できればと思います。<br>
お題目は以下の通りの流れで進めて参ります。</p>
<ul>
<li><a href="#usecase">ユースケースについて</a></li>
<li><a href="#condition_example">種別付けの一例</a></li>
<li><a href="#action_example">埋め込み接客の一例</a></li>
<li><a href="#relational_example">投稿どうしの関連付けの一例</a></li>
<li><a href="#further_development">さらなる展開について</a></li>
<li><a href="#offsite">ソリューション開発オフサイトについて</a></li>
</ul>
<h2 id="usecase">ユースケースについて</h2>
<p>そもそも、投稿に対して&quot;種別付け&quot;ができると何が嬉しいのでしょうか？<br>
<a href="https://solution.plaid.co.jp/202305-instagram">前回の記事</a>にて&quot;全ての投稿を取得して、接客としてWebサイト上に自由な形で埋め込む&quot;ところまでは辿り着きましたが、<br>
自分だったらこの後の展開として、&quot;人、モノ、コトの種別を投稿に付与して、埋め込み先(表示する接客)を変えたい&quot;と考えます。<br>
つまり、以下のような接客がWebサイト上に埋め込まれるイメージです。</p>
<ul>
<li><strong>人を表示する接客</strong>: &quot;スタッフさんの自己紹介&quot;のような投稿だけに絞り込んで表示する接客</li>
<li><strong>モノを表示する接客</strong>: 取り扱いのある商品を紹介するような投稿だけに絞り込んで表示する接客</li>
<li><strong>コトを表示する接客</strong>: 商品を使って何をするか？コーディネートやユースケースをスタッフさんが紹介する投稿だけに絞り込んで表示する接客</li>
</ul>
<p>下画像の赤枠部分がそれぞれの埋め込み接客イメージとなります。</p>
<div align="center">
    <img src="https://ik.imagekit.io/plaid/4250fa9d-423b-45cd-9139-67666ba1051c/instaAPI-type_example.png" alt="それぞれの接客イメージ" style="width:1000px;"></img>
</div>
<p>種別を判定するための情報さえ付与すれば、<br>
Instagramに投稿するだけでWebサイト上のコンテンツを更新できると考えると、<br>
何となく便利に使えそうな予感がしませんでしょうか？<br>
さっそく、&quot;<strong>人を表示する接客</strong>&quot;に表示したい投稿に種別付けする処理の一例を次項にてご紹介いたします。</p>
<h2 id="condition_example">種別付けの一例</h2>
<p>投稿の取得から表示までの基本的な流れは<a href="https://solution.plaid.co.jp/202305-instagram">前回の投稿</a>を踏襲して行いつつ、<br>
要所として以下のステップを追加する形で実現できそうです。</p>
<ul>
<li><a href="#instagra_create">Instagram側で投稿を作成する際、定型的な文字列をキャプションに含めておく</a></li>
<li><a href="#extract_cond">Craft Functionで投稿中のキャプションから定型部分を抽出し、種別判定をした上でアクションテーブルにinsertする</a></li>
</ul>
<h3 id="instagra_create">Instagram側で投稿を作成する際、定型的な文字列をキャプションに含めておく</h3>
<p>定型的な文字列の形式はいったん無難に<code>${key}: ${value}</code>の形にしてみましょう。<br>
<strong>投稿の種別</strong> を表すkeyは<code>ContentType</code>とし、<strong>人</strong> の種別を表すvalueは<code>STAFF</code>とします。<br>
せっかくなので、接客として埋め込む上で同時に表示したい基本情報も含めてしまいましょう。<br>
下記Instagram投稿スクリーンショット中の赤枠部分のような感じですね！</p>
<div align="center">
    <img src="https://ik.imagekit.io/plaid/9f9f0b38-eb57-4891-9374-f34065b0f644/instaAPI-ページ1.png" alt="投稿の一例" style="width:400px;"></img>
</div>
<p>余談なのですが、自己紹介文はChatGPTくんが2秒くらいで作ってくれました。<br>
ざっくりしたお願いの仕方だと、出てくるものも当たり障りない無難な感じになりますね…。</p>
<h3 id="extract_cond">Craft Functionで投稿中のキャプションから定型部分を抽出し、種別判定をした上でアクションテーブルにinsertする</h3>
<p>定型部分に投稿種別付けのキモになる<code>ContentType: STAFF</code>が含まれていると仮定して処理していきます。<br>
Instagram投稿中のキャプション全文は、<br>
<a href="https://developers.facebook.com/docs/instagram-api"><strong>Instagram Graph API</strong></a> のエッジ&quot;<a href="https://developers.facebook.com/docs/instagram-api/reference/ig-user/media">media</a>&quot;で指定できる <strong>caption</strong> フィールドで取得できます。<br>
キャプション中の定型部分を処理するイメージは…</p>
<pre><code class="language-javascript">/* Instagram投稿の配列 */
const instagramContentsArray = await getAllInstagramContents(); // Graph APIを通して自アカウントの全投稿を取得

/* 種別と種別に応じた基本情報のkey */
const contentKey = {
    ContentType: &quot;ContentType: &quot;,
    STAFF: [&quot;名前: &quot;, &quot;性別: &quot;, &quot;年齢: &quot;, &quot;店舗: &quot;]
};

/* キャプション中からkeyを指定してvalueを抽出する */
const extractValueByKey = (caption, key) =&gt; { /* 抽出するための文字列処理 */ }

/* キャプション中から定型部分の値を抽出する */
const contentExtractor = (caption) =&gt; {
    const retObj = {
        /* &quot;STAFF&quot;が入ってくる */
        contentType: extractValueByKey(caption, contentKey.ContentType),
        contentValues: []
    };

    contentKey[retObj.contentType].forEach(nKey =&gt; {
        retObj.contentValues.push(extractValueByKey(caption, nKey));
    });

    return retObj;
};

/* 定型部分より抽出された情報を持つInstagram投稿情報の配列 */
const shapedInstagramContents = instagramContentsArray
    .filter(nInstagramContent =&gt;
        /* caption中に&quot;ContentType: &quot;を含む投稿を抽出 */
        nInstagramContent.caption.includes(contentKey.ContentType)
    )
    .map(nInstagramContent =&gt; {
    const extracted = contentExtractor(nInstagramContent.caption);

    /* &quot;STAFF&quot; */
    nInstagramContent.contentType = extracted.contentType;

    /* [&quot;APPAREL STAFF A&quot;, &quot;女&quot;, &quot;25&quot;, &quot;ONLINE SHOP A&quot;] */
    nInstagramContent.contentValues = extracted.contentValues;

    return nInstagramContent;
});
</code></pre>
<p>このような形となるでしょうか。<br>
基本情報配列部分をアクションテーブルにupsertする際は、カンマ区切りの文字列に変換した方が良さそうです。<br>
キャプション中の特定部分以降をJSON文字列として扱ってしまう形の方が楽だったような気もします…。</p>
<h2 id="action_example">埋め込み接客の一例</h2>
<p>上記のような処理を施した情報を使って、<br>
実際に&quot;<strong>人を表示する接客</strong>&quot;を作ってサイトに埋め込んでみると以下のようなイメージとなります。</p>
<div align="center">
    <img src="https://ik.imagekit.io/plaid/d0387dda-846f-43e3-8830-a47d9301eea9/instaAPI-type_embedded.png" alt="埋め込み接客" style="width:650px;"></img>
</div>
<p>実際のInstagramの投稿キャプション中にある定型文字列と、<br>
&quot;<strong>人を表示する接客</strong>&quot;つまり&quot;<strong>ContentType: STAFF</strong>&quot;の投稿のみを表示する接客上の情報の紐付き方は以下のようなイメージです。</p>
<div align="center">
    <img src="https://ik.imagekit.io/plaid/80e9f96c-3c49-46b3-98a7-1787fa7e6aeb/instaAPI-type_relation_1.png" alt="情報の紐付きイメージ" style="width:850px;"></img>
</div>
<p>定型文字列から抽出された情報はただ配列に入った状態で接客に渡ってきますので、<br>
<code>例: [&quot;APPAREL STAFF A&quot;, &quot;女&quot;, &quot;25&quot;, &quot;ONLINE SHOP A&quot;]</code><br>
見せたい形に整えて表示することができますね。<br>
他にも<a href="https://solution.plaid.co.jp/202305-instagram#:~:text=%E4%BD%95%E3%82%82%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%AA%E3%81%84%E5%A0%B4%E5%90%88%E3%81%AF%E6%8A%95%E7%A8%BF%E3%81%AE%E3%83%A6%E3%83%8B%E3%83%BC%E3%82%AFID%E3%81%97%E3%81%8B%E5%8F%96%E5%BE%97%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%9B%E3%82%93%E3%81%AE%E3%81%A7%E3%80%81IG%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E3%82%92%E5%8F%82%E8%80%83%E3%81%AB%E3%81%97%E3%81%AA%E3%81%8C%E3%82%89">Instagram Graph APIを通して取得できる投稿の情報</a>と併せて表示することももちろん可能です！<br>
敢えて文字的な情報は見せないという選択肢も良いですね！</p>
<h2 id="relational_example">投稿どうしの関連付けの一例</h2>
<p>上記のような投稿に対する種別付けと出し分けができたら、<br>
今度は<strong>投稿どうしの関連付け</strong>をして表示する接客が欲しくなります。<br>
要約すると「特定スタッフさんと、そのスタッフさんが投稿したレビューとコーディネートを表示する接客」となるでしょうか。</p>
<p>今回のソリューション開発オフサイトにおいては、残念ながら&quot;<strong>人を表示する接客</strong>&quot;を作成した段階で時間切れとなってしまいました…。<br>
以下はあくまで実現可能と思われる範囲でのアイデアとなりますが、みなさまとシェアできればと思います！<br>
例えば&quot;人、モノ、コト&quot;をそれぞれ&quot;スタッフ紹介、商品紹介、コーディネート紹介&quot;と置き換え、<br>
それぞれに属する概念のInstagram投稿を以下のように用意したとします。</p>
<div align="center">
    <img src="https://ik.imagekit.io/plaid/ef5dfd93-e61b-439e-9a0b-808de9d276bf/instaAPI-type_content_1.png" alt="情報の紐付きイメージ" style="width:1200px;"></img>
</div>
<p>それぞれの投稿どうし関連付けを持たせて、<br>
それを一つの接客で表現するためにデータをどう持たせるかを考えてみます。<br>
例えば以下のような最低限のデータ構造をアクションテーブルに持たせておけば、</p>
<style>
    tr > th { text-align: center; }
    td > pre { color: #fff!important; }
</style>
<table>
    <thead>
        <tr>
            <th>media_id</th>
            <th>content_type</th>
            <th>relational_id</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>00000001</td>
            <td>STAFF</td>
            <td>
                <pre>
{
    "PRODUCT": ["00000002", "00000003"],
    "COORDINATE": ["00000004"]
}
                </pre>
            </td>
        </tr>
        <tr>
            <td>00000002</td>
            <td>PRODUCT</td>
            <td>
                <pre>
{
    "STAFF": ["00000001"],
    "COORDINATE": ["00000004"]
}
                </pre>
            </td>
        </tr>
        <tr>
            <td>00000003</td>
            <td>PRODUCT</td>
            <td>
                <pre>
{
    "STAFF": ["00000001"],
    "COORDINATE": ["00000004"]
}
                </pre>
            </td>
        </tr>
        <tr>
            <td>00000004</td>
            <td>COORDINATE</td>
            <td>
                <pre>
{
    "STAFF": ["00000001"],
    "PRODUCT": ["00000002", "00000003"]
}
                </pre>
            </td>
        </tr>
    </tbody>
</table>
<p>ひとつの&quot;media_id(Instagram投稿のUID)&quot;に対する、別種別に属する別投稿の関連付けは実現できそうです。<br>
&quot;media_id&quot;とJAN_CODEなど、別サービスの概念を関連づけるにはもう少し工夫が必要ですが、<br>
それも上記テーブルに含めてしまうのもアリかな？という感じです。<br>
実際に接客を埋め込むと、以下画像の赤枠部分のようになるイメージです。</p>
<div align="center">
    <img src="https://ik.imagekit.io/plaid/3a46d5a2-a98e-4c9b-bf84-60b7f256206f/instaAPI-type_relation_action_1.png" alt="特定スタッフさんに関連する投稿を表示する接客イメージ" style="width:450px;"></img>
</div>
<p>検証環境サイトがアパレル系を模したものだったため、<br>
今回は&quot;人、モノ、コト&quot;を上記のような形でご紹介いたしました。</p>
<h2 id="further_development">更なる展開について</h2>
<p>本ソリューションの根幹となるのは&quot;Instagramの投稿に定型的な文字列が入っている&quot;という部分ですが、<br>
それを投稿の作成時に人間が担保するのは正直めんどくさいし、間違えそうだよなぁというのが正直なところです。<br>
…では、その定型的な部分を含めて投稿作成をサポートする埋め込み接客をKARTEで作ってしまうのはどうでしょう?<br>
Instagram Graph APIの方には<a href="https://developers.facebook.com/docs/instagram-api/guides/content-publishing?locale=ja_JP">コンテンツ公開API</a>がございます。<br>
そのAPIを利用した&quot;<strong>Instagram投稿を定型的に作成し、コンテンツ公開APIを通して投稿を公開する埋め込み接客</strong>&quot;を作成のうえで、<br>
お手持ちのドメイン上に何らかの認証をかけた空白ページをご用意いただき埋め込んでしまう、というのもひとつのソリューションですね。<br>
投稿の種別や定型部分に含めていた情報を、その投稿の作成時点でKARTE側で管理してしまえば <strong>投稿中に定型的な文字列を含める必要すらない</strong> のです！</p>
<p>もはや実現可能な部分が膨大すぎで、できることベースから実現したいことベースでの進め方に切り替えていきたいタイミングとなってまいりました。<br>
つきましては「InstagramとKARTEでこんなことしてみたい」というアイデアをお持ちの共創パートナーさまを募集しております！！</p>
<h2 id="offsite">ソリューション開発オフサイトについて</h2>
ソリューション開発オフサイトでの成果ご報告ブログのはずが、だいぶ長くなってしまいました…。
<p>今回の会場となった<a href="https://zen-building.com/">Akasaka Zen Spaceさん</a>にお邪魔して思ったこととして、<br>
じつは畳って開発体験の良さに繋がったりするのでは…というのがあります。<br>
やはり座りっぱなしは辛いものがあり、<br>
座椅子なんかと組み合わせて(極論寝そべっていても)ラップトップで開発を進められる環境は助かりますね。<br>
それを許容する風土なんかも重要にはなってきそうですが…！</p>
<p>わたし個人は完全リモート主体でお仕事しており、<br>
リアルタイムでの何気ないコミュニケーションをする機会がめっきり減っているのですが、<br>
誰かの何気ない発言から物事が進んでいく対面ならではの瞬間が久しぶりで、とても楽しかったです！<br>
この輪の中で開発させてもらえるってありがたいな、いいなぁとしみじみ感じました。</p>
<p>今回はこれにて失礼いたします！</p>


KARTE Craftを使って定期取得した自社Instagramアカウントの投稿に種別を付与し、KARTEがWebに配信するアクションで種別ごとに出し分ける方法をご提案します。

KARTEを使って自社Instagramの投稿を種別で絞り込んでWebサイト上に表示する

<p>現在KARTEを利用中のお客様は <a href="https://karte.io/product/journey/">KARTE Journey (β)</a>をご利用いただけます。<br>
通常の接客サービスが利用可能ですので、サーバーサイド接客サービスとして<a href="https://ecosystem.plaid.co.jp/product/karte-craft">KARTE Craft</a>も当然利用可能です。</p>
<p>Craft目線で見た場合、Journeyと組み合わせると下記のメリットがあります。</p>
<ul>
<li>定期的なセグメント解析（Webページのアクセスを起点としない）を経由したCraft Function発火</li>
<li>複数Craft FunctionのチェーンをGUIでわかりやすく視認</li>
</ul>
<p>組み合わせた利用例を実際のシナリオで見てみましょう。</p>
<h1>想定シナリオ</h1>
<ul>
<li>EC/オフライン店舗両者を運営</li>
<li>オフライン店舗で購入後、1日後にお礼メール、7日後にフォローアップのメールを配信したい</li>
<li>KARTE以外に顧客データ取得APIを自前で持っている</li>
<li>KARTE以外にプッシュ通知配信APIを自前で持っている</li>
</ul>
<p>Journeyの構成は下図のようになります。<br>
<img src="https://ik.imagekit.io/plaid/9fd0f0d3-4c4f-45c0-99a2-259e4958275f/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-07-2712.56.25.png" alt="スクリーンショット2023-07-2712.56.25.png"></p>
<p>ポイントとなるのは、画像の「1日以内に <code>offline_buy</code>」と記載のある部分です。<br>
Journeyでは各接客のチェーンをイベントで繋ぐ形になります。<br>
そのため、最初のCraft Functionでは、購入を検知したあとのアウトプットを <a href="https://developers.karte.io/reference/post_v2-track-event-write">event発火API</a>としてあげることで、以降のJourneyへとつなげる事ができます。</p>
<p>下記はoffline_buyを発火するためのCraft Functionのサンプルコードです。</p>
<pre><code class="language-js">import api from 'api';
const karteApiClient = api('@dev-karte/vx.y#zzzzzzzzzzzzz');
const LOG_LEVEL = 'INFO';

// オフライン店舗購入データAPIへのリクエストと仮定
async function requestMyAPI(user_id){
    const res = await fetch('https://example.com/myUserAPI',{
      method: 'POST',
      body: JSON.stringify({
         user_id
       })  
    });
    return res.json();
}

export default async function (data, { MODULES }) {
  const user_id = data.jsonPayload.data.user_id;
  const offlineBuyData  =  await requestMyAPI(user_id);
  
  // 購入データがある場合のみ処理続行
  if(!offlineBuyData) return;

  const { secret } = MODULES;
  const { KARTE_API_TOKEN } = await secret.get({keys: ['KARTE_API_TOKEN']});

  karteApiClient.auth(KARTE_API_TOKEN); 
  await karteApiClient.postV2TrackEventWrite({
    keys: { user_id },
    event: {
      values: {
        buy_data: offlineBuyData,
      },
      event_name: 'offline_buy'
    }
  });
}
</code></pre>
