こんにちは、Customer Engineerのgamiです！最近、藤子・F・不二雄のSF短編集を読み始めました。

さて、先日「アンケート結果をリアルタイムで表示してみた」という記事が公開されました。記事の内容としては、下記のような「回答後に集計結果がリアルタイム表示されるアンケート」をCraft Functions + Craft kvsで実装するというものでした。
スクリーンショット2023-09-2510.13.28.png

実は、こうした「項目別に何らかの数値をカウントする」という用途の場合、Craft kvsよりも先日リリースされた Craft Counter の方が適しています。

特に複数人がほぼ同時にリクエストを送ってくる可能性のある場合、Craft Counterの方が高いパフォーマンスを発揮でき、リクエストに失敗するリスクが軽減されます。

そこで今回は、Craft kvsの代わりにCraft Counterを使って「回答後に集計結果がリアルタイム表示されるアンケート」を実装する方法について紹介します。

アウトプットイメージ

最終的なアウトプットイメージは、先日の記事と同様です。私が検証したアンケート接客サービスでは、 ~~スタイル実装をサボって~~ 便宜的に次のような表示を実現しました。

スクリーンショット2023-09-2510.19.26.png

構成図は次の通り。
スクリーンショット2023-09-2510.23.41.png

API設計

今回は、Craft Functionsを使って接客サービスのJavaScriptから利用できる「アンケート集計API」を実装する形になります。リクエストとレスポンスの内容は、次のように設計しました。

read時

リクエスト

パラメータ	サンプル値	説明
action	`"read"`	read時は'read'固定
enqueteId	`"a1234567890b1234567890c1"`	アンケートを区別するID。今回は接客サービスIDを利用
choiceIds	`["apple", "banana", "cherry"]`	全選択肢IDのリスト

レスポンス

パラメータ	サンプル値	説明
result	`{ apple: 42, banana: 24, cherry: 8}`	取得した集計結果
error	-	エラー

write

リクエスト

パラメータ	サンプル値	説明
action	`"write"`	write時は'write'固定
enqueteId	`"a1234567890b1234567890c1"`	アンケートを区別するID。今回は接客サービスIDを利用
selectedChoiceId	`"apple"`	ユーザーが選択した選択肢ID

レスポンス

パラメータ	サンプル値	説明
result	`"write succeeded."`	リクエスト成功時のメッセージ
error	-	エラー

手順

手順は次の通りです。

Craft Functionsを作成する
Craft Functionsのエンドポイントを作成する
Functionと連携するアンケート接客を作成する

順番に説明します。

1. Craft Functionsを作成する

まずは接客サービスからのリクエストを受け付けるCraft FunctionsのFunctionを作成します。サンプルとなるソースコードは、GitHubで公開しています。

craft-codes/craft-functions/realtime-enquete at main · plaidev/craft-codes

作成手順は次の通りです。

[Craft > ファンクション] からファンクションを新規作成
サンプルコードからコードやモジュールをコピー
Functionを有効化して保存

サンプルコードでは次の機能が実装されています。

read時
- Craft Counterから選択肢ID毎の回答数を取得し、適切な形に加工した上で「アンケート集計結果」としてレスポンスする
write時
- ユーザーが回答した選択肢IDの回答数をCraft Counter上でincrementする

なお今回の実装では、集計結果の取得（read）と回答データの送信（write）を別々のリクエストとして処理することにしています。集計結果の取得には数秒程度の時間を要するので、アンケート表示時に予めread用のリクエストを飛ばしておくことで、アンケート回答後に素早くアンケート集計結果を表示できるようになります。readとwriteでFunction実行が2回発生するのでFunction実行数は2倍消費してしまいますが、今回はユーザー体験を重視してこのような実装にしています。

また、readとwriteで2つのFunctionに分けて実装するというパターンも考えられますが、管理のしやすさを考えて今回は1つのFunctionにread/writeの両方の処理を実装しています。

2. Craft Functionsのエンドポイントを作成する

Craft Functionsが作成できたら、アンケート接客で実行出来るようにするためのエンドポイントを作成します。

作成したファンクションの編集画面で [設定] タブを開く
[エンドポイント] 欄の [作成] ボタンを押す

