【Herlock】アプリ開発（HTTP通信） - Intelligent Technology's Technical Blog

こんにちは、石尾です。

前回まで、基本的なUI部品に関して投稿しました。今回は、Herlockによるアプリ開発で、HTTP通信を行う方法について投稿します。

※10/8に、Herlockはパブリックベータ版に移行されました。

HTTP通信サンプル

Herlockのサンプルアプリ「XHR」を使って、HTTP通信を試してみようと思います。
herlock/samples · GitHub
より、XHRのソースファイルをクライアントPCにダウンロードしておきます。

新規プロジェクトの作成で、テンプレートに[default]を選択し、作成します。
メニュー[ファイル][アップロード]より、ダウンロードしておいたファイルをアップロードします。

プロジェクトのファイル構成は、次のようになります。

{プロジェクトルートフォルダ}
│  sample.json
│  main.js
│  README.md
├─app
│      
└─assets
    ├─images
    └─sounds

main.jsのコードは、次のようになります。HTTP通信には、XMLHttpRequestを利用します。ただし、XMLHttpRequestはHerlockのAPIです。基本的にJavaScriptの仕様と同様ですが、responseXMLがないなど一部異なります。詳しくはHerlockのヘルプを参照してください。

//ログ出力用にテキストフィールドを表示します
//stageを用意します
var stage = new Stage( 320, 320 );
addLayer( new Layer( stage ) );

//背景を敷き詰めます
var bg = stage.addChild( new Bitmap( new BitmapData( 1, 1, true, 0xffffffff) ) );
bg.width = stage.stageWidth;
bg.height = stage.stageHeight;

//テキストフィールドを表示します
var logField = new TextField();
logField.text = "log:";
logField.multiline = true;
logField.height = 320;
logField.width = 320;

stage.addChild( logField );

( function( ) {
    "use strict";
    
    //※urlは任意のものに変更して下さい。
    //※尚herlockのwebideのworkspace上のファイルは
    // POSTによる通信を許可していないので注意してください
    var URL = "./sample.json";
    
    //XMLHttpRequestオブジェクトを生成
    var httpGet = new XMLHttpRequest();

    //onreadystatechangeで通信ステータスの変更を待ちます
    httpGet.onreadystatechange = function (){

        //readyState
        //・0：初期化未完了状態
        //・1：ロード中状態
        //・2：ロード完了状態
        //・3：操作可能状態
        //・4：全データ読込完了状態
        if(httpGet.readyState === 4) {
            
            //statusは現在実装面調整中の為0しか返さないので
            //ここで判定していません
            
            logField.appendText("get result=============\n");
            logField.appendText(httpGet.responseText);
            logField.appendText("\n");
            
        }
    };

    //通信を開きます
    //第一引数はHTTPメソッド、第二引数がURLです
    httpGet.open("GET", URL);

    //リクエストを送信します
    httpGet.send(null);

    //XMLHttpRequestオブジェクトを生成
    var httpPost = new XMLHttpRequest();
    var postBody = new FormData();
    postBody.append("hello", "xhr");

    //onreadystatechangeで通信ステータスの変更を待ちます
    httpPost.onreadystatechange = function (){

        //readyState
        //・0：初期化未完了状態
        //・1：ロード中状態
        //・2：ロード完了状態
        //・3：操作可能状態
        //・4：全データ読込完了状態
        if(httpPost.readyState === 4) {
            
            //statusは現在実装面調整中の為0しか返さないので
            //ここで判定していません
            
            logField.appendText("post result============\n");
            logField.appendText(httpPost.responseText);
            logField.appendText("\n");
            
        }
    };

    //通信を開きます
    //第一引数はHTTPメソッド、第二引数がURLです
    httpPost.open("POST", URL);

    //リクエストを送信します
    httpPost.send(postBody);

} )();