Adobe AIR とは? AIRのうれしさは? 環境について

Slides:



Advertisements
Similar presentations
Genius Framework について 吉津 卓保( S2 ファクトリー株式会社). 自己紹介.
Advertisements

Web アプリをユーザー毎に カスタマイズ可能にする AOP フレームワーク
情報基礎演習I(プログラミング) 第9回 6月22日 水曜5限 江草由佳
BBT大学 Ruby on Rails開発環境セットアップマニュアル
難しいことは置いといて、 取り合えず 「BlazeDS」 を使って、 Flash、AIRアプリから Javaオブジェクトのメソッドを呼び出すための 手順書(Windows版) 2008年2月 Lecce.
情報処理実習 第05回 Excelマクロ機能入門 操作マクロ入門.
最近の気になるネタ presented by Kei-z.
Flex “30分でわかるFlex”.
HTML 5の表現力 楽しいアプリ制作の会 TWorks 蜜葉.
.NET テクノロジー を利用した SAP ソリューションの拡張 (3階層化) (評価環境構築ガイド)
東京工科大学 コンピュータサイエンス学部 亀田弘之
デスクトップを画像として保存する(1) ① デスクトップの画像をクリップボードへコピーする。
デジタルポートフォリオ作成支援ツール PictFolio 使用マニュアル
Applet 岡部 祐典 鈴木 敬幸.
Ex7. Search for Vacuum Problem
Win32APIとMFC H107102 古田雅基 H107048 佐藤一樹 H107126 山下洋平.
プログラミング基礎I(再) 山元進.
Ex8. Search for Vacuum Problem(2)
TeX で数式を書くための PowerPoint アドイン Ver. 0.1 (2007/5/30)
Hot Pepper for iPod touch
アプレット (Applet)について.
Step-by-Step Guide on How to Start ALICE Analysis
Digital Network And Communication
デスクトップを画像として保存する(1) ① デスクトップの画像をクリップボードへコピーする。
haXeでオリジナルコンポーネント作り WCAN mini Vol 小笠原
F5 を押すか、または [スライド ショー] > [最初から] をクリックして、コースを開始してください。
Magicのサブフォーム上に ガントチャート表示を実現
第2章 Eclipseと簡単なオブジェクト 指向プログラミング
エンタープライズアプリケーション II 第7回 / 2006年7月9日
第20章 Flyweight ~同じものを共有して無駄をなくす~
XMLゼミ 5.1 XML文書と表示 5.2 CSS 5.3 XMLとXSL 高橋 辰裕.
.NET テクノロジー を利用した SAP ソリューションの拡張 (3階層化) (評価環境構築ガイド)
データベース設計 第9回 Webインタフェースの作成(1)
プログラミング演習3 第2回 GUIの復習.
Unity, C# 移動するモデルの位置を 指定した位置へ自動修正
オブジェクト指向 プログラミング 第十四回 知能情報学部 新田直也.
Office IME 2010 を使う.
情報工学演習I 第12回 C++の演習4(インライン展開).
≅ ≰ ≳ ≗ ≲ ≩ ≴ ≥ ver manual Tanaka.
独習JAVA 6.8 コンストラクタの修飾子 6.9 メソッドの修飾子 6.10 ObjectクラスとClassクラス 11月28日(金)
暗黙的に型付けされる構造体の Java言語への導入
理学部 情報科学科 指導教官 千葉 滋 助教授 学籍番号 03_03686 内河 綾
EclipseでWekaのAPIを呼び出す
オブジェクト指向 プログラミング 第十四回 知能情報学部 新田直也.
プログラミング演習3 第2回 GUIの復習.
プログラミング基礎a 第10回 Javaによる図形処理入門(2) GUIの使い方
10-1 SAXの概要 10-2 Saxプログラミングの基礎 10-3 saxのプログラム例
情報基礎Ⅱ (第11回) 月曜4限 担当:北川 晃.
プログラミング基礎a 第10回 Javaによる図形処理入門(2) GUIの使い方
7-0.SWORD Client for WEKO インストールマニュアル Version 2.2
コンピュータ プレゼンテーション.
ソフトウェア制作論 平成30年11月21日.
Ex7. Search for Vacuum Problem
≅ ≰ ≳ ≗ ≲ ≩ ≴ ≥ ver manual Tanaka.
ここに 表題や引用文が入る 背景への図の使用とキャプションへのテクスチャの適用 (中級)
アルゴリズムとプログラミング (Algorithms and Programming)
TeX で数式を書くための PowerPoint アドイン Ver. 0.1 (2007/5/30)
C#プログラミング実習 第3回.
福井大学大学院工学研究科機械工学専攻 川谷 亮治
情報基礎演習I(プログラミング) 第8回 6月8日 水曜5限 江草由佳
System.AddInを利用したアプリケーション拡張 - アドインの開発 -
プログラムの差分記述を 容易に行うための レイヤー機構付きIDEの提案
画面への描画 Graphics オブジェクト 紙 ペン Pen オブジェクト Brush オブジェクト 画面のピクセルをカプセル化
Action Method の実装 J2EE II 第9回 2004年12月2日.
TeX で数式を書くための PowerPoint アドイン Ver. 0.1 (2007/5/30)
スライドの終わりまでテキストが繰り返しスクロールされます • スライドの終わりまでテキストが繰り返しスクロールされます •
JSFによるWebアプリケーション開発 第7回
System.AddInを利用したアプリケーション拡張 - アドインの開発 -
5.基本API 5-1 レイアウト ウィジェットの並べ方を指定するには、 パレットのレイアウト(Layoutでは以下の8種類)を配置する。
計算機プログラミングI 第2回 2002年10月17日(木) 履習登録 複習 ライブラリの利用 (2.6-7) 式・値・代入 (2.6-8)
Presentation transcript:

1.Adobe AIR 紹介 2.デモ on Flex Builder 3 3.付録 (株)チェンジビジョン 梅田政利

Adobe AIR とは? AIRのうれしさは? 環境について

Adobe AIRとは? 概要 特徴 Adobe Integrated Runtimeの略 Adobe Integrated Runtimeの略 デスクトップで動作するRIA(Rich Internet Application) Adobe Labs(http://labs.adobe.com/)で公開 現在ベータ3。そろそろ正式リリース? 特徴 クロスOS Windows / Mac / Linux 色々なテクノロジーと連携 Flash / Flex / ActionScript HTML / CSS / JavaScript / Ajax PDF インストーラー作成が簡単

既存のWEB技術を用いてデスクトップアプリが作れる ブラウザ上のアプリでできないことができる AIRのうれしさは? 既存のWEB技術を用いてデスクトップアプリが作れる HTML / JavaScript / Flex / ActionScript など ブラウザ上のアプリでできないことができる ファイル操作 組み込みDB(SQLite)の操作 ドラッグ&ドロップ(外部から/外部への) クリップボード(コピー/ペースト) オフライン ネットワーク接続時に同期する、などももちろん可能 便利なコンポーネントやエフェクトが色々ある

環境について 実行環境 開発環境 ランタイムのインストールが必要 AIR SDK Flex Builder 3 インストーラーを使ったインストール シームレス・インストール(※参考URLが付録にあります) AIRアプリと同時にランタイムをインストールする機構 開発環境 AIR SDK フリー コマンドライン Flex Builder 3 有償 Eclipseベースの統合開発環境

2.デモ on Flex Builder 3 作成するアプリの説明 プロジェクト作成 ウィンドウ透明化 コンポーネント配置 コーディング エフェクト ファイル操作 ドラッグ&ドロップ 完成

作成するアプリの説明 目的 基本仕様 拡張仕様 ランダムな整数を取得するためのクラス(MyRandom)が使える 順番をランダムに決定する 人数入力欄にて人数を入力・変更する 人数の上限は99 名前入力欄から順番を決める人の名前を入力する 決定した順番と名前を、順番に沿って表に表示する 拡張仕様 順番が決まるところを、エフェクトで派手にする 表を外部にドラッグ&ドロップするとCSV形式でファイルに保存する ランダムな整数を取得するためのクラス(MyRandom)が使える MyRandom(lower:int, upper:int) コンストラクタ。引数は下限値と上限値。 getBoundedRandomInt 範囲内からランダムな値を取得。同じ値は返さない。なくなったらー1を返す

プロジェクト作成 Sequencing.mxml    (MXMLソースファイル) Sequencing-app.xml    (AIRアプリケーションXMLファイル)

ウィンドウ透明化 ________.mxml ____-app.xml <mx:WindowedApplication (~略~) backgroundColor="0xBBDDFF"   背景色 alpha="0.7">          アルファ(透過)値 <initialWindow> <systemChrome>none</systemChrome>   AIRのウィンドウ(※) <transparent>true</transparent> 透過指定 </initialWindow> (※)デフォルトでは"standard”。OS標準のウィンドウになる。 透明化

コンポーネント配置 1.デザインビューに切り替え 2.コンポーネントを配置 ソースビューで直接コーディングすることも可能です。 3.コンポーネントの詳細設定

コンポーネント配置~人数入力部 <mx:Label x="10" y="13" text="人数"/> <mx:NumericStepper id="peopleNum" x="36" y="11" value="5" maximum="99" width="50"/>

コンポーネント配置~名前入力部 <mx:Label x="100" y="13" text="名前"/> <mx:TextInput id="nameForm" x="124" y="11" width="133"/> <mx:Button label="確定" x="261" y="11" width="56"/>

コンポーネント配置~結果表示部 <mx:DataGrid id="table" width="170" top="10" bottom="10" left="350" right="10"> <mx:columns> <mx:DataGridColumn headerText="No." dataField="col1" width="40"/> <mx:DataGridColumn headerText="名前" dataField="col2"/> </mx:columns> </mx:DataGrid>

コンポーネント配置~決定順番表示部 <mx:Label id="num" x="100" y="120" width="148" height="148" fontFamily="Arial"    fontSize="256" textAlign="center"/> (※)“99”は、サイズとレイアウトの調整に利用しただけですので、MXMLからは削除しています

コーディング~アプリケーションの初期化 applicationComplete 起動シーケンスの最後に呼び出される関数を登録する <mx:WindowedApplication (略)applicationComplete="init()" > <mx:Script> <![CDATA[ private var myRandom:MyRandom; private function init():void { setup(peopleNum.value); } private function setup(num:int):void { myRandom = new MyRandom(1, num); } ]]> </mx:Script> この間にActionScriptを記述する 1からnumの範囲からランダムな値を取得するMyRandomオブジェクトを生成

コーディング~人数変更の監視 addEventListener イベントの種類と、その結果呼び出される関数を登録する private function init():void { setup(peopleNum.value); peopleNum.addEventListener(Event.CHANGE, changePeopleNum); } private function changePeopleNum(ev:Event):void { trace("人数が " + peopleNum.value + " に変わりました"); setup(peopleNum.value); } peopleNumの変更があれば、changePeopleNum関数を呼び出すように登録 デバッグ文をコンソールに出力する。 デバッグモードのときに有効。

コーディング~表のデータと初期化 import mx.collections.ArrayCollection; private var sequence:ArrayCollection; // 表に表示するデータ private function setup(num:int):void { sequence = new ArrayCollection(); for (var i:int = 0; i < num; i++) { sequence.addItem({no:"", name:""}); } myRandom = new MyRandom(1, num); } 指定された人数で表を初期化する。 属性noとnameに空文字列を代入したObjectオブジェクトをsequenceに追加 ※Objectの属性は動的に追加できる

コーディング~DataGridへのデータ表示 dataProvider 表示対象となるArrayやArrayCollectionなどをセットする 変数値の変化が、参照しているMXMLコンポーネントに通知され、値が反映されるようになる [Bindable] private var sequence:ArrayCollection; 表示データ群 <mx:DataGrid id="table" dataProvider="{sequence}" top="10" bottom="10" left="350" right="10"> <mx:columns> <mx:DataGridColumn headerText="No." dataField="no" width="40"/> <mx:DataGridColumn headerText="名前" dataField="name" /> </mx:columns> </mx:DataGrid> 表示するデータの属性

コーディング~順番の決定 sequencing() addSequence() private function sequencing():void { var randomInt:int = myRandom.getRandomBoundedInt(); if (randomInt == -1) { Alert.show(“設定人数を超過しました。”); return; } num.text = String(randomInt); addSequence(); } private function addSequence():void { var obj:Object = new Object(); obj.no = num.text; obj.name = nameForm.text; sequence.setItemAt(obj, int(num.text) - 1); nameForm.text = ""; } sequencing() addSequence() <mx:TextInput x="124" y="11" id="nameForm" width="133" enter="sequencing()" /> <mx:Button x="261" y="11" label="確定" width="56" click="sequencing()" /> 名前入力欄でEnterキーを押すか、確定ボタンをクリックすると、sequencing()が呼ばれる

エフェクト~定義 決定順番コンポーネントを、大きく→小さく→ちょっと大きく→ちょっと小さく ① ② id="num"のコンポーネントに対してエフェクトをかける エフェクトは、<mx:children>に定義されたエフェクトの順次(Sequence)実行である ② durationはエフェクト時間 origin[X | Y]は、拡大縮小の中心となるコンポーネント内の座標 zoom[Width | Height]Fromは、エフェクト開始時の縮尺 zoom[Width | Height]Toは、エフェクト終了時の縮尺 <mx:Sequence id="effect" target="{num}">  ① <mx:children> <mx:Zoom duration="700" originX="75" originY="75" zoomWidthFrom="1.0" zoomWidthTo="2.3" zoomHeightFrom="1.0" zoomHeightTo="2.3"/> ② <mx:Zoom duration="600" originX="75" originY="75" zoomWidthFrom="2.3" zoomWidthTo="1.0" zoomHeightFrom="2.3" zoomHeightTo="1.0"/> <mx:Zoom duration="140" originX="75" originY="75" zoomWidthFrom="1.0" zoomWidthTo="1.3" zoomHeightFrom="1.0" zoomHeightTo="1.3"/> <mx:Zoom duration="140" originX="75" originY="75" zoomWidthFrom="1.3" zoomWidthTo="1.0" zoomHeightFrom="1.3" zoomHeightTo="1.0"/> </mx:children> </mx:Sequence>

エフェクト~再生 挿入 sequencing() effect.play() addSequence() エフェクトeffectを再生する private function sequencing():void { (略) num.text = String(randomInt); effect.play(); } <mx:Sequence id="effect" target="{num}" effectEnd="addSequence()" > エフェクトeffectを再生する エフェクト終了時に、 addSequence()を呼ぶ

エフェクト~補足 Effect CompositeEffect Zoom(拡大縮小)、Move(移動)、Rotate(回転)、Blur(ぼかし)、 Glow(発光効果)など色々 一部のエフェクトは、埋め込みフォントを使わないと文字が表示されない ため、注意が必要(Rotateなど) エフェクト開始時やエフェクト終了時の処理を登録できる CompositeEffect Sequence(直列)とParallel(並列)がある Effectのサブクラス つまりCompositeEffectの入れ子も可能

ファイル操作 CSV形式の表データファイルを作成し、そのオブジェクトを返す ① 関数createCsvFile の宣言。private関数で返り値の型はFile。 ② テンポラリディレクトリの"sequence.csv"ファイルオブジェクトfile(Fileクラスの  オブジェクト)を作成する ③④ fileに書き出すfileStream(FileStreamクラスのオブジェクト)を作成する ⑤ CSV形式でヘッダ情報をシフトJISコードで出力する ⑥ CSV形式で、sequence(表)の内容をシフトJISコードで出力する ⑦ fileStreamを閉じる ⑧ fileオブジェクトをリターンする private function createCsvFile():File { //① var file:File = File.createTempDirectory().resolvePath("sequence.csv"); //② var fileStream:FileStream = new FileStream(); //③ fileStream.open(file, FileMode.WRITE); //④ fileStream.writeMultiByte("No., 名前\n", "shift_jis"); //⑤ for (var i:int = 0; i < sequence.length; i++) { //⑥ fileStream.writeMultiByte(sequence.getItemAt(i).no + ", " + sequence.getItemAt(i).name + "\n", "shift_jis"); } fileStream.close(); //⑦ return file; //⑧ }

ドラッグ&ドロップ ドラッグ&ドロップとクリップボードをコントロールする ① アプリ初期化時に、マウスボタン押下時に実行する関数mouseDownと、 マウスボタンリリース時に実行する関数mouseUpを登録する ② アプリ外にマウスポインタが出たときに実行する関数dragOutを登録する ③ アプリ外にマウスポインタが出たときに実行する関数dragOutを登録解除する ④ クリップボードに表のCSVファイルをセットし、ドラッグマネージャーを初期化する private function init():void { //① : table.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown); table.addEventListener(MouseEvent.MOUSE_UP, mouseUp); } private function mouseDown(ev:MouseEvent):void { //② table.addEventListener(MouseEvent.ROLL_OUT, dragOut); } private function mouseUp(ev:MouseEvent):void { //③ table.removeEventListener(MouseEvent.ROLL_OUT, dragOut); } private function dragOut(ev:MouseEvent):void { //④ var clipboard:Clipboard = new Clipboard(); clipboard.setData(ClipboardFormats.FILE_LIST_FORMAT, [createCsvFile()]); NativeDragManager.doDrag(table, clipboard); } Arrayオブジェクト

完成

3.付録 ソースコード~ Sequencing.mxml ソースコード~ MyRandom.as アプリケーションXML~ Sequencing.xml URL一覧

ソースコード~ Sequencing.mxml① <?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx=http://www.adobe.com/2006/mxml layout="absolute“ alpha="0.7" backgroundColor="0xBBDDFF“ width="540" height="410“ applicationComplete="init()"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.controls.Alert; [Bindable] private var sequence:ArrayCollection; private var myRandom:MyRandom; private function init():void { setup(peopleNum.value); peopleNum.addEventListener(Event.CHANGE, changePeopleNum); table.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown); table.addEventListener(MouseEvent.MOUSE_UP, mouseUp); } private function setup(num:int):void { sequence = new ArrayCollection(); for (var i:int = 0; i < num; i++) { sequence.addItem({no:"", name:""}); } myRandom = new MyRandom(1, num); } private function changePeopleNum(ev:Event):void { setup(peopleNum.value); } private function sequencing():void { var randomInt:int = myRandom.getRandomBoundedInt(); if (randomInt == -1) { Alert.show(“設定人数を超過しました。”); return; } num.text = String(randomInt); effect.play(); } ソースコード~ Sequencing.mxml①

ソースコード~ Sequencing.mxml② private function addSequence():void { var obj:Object = new Object(); obj.no = num.text; obj.name = nameForm.text; sequence.setItemAt(obj, int(num.text) - 1); nameForm.text = ""; } private function mouseDown(ev:MouseEvent):void { table.addEventListener(MouseEvent.ROLL_OUT, dragOut); } private function mouseUp(ev:MouseEvent):void { table.removeEventListener(MouseEvent.ROLL_OUT, dragOut); } private function dragOut(ev:MouseEvent):void { var clipboard:Clipboard = new Clipboard(); clipboard.setData(ClipboardFormats.FILE_LIST_FORMAT, [createCsvFile()]); NativeDragManager.doDrag(table, clipboard); } private function createCsvFile():File { var file:File = File.createTempDirectory().resolvePath("sequence.csv"); var fileStream:FileStream = new FileStream(); fileStream.open(file, FileMode.WRITE); fileStream.writeMultiByte("No., 名前\n", "shift_jis"); for (var i:int = 0; i < sequence.length; i++) { fileStream.writeMultiByte(sequence.getItemAt(i).no + ", “ + sequence.getItemAt(i).name + "\n", "shift_jis"); } fileStream.close(); return file; } ]]> </mx:Script>

ソースコード~ Sequencing.mxml③ <mx:Sequence id="effect" target="{num}“ effectEnd="addSequence()"> <mx:children> <mx:Zoom duration="700" originX="75" originY="75" zoomWidthFrom="1.0“ zoomWidthTo="2.3“ zoomHeightFrom="1.0" zoomHeightTo="2.3"/> <mx:Zoom duration="600" originX="75" originY="75" zoomWidthFrom="2.3“ zoomWidthTo="1.0“ zoomHeightFrom="2.3" zoomHeightTo="1.0"/> <mx:Zoom duration="140" originX="75" originY="75" zoomWidthFrom="1.0“ zoomWidthTo=“1.3” zoomHeightFrom=“1.0” zoomHeightTo=“1.3”/> <mx:Zoom duration=“140” originX=“75” originY=“75” zoomWidthFrom=“1.3“ zoomWidthTo=”1.0” zoomHeightFrom=“1.3” zoomHeightTo=“1.0”/> </mx:children> </mx:Sequence> <mx:Label x=“10” y=“13” text=“人数”/> <mx:NumericStepper id=“peopleNum” x=“36” y=“11” value=“5” maximum=“99” width=“50”/> <mx:Label x=“100” y=“13” text=“名前”/> <mx:TextInput id="nameForm" x="124" y="11" width="133" enter="sequencing()"/> <mx:Button x="261" y="11" label="確定" width="56" click="sequencing()"/> <mx:DataGrid id="table" dataProvider="{sequence}“ left="350" right="10" top="10" bottom="10"> <mx:columns> <mx:DataGridColumn headerText="No." dataField="no“ width="40"/> <mx:DataGridColumn headerText="名前" dataField="name"/> </mx:columns> </mx:DataGrid> <mx:Label id="num" x="100" y="120" width="148" height="148" fontFamily="Arial" fontSize="256" textAlign="center"/> </mx:WindowedApplication> ソースコード~ Sequencing.mxml③

ソースコード~ MyRandom.as package { import mx.collections.ArrayCollection; public class MyRandom { private var remainingValues:ArrayCollection = new ArrayCollection(); public function MyRandom(lower:int, upper:int) { remainingValues = new ArrayCollection(); for (var i:int = lower; i <= upper; i++) { remainingValues.addItem(i); } } public function getRandomBoundedInt():int { if (remainingValues.length == 0) { return -1; } var index:int = int(Math.random() * remainingValues.length); var randomInt:int = remainingValues.getItemAt(index) as int; remainingValues.removeItemAt(index); return randomInt; } } } ランダムに取得する整数の下限と上限を与え、その範囲の整数を、ArrayCollectionに代入する 残りがない場合は –1 を返す ランダムにArrayCollectionから値を取り出して返り値とする

アプリケーションXML~Sequencing.xml <?xml version="1.0" encoding="UTF-8"?> <application xmlns="http://ns.adobe.com/air/application/1.0.M6"> <!-- The application identifier string, unique to this application. Required. --> <id>Sequencing</id> <!-- Used as the filename for the application. Required. --> <filename>Sequencing</filename> <!-- An application version designator (such as "v1", "2.5", or "Alpha 1"). Required. --> <version>v1</version> <!-- Settings for the application's initial window. Required. --> <initialWindow> <content>[この値は Flex Builder の出力ファイル app.xml に上書きされます]</content> <systemChrome>none</systemChrome> <transparent>true</transparent> </initialWindow> </application> SDKにて開発するときは、この箇所をswf ファイル名に置き換える必要がある

URL一覧 ダウンロード 参考記事等 ユーザーコミュニティー まさとしのAIR自習帳 AIR実行環境 http://labs.adobe.com/downloads/air.html 開発環境のダウンロード http://labs.adobe.com/technologies/air/develop_flex.html 参考記事等 AIR実行環境のシームレス・インストール http://journal.mycom.co.jp/series/air/015/index.html サンプル公開 http://labs.adobe.com/technologies/air/samples/ ユーザーコミュニティー FxUG(Flex User Group) http://www.fxug.net/ まさとしのAIR自習帳 http://d.hatena.ne.jp/masatoshisw20/ 私のブログです。よろしくお願いします。m(._.)m

ご清聴ありがとう ございました