こんにちは、Customer Engineerの道畑です！
リモートワークのお供は無印良品の「コーンスナックチョコ」です！

さて、KARTEにはアンケートテンプレがありますが、
テンプレの通りに使っていると「リアルタイムでの結果表示」ができず、「おしいんだよな〜」って思ったことありませんか？
Datahubを使用して特定期間に集計した結果の表示はできるのですが、リアルタイムとなるとひと手間もふた手間も対応が必要でした。

しかし、それがひと手間くらいで実現できるようになりました。
そう、KARTE Craftならね(言いたいだけ)。

ということで、今回はCraftを使ったアンケート結果のリアルタイム表示について紹介します。

全体像

実現する処理の全体像は、次の通りです。
画像にも記載していますが、実際のコードの内容とはちょっとだけ差がある形で表現しています。
わかりやすく雰囲気を掴んでいただきたく、直感的なフローで記載しています。
差のある部分については次項「4」の手順にて記載します。
Untitled(1).jpg

実装手順

実装の手順は次の通りです。
手順としては多いのですが、記述するコードはあまり多くはありません。
そう、KARTE Craftならね()。

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

順番に説明します。

1.アンケート接客を作成する

まず、画面に表示させるアンケート接客を用意します。
今回は「ユーザーに聞く > アンケート > プルダウン」のテンプレを使用しました。

スクリーンショット2023-07-2610.07.53.png

2.アンケート結果をCraft KVSに保存するためのCraft Functionsを作成する

次に、Craft Functionsを用意します。
Craft Functionsに記述するコードのポイントは次の2つです。

Craft KVSに保存すること
Craft KVSからデータを取得する

下記、サンプルコードを参考に実装してみてください。
サンプルコード内では「1」が「updateKVS」に、「2」が「getKVS」にそれぞれ対応しています。
1つのCraft Functionsから両方を実行するので、「リクエストされている処理がどちらなのか」を判定してから合致する処理を実行するように記述しています。

サンプルコード(CraftのJavaScript)

const LOG_LEVEL = "ERROR";

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

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

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

  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("start updateKVS");

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

  if (value[enqueteId] == null) {
    for (let i = 1; i <= 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: '<=',
    unixtimeMs: now
  });

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

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 > 0;
  const isGetReq = Object.keys(queryValue).length > 0;

  let requestType = "";
  let enqueteId = "";
  let choiceIndex = "";
  let maxIndex = "";

  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 === ""){
    return;
  }

  if (requestType === "POST") {
    await updateKVS(kvs, logger, enqueteId, choiceIndex, maxIndex);
  } else {
    const kvsData = await getKVS(kvs, logger, enqueteId);
    return kvsData;
  }
}

※KARTE Craftとは？という方は、こちらもご参照ください。

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

Craft KVSに保存するためのCraft Functionsが作成できたら、アンケート接客で実行出来るようにするためのエンドポイントを作成します。
「エンドポイント設定」タブから「作成」を押します。
このエンドポイントを使用することで接客側から実行できるようになります。

スクリーンショット2023-08-2312.17.38.png

4.アンケート接客とCraft Functionsを連携させる

ここが実装時に工夫が必要なポイントでした。
「全体像」に記載した図をおさらいすると、
アンケート接客がKARTE Craftを実行してCraft KVSにデータを保存し、結果をアンケート接客に戻す、というものでした。

しかし、この構造で実装した場合、「KARTE Craft」のすべての処理が終わるまでアンケート結果が得られないということになります。
アンケート回答して5秒後に回答結果が得られる、というイメージです。
これだと回答結果を見る前に閉じてしまいますね。

そこで、今回の実装は次の図のように、アンケート回答前にその時点のアンケート結果を取得し、取得した件数に回答内容を反映させて表示させる、という処理にしています。
Craft KVSにデータを保存する処理と、Craft KVSからデータを取得し、画面に表示する処理を直列ではなく並列とし、スムーズな画面描画を実現しています。

