Herlockで作るiOSアプリ(もちろんAndroidも!) – デバッグ編 –

Herlockで作るIOSアプリ(もちろんAndroidも!) – 準備編 –の続きです。

ビルドして端末確認が一番良いのですが、Herlockのビルドはクラウド上で処理なので待ち時間が発生します。
一通りの動作確認はデバッグアプリを利用するほうが良いでしょう。
ちなみにIDEはChromeで操作するほうが安定しています。
safariだとちょっと微妙でした。

デバックアプリのインストール

作成済みのプロジェクトでIDEを起動して下さい。
デバックアプリのダウンロードをクリックしてアプリのダウンロード画面を開きましょう。

QRリーダーをインストールしている方はQRコード読み取りから簡単にストアへアクセス出来ます。

デバックする

[アプリ側の設定です]
起動するとHerlockのログイン画面が表示されるのでログインして下さい。
ログイン後にプロジェクトの選択画面になるので、デバックするプロジェクトを選択します。

IDEに接続するアプリ側のIPアドレスを確認しましょう。
画面を左へスワイプすると上部にIPアドレスが表示されるので、IDE側へ登録します。

[IDE側の設定です]
デバックのコンソール設定を開いてIPアドレスを入力して下さい。

アプリで確認したIPアドレスを設定します。

main.jsはまだ未修正なので前回と同じままです。

var stage = new Stage( 320, 640 );
addLayer( new Layer( stage ) );
var textField = new TextField();
textField.autoSize = "center";
textField.defaultTextFormat = new TextFormat( null, 36, 0xffffff );
textField.text = "Hollo World.";
stage.addChild( textField );

アプリをリロードして確認して下さい。
問題なくデバックできました。

リロード方法

デバック画面を左へスワイプします。

フッターを左へスワイプします。

メニューが表示されるのでリロードします。

画面遷移コードの確認

せっかくなのでメニュー表示からゲーム画面へ遷移するまでのコードを記述してデバックアプリで確認してみましょう。
requirejsなどは使わずにmain.jsに全て記述してます。
1136pxと960pxの背景画像、ゲーム画面を準備して下さい。
170×90サイズのボタンを2つ準備します。

• 1136サイズのTOP背景
• 960サイズのTOP背景
• 1136サイズのゲーム背景
• 960サイズのゲーム背景
• 170×90サイズのスタートボタン
• 170×90サイズのトップへ戻るボタン

画像の準備が終わったらアップロードしましょう。

コードを記述していきます。
お試しなので端末の回転対応などは追加していません。
APIドキュメントを見ると対応出来そうなので本格的に作りこむときはAPIドキュメントを参考にすると良いでしょう。
また、好みもありますが各シーンの管理を考えるとrequirejsは必須のような気がします。

/*
基本設定
*/
var config = (function(){
    var height = (window.outerHeight<=960) ? 960 : 1136;
    return {
        height : height,
        background : {
            top : "assets/images/bg_top_" + height + ".png",
            game : "assets/images/bg_game_" + height + ".png"
        },
        button : "assets/images/button_"
    }
})();

/*
背景画像の準備とステージ追加
*/
var stage = new Stage(640,config.height);
addLayer( new Layer( stage ) );

/*
画面遷移の管理
*/
var Scene = (function(stage){
    //stageに追加されるobject
    var sprite_image_bg,sprite_button;
    /*
    TOP画面の描画
    */
    var top = function(){
        //Game画面のオブジェクトを削除する
        stage.removeChild(sprite_image_bg);
        stage.removeChild(sprite_button);
        //TOP画面の表示
        var image_button = new Image(config.button + "start.png");
        image_button.onload = function() {
            sprite_button = new Sprite(170,90);
            sprite_button.x = 117;
            sprite_button.y = 500;
            sprite_button.addChild( new Bitmap( new BitmapData( image_button ) ) );
            // ボタンイベントの設定
            sprite_button.addEventListener( "touchTap", function( event ) {
                //ゲーム画面の描画
                game();
            }, false );
            //背景画像の描画
            image_bg = new Image(config.background.top);
            image_bg.onload = function(){
                //背景画像の描画
                sprite_image_bg = new Bitmap( new BitmapData( image_bg ) );
                stage.addChild(sprite_image_bg);
                //ボタンの描画
                stage.addChild(sprite_button);
            };
        }
    };
    /*
    ゲーム画面の描画
    */
    var game = function(){
        //TOP画面のオブジェクトを削除する
        stage.removeChild(sprite_image_bg);
        stage.removeChild(sprite_button);
        //ゲーム画面の表示
        var image_button = new Image(config.button + "top.png");
        image_button.onload = function() {
            sprite_button = new Sprite(170,90);
            sprite_button.x = 117;
            sprite_button.y = 500;
            sprite_button.addChild( new Bitmap( new BitmapData( image_button ) ) );
            // ボタンイベントの設定
            sprite_button.addEventListener( "touchTap", function( event ) {
                //ゲーム画面の描画
                top();
            }, false );
            //背景画像の描画
            image_bg = new Image(config.background.game);
            image_bg.onload = function(){
                //背景画像の描画
                sprite_image_bg = new Bitmap( new BitmapData( image_bg ) );
                stage.addChild(sprite_image_bg);
                //ボタンの描画
                stage.addChild(sprite_button);
            };
        }
    }
    //外部へ公開するAPI
    return {
        top : top,
        game : game
    }
})(stage);

//アプリの起動
Scene.top();

デバックアプリをリロードして確認してみてください。
準備に時間がかかりましたが、一度環境を設定するとあとはAPIの学習のみなので頑張ってアプリを作ってみたいですね!

好きなエディタを使いたい方はWebDAVに対応しているのでローカルで書いてクラウド経由でIDEに反映、デバックアプリで確認も可能です。