作成したエンドポイントのURLは接客サービス側の実装で利用するので手元に控えておきます。

3. Functionと連携するアンケート接客を作成する

最後に、上記で作成したお手製アンケート集計APIを利用するアンケート接客サービスを実装します。細かい接客サービスの設定方法は割愛して、アクションのHTML/JavaScriptのサンプル実装を掲載します。

アンケートアクションのJavaScript例

実装のポイント
- 配信直後にCraft側にreadリクエストを送信
- ユーザーがアンケート回答したらwriteリクエストを送信
- readリクエストとアンケート回答の両方が完了したタイミングでステートを変更し、集計結果を表示
  - このとき、表示のために次の計算をフロントエンドで実施している
    - ユーザーが回答した選択肢を+1する
    - 全選択肢の回答数の総計を計算する

var CRAFT_ENDPOINT_URL = 'https://t.karte.io/hook/xxxxxxxxxxx/craft/xxxxxxxxxxxxxx';

// 設問の選択肢群を登録
var ALL_CHOICES = [
    { id: "apple", name: "りんご" },
    { id: "banana", name: "バナナ" },
    { id: "cherry", name: "さくらんぼ" }
];
widget.setVal('ALL_CHOICES', ALL_CHOICES);

var fetchResultDone = false; // すでにreadが完了しているか？
var selectedChoiceId = null; // 回答した選択肢ID
widget.method('sendChoice', sendChoice);
widget.setVal('result', null);

// 結果取得に時間がかかるので、回答前にprefetchする
fetchResult();

widget.show();

// read
function fetchResult() {
    _post({
        enqueteId: '#{campaign_id}',
        action: 'read',
        choiceIds: ALL_CHOICES.map(function(choice) { return choice.id }),
    })
    .then(function(body) {
        console.log('read done: '+JSON.stringify(body));
        var result = body.result;
        fetchResultDone = true;
        widget.setVal('result', result);

        // 結果取得完了時にすでに回答済みの場合、ユーザー回答分を加算して即座に結果表示
        if (selectedChoiceId) {
            calcResult(selectedChoiceId);
            widget.setState(2);
        }
    });
}

// write
function sendChoice(choice) {
    console.log('sendChoice start');
    selectedChoiceId = choice;
    // 回答時に結果取得完了済みの場合、ユーザー回答分を加算して結果表示
    if (fetchResultDone) {
        calcResult(selectedChoiceId);
        widget.setState(2);
    }
    // 回答データの送信は非同期に行う
    _post({
        enqueteId: '#{campaign_id}', // アンケートIDには接客サービスIDを利用
        action: 'write',
        selectedChoiceId: choice,
    })
    .then(function(body) {
        console.log('write done: '+JSON.stringify(body));
    });
}

function calcResult(choice) {
    var result = widget.getVal('result');
    // 取得した結果にユーザーの回答を加算
    result[selectedChoiceId]++;
    // 合計値を計算
    result.__total = Object.keys(result).reduce(function(total, key) {
        total += result[key];
        return total;
    }, 0);
    widget.setVal('result', result);
}

function _post(body) {
    return fetch(CRAFT_ENDPOINT_URL, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(body),
    }).then(function(res) {
        if (res.ok) {
            return res.json();
        } else {
            return;
        }
    });
}

アンケートアクションのHTML例

実装のポイント
- 全選択肢IDのリストが格納された定数ALL_CHOICESをkrt-forでループして選択肢毎のボタンを描画
- Craft側から取得した集計結果を動的変数resultに格納して結果表示に利用

