(Microsoft PowerPoint - Apollo \203v\203\215\203O\203\211\203~\203\223\203O.ppt)

Size: px

Start display at page:

Download "(Microsoft PowerPoint - Apollo \203v\203\215\203O\203\211\203~\203\223\203O.ppt)"

ゆたかむこやま
4 years ago
Views:

1 Apollo プログラミングクラスメソッド株式会社横田聡

自己紹介クラスメソッド株式会社 http://www.classmethod.jp/ 技術ネタ http://d.

2 自己紹介クラスメソッド株式会社技術ネタ shi/ 会社ネタ

3 Flex2 勉強会第 14 回のテーマは Apollo 第 15 回は大阪で開催します初の大阪開催アップルストア大阪心斎橋店 Flex2.0.1 CS3 Apollo のMac 対応記念!?

4 3 月 19 日さて今日の本題です Apollo のAlpha 版が Labs で出ました 2007 年秋ごろ Apollo 正式版が出るようですちなみに Apollo とはコードネームでリリース時には名前が変わる可能性があります

5 アジェンダ Apollo って何? Apollo で何ができるのか? ダウンロードして使ってみるプログラミングしてみるせっかくの勉強会だし濃い目のネタも紹介

6 Apollo って何? マルチプラットフォームのランタイム環境 Windows,Mac,(Linux Linux) HTML エンジン搭載 Webkit(Safari に使われています ) Flash,HTML,JavaScript,PDF をまとめる Apollo アプリはローカルにインストールされる WEB ブラウザの制限を越える

7 Apollo ランタイム環境ランタイム自体おそらく無料コマンドラインコンパイラ自体おそらく無料同じソースで複数の環境で動く Windows とMac の違いは API で吸収

8 Webkit HTML エンジン Windows でも Mac でも同じ HTML JavaScript を掛けるブラウザごとに書かなくて良い JavaScript も動く Ajax アプリもそのまま動く GoogleMaps

9 Flash,HTML,JavaScript,PDF Flash JavaScript イベント投げるイベント受け取る Flash JavaScript イベント投げるイベント受け取るえ!?

10 WEB ブラウザの制限を越えるローカルファイルアクセル OS の違いは API が吸収ウィンドウ操作タスクトレイ常駐 ( おそらく ) ウィンドウ枠自由ローカルアクセスきたー!

11 Apollo インストール Adobe Labs からダウンロードランタイム apollo_win_alpha1_ msi SDK apollo_sdk_alpha1_ zip

12 Apollo アプリの作り方普通の HTML をアプリとしてラップ普通の Flex/Flash アプリをラップ今まで作ってきたアプリに Apollo 用設定ファイルを追加すれば完成

13 HTML をApollo 化する

14 HTML をApollo 化!(1) 3 分クッキング Hello.html を作成 <html> HELLO!! </html>

15 HTML をApollo 化!(2) Apollo 用設定ファイルの作成 <?xml version="1.0" encoding="utf-8" standalone="no"?> <application xmlns=" application/1.0.m3" appid="hello1" version=".4"> <properties> <name>hello</name> <description/> <publisher>flexcoder</publisher> <copyright/> </properties> <rootcontent systemchrome="standard" transparent="false" visible="true">hello.html</rootcontent> <icon/> </application>

16 HTML をApollo 化!(3) さぁ Apollo アプリ実行しよう! adl.exe Hello-app.xml

17 HTML をApollo 化!(4) あなたも今日から Apollo デベロッパー

18 HTML をApollo 化!(5) アプリケーションを配布しよう adt.exe Hello.air Hello-app.xml Hello.html

19 HTML をApollo 化!(6) 配布用 AIR ファイル完成

20 HTML をApollo 化!(7) インストーラの起動

21 HTML をApollo 化!(8) 上書きインストールもできる

22 HTML をApollo 化!(9) アンインストールオプションも出る

23 HTML をApollo 化!(10) かんたんに手が出せます!

24 Flex をApollo 化する

25 Flex をApollo 化する (1) Flex Builder 2 でApollo 開発 Adobe Labs からダウンロード Flex Builder 2 Apollo Extensions fb_apollo_extensions_win_alpha1_ exe Flex2.0.1SDK が必要

26 Flex をApollo 化する (2) プロジェクトの新規作成

27 Flex をApollo 化する (3) アプリの設定を記述後でも設定可能

28 Flex をApollo 化する (4) ルートは ApolloApplication タグ <?xml version="1.0" encoding="utf-8"?> <mx:apolloapplication xmlns:mx= " layout="absolute"> < ここにプログラムを記述 > </mx:apolloapplication>

29 Flex をApollo 化する (5) 実行いきなり完成

30 Flex をApollo 化する (6) ちょっと見た目を変える設定ファイル HelloApollo1-app.xml <rootcontent systemchrome= none none transparent= true true ステータスの表示 Application.status

31 Flex をApollo 化する (7) <?xml version="1.0" encoding="utf-8"?> <mx:apolloapplication xmlns:mx=" layout="absolute" status=" 現在のステータス title="apollo アプリ "> <mx:style> Application { background-image:""; background-color:""; background-alpha:"0.2"; } </mx:style> <mx:label text="hello Apollo World." fontsize="20" /> </mx:apolloapplication>

32 Flex をApollo 化する (8)

33 Flex をApollo 化する (9)( 配布形式にするエクスポートで AIR 指定ソースも付けられる

34 Apollo コンポーネントを使う

35 Apollo コンポーネントを使う (1) ローカルファイル HTML ウィンドウローカルファイル

36 Apollo コンポーネントを使う (2) FileSystemComboBox ローカルファイル FileSystemDataGrid ローカルファイルファイル情報を DataGrid で表示するファイル名作成日更新日タイプサイズ FileSystemHistoryButton ディレクトリ参照を戻る FileSystemList ディレクトリを表示する FileSystemTree ディレクトリをツリー表示する

37 Apollo コンポーネントを使う (3) HTML 表示 HTML <mx:html location= URL URL > Sprite のサブクラスフィルタ透明化変形

38 Apollo コンポーネントを使う (4) HTML

39 Apollo コンポーネントを使う (5) ウィンドウ操作ウィンドウ最大化最小化リストアクローズウィンドウの新規作成イベント ACTIVATE / DEACTIVATE CLOSING / CLOSE FOCUS_IN / FOCUS_OUT MOVING / MOVE RESIZING / RESIZE

40 Apollo コンポーネントを使う (6) OSX 版のツールバー Alpha 版の制限システムトレイアプリアイコンの操作デスクトップ情報ネイティブウィンドウメニューアプリへのドラッグアンドドロップ

41 Apollo File API

42 ファイルパスの取得 Apollo File API (1) 機能概要 OS に依存しないパスの指定よく知られたパスはショートカットデスクトップドキュメントフォルダテンポラリーファイルとフォルダディレクトリー一覧移動コピー削除ファイルの読み書きバイナリテキスト同期非同期

43 Apollo File API (2) 基本クラス flash.filesystem パッケージ File ファイルまたはディレクトリの参照 FileMode ファイルを開く際の読み書きモードの指定 FileStream ファイルストリーム

44 Apollo File API (3) パス指定 File クラスはパスを表しますプロパティ nativepath:os 独自のパス url:url parent: : 上位パス操作 resolve( a/b.txt a/b.txt ) : 現在パスから指定 resolve(.... ) : 上のフォルダを指定 relativize(otherfile) : 現在のパスに追加 canonicalize : 正規化標準化 (Document( and Setting など )

45 file: Apollo File API (4) URL スキーマファイルシステムのルート app-resource: インストールされたアプリのルート app-storage: アプリケーション格納ディレクトリ

46 ユーザーフォルダ Apollo File API (5) File.userDirectory File.desktopDirectory File.documentsDirectory アプリケーションフォルダ : File.appResourceDirectory File.appStorageDirectory File.createTempDirectory() ファイル情報カタログ情報 size creationdate, modificationdate ディレクトリーリスト listdirectory()

47 File.encoding Apollo File API (6) ファイルシステム情報ファイルエンコーディング File.lineEnding 改行コード File.separator ファイルセパレータ Capabilities.hasIME IME 利用可能か Capabilities.language 言語 Capabilities.os OS

48 コピーと移動 Apollo File API (7) file.copyto(destfile) file.moveto(destfile) 削除 file.deletefile() file.deletedirectory() file.movetotrash() ファイル操作アップロードとダウンロード extends flash.net.filereference ブラウザー open, save, directory

49 Apollo File API (8) ファイル IO FileStream クラス IDataInput/IDataOutput インタフェースを実装 (ByteArray やSocket と同じように ) バイナリデータ read/writebytes read/writeint writeint,, read/writedouble writedouble, など AMF データ ( 直列化されたオブジェクト ) read/writeobject テキストデータ read/writemultibyte read/writeutfbytes

50 ゴール Apollo File API (9) 同期 / 非同期モデル同期プログラミングモデルをシンプルで信頼できるようにする Flash イベントモデルの活用対話的かつ魅力的なユーザー体験を維持する同期と非同期の違いを最小にする API 群同期モデル例 ) file.delete(), filestream.open( ) 戻り値を待ってファイル読込みを完了する例外としてエラーをスローする非同期モデル例 ) file.deleteasync(), filesteam.openasync( ) 完了イベントでファイル読込みを完了するイベントとして結果とエラーを渡す

51 Apollo File API (10) 非同期 File I/O 同期ファイル I/O はByteArray のように振舞う bytesavailable プロパティはファイルの最後まで読めることを表している非同期ファイル I/O はSocket やURLStream のように振舞う bytesavailable はデータがバッファリングされて読み込み可能なことを表している progress イベントは新しいデータが読めることを表している complete イベントが起こればカンタンにファイルを読める他の方法 readint(), readdouble(), など読み込み可能なファイルから読む

52 JavaScript 連携

53 JavaScript 連携 (1) 概要 ActionScript とJavaScript は共に ECMAScript ベースの言語である Apollo では相互に呼び出すことが可能 Apollo 内の JavaScript はバージョン 1.7

54 JavaScript 連携 (2) DOM ActionScript から HTML をDOM 操作する HTML のJavaScript イベントに ActionScript を関連付ける <html> <body id="link"> <p id="msg">test</p> </body> </html>

55 JavaScript 連携 (3) DOM 操作 html.window.document. getelementbyid( msg ).innerhtml = " メッセージ ";

56 JavaScript 連携 (4) DOM 操作 JavaScript イベントをリスニング var link:object = html.window.document. getelementbyid("link"); link.onclick = clickhandler;

57 JavaScript 連携 (5) ActionScript JavaScript JavaScript の標準メソッド呼び出し html.window.alert("hello from ActionScript");

58 JavaScript 連携 (6) ActionScript JavaScript JavaScript のカスタムメソッド / プロパティ呼び出し <script> greeting = "hello"; function reversestr(str) { returnstr = ""; for (i = 0; i < str.length; i++) { returnstr = str.charat(i) + returnstr; } return returnstr; } </script> html.window.greeting html.window.reversestr("foo")

59 JavaScript 連携 (7) JavaScript ActionScript ActionScript の標準メソッド呼び出し <html> <script> runtime.trace("hello from JavaScript."); </script> </html>

60 その他の機能

61 ネットワークの検出ネットワークの状態変化を検出できる Shell.shell.addEventListener (Event.NETWORK_CHANGE, onnetworkchange); function onnetworkchange(event:event) { //Check resource availability }

62 コマンドライン引数 Apollo アプリをコマンドラインから呼び出す際に引数を渡すことができる HelloApollo9.exe aaa bbb ccc

63 アプリケーションの更新現在インストールされているアプリをプログラム経由で更新することができるローカルにインストールされているバージョンとサーバーにある最新バージョンを比較すれば最新版を自動的にインストールできる

64 最後におしまいここまで読んでくれた方にご相談です

65 Apollo やりません?(^^)/ Flex2 とAjax とApollo で開発しませんか? Java とか PHP とか C# も多少やってます Adobe Certified Flex Developer 多数在籍! 新製品や新サービスの企画開発してます

66 PPT 汚し失礼しました

CodeGear Developer Camp

CodeGear Developer Camp T4 PHP チュートリアルセッションはじめての Delphi for PHP CodeGear エヴァンジェリスト高橋智宏 1 アジェンダハンズオントレーニングに必要なもの Delphi for PHP V2.0 の環境設定 VCL for PHP の基本的な動作を確認フォトギャラリの製作マスターページ画像アップロードカスタムコンポーネントの導入など 2 ハンズオントレーニングに必要なもの