Untitled(2).jpg

接客のJavaScriptをカスタマイズして対応します。
こちらのポイントは次の3つです。

「2」のエンドポイントを実行して接客表示のタイミングでアンケート結果を取得する
「2」のエンドポイントにアンケート結果を送って保存する
アンケート結果に対して、今入力した結果も加算して画面に表示する

こちらも次のサンプルコードを参考に実装してみてください。
サンプルコード内では「1」が「getCraft」、
「2」が「widget.method("submit", function ()」の「sendCraft」まで、「3」は「sendCraft」以降が対応しています。

※なお、コード内に記載のある「#{enquete_id}」は、テンプレートから変数追加したアンケート固有のIDとなります。

サンプルコード(接客のhtml)

<div class="karte-temp-whole">
    <div class="karte-temp-state1" krt-if="state==1">
        <i class="karte-temp-close karte-close karte-temp-hover" krt-if="#{close.use}"></i>
        <div class="karte-temp-card">
            <div class="karte-temp-mainvisual"><img src="#{state1.mainvisual}" alt="#{state1.mainvisual_alt}" /></div>
            <div class="karte-temp-wrap">
                <div class="karte-temp-title">#{state1.title}</div>
                <div class="karte-temp-description">#{state1.description}</div>
                <div class="karte-temp-form">
                    <div class="karte-temp-select">
                        <select krt-model="answer1" options="pulldowns" id ="pd">
                            <option value="">回答を選択してください</option>
                            <option krt-for="pulldown in pulldowns" :value="pulldown">{{pulldown}}</option>
                        </select>
                        <i class="karte-temp-arrow"></i>
                    </div>
                    <div krt-if="!sendable" class="karte-temp-off">#{state1.off}</div>
                    <input krt-if="sendable" class="karte-temp-on karte-temp-hover" type="submit" value="#{state1.on}" krt-on:click="submit()" />
                </div>
            </div>
        </div>
    </div>
    <div class="karte-temp-state2" krt-if="state==2">
        <i class="karte-temp-close karte-close karte-temp-hover" krt-if="#{close.use}"></i>
        <div class="karte-temp-card">
            <div class="karte-temp-mainvisual"><img src="#{state2.mainvisual}" alt="#{state2.mainvisual_alt}" /></div>
            <div class="karte-temp-wrap">
                <div class="karte-temp-title">#{state2.title}</div>
                <div class="karte-temp-description">#{state2.description}
                <p style="text-align:left">▼現在の回答状況</p>
            <div class="bar-container">
                <p style="text-align:left">もってる</p>
                <div id="bar0" class="bar" style="width: 30%;"></div>
                <p style="text-align:left">もってない</p>
                <div id="bar1" class="bar" style="width: 50%;"></div>
            </div>
        </div>
            <br><div class="karte-temp-btn karte-close karte-temp-hover">#{state2.btn}</div>
            </div>
        </div>
    </div>
</div>

サンプルコード(接客のJavaScript)

if ("#{track_state_changed}" === '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("pulldowns", stringOptions);

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

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

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

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

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

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

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

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

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

    widget.setState(2);

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

    }, 100);

});

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

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

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

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

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

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

}

widget.show();

実際に動かしてみる

上記まで実装できたら実際にアンケートに回答してみましょう！
回答結果がリアルタイムで表示されることを確認出来ると思います。

イメージ：
スクリーンショット2023-08-2311.30.44.png
スクリーンショット2023-08-2311.31.19.png
スクリーンショット2023-08-2311.31.36.png

おわりに

今回はKARTE Craftを利用したアンケート結果のリアルタイム表示を紹介しました。
長文となってしまいましたが、KARTE Craftや接客のカスタマイズの一歩としていかがでしょうか。

ぜひ皆さんも、実装してみてください！

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

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

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

↓ PLAIDで働きたい

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