<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Churadesign &#187; air</title>
	<atom:link href="http://www.churadesign.com/tag/air/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.churadesign.com</link>
	<description>system &#38; web design</description>
	<lastBuildDate>Sun, 24 May 2009 13:38:58 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.2</generator>
		<item>
		<title>AIR SDKとFlex SDKではじめてのAIRアプリケーションを作る</title>
		<link>http://www.churadesign.com/2008/05/29/air-sdk%e3%81%a8flex-sdk%e3%81%a7%e3%81%af%e3%81%98%e3%82%81%e3%81%a6%e3%81%aeair%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e4%bd%9c%e3%82%8b/</link>
		<comments>http://www.churadesign.com/2008/05/29/air-sdk%e3%81%a8flex-sdk%e3%81%a7%e3%81%af%e3%81%98%e3%82%81%e3%81%a6%e3%81%aeair%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e4%bd%9c%e3%82%8b/#comments</comments>
		<pubDate>Thu, 29 May 2008 07:04:29 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Article (記事)]]></category>
		<category><![CDATA[air]]></category>
		<category><![CDATA[flex]]></category>

		<guid isPermaLink="false">http://www.churadesign.com/?p=38</guid>
		<description><![CDATA[はじめに OSXとテキストエディタを使ってはじめてのAIRアプリケーションを作成してみましょう。AirとはFlashやAjaxなどweb技術を用いてデスクトップ用のアプリケーションを作成するためのフレームワークです。 Airの特徴として、ブラウザ上で動作しているアプリケーションで実現するには難しい、デスクトップからファイルをDrag&#38;Dropしたり、ローカルファイルシステムへのアクセスなどOSの機能を利用することもできます。 またAirで作成されたアプリケーションはWindows、OSX、Linuxで動作するためより幅広いクライアント環境で動作させることができます。 Airを作成するためのSDKはadobeが無料で公開しており、Flashアプリケーションを作成するためのFlexもオープンソース化されたことにより無料で開発環境が用意できます。 さらにFlexBuilderという有料のIDEも用意されているためVisualStudioやEclipseに慣れた開発者の方はこちらを購入するとよいと思います。 今回はIDEは使用せずにテキストエディタとコマンドラインで開発しています。 ここではAdobeのドキュメントに従って半透明なウィンドウにHelloWorldと表示させるアプリケーションを作りながらFlexとAirのSDKの使い方とアプリケーション開発の流れを紹介しています。 完成アプリケーションはこのようになります。 開発環境を準備する ここではOSX環境で説明していますが、WindowsやLinuxでも基本は同じです。 FlexSDKとAIR SDKをダウンロードします。 AIR_SDKディレクトリとflex_sdk_3ディレクトリをそれぞれ/Applicationsディレクトリにコピーします。 Pathに各ディレクトリのbinを設定します。 ここでは.bashrcに次のように追加しました。 export PATH="........ /Applications/flex_sdk_3/bin:\ /Applications/AIR_SDK/bin/" ターミナルを立ち上げコマンドラインから &#62;adl -help &#62;amxmlc -help が実行できればAIRとFlexの開発環境が整いました。 AIRアプリケーション記述ファイル作成 HelloWorld-app.xmlというファイル名で、次のようなアプリケーション記述ファイルを作成します。 [sourcecode language="xml"] samples.flex.HelloWorld 0.1 HelloWorld HelloWorld.swf true none true 400 200 [/sourcecode] &#8230; <a href="http://www.churadesign.com/2008/05/29/air-sdk%e3%81%a8flex-sdk%e3%81%a7%e3%81%af%e3%81%98%e3%82%81%e3%81%a6%e3%81%aeair%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e4%bd%9c%e3%82%8b/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<h3>はじめに</h3>
<p>OSXとテキストエディタを使ってはじめてのAIRアプリケーションを作成してみましょう。AirとはFlashやAjaxなどweb技術を用いてデスクトップ用のアプリケーションを作成するためのフレームワークです。</p>
<p>Airの特徴として、ブラウザ上で動作しているアプリケーションで実現するには難しい、デスクトップからファイルをDrag&amp;Dropしたり、ローカルファイルシステムへのアクセスなどOSの機能を利用することもできます。</p>
<p>またAirで作成されたアプリケーションはWindows、OSX、Linuxで動作するためより幅広いクライアント環境で動作させることができます。</p>
<p>Airを作成するためのSDKはadobeが無料で公開しており、Flashアプリケーションを作成するためのFlexもオープンソース化されたことにより無料で開発環境が用意できます。</p>
<p>さらにFlexBuilderという有料のIDEも用意されているためVisualStudioやEclipseに慣れた開発者の方はこちらを購入するとよいと思います。</p>
<p>今回はIDEは使用せずにテキストエディタとコマンドラインで開発しています。</p>
<p>ここでは<a href="http://livedocs.adobe.com/flex/3/html/help.html?content=SDKHelloWorld_1.html">Adobeのドキュメント</a>に従って半透明なウィンドウに<strong>HelloWorld</strong>と表示させるアプリケーションを作りながらFlexとAirのSDKの使い方とアプリケーション開発の流れを紹介しています。</p>
<p>完成アプリケーションはこのようになります。<a href="http://www.churadesign.com/wp-content/uploads/2008/05/first_air_app.png"><img class="alignnone size-medium wp-image-39" title="first_air_app" src="http://www.churadesign.com/wp-content/uploads/2008/05/first_air_app.png" alt="AIRアプリケーションサンプル" width="527" height="308" /></a></p>
<h3>開発環境を準備する</h3>
<p>ここではOSX環境で説明していますが、WindowsやLinuxでも基本は同じです。</p>
<p><a href="http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3">FlexSDK</a>と<a href="http://www.adobe.com/products/air/tools/sdk/">AIR SDK</a>をダウンロードします。<br />
<strong>AIR_SDK</strong>ディレクトリと<strong>flex_sdk_3</strong>ディレクトリをそれぞれ<strong>/Applications</strong>ディレクトリにコピーします。</p>
<p><strong>Path</strong>に各ディレクトリの<strong>bin</strong>を設定します。<br />
ここでは<strong>.bashrc</strong>に次のように追加しました。</p>
<pre class="command">export PATH="........
/Applications/flex_sdk_3/bin:\
/Applications/AIR_SDK/bin/"</pre>
<p>ターミナルを立ち上げコマンドラインから</p>
<pre class="command">&gt;adl -help
&gt;amxmlc -help</pre>
<p>が実行できれば<strong>AIR</strong>と<strong>Flex</strong>の開発環境が整いました。</p>
<h3>AIRアプリケーション記述ファイル作成</h3>
<p><em>HelloWorld-app.xml</em>というファイル名で、次のようなアプリケーション記述ファイルを作成します。<br />
[sourcecode language="xml"]</p>
<pre><?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0">
    <id>samples.flex.HelloWorld</id>
    <version>0.1</version>
    <filename>HelloWorld</filename>
    <initialWindow>
        <content>HelloWorld.swf</content>
        <visible>true</visible>
        <systemChrome>none</systemChrome>
<transparent>true</transparent>
        <width>400</width>
        <height>200</height>
    </initialWindow>
</application></pre>
<p>[/sourcecode]<br />
この例ではいくつかの設定しか記述していません。透明度やアイコン、ディフォルトのインストール先など、数多くの設定可能なすべてのプロパティは<a href="http://livedocs.adobe.com/flex/3/html/help.html?content=File_formats_1.html#1043413">ドキュメントを参照</a>してください。</p>
<h3>アプリケーションのコードを書く</h3>
<p>SWFベースのAIRアプリケーションはMXMLを使ってもActionScriptを使っても作成できますが、ここではFlexSDKとMXMLを使っています。</p>
<p>1. テキストエディタを開き<em>HelloWorld.mxml</em>という名前で次のコードを入力します。<br />
[sourcecode language="xml"]<?xml version="1.0" encoding="utf-8"?></p>
<pre><?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="Hello World">
    <mx:Style>
        WindowedApplication
        {
            background-color:"0x999999";
            background-alpha:"0.5";
        }
    </mx:Style>
    <mx:Label text="Hello World" horizontalCenter="0" verticalCenter="0"/>
</mx:WindowedApplication></pre>
<p>[/sourcecode]</p>
<p><em>mx:Label</em>で中央に<strong>HelloWorld</strong>を表示し、<em>mx:Style</em>で背景色と透明度の設定をしています。</p>
<h3>アプリケーションをコンパイルする</h3>
<p><strong>amxmlc</strong>コンパイラを使ってMXMLファイルをSWFファイルにコンパイルします。</p>
<p>HelloWorld.mxmlのディレクトリに移動し、次のコマンドでコンパイルします。正常にコンパイルできれば、HelloWorld.swfが作成されます。</p>
<pre class="command"> amxmlc HelloWorld.mxml</pre>
<h3>アプリケーションのテスト</h3>
<p><strong>AIRデバッガーランチャー(ADL)</strong>を使い、アプリケーション記述ファイルを指定してAIRアプリをデバッグ実行することができます。</p>
<p> コマンドラインから次のコマンドを入力するとアプリケーションが起動します。</p>
<pre class="command">&gt;adl HelloWorld-app.xml</pre>
<h3>AIRインストーラーファイルの作成</h3>
<p>アプリケーションが完成したらADTユーティリティを使用してAIRインストーラーファイルにパッケージ化します。<br />
アプリケーションの安全のため、すべてのAIRアプリケーションはデジタル署名が必要となっています。ここでは開発用の自己証明書を使ってインストーラーファイルを作成します。自己証明書の場合インストール時に表示される配布者アイデンティティがUnknownとなります。</p>
<p>製品向けにアプリケーションを配布する場合は VeriSignやThawteからキーを購入することができます。</p>
<p>1.自己証明書を作成する<br />
次のコマンドを実行します。</p>
<pre class="command">
adt -certificate -cn SelfSigned 1024-RSA sampleCert.pfx samplePassword
</pre>
<p>2.インストーラーの作成<br />
次のコマンドを実行します。（実際は一行です）<br />
パスワード入力が求められるので上で入力したsamplePassowrdを入力してください。</p>
<pre class="command">
adt -package -storetype pkcs12 -keystore sampleCert.pfx HelloWorld.air
HelloWorld-app.xml HelloWorld.swf
</pre>
<p>これで<i>HelloWorld.air</i>が作成されました。このファイルをダブルクリックすることで、アプリケーションをインストールし、実行することができます。</p>
<p>簡単ですね。実際にはMXMLでより複雑なアプリケーションを作成していくことでしょう。または、SWFのかわりに、HTMLとJavascriptを用いてもAIRアプリケーションを作成することができます。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.churadesign.com/2008/05/29/air-sdk%e3%81%a8flex-sdk%e3%81%a7%e3%81%af%e3%81%98%e3%82%81%e3%81%a6%e3%81%aeair%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e4%bd%9c%e3%82%8b/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