<div class="wrapper">
    <section krt-if="state == 1">
        <div class="card _edged border-4">
            <div class="card-body">
                <!-- 画像 -->
                <figure class="card-image" style="width:128px">
                    <img src="#{image}" alt="">
                </figure>

                <!-- 見出し -->
                <h1 class="card-heading text-center">
                    #{heading}
                </h1>

                <!-- 詳細テキスト -->
                <p class="card-detail">
                    #{detail}
                </p>

                <!-- ボタン -->
                <div class="card-button">
                    <button krt-for="choice in ALL_CHOICES" krt-on:click="sendChoice(choice.id)">{{choice.name}}</button>
                </div>
            </div>
        </div>
    </section>
    <section krt-if="state == 2">
        <div class="card _edged border-4">
            <div class="card-body">
                <!-- 画像 -->
                <figure class="card-image" style="width:128px">
                    <img src="#{image}" alt="">
                </figure>

                <!-- 見出し -->
                <h1 class="card-heading text-center">
                    #{heading}
                </h1>

                <!-- 詳細テキスト -->
                <p class="card-detail">
                    #{detail}
                </p>

                <div class="card-button">
                    <p krt-for="choice in ALL_CHOICES">{{choice.name}}: 約{{Math.round(result[choice.id] / result.__total * 100)}} % （{{result[choice.id]}}件）</p>
                </div>
            </div>
        </div>
    </section>
</div>

本来はエラーハンドリングやローディング処理の実装もすべきですが、今回は実装例ということで割愛しています。

実際に動かしてみる

実際に動作を確認してみましょう。

Craft側の検証

記事構成の都合上、接客サービス作成までまとめて紹介しましたが、本来はまずCraft Functions自体の動作を手元のプログラム等から確認するのがおすすめです。同時アクセス時の負荷検証も、手元のプログラムから同時多発的にリクエスト送信を試みることで実現できます。

たとえば次のようなNode.jsプログラムをjsファイルとして保存しローカルのnodeコマンドで実行することで、Craft側の検証ができます。

// Craft側検証用のjsファイル
const request = require('request');

// 共通
const ENDPOINT = '';
const d = {
    enqueteId: 'dummyCampaignId',
}
const allChoiceIds = ["apple", "banana", "cherry"];

// read用
d.action = 'read';
d.choiceIds = allChoiceIds;

// write用
// d.action = 'write';
// d.selectedChoiceId = 'apple'; // コメントアウトするとランダムに選択される

// 実行回数
let cnt = 10;
while(cnt > 0) {
    exec_req(d);    
    cnt--;
}

function exec_req(d) {
    const b = {};
    b.action = d.action;
    b.enqueteId = d.enqueteId;

    if (d.action === 'write') {
        b.selectedChoiceId = d.selectedChoiceId || getRandomChoiceId(allChoiceIds);
    } else {
        b.choiceIds = d.choiceIds;
    }

    request({
      url: ENDPOINT,
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(b)
    }, (err, res, body) => {
        if (b.action === 'write') {
            console.log(`action: ${b.action}, enqueteId: ${b.enqueteId}, selectedChoiceId: ${JSON.stringify(b.selectedChoiceId)},  result: ${body}`);
        } else {
            console.log(`action: ${b.action}, enqueteId: ${b.enqueteId}, result: ${body}`);
        }
    });
}

function getRandomChoiceId(allChoiceIds) {
    return allChoiceIds[Math.floor(Math.random() * allChoiceIds.length)];
}

接客サービスの検証

Craft側の動作に問題がなければ、接客サービスの表示確認をしてみましょう。次のように回答後に集計結果が表示できるはずです。

スクリーンショット2023-09-259.46.59.png

おわりに

今回はCraft kvsの代わりにCraft Counterで「回答後に集計結果がリアルタイム表示されるアンケート」を実装する方法について紹介しました。

実際にCraft kvsと比較してみても、Craft Counterは「高速に何らかの値をincrementする」という処理に対してかなりのパフォーマンスを発揮します。Craft kvsと比べると保持できる値の柔軟性は落ちますが、ぜひこうした用途ではCraft Counterを選択するのを強くおすすめします。

なお、今回はアンケート毎に1つの設問しかない状態を想定しました。そのためCraft Counterのkeyの持ち方を「アンケートID×選択肢ID」にしています。たとえば「1つのアンケートに複数の設問を設けたい」といったカスタマイズがしたければ、Craft Counterのkeyの持ち方を「アンケートID×設問ID×選択肢ID」にすることで対応できます。

ぜひCraft Counterを使って複雑なアンケート施策を実現してみてください！

プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！
ぜひ気軽にお問い合わせください。

↓ パートナー企業になりたい

CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem

↓ PLAIDで働きたい

「回答後に集計結果がリアルタイム表示されるアンケート」をCraft Counterで実装する