Herlockで作るiOSアプリ(もちろんAndroidも!) – 開発環境整備編 –

Herlockで作るiOSアプリ(もちろんAndroidも!) – デバック編 –の続きです。

WebIDEで全て完結するのも魅力的ですが、はやり使い慣れたエディタやIDEで開発するほうが作業が捗ります。
HerlockはWebDAVに対応しているのでMacのローカルにHerlockのプロジェクトを読み込んで最近お気に入りのAdobe Edge Codeで開発を進められるように準備します。
ついでにrequirejsを読み込んでコードを整理してみましょう！

MacにWebDAVを設定する

Herlockへログインしてダッシュボードに遷移すると、プロジェクト選択画面にWebDAVのURLが表示されているのでコピーしておきます。

ここからはMac側の操作です。
Finderメニューの移動からサーバーへ接続を選択して下さい。

HerlockでコピーしたWebDAVのURLをサーバーURLへ貼り付けて接続をクリックして下さい。

接続確認の画面が表示されるので、Herlockのアカウント情報を入力して下さい。

認証が完了するとHerlockのプロジェクトがFinderへ表示されます。
次回接続時は同じ手順で「サーバーへ接続」を選択すると前回の情報が残っているので再度接続して下さい。
抵抗が無ければパスワードもキーチェーンに登録しておくと自動で認証するので作業が少し楽になります。
デスクトップへ表示したい場合はFinderの環境設定で「接続中のサーバー」へチェックへ入れるとデスクトップに表示されます。

requirejsを読み込む

Herlockへログインしてrequirejsを設定するプロジェクトのIDEを開いて下さい。
IDEメニューのライブラリからrequirejsを選択してプロジェクトに読み込んで下さい。
＊Herlock上で動作させるために改変されたバージョンのrequirejsです。かならずIDEメニューから読み込んで下さい。

動作確認

せっかくなのでローカルで編集して確認しましょう！
好きなエディタで編集してみてください。

• main.js
• app/config.js
• app/scene.js
• app/start.js

を追加してコードを記述していきます。

(function(){
    "use strict";
    var loader = new Script( "lib/requirejs/require.min.js" );
    loader.onload = function() {
		require.config( {
            baseUrl: ".",
            paths: {
                'config' : 'app/config',
                'scene' : 'app/scene'
            }
        });
        require(["app/start"]);
    }
})();

/* 基本設定 */
define(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_"
    }
});

/* 画面遷移の管理 */
define(['config'],function(config){
    var 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,
        setStage : function(_stage){
			stage = _stage;
        }
    }
});

/* アプリケーションの開始 */
define(['config','scene'],function(config,scene){
	//背景画像の準備とステージ追加
	var stage = new Stage(640,config.height);
	addLayer( new Layer( stage ) );
	//ゲーム起動
    scene.setStage(stage);
    scene.top();
});

整理が完了したので動作確認してみましょう。
問題なく起動したのが確認できたと思います。
scene.jsが冗長的なので改善の余地がありそうですが、requirejsでモジュールパターンを導入したので簡単に整理できそうです。
例)scene/top.js、scene/game.jsなど画面ごとにモジュール化する。

HerockにはScene管理のライブラリがあるので画面が多くなりそうな場合は利用してみたいと思います。