More than 5 years have passed since last update.

HTMLによるAdobe AIR開発お試しメモ(Mac)

Posted at 2014-05-02

HTML+jQueryにてAirアプリ作成検証。

##1.準備するもの

AIR SDK ( http://www.adobe.com/devnet/air/air-sdk-download.html )
jQuery ( http://jquery.com/ )

cp  AIRSDK_Compiler.tbz2  /
cd /
tar zxfv AIRSDK_Compiler.tbz2

##2.環境構築

mkdir /test-app

cd /test-app
touch Main.html
touch app.xml
touch load.html

cp /AIRSDK_Compiler/frameworks/libs/air/AIRAliases.js /test-app
cp /Users/y-fujisaki/Downloads/jquery-1.10.1.js

##3.コード作成

1.app.xmlへの記述

<application xmlns="http://ns.adobe.com/air/application/3.9"> 
 <id>air.jp.test.html.FullScreen</id>
 <versionNumber>1.0.0</versionNumber>
 <filename>FullScreenTest</filename>
 <initialWindow>
 <content>Main.html</content>
 <visible>true</visible>
<fullScreen>true</fullScreen> 
 </initialWindow>
</application>

1'.app.xmlへの記述の説明

//このアプリに必要な AIR ランタイムのバージョンを指定
<application xmlns="http://ns.adobe.com/air/application/3.9">  

//アプリケーションを識別するためのアプリケーションID 一意の文字列にする <id>air.jp.test.html.FullScreen</id>

//アプリのバージョン。インストーラーからは意味は持たない
 <versionNumber>1.0.0</versionNumber>
//アプリケーションインストール後の名前
 <filename>FullScreenTest</filename>
//表示される最初のWindowsの設定
 <initialWindow>
//アプリケーションのメインコンテンツファイルの URL
 <content>Main.html</content>
//アプリケーションの初期ウィンドウの作成後すぐに表示可能にするかど
 <visible>true</visible>
//fullスクリーン
<fullScreen>true</fullScreen> 
//縦横幅指定
 <width>600</width>
 <height>600</height>
 </initialWindow>

</application>

2.Main.htmlへの記述

ボタンを押すたびに外部ファイルを読み込む

<!DOCTYPE html>
<html> 
<head> 
<title>Fullscreen Mode</title> 
<script language="JavaScript" type="text/javascript"> 
function setDisplayState() { 
    window.nativeWindow.stage.displayState = 
        runtime.flash.display.StageDisplayState.FULL_SCREEN_INTERACTIVE; 
} 
</script> 
<script src="AIRAliases.js" />
<script src="jquery-1.10.1.js"></script>
<script type="text/javascript">
$(function() {
	$('#button01').click(function() {
		$.ajax({
			   type: 'GET',
			   url: 'load.html',
			   dataType: 'html',
			   success: function(data) {
				   $('#sample01').append(data);
			   },
			   error:function() {
				   alert('問題がありました。');
			   }
		});
	});
});
</script>
</head>
<body onload="setDisplayState();"> 
<h2>jQueryで別ページにある要素を読込</h2>
<ul id="sample01"></ul>
<p><a href="#" id="button01">ボタン</a></p>
</body>
</html>

3.load.htmlへの記述

<li>読み込みテスト</li>

##4.デバッグ

/AIRSDK_Compiler/bin/adl /test-app/app.xml 

#アプリが起動する

##5.パッケージ化

1.証明書作成

adt -certificate -cn SelfSign 1024-RSA /test-app/test.p12 password

#例の場合、パスワードは「password」のところ

2.パッケージ化

cd /test-app
adt -package -storetype pkcs12 -keystore test.p12 FullScreen.air app.xml .

#フォルダ内にFullScreen.airが作成される

【参考】
http://melancholy.raindrop.jp/wordpress/?p=137
http://www.webopixel.net/javascript/308.html
http://melancholy.raindrop.jp/wordpress/?p=137
http://help.adobe.com/ja_JP/AIR/1.1/devappshtml/WS5b3ccc516d4fbf351e63e3d118666ade46-7e06.html
http://help.adobe.com/ja_JP/air/build/WSfffb011ac560372f2fea1812938a6e463-8000.html#WSfffb011ac560372f2fea1812938a6e463-7ff6

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up