Cubism SDK‎ > ‎プラットフォーム‎ > ‎WebGL‎ > ‎

コールバックについて

  コールバック

JavaScriptでは関数の引数に関数を渡すことができます。引数として渡した関数は呼び出した関数から呼び出されます。
これをコールバックと言い、引数として渡した関数をコールバック関数と言います。


  コールバックの使用例

指定した時間待ってからアラートをだす
JavaScriptのSetTimeoutを用いて1秒(1000ミリ秒)後にHelloと表示されるプログラムは次のように書けます。
1
2
3
setTimeout(function() {
    alert("Hello");
}, 1000);
function() {...}部分がコールバック関数になっています。

JSON形式のファイルを読み込んで、その値を表示する
JSON形式のファイルdata.jsonをXMLHttpRequestを使って読み込みJSONオブジェクトに変換して値を表示します。
   data.json 
1
2
3
{
    "message" : "Hello World!"
}

   JavaScript 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function loadJson(path, callback) {
    var http_request = new XMLHttpRequest();
    http_request.open("GET", path);
    http_request.onreadystatechange = function() {
        if (http_request.readyState === 4 && http_request.status === 200) {
            var type = http_request.getResponseHeader("Content-Type");
            if (type === "application/json") {
                callback(JSON.parse(http_request.responseText));
            }
        }
    };
    http_request.send(null);
}
 
loadJson("data.json", function(data) {
    alert(data.message);
});

JavaScriptの8行目でコールバック関数を呼び出しています。この時与えられた引数JSON.parse~は15行目のdataに渡されます。


  SDKでの使用例

複数のモデルを表示する場合、一体目のモデルの読み込みが完了してから二体目のモデルを読み込む必要があります。
SDKに同梱されているサンプルSampleApp1では一体目のモデルのloadにコールバック関数を設定し、その中で二体目のモデルのロードを行っています。
   LAppLive2DManager.js - 60行目~ 
60
61
62
63
64
65
66
// 一体目のモデル
this.createModel();
this.models[0].load(gl, LAppDefine.MODEL_HARU_A, function() {
    // 二体目のモデル
    thisRef.createModel();
    thisRef.models[1].load(gl, LAppDefine.MODEL_HARU_B);
});



Comments