ロックオン開発チームブログ -Lockon Knowledge Repositories-

CategoryApollo

Apollo体験

はじめまして、あだちです。

今流行のApolloをさわってみました。
Apolloというのはadobeが開発中のデスクトップアプリ用の実行環境です。

・アルファ公開したアドビ「Apollo」を早速使ってみた
・「これがApolloだ」 Adobeの次世代デスクトップアプリ用ランタイムリリース

では簡単なサンプルアプリを作りながらApolloを見ていきたいと思います。

今回はMP3を再生させるアプリを作ってみることにします。
下記ソースをファイル名MP3.mxml、文字コードUTF-8で保存します。 
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:Script>
    <![CDATA[
        import flash.events.*;
        import flash.media.*;
        import flash.net.*;

        public var sound:Sound;
        public var soundchannel:SoundChannel;

        public function play():void {
            sound = new Sound();
            sound.addEventListener(Event.COMPLETE, completeHandler);
            sound.load(new URLRequest('sample.mp3'));
       }

        public function completeHandler(evt:Event):void {
            soundchannel = sound.play();
        }

        public function stop():void {
            soundchannel.stop();
        }
    ]]>
    </mx:Script>
<mx:Button label="Play" click="play()" />
<mx:Button label="Stop" click="stop()" />
</mx:ApolloApplication>
次にコンパイル。

amxmlc -default-size 150 150 -default-frame-rate=30 -default-background-color=0xCCCCCC MP3.mxml

-default-sizeで縦横のサイズを、-default-frame-rateでフレームレート、-default-background-colorで背景色を設定します。
コンパイルが終わるとMP3.swfというファイルが出来ます。

次に、アプリケーションの設定ファイルであるADFを作成します。 
<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/apollo/application/1.0.M3" appId="lockon.apollo.sample.mp3play" version="1.0">

    <properties>
        <name>MP3 Play</name>
        <publisher>Lockon Apollo Sample</publisher>
        <description>mp3 play</description>
        <copyright>(c) LOCKON</copyright>
    </properties>

    <rootContent
        systemChrome="none"
        transparent ="true"
        visible     ="true">MP3.swf</rootContent>

</application>
これをファイル名MP3.xml、文字コードUTF-8で保存します。

最後にapolloアプリのインストーラであるairファイルを作ります。
このとき、再生したいmp3ファイルをsample.mp3というファイル名で保存しておいてください。

adt -package MP3.air MP3.xml MP3.swf sample.mp3

command.PNG

MP3.airが生成されるので実行するとインストールされます。
Play、Stopボタンでmp3が再生されるかと思います。
mp3play.PNG


いかがでしたでしょうか。
今回はmxmlでApolloアプリを作成してみましたが、
他にもHTMLやJavaScript、ActionScriptでの開発も可能です。

まだアルファ版ということでいくつかの機能が使えなかったりセキュリティ面で不十分な部分もあるのですが
今後のバージョンアップが非常に楽しみです。
by: ちー 2007年04月13日 17:40 | | コメント (0) ｜トラックバック (0) このエントリーをはてなブックマークする このエントリーを含むはてなブックマーク

Apolloでjsのゲームを作ってみよう

お久しぶりです。 先週はmxmlでApolloアプリを作成していましたので、せっかくなので今回はHTML+JavascriptでApolloアプリを作成して見たいと思います。

JavaScriptで以下のような簡単なゲームを作成して見たいと思います。
【概要】
　・画面に「上」「下」「左」「右」という文字が表示され、表示された方向キーをタイプする。
まず、ゲーム用のファイル TypingGame.html を作成します。 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<title>Lockon Typing Game</title>

<script type="text/javascript">
<!--
var tid;	// 時間計測
var Max;	// 制限時間
var nowCount;	// 経過時間
var point;		// ポイント

// ゲームスタート
function StartTimer(){
	Max = 10;
	nowCount = Max;	
	point = 0;
	SetTimer();
	SetTarget();
}

// keyDownイベントに関連付け
document.onkeydown = GetKeyCode;
function GetKeyCode(){
	// キーコード取得
	var ieKey = event.keyCode;
	
	// 表示されているデータを正しく押下した場合は+1点、間違えた場合は-1点
	if(document.frmMain.txtTarget.value == ieKey){
		point = point + 1;
	}else{
		point = point - 1;
	}
	document.frmMain.txtPoint.value=point;
	SetTarget();
}

// 37:左 38:上 39:右 40:下
function SetTarget(){
	var arrImage = new Array("./img/left.jpg","./img/top.jpg","./img/right.jpg","./img/bottom.jpg");
	var arrValue = new Array("37","38","39","40");
	nTemp = Math.round(Math.random()*(arrImage.length-1));
	document.frmMain.txtTarget.value=arrValue[nTemp];
	document.frmMain.imgTarget.src=arrImage[nTemp];
}

// 時間計測
function SetTimer(){
	document.frmMain.txtTime.value=nowCount;
	nowCount -= 1;
	if (nowCount < 0){
		clearTimeout(tid);
		
		// 得点表示
		alert('Your Score: '+point+' pt');		
		point=0;
		document.frmMain.txtPoint.value=point;
	
	}else{
		tid=setTimeout('SetTimer()',1000);
	}
}

//-->

</script>

</head>
<body>
<h1>Typing GAME</h1>
<form name="frmMain">
<img src="./start.jpg" name="imgTarget">
<input type="hidden" value="" name="txtTarget"><br>
score:<input type="text" value="" name="txtPoint" style="width:30">pt<br>
time:<input type="text" value="" name="txtTime" style="width:30"><br>
<input type="button" value="start" onclick="StartTimer();">
</form>
	
</body>
</html>

画面イメージ
kaki_07042001.JPG

次に、アプリケーションの設定ファイルであるADFを作成します。
これは先週説明しているのと同様に作成します。詳しくは こちら

最後にApolloアプリを作成します。 >adt -package TypingGame.air TypingGame.xml TypingGame.html 作成されたファイルをインストールすると、デスクトップアプリとして利用できます。 kaki_07042002.JPG

これで一応完成なのですが、これだけではなんとも味気ないので、少し装飾を施します。

Apolloのサンプルを見ていただければ分かるのですが、JavaScriptフレームワークとして「Ext 1.0」 が採用されております。
・Apolloのサンプルで使われた、美しきJavaScriptフレームワーク「Ext 1.0」
・EXTサンプル ということなので、今回作成したゲームもこれを用いてちょっとかっこよくしてみます。
初めに、こちらからExtファイルをダウンロードします。
次に、先ほど作成したファイルにこれを組み込んでいきます。
まず、Extを利用するのに必要なファイルを読み込みます。 
<!-- jsファイルの読み込み -->
<script type="text/javascript" src="ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="ext/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>

<!-- cssファイルの読み込み -->
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext/resources/css/ytheme-aero.css" />
ちなみに、ytheme-aero.css は見え方が Windows Aero 風になるというだけなので、読み込まなくても大丈夫です。
とりあえず、得点表示を Extフレームワークを用いて表示させて見ます。
これはかなり簡単です。
// 得点表示
alert('Your Score: '+point+' pt');
を
// Extのダイアログで点数を出力
Ext.MessageBox.alert('Your Score', +point+' pt');
と書き換えるだけで動作します。
kaki_07042003.JPG

次にボタンをクリックすることによってゲームが表示されるように、ダイアログ化してみます。
まずは、body部を以下のように書き換えます。 
<body>
<h1>Typing GAME</h1>
<input type="button" id="gameStart" value="Game Start" /><br /><br />

    <!-- ゲームダイアログ表示 ここから -->
    <div id="hello-dlg" style="visibility:hidden;">
	    <div class="x-dlg-hd">Game Dialog</div>
	    <div class="x-dlg-bd">
		    <div id="center" class="x-layout-inactive-content" style="padding:10px;">
                <p>
				<form name="frmMain">
				<img src="./img/start.jpg" name="imgTarget">
				<input type="hidden" value="" name="txtTarget"><br>
				score:<input type="text" value="" name="txtPoint" style="width:30">pt<br>
				time:<input type="text" value="" name="txtTime" style="width:30"><br>
				</form>
				</p>
		    </div>
	    </div>
	</div>
    <!-- ゲームダイアログ表示 ここまで -->
	
</body>
基本的には div により表示とレイアウトを制御しています。
また、div の id はExt固有のものを割り当ててあげる必要があります。

そして、Extダイアログ制御用のJavascriptを記述してあげます。 
// ゲームレイアウト
var GameLayout = function(){
    var dialog, btnStart;
    
    return {
        init : function(){
             btnStart = Ext.get('gameStart');
             
             // Game Startボタンのクリックイベントに関連付け
             btnStart.on('click', this.showDialog, this);
             
        },
        
        showDialog : function(){
        	// ダイアログが起動していない場合のみ処理する
            if(!dialog){ 
                dialog = new Ext.LayoutDialog("hello-dlg", { 
                        width:350,			// ダイアログの横幅
                        height:250,			// ダイアログの縦幅
                        shadow:true,		// 影表示
                        minWidth:300,		// ダイアログの横幅最小値
                        minHeight:200,		// ダイアログの縦幅最小値
	                    center: {}			// ゲーム表示枠
                });
                
                dialog.addButton('Start', StartTimer);			// startボタンを表示
                dialog.addButton('Close', dialog.hide, dialog);	// closeボタンを表示
                
                var layout = dialog.getLayout();
	            layout.add('center', new Ext.ContentPanel('center'));
            }
            
            // ゲームダイアログを表示する
            dialog.show(btnStart.dom);
        }
    };
}();

// onDocumentReadyイベントに関連付けを行う
Ext.EventManager.onDocumentReady(GameLayout.init, GameLayout, true);

これで完成です。 後はこれを先ほどと同じようにパッケージングしてApolloアプリとしてあげればよいのですが、今回利用した全てのファイル指定してあげる必要があるので注意してください。

>adt -package TypingGame.air TypingGame.xml TypingGame.html ext img
※ 画像はimgフォルダにまとめました。

これで完成です。
さっきよりはちょっとはマシになったのではないでしょうか。
kaki_07042004.JPG
完成品はこちら

結局、Apolloの紹介というかExtの紹介のような感じになりましたが、 最近はJavascrpitのフレームワークがたくさん出てきていますので、 これからのApolloは結構期待できるかもしれません。
by: カッキー 2007年04月22日 19:33 | | コメント (0) ｜トラックバック (0) このエントリーをはてなブックマークする このエントリーを含むはてなブックマーク

Apolloでファイル操作

お久しぶりです、goyaです。
引き続き、今回もApolloネタです。

前回、前々回はmxml、HTML+javascriptによるアプリ作成だったので
今回は大本命のFlash(swf)からApolloアプリを作成してみたいと思います。

せっかくなので今までFlashでは出来なかったローカルファイルへのアクセス
をつかった簡単なメモ帳を作ってみます。

■まず最初に、ActionScript3.0で記述したfile.asを作成し、UTF-8で保存します。
（単純にファイルの読み込みと書き込み機能がついたフォームを作成）

package {
    import flash.display.*;
    import flash.text.*;
    import flash.filesystem.*;
    import flash.events.*;
   
    //ファイルアクセス
    public class file extends Sprite {
        private var textField:TextField;//テキストフィールド
        
        //コンストラクタ
        public function file() {
            //画面の描画
            var child:Sprite = new Sprite();
            child.graphics.beginFill(0xffffff);
            child.graphics.drawRect(0,0,240,240);
            child.graphics.endFill();
            addChild(child);


            //テキストフィールドの追加

            textField=addTextField(child,"");

            textField.x=10;

            textField.y=10;



            //ファイル読み込み

            readHandler();



            //書き込みボタンの追加

            addButton(child,"書き込み",writeHandler,  10,40);

        }



        //テキストフィールドの追加

        private function addTextField(doc:DisplayObjectContainer,

            text:String):TextField {

            var textField:TextField=new TextField();

            doc.addChild(textField);

            textField.width=200;

            textField.height=20;

            textField.text      =text;//テキスト

            textField.selectable=true;//選択可

            textField.border    =true;//ボーダー

            textField.type      =TextFieldType.INPUT;//入力

            return textField;

        }



        //ボタンの追加

        private function addButton(doc:DisplayObjectContainer,

            text:String,handler:Function,x:int,y:int):TextField {

            var button:TextField=new TextField();

            doc.addChild(button);

            button.text           =text;                  

            button.autoSize       =TextFieldAutoSize.LEFT;//サイズ

            button.selectable     =false;                 //選択を不可

            button.border         =true;                  //ボーダー

            button.background     =true;                  //背景色

            button.backgroundColor=0xdddddd;

            button.addEventListener(MouseEvent.CLICK,handler);

            button.x=x;

            button.y=y;

            return button;

        }



        //ファイルの書き込み

        private function writeHandler(evt:MouseEvent):void {

                //デスクトップ/test/test.txtにファイルを保存

                var file:File=File.desktopDirectory.resolve("test/test.txt");

                var fs:FileStream=new FileStream();

                fs.open(file,FileMode.WRITE);

                fs.writeUTFBytes(textField.text);

        }

        

        //ファイルの読み込み

        private function readHandler():void {

                //ファイル読み込み

                var file:File=File.desktopDirectory.resolve("test/test.txt");

                var fs:FileStream=new FileStream();

                if(file.exists) {

                        fs.open(file,FileMode.READ);

                        textField.text=fs.readUTFBytes(fs.bytesAvailable);

                }

        }



    }

}

■次にfile.asからswfを作成します。
(通常のFlashのパブリッシュのようなものです。)

コマンドラインから以下のコマンドを実行します。

>amxmlc -default-size 240 240 -default-frame-rate=30 -default-background-color=0xCCCCCC file.as

これでエラーが無ければswfが作成されるはずです。

次に、アプリケーションの設定ファイルであるADFを作成します。
これは前々回に説明しているので省略いたします。
詳しくはこちらをご覧下さい。


■最後にApolloアプリを作成(airファイル)するコマンドを実行して完成です。

>adt -package file.air file.xml file.swf

■画面イメージはこんな感じになります。

file.jpg


Apolloアプリ完成品はこちら

今までWEB上(Flash)では出来なかったこともApolloでは簡単に出来てしまいますので
今後面白いデスクトップアプリケーションが次々と生まれてくるかもしれませんね。

by: ゴーヤ 2007年05月07日 08:57 | | コメント (0) ｜トラックバック (0) このエントリーをはてなブックマークする このエントリーを含むはてなブックマーク
Copyright(c) LOCKON CO.,LTD. All Rights Reserved.