テキスト出力と外部通信を使って「ランキングボード」をつくってみよう

// 接続先のEndpointIDを設定する（自分の設定に合わせて書き換えてください）
const endpoint = new ExternalEndpointId("CCKで登録したEndpointID");

// callExternalの呼び出し間隔（秒数）
const interval = 12;

// ランキングに表示する上位ランカーの数
const top = 3;

// 名前と点数を表示するText View
const names = [$.subNode("Name_1"), $.subNode("Name_2"), $.subNode("Name_3")];
const scores = [$.subNode("Score_1"), $.subNode("Score_2"), $.subNode("Score_3")];

$.onStart(() => {
    // 現在のランキングを取得するため、recordsが空の状態でサーバーにアクセスする
    let request = {type: "rankingSample", records: [], top: top};
    $.callExternal(endpoint, JSON.stringify(request), "syncRanking");

    // ランキングに新しく登録するレコードの配列
    $.state.records = [];

    // 前回のcallExternal呼び出しからの経過時間
    $.state.waitingTime = 0;
});

$.onUpdate(deltaTime => {
    let records = $.state.records;

    // 前回の呼び出しから一定以上の時間が経過していればcallExternalを呼び出す
    let waitingTime = $.state.waitingTime + deltaTime;
    if (waitingTime >= interval) {
        waitingTime = 0;

        // サーバーへのrequestとして「サーバーでの処理分岐用タグ」「追加するレコード」「表示する上位ランカーの数」を設定
        // requestをstringに変換したものをサーバーに送信
        let request = {type: "rankingSample", records: records, top: top};
        $.callExternal(endpoint, JSON.stringify(request), "syncRanking");

        // サーバーに送信済みのレコード情報をクリア
        $.state.records = [];
    }
    $.state.waitingTime = waitingTime;
});

$.onInteract(player => {
    // 新しいレコードを追加
    // レコードとして「ユーザー名」「スコア」を記録
    let records = $.state.records;
    let record = {name: player.userDisplayName, score: $.getStateCompat("owner", "score", "integer")};
    records.push(record);
    $.state.records = records;
});

// callExternal実行後、サーバーからの応答を受け取ったときに呼び出される処理
$.onExternalCallEnd((response, meta, errorReason) =>
{
    // サーバーとの通信でエラーが発生した場合にその理由を表示
    if (response == null) {
        $.log("callExternal ERROR: " + errorReason);
        return;
    }

    // metaを照合して処理を分岐
    // metaの値はcallExternalの第2引数に渡したもの
    if (meta === "syncRanking") {
        // サーバーからのresponseのJSONをパース
        let parsedResponse = JSON.parse(response);

        // responseの情報でtextViewを更新
        for(let i = 0; i < top; i++)
        {
            names[i].setText(parsedResponse.rankers[i].name);
            scores[i].setText(parsedResponse.rankers[i].score);
        }
    }
});

$.onStart(() => {

let request = {type: "rankingSample", records: records, top: top};
$.callExternal(JSON.stringify(request), "syncRanking");

const interval = 12;

let waitingTime = $.state.waitingTime + deltaTime;
if (waitingTime >= interval) {
    waitingTime = 0;

$.onInteract(player => {
    let records = $.state.records;
    let record = {name: player.userDisplayName, score: $.getStateCompat("owner", "score", "integer")};
    records.push(record);
    $.state.records = records;
});

$.onExternalCallEnd((response, meta, errorReason) =>

if (response == null) {
    $.log("callExternal ERROR: " + errorReason);
    return;
}

if (meta === "updateRanking") {

let parsedResponse = JSON.parse(response);

names[i].setText(parsedResponse.rankers[i].name);
scores[i].setText(parsedResponse.rankers[i].score);

function doPost(e) {
  // 受け取ったデータを取得
  var params = JSON.parse(e.postData.getDataAsString());


  // 受け取ったデータからrequestの内容を取得
  var request = JSON.parse(params.request);


  var response = "";
 
  // requestの内容に応じて処理を分岐
  if (request.type === "rankingSample") {
    // データ保存用のスプレッドシートを取得
    const file = SpreadsheetApp.getActiveSpreadsheet();
    const sheet = file.getSheetByName("RankingSampleSheet");


    // スプレッドシートのデータがある一番下の行
    var row = sheet.getLastRow();


    // 新しいレコードをスプレッドシートの下に追加
    request.records.forEach(function(record){
      var name = record.name;
      var score = record.score;


      row += 1;
      sheet.getRange(row, 1).setValue(name);
      sheet.getRange(row, 2).setValue(score);
    });
   
    // スプレッドシートをスコア順に並べ替え
    if (row > 0) {
      var range = sheet.getRange(1, 1, row, 2);
      range.sort({column: 2, ascending: false});
    }


    // ランキングに反映する上位ランカーの数
    var top = request.top;


    // ランク圏外のデータを削除
    if (row > top) {
      var range = sheet.getRange(top + 1, 1, row - top, 2);
      range.clear();
    }


    // 上位ランカーの情報をスプレッドシートから取得し、返信用データを作成
    var topRankersInSheet = sheet.getRange(1, 1, top, 2).getValues();
    var topRankers = topRankersInSheet.map((ranker) => ({name: ranker[0], score: ranker[1]}));
    var data = {rankers: topRankers};


    response = JSON.stringify(data);
  }


  // 返信用のデータを作成
  var output = ContentService.createTextOutput();
  output.setMimeType(ContentService.MimeType.JSON);


  // Cluster Creator Kitで発行されたトークン
  var token = PropertiesService.getScriptProperties().getProperty('token');


  // 返信の内容にstringにしたデータと認証用のトークンを設定
  output.setContent(JSON.stringify({ response: response, verify: token }));
 
  return output;
}

function doPost(e) {

var params = JSON.parse(e.postData.getDataAsString());

var request = JSON.parse(params.request);

if (request.type === "rankingSample") {

const file = SpreadsheetApp.getActiveSpreadsheet();
const sheet = file.getSheetByName("RankingSampleSheet");

var topRankersInSheet = sheet.getRange(1, 1, top, 2).getValues();
var topRankers = topRankersInSheet.map((ranker) => ({name: ranker[0], score: ranker[1]}));
var data = {rankers: topRankers};


response = JSON.stringify(data);

var output = ContentService.createTextOutput();
output.setMimeType(ContentService.MimeType.JSON);


var token = PropertiesService.getScriptProperties().getProperty('token');


output.setContent(JSON.stringify({ response: response, verify: token }));


return output;