AIRアプリケーションを公開するためのメモ

こんにちはこんにちは！
AIRアプリは完成しましたか！

はい！前回の日記のつづきなんです…！
(JavaScriptでかんたんAIRアプリに挑戦)

ぼくはもうすぐ、なにか完成しちゃいそうな感じですよ！

でも、その前に…完成したやつを公開する為の手順が必要ですよね！
なんかちょっとややこしそうななので、これもメモしときます！

今回は自分用メモみたいな感じで、わりといいかげんなんだけど、参考になれば…！

はい！

完成したAIRアプリを公開するためには.airファイルにする必要があるよ。
.airファイルになるとインストーラ付きのパッケージになって、ダブルクリックで起動できるようになって嬉しいね。

アプリとしての体裁を整える

やっぱり世間体も大事です！
アイコンとかも、ちょっといいやつつくっておこう。

AIRアプリ設定用xmlの中の<application>に以下を追記したよ。

<programMenuFolder>test1</programMenuFolder>
<icon>
	<image16x16>icons/test16.png</image16x16>
	<image32x32>icons/test32.png</image32x32>
	<image48x48>icons/test48.png</image48x48>
	<image128x128>icons/test128.png</image128x128>
</icon>

それに合わせて、アイコンも４種類つくったよ。

programMenuFolder っていうのは、インストールの時スタートメニューにフォルダを作るかどうかってやつかな。
もちろんこっちはWindowsだけに効く設定だよ。

airファイルをつくるためには証明書が必要

なので、オレオレ証明書をつくるよ。
コマンドプロンプトで作業ディレクトリに移動して adt コマンドっていうのを使うよ。

C:\home\AIR\test1>adt -certificate -cn hmcysign 1024-RSA hmcy.pfx password

「hymcysign」はオレオレ証明書の名前。適当でいいよ。
「hmcy.pfx」は証明書のファイル名。適当でいいよ。
「password」は証明書のパスワード。適当でいいよ。

でもぼくはこの時、なんかJavaのなにかが足りないってエラーがでたよ。なにこれ。

Error: could not open `C:\Program Files\Java\jre1.6.0_03\lib\i386\jvm.cfg'

なので Java をダウンロードしてきてインストールしなおしたよ。
そしたらちゃんとできた。

.airファイルの作成。

C:\home\AIR\test1>adt -package -storetype pkcs12 -keystore hmcy.pfx -storepass password test1.air test1.xml test1.html AIRAliases.js

環境に合わせて変更するのは以下の感じだよ。

「hmcy.pfx」 ... さっき作ったオレオレ証明書
「password」 ... 証明書のパスワード
「test1.air」 ... 作りたい.airファイル名
「test1.xml」 ... 作ったAIRの設定用xmlファイル
「test1.html」 ... ここから後は必要なhtmlとかjsとか必要なファイルを並べる。画像用のサブディレクトリなんかを指定してもいいね(その場合は配下ファイルまで指定しなくていいよ)

運が良ければこれで.airファイルが完成するよ。
できあがったら test1.air をダブルクリックしてみようね。
AIRアプリのインストーラー、起動したかな？

ちゃんと動くか
ちゃんとしたディレクトリにインストールされたか
アイコン類がかっこいい感じに表示されてるか
コントロールパネルの「プログラムの削除」から、ちゃんとアンインストールできるか

などなどをチェックだよ。

インストールページ(Badge)の作成

Webページからワンクリックで詐欺みたいにAIRアプリをインストールできる「Badge」ってやつをつくってみるよ。

適当にBadge用の作業ディレクトリをつくる。
Adobe から Badgeのサンプルをダウンロード

Badge作業ディレクトリに、サンプルの中の３つのファイルをコピー

AIRInstallBadge.swf
expressinstall.swf
swfobject.js

サンプルを参考にして、新しくhtmlファイルをつくる。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test1 Installer</title>
	<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}

	body {
		background: #fff;
	}

	#flash {
		width: 215px;
		height: 180px;
	}
	</style>
	<!-- SWFObject embed by Geoff Stearns geoff@deconcept.com http://blog.deconcept.com/swfobject/ -->
	<script type="text/javascript" src="swfobject.js"></script>
</head>

<body>
	<div id="flash">
		<strong>Please upgrade your Flash Player</strong>
		This is the content that would be shown if the user does not have Flash Player 6.0.65 or higher installed.
	</div>

	<script type="text/javascript">
		// version 9.0.115 or greater is required for launching AIR apps.
		var so = new SWFObject("AIRInstallBadge.swf", "Badge", "215", "180", "9.0.115", "#FFFFFF");
		so.useExpressInstall('expressinstall.swf');

		so.addVariable("airversion", "1.0");
		so.addVariable("appname", "test1\n");
		so.addVariable("appurl", "http://www.mysite.com/sampleApp.air");

		so.addVariable("appid", "Hamachiya2.test1");
		so.addVariable("pubid", "");

		so.addVariable("appversion", "0.5"); // AIR application version

		// these parameters are optional:
		so.addVariable("imageurl", "demoImage.jpg"); // URL for an image (JPG, PNG, GIF) or SWF to display in the badge (205px wide, 170px high)
		so.addVariable("appinstallarg", "installed from web"); // passed to the application when it is installed from the badge
		so.addVariable("applauncharg", "launched from web"); // passed to the application when it is launched from the badge
		// so.addVariable("helpurl", "help.html"); // optional url to a page containing additional help, displayed in the badge's help screen
		so.addVariable("hidehelp", "true"); // hides the help icon if "true"
		so.addVariable("skiptransition", "false"); // skips the initial transition if "true"
		so.addVariable("titlecolor", "#AAAAAA"); // changes the color of titles
		so.addVariable("buttonlabelcolor", "#FF0000"); // changes the color of the button label
		so.addVariable("appnamecolor", "#99CCFF"); // changes the color of the application name if the image is not specified or loaded

		// these parameters allow you to override the default text in the badge:
		so.addVariable("str_err_airswf", "<u>Running locally?</u><br/><br/>The AIR proxy swf won't load properly when this demo is run from the local file system."); // overrides the error text when the AIR proxy swf fails to load

		so.write("flash");
	</script>
</body>
</html>

このhtmlをブラウザで表示して、ちゃんとブラウザからインストールできるかテストしようね。

はてなダイアリーじゃない人はここまででokだよ。

はてなダイアリーにBadgeを貼れるようにする

はてなダイアリーは JavaScript とか Flash がつかえないから、そのままじゃ Badge を貼れないよ。
だから、ぼくが前に書いた「はてなダイアリーに(対応外の)ブログパーツを貼る - ぼくはまちちゃん！(Hatena)」を参考にして、ブログパーツとして貼り付けるよ。

必要なファイルを Google Page Creator にアップロード。

AIRInstallBadge.swf
expressinstall.swf
swfobject.js
test1.air

さっきの html を google ガジェット用の xml に書き換えるよ。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="test1 installer">
  </ModulePrefs>
  <Content type="html">
     <![CDATA[

	<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}

	body {
		background: #fff;
	}

	#flash {
		width: 215px;
		height: 180px;
	}
	</style>
	<!-- SWFObject embed by Geoff Stearns geoff@deconcept.com http://blog.deconcept.com/swfobject/ -->
	<script type="text/javascript" src="http://hamachiya2.googlepages.com/swfobject.js"></script>

	<div id="flash">
		<strong>Please upgrade your Flash Player</strong><br />
		This is the content that would be shown if the user does not have Flash Player 6.0.65 or higher installed.<br />
		<strong><a href="http://get.adobe.com/jp/flashplayer/" target="_blank">Get Flash Player</a>.</strong>
	</div>

	<script type="text/javascript">
		// version 9.0.115 or greater is required for launching AIR apps.
		var so = new SWFObject("http://hamachiya2.googlepages.com/AIRInstallBadge.swf", "Badge", "215", "180", "9.0.115", "#FFFFFF");
		so.useExpressInstall('http://hamachiya2.googlepages.com/expressinstall.swf');

		so.addVariable("airversion", "1.0");
		so.addVariable("appname", "tet1\n");
		so.addVariable("appurl", "http://hamachiya2.googlepages.com/test1.air");

		so.addVariable("appid", "Hamachiya2.test1");
		so.addVariable("pubid", "");

		so.addVariable("appversion", "0.5"); // AIR application version

		// these parameters are optional:
		// so.addVariable("imageurl", "test1.png"); // URL for an image (JPG, PNG, GIF) or SWF to display in the badge (205px wide, 170px high)
		so.addVariable("appinstallarg", "installed from web"); // passed to the application when it is installed from the badge
		so.addVariable("applauncharg", "launched from web"); // passed to the application when it is launched from the badge
		// so.addVariable("helpurl", "help.html"); // optional url to a page containing additional help, displayed in the badge's help screen
		so.addVariable("hidehelp", "true"); // hides the help icon if "true"
		so.addVariable("skiptransition", "false"); // skips the initial transition if "true"
		so.addVariable("titlecolor", "#AAAAAA"); // changes the color of titles
		so.addVariable("buttonlabelcolor", "#FF0000"); // changes the color of the button label
		so.addVariable("appnamecolor", "#99CCFF"); // changes the color of the application name if the image is not specified or loaded

		// these parameters allow you to override the default text in the badge:
		so.addVariable("str_err_airswf", "<u>Running locally?</u><br/><br/>The AIR proxy swf won't load properly when this demo is run from the local file system."); // overrides the error text when the AIR proxy swf fails to load

		so.write("flash");
	</script>

     ]]>
  </Content>
</Module>