読者です 読者をやめる 読者になる 読者になる

Intelligent Technology's Technical Blog

株式会社インテリジェントテクノロジーの技術情報ブログです。

【Herlock】アプリ開発(HTTP通信)

Herlock Android iOS

こんにちは、石尾です。

前回まで、基本的な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);

} )();

アプリの実行イメージは次のようになります。画面にレスポンス結果が表示されます。

このサンプルでは、アプリ内のsample.jsonの内容を表示しています。

{
"hello": "XHR!"
}

※コード上の注意事項にあるように、POSTの場合、Herlockの制限によりworkspace上のファイルにアクセスできないため、レスポンス結果が表示できません。apkファイルをインストールすると、その制限はなく表示できます。

URL設定を外部URLに変更しても、同様にレスポンス結果が表示されます。

var URL = "http://www.yahoo.co.jp";

感想

XMLHttpRequestを知っている方は、簡単にHTTP通信を実装できると思います。
ただ全体的にHerlockのAPIは、拡張したAPIが少なく、ベースとなるAPIを拡張する必要があるなぁと感じています。

次回は、Herlockのライブラリ利用についてレポートしようと思います。