JavaScriptソースの分離 [AIR]
前回の続きですが、まず、ファイルにアクセスしたいと思っています。が、今後コードを追加して行く事を考えると、その前にJavaScriptのソースをHTMLから分離したくなりました。とりあえず、ソースファイルを「main.js」、エントリ関数は「main()」のままとして、HTMLファイルを書き換えました。
さて、ファイルの操作はFileクラスでできそうな感じなのですが、調べているとシステム固有のディレクトリを取得するプロパティがある様です。「アプリケーション」「アプリケーション記憶領域」「デスクトップ」「ドキュメント」「ユーザー」の各ディレクトリパスがあらかじめ設定されているみたいですね。実際に自分でアプリを作成してファイルの作成などをする際はこれらのディレクトリを基点に作成すれば、機種依存が避けられる様です。
まずは、こちらの内容を出力して見るため「main.js」は以下の様にしてみました。
さて、ファイルの読み込みが行いたいのですが、読み込むファイルの指定で固定パスをハードコードするのもなんなので、次はドラッグ＆ドロップでファイルのパスを取得する事を試みてみます。
<html>
<head>
<script src="AIRAliases.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
<title>excercise_html_app</title>
</head>
<body onLoad="main()">
Hello Adobe AIR!
</body>
</html>
|
さて、ファイルの操作はFileクラスでできそうな感じなのですが、調べているとシステム固有のディレクトリを取得するプロパティがある様です。「アプリケーション」「アプリケーション記憶領域」「デスクトップ」「ドキュメント」「ユーザー」の各ディレクトリパスがあらかじめ設定されているみたいですね。実際に自分でアプリを作成してファイルの作成などをする際はこれらのディレクトリを基点に作成すれば、機種依存が避けられる様です。
まずは、こちらの内容を出力して見るため「main.js」は以下の様にしてみました。
function main() {
var application = air.File.applicationDirectory.nativePath;
var appStorage = air.File.applicationStorageDirectory.nativePath;
var desktop = air.File.desktopDirectory.nativePath;
var documents = air.File.documentsDirectory.nativePath;
var user = air.File.userDirectory.nativePath;
air.trace("application: ", application);
air.trace("appStorage: ", appStorage);
air.trace("desktop: ", desktop);
air.trace("documents: ", documents);
air.trace("user: ", user);
}
|
さて、ファイルの読み込みが行いたいのですが、読み込むファイルの指定で固定パスをハードコードするのもなんなので、次はドラッグ＆ドロップでファイルのパスを取得する事を試みてみます。
HTML+JavaScriptでAdobe AIR [AIR]
先日から、こちょこちょ更新し始めましたが、4、5年ぶりにAIRでもいじってみようかとぼちぼちいじり始めています。一応、AIRでは、HTMLとJavaScriptのみでアプリがつくれると言う事なので、その方向で。
Webアプリの作成には、Aptana Studioと言うのが有名らしいので、入れてみたのですが、昔は存在していたらしいAIRの開発環境が今は提供されていない様なので、断念。と言うか、併用するかも知れませんが・・。まあ、とりあえずは大した事もしないと思われるので、以前見つけていた「AIR GEAR」と言う環境で、プロジェクトの作成とテスト実行を行う事にしました。
*
で、いきなりGUIベースのアプリから取りかかると、また頓挫しそうなので、まずはログを出してみることに・・・。AIR GEARでプロジェクトを作成した際に作成されたHTMLファイルに書き足していく事にしました。それがこちら。
ちなみに、JavaScriptのHTML内での使い方もよくわかってないので、これだけでもちょっと手間取ったりして・・。
さて、一応、ソースをなめておきます。
こちら、自動生成されていた気がしますが、まずは「AIRAliases.js」と言うのを読み込みます。エイリアスの定義が含まれているとの事。無くても大丈夫と思われますが、これがあった方が便利な様です。
で、こちらが、ログ出力の関数（と言うかメソッド？）です。これでコンソールにテキストを出力することができます。ここでは、main()と言う関数の中に入れておきました。JavaScriptでエントリ関数の一般的な名前がわからなかったので、C風に・・。そもそも「エントリ関数」と言う概念があるのかどうかも知りませんが・・。
で、HTMLのbodyにイベントに対応した呼び出し関数を定義しておくと呼び出される様です。ここでは、「onLoad」と言うイベントに定義しています。
次は、とりあえずファイルを読み込みたいですかねぇ・・。
【参考】
・aptana
・AmaterasAIR a.k.a. "AIR GEAR" - Project Amateras
・HTML 環境について - Adobe AIR 用 HTML 開発ガイド / AIR 開発の基礎
Webアプリの作成には、Aptana Studioと言うのが有名らしいので、入れてみたのですが、昔は存在していたらしいAIRの開発環境が今は提供されていない様なので、断念。と言うか、併用するかも知れませんが・・。まあ、とりあえずは大した事もしないと思われるので、以前見つけていた「AIR GEAR」と言う環境で、プロジェクトの作成とテスト実行を行う事にしました。
*
で、いきなりGUIベースのアプリから取りかかると、また頓挫しそうなので、まずはログを出してみることに・・・。AIR GEARでプロジェクトを作成した際に作成されたHTMLファイルに書き足していく事にしました。それがこちら。
<html>
<head>
<script src="AIRAliases.js" type="text/javascript"></script>
<script type="text/javascript">
function main() {
air.trace("test");
}
</script>
<title>excercise_html_app</title>
</head>
<body onLoad="main()">
Hello Adobe AIR!
</body>
</html>
|
ちなみに、JavaScriptのHTML内での使い方もよくわかってないので、これだけでもちょっと手間取ったりして・・。
さて、一応、ソースをなめておきます。
<script src="AIRAliases.js" type="text/javascript"></script>
|
こちら、自動生成されていた気がしますが、まずは「AIRAliases.js」と言うのを読み込みます。エイリアスの定義が含まれているとの事。無くても大丈夫と思われますが、これがあった方が便利な様です。
air.trace("test");
|
で、こちらが、ログ出力の関数（と言うかメソッド？）です。これでコンソールにテキストを出力することができます。ここでは、main()と言う関数の中に入れておきました。JavaScriptでエントリ関数の一般的な名前がわからなかったので、C風に・・。そもそも「エントリ関数」と言う概念があるのかどうかも知りませんが・・。
<body onLoad="main()"> |
で、HTMLのbodyにイベントに対応した呼び出し関数を定義しておくと呼び出される様です。ここでは、「onLoad」と言うイベントに定義しています。
次は、とりあえずファイルを読み込みたいですかねぇ・・。
【参考】
・aptana
・AmaterasAIR a.k.a. "AIR GEAR" - Project Amateras
・HTML 環境について - Adobe AIR 用 HTML 開発ガイド / AIR 開発の基礎
Adobe AIR関連技術 [AIR]
さて、Adobe AIRのアプリケーションの作成はいいんですが、出てくる用語と言うか、基礎技術のことがさっぱりわかってません。まず、Flexって何？と言うところから始まるんですが、Adobeのページでは、なんかいいドキュメントがないですねぇ。リンクをたどっていくと「Getting Started with Flex 3」と言うドキュメントがありました。なんか、こう全体の構成と言うか、概要がわかるものが欲しいんですけどね・・。
Flexについて、Wikipediaがうまくまとめられていますね。さすがです。こちらによると、アプリケーションの統合環境とSDKで、デザインはMXML、プログラムはActionScriptを利用するとのこと。AIRはFlash/Flex/WebKitを採用してデスクトップアプリケーションを開発するためのランタイムライブラリだとか。前回作ったプロジェクトはFlexを採用したものになるんですかね・・。
MXMLは「Macromedia Flex Markup Language」だそうです。「X」は「Flex」の「X」でしたか。と、まあ関係ないんですが、Flexのプレゼンテーションを記述するXMLだとのこと。「プレゼンテーション」って、画面の構成だけじゃないんですかね・・？ まだ、謎です。でも、これは自分で編集することはなさげですね。
で、プログラム言語はActionScriptだとのこと。名前は知ってますが、中身は知りません。JavaScriptとほぼ同様のプログラミング言語を内包しているらしいです。
先程のドキュメントが置いているページの下の方にある「Comparing Flash, Flex, Flash Player and Adobe AIR」と言うビデオも簡潔にまとめられていました。FlexとAIRの部分だけを言うと、FlexはMXML、ActionScriptを用いるアプリケーションのフレームワークの様です。これは実行環境は問いません。そして、AIRがそのFlexで作成されたアプリケーションのデスクトップ上での実行環境になる様です。ま、なんとなく関係はわかりましたかね。
概要といえば、こんなもんなんですかね？？ グダグダ言わずに、とりあえず作れと言うことかな・・？
と言うことで、今年4月から始めたこのブログですが、とりたてて何の成果も上げないまま今年が終わってしまいました。ま、来年もこのような調子で行くと思われますが、よろしくお願いします。
【参考】
・Flex用Adobe AIRデベロッパーセンター
・Flex デベロッパーセンター
・Flex Video Training - ADOBE DEVELOPER CONNECTION
・Adobe Flex - ウィキペディア
Flexについて、Wikipediaがうまくまとめられていますね。さすがです。こちらによると、アプリケーションの統合環境とSDKで、デザインはMXML、プログラムはActionScriptを利用するとのこと。AIRはFlash/Flex/WebKitを採用してデスクトップアプリケーションを開発するためのランタイムライブラリだとか。前回作ったプロジェクトはFlexを採用したものになるんですかね・・。
MXMLは「Macromedia Flex Markup Language」だそうです。「X」は「Flex」の「X」でしたか。と、まあ関係ないんですが、Flexのプレゼンテーションを記述するXMLだとのこと。「プレゼンテーション」って、画面の構成だけじゃないんですかね・・？ まだ、謎です。でも、これは自分で編集することはなさげですね。
で、プログラム言語はActionScriptだとのこと。名前は知ってますが、中身は知りません。JavaScriptとほぼ同様のプログラミング言語を内包しているらしいです。
先程のドキュメントが置いているページの下の方にある「Comparing Flash, Flex, Flash Player and Adobe AIR」と言うビデオも簡潔にまとめられていました。FlexとAIRの部分だけを言うと、FlexはMXML、ActionScriptを用いるアプリケーションのフレームワークの様です。これは実行環境は問いません。そして、AIRがそのFlexで作成されたアプリケーションのデスクトップ上での実行環境になる様です。ま、なんとなく関係はわかりましたかね。
概要といえば、こんなもんなんですかね？？ グダグダ言わずに、とりあえず作れと言うことかな・・？
と言うことで、今年4月から始めたこのブログですが、とりたてて何の成果も上げないまま今年が終わってしまいました。ま、来年もこのような調子で行くと思われますが、よろしくお願いします。
【参考】
・Flex用Adobe AIRデベロッパーセンター
・Flex デベロッパーセンター
・Flex Video Training - ADOBE DEVELOPER CONNECTION
・Adobe Flex - ウィキペディア
Adobe AIRについて [AIR]
年末に向けて、Mac用の年賀状ソフトを探していたところ、今年はPrint Magicと言うのを見つけました。Macでフリーの年賀状ソフトは新しいのが出てこなくて、年々厳しくなるなぁと感じていたんですが、PrintMagicはまだできたて感満載のおニューソフトでした（と思いましたが、昨年からある様子・・）。で、よく見てみると、Windowsでも、Linuxでも動作するとのこと。Adobe AIRと言う「ランタイム」を使っているそうです。このAdobe AIR、Javaみたいな実行環境なのかQtみたいなクロスプラットフォームライブラリなのかはよくわかりませんが、使ってみると普通のMacOS Xのアプリと取り立てて違いが見えません。さくさく動いていますし、ちょっと興味が出てきました。「Adobe AIR」と言う名前は聞いたことがあったんですが、中身は全く把握していないので、とりあえず調査してみました。
Adobeの公式ページによると、「HTML/Ajax、Flex、Flash開発のスキルとツールを使用して開発する」、「クリップボード・ドラッグ＆ドロップ・ファイルシステムI/O等、ネイティブのデスクトップ統合をサポートする」とか。これを学ぶことで、Flashについても知識が入りそうですね。
*
さて、用意されているSDKをみてみると、ライブラリとコマンドラインツールしか入っていない様です。IDEは「Adobe Flex Builder™ 3」「Dreamweaver® CS3」「Flash CS3 Professional」を使えるようにしているよとのこと。・・・・なんか、これらは有償の開発環境のようですね。フリーだとトライアルだとか・・。どういう制限があるのかがいまいち掴めませんでした。
*
フリーで開発するならEclipse。と言うことで、探してみたところ、ありました。AIR GEARと言うプラグインが存在する様です。まずは、AIR GEARのページから、「net.sf.amateras.air_1.0.3.jar」と言うファイルをダウンロード、Eclipseの「dropins」と言うディレクトリにダウンロードしたファイルを置きましょうとのこと。Eclipseのバージョンはいくつのが必要なんでしょうね・・？
使い方は、「AIR GEAR使用方法」を見ろとのことなので、見てみたところ、動作環境は「Eclipse 3.3以降＋JDT＋GEF」とのこと。ずいぶん前に入れてほったらかしていた私のEclipse環境は、3.4.2でした。本体のバージョンは大丈夫みたいですね。JDTは3.4.2.r342、GEFも3.4.2が入っている様です。このままで大丈夫かな・・。とりあえず、先程ダウンロードした「net.sf.amateras.air_1.0.3.jar」を「eclipse/dropins」に入れておきます。
さて、その前にAdobeのページから、Adobe AIR SDKと、Flex3SDKをダウンロードしてインストールせよとのこと。後、AIRランタイムもダウンロードせよとのことですが、こちらは、Print Magicのインストール時にインストールしています。AIR SDKのバージョンは 1.5.3（ダウンロードしたディスクイメージ内の「AIR SDK Readme.txt」に書かれてました）。Flex3SDKのバージョンは3.4とのことです。
AIR SDKをインストールしようと思いましたが、どこに入れろとも書かれてませんね・・。AIR GEARのページでも任意のフォルダに解凍せよとか。仕方が無いので、Xcodeをインストールした時にできた「/Developer」の配下に「AIR_SDK/v1.5.3」と「FLEX_SDK/v3.4」のディレクトリを作成して、そこにコピーしとくことにしました。
「Preferenceds」→「AIR GEAR」で、各SDKのディレクトリをセットして完了。Flex版とHTML版のプロジェクトが作成できる様ですが、とりあえず、Flex版のプロジェクトを作成しておきました。で、次は「MXML」の編集とか。「MXML」って何？って、どうやら、画面構成を記述するXMLファイルのようですが・・。
どうしましょうかねぇ。全く知識が無い状態なので、まず、基礎的なところから調べますか・・。とまた、のんびりやっていきます。つづく。
【参考】
・Adobe AIRデベロッパーセンター
・いまさら聞けないAdobe AIR「超」入門 - @IT
・Adobe AIRの基本(Eclipse + AIR GEAR) – Flash/ActionScript入門 - イクケン
・フリーのEclipse用AIRプラグイン「AIR GEAR 1.0.0」リリース、WYSIWYGでAIR開発OK！ - CodeZine
・AmaterasAIR a.k.a "AIR GEAR" - Project Amateras
Adobeの公式ページによると、「HTML/Ajax、Flex、Flash開発のスキルとツールを使用して開発する」、「クリップボード・ドラッグ＆ドロップ・ファイルシステムI/O等、ネイティブのデスクトップ統合をサポートする」とか。これを学ぶことで、Flashについても知識が入りそうですね。
*
さて、用意されているSDKをみてみると、ライブラリとコマンドラインツールしか入っていない様です。IDEは「Adobe Flex Builder™ 3」「Dreamweaver® CS3」「Flash CS3 Professional」を使えるようにしているよとのこと。・・・・なんか、これらは有償の開発環境のようですね。フリーだとトライアルだとか・・。どういう制限があるのかがいまいち掴めませんでした。
*
フリーで開発するならEclipse。と言うことで、探してみたところ、ありました。AIR GEARと言うプラグインが存在する様です。まずは、AIR GEARのページから、「net.sf.amateras.air_1.0.3.jar」と言うファイルをダウンロード、Eclipseの「dropins」と言うディレクトリにダウンロードしたファイルを置きましょうとのこと。Eclipseのバージョンはいくつのが必要なんでしょうね・・？
使い方は、「AIR GEAR使用方法」を見ろとのことなので、見てみたところ、動作環境は「Eclipse 3.3以降＋JDT＋GEF」とのこと。ずいぶん前に入れてほったらかしていた私のEclipse環境は、3.4.2でした。本体のバージョンは大丈夫みたいですね。JDTは3.4.2.r342、GEFも3.4.2が入っている様です。このままで大丈夫かな・・。とりあえず、先程ダウンロードした「net.sf.amateras.air_1.0.3.jar」を「eclipse/dropins」に入れておきます。
さて、その前にAdobeのページから、Adobe AIR SDKと、Flex3SDKをダウンロードしてインストールせよとのこと。後、AIRランタイムもダウンロードせよとのことですが、こちらは、Print Magicのインストール時にインストールしています。AIR SDKのバージョンは 1.5.3（ダウンロードしたディスクイメージ内の「AIR SDK Readme.txt」に書かれてました）。Flex3SDKのバージョンは3.4とのことです。
AIR SDKをインストールしようと思いましたが、どこに入れろとも書かれてませんね・・。AIR GEARのページでも任意のフォルダに解凍せよとか。仕方が無いので、Xcodeをインストールした時にできた「/Developer」の配下に「AIR_SDK/v1.5.3」と「FLEX_SDK/v3.4」のディレクトリを作成して、そこにコピーしとくことにしました。
「Preferenceds」→「AIR GEAR」で、各SDKのディレクトリをセットして完了。Flex版とHTML版のプロジェクトが作成できる様ですが、とりあえず、Flex版のプロジェクトを作成しておきました。で、次は「MXML」の編集とか。「MXML」って何？って、どうやら、画面構成を記述するXMLファイルのようですが・・。
どうしましょうかねぇ。全く知識が無い状態なので、まず、基礎的なところから調べますか・・。とまた、のんびりやっていきます。つづく。
【参考】
・Adobe AIRデベロッパーセンター
・いまさら聞けないAdobe AIR「超」入門 - @IT
・Adobe AIRの基本(Eclipse + AIR GEAR) – Flash/ActionScript入門 - イクケン
・フリーのEclipse用AIRプラグイン「AIR GEAR 1.0.0」リリース、WYSIWYGでAIR開発OK！ - CodeZine
・AmaterasAIR a.k.a "AIR GEAR" - Project Amateras
