Flex3勉強会第71回＠東京参加報告

更新日：2017年8月16日

http://www.fxug.net/modules/bwiki/index.php?Flex3%CA%D9%B6%AF%B2%F1%C2%E871%B2%F3%A1%F7%C5%EC%B5%FE%BB%B2%B2%C3%BC%F5%C9%D5

日時場所

2009/05/27（水）19:00-21:30 アドビシステムズ社

セッション内容

Adobeからの最新情報
GAE/JとFlex/AIR
PDFポートフォリオとFlex
Flex標準コンポーネント飽きた

RIAに関する最新情報 by Adobe

アドビシステムズ株式会社
マーケティング本部クリエーティブソリューション部
Webグループ
ディベロッパーマーケティングスペシャリスト
轟　啓介様

[お知らせ] Flexのブランド変更

【現状】FLEX3世代

Flexフレームワーク / Flex Builder

【今後】FLEX4世代（以下の2つに分かれます）

Flash Builder + Flash Catalyst
- ツールのブランドをFlashに統一
Flexフレームワーク
- FlexブランドはFBとFCの基盤となっているオープンソースのフレームワークに設定

Adobe Flash Platform アーキテクチャ

[お知らせ] Betaリリース

Flash Builder 4 「FB」

2009/06/02（火） @Adobe Labs
- http://labs.adobe.com/
Flex Builder 3の次期バージョン
正式リリースは2009年度下期

Flash Catalyst 「FC」

2009/06/02（火） @Adobe Labs
- http://labs.adobe.com/
インタラクションデザイン・ツール
正式リリースは2010年度上期

[お知らせ] Flex/AIR無償ハンズオンセミナー

期間：2009/05～2009/10
主催：アドビシステムズ株式会社 / IT塾/Webシステム開発株式会社
講師：宮田亮氏（アドビ認定インストラクター）
費用：無償
コース：2時間で下記対象者別に設定（少人数によるハンズオン方式）
申し込み：http://www.adobe.com/jp/devnet/air/seminars/

[お知らせ] Adobe AIR アプリケーション

Adobe Developer Box

RIA開発者向け
情報集約ツール
AIR Galleryから入手
ソースコード公開中
- http://code.google.com/p/adobe-developer-box/

Tour de Flex

Flex開発者向け
コードサンプル集
AIR Galleryから入手
- http://www.adobe.com/devnet/flex/tourdeflex/

Tour de LiveCycle

LiveCycle開発者向け
LC情報ツール
Adobe Developer Connectionから入手
- http://www.adobe.com/devnet/livecycle/

[お知らせ] 予定されているイベント

FxUG主催ベータ祭り（仮）

2009/06/24（水）
ゲートシティーホール（大崎）
Flash Builder 4 / Flash Catalyst / Flex 4について

アドビ主催ベータセミナー（仮）

7月第2週
ゲートシティーホール（仮）
本社エバンジェリストによるセミナーリスト（スペインなまりの英語）

GAE/JとFlex/AIR

初期タイトル：GAE/J with BlazeDSで動くスケジュール共有アプリのご紹介

1	初期タイトル：GAE/J with BlazeDSで動くスケジュール共有アプリのご紹介

スティルハウス佐藤一憲

[参考] 資料公開先
- fxug_gae_20090527c.pdf
  - http://www.gotsugo.com/ > 「お知らせ」リンクからダウンロード
[メモ] GAE:Google App Engineの略称

[自己紹介]

スティルハウス佐藤一憲
- http://www.sth.co.jp/
- Adobe認定AIRインストラクター（m-school）
- テクニカルライティング（ペンネーム：吉川和巳）

[事例紹介] ご都合.com

ご都合.com
1. スケジュール共有ツール
2. 会議・飲み会に
3. 無償・登録不要
4. 2009/05/06公開
5. 6日間で2,000UU
ご都合.comの技術
1. Flexクライアント
2. Google App Engine for Javaサーバ
  - BlazeDS
  - ビジネスロジックのクラス
  - Entityクラス
3. 開発期間：5日間
  - 設計・実装・テスト・ドキュメント作成など

[紹介] GAE/J

GAE/Jとは
1. Google App Engine for Java
  - 自分のアプリをGoogleインフラで運用
  - クラウドコンピューティングサービス
2. GAE/Jのすごいところ
  - 無償で使える
  - BigTableが簡単に使える
  - サーバの構築が不要、デプロイ簡単
無償で使える

	無償提供分	有償提供分の単価
ストレージ容量	1GB	$0.005/1GBx1日
ネットワーク帯域（上り）	10GB/1日	$0.10/1GB
ネットワーク帯域（下り）	10GB/1日	$0.12/1GB
CPU時間	6.5時間/1日	$0.10/1時間
メール受信件数	2000件/1日	$0.0001/1件

BigTableが簡単に使える
1. BigTableとは
  - Googleを支える巨大分散DB
    1. RDBでなく、key-value型
      - スキーマは事前定義が不要、自由に変更可能
      - テーブル間結合ができない
      - LIKEも使えない
    2. 鬼のようなスケーラビリティと可用性
2. BigTableがタダで使えると
  - 大規模サービスでも苦労しなさそう
  - Oracle RACも分散キャッシュも不要
JDOでBigTable利用
1. GAE/JのDataStore API
  - JDO API経由でBigTableを使える
2. GtgCalendarクラス

@PersistenceCapable(identityType = IdentityType.APPLICATION)
public class GtgCalendar {
  @PrimaryKey
  @Persistent(valueStrategy = IdGeneratorStrategy.IDENTITY)
  @Extension(vendorName="datanucleus", key="gae.encoded-pk", value="true")
  private String key;
 
  @Persistent
  private String uid;
  ＜以下略＞
 
PersistenceManager pm = pmf.getPersistenceManager();
try {
  pm.makePersistent(gc);
} finally {
  pm.close();
}

@PersistenceCapable(identityType = IdentityType.APPLICATION)

public class GtgCalendar {

@PrimaryKey

@Persistent(valueStrategy = IdGeneratorStrategy.IDENTITY)

@Extension(vendorName="datanucleus", key="gae.encoded-pk", value="true")

private String key;

@Persistent

private String uid;

＜以下略＞

PersistenceManager pm = pmf.getPersistenceManager();

try {

pm.makePersistent(gc);

} finally {

pm.close();

}

サーバ構築不要、デプロイ簡単
1. GAE/Jの実行環境
  - Amazon EC2のようなVMではない
  - JBoss/Tomcatのような実行環境
2. GAE/Jの開発
  - Eclipseプラグインでローカル開発
  - クリック1つでデプロイ
3. メリットとデメリット
  - サーバ構築不要、LL感覚でデプロイ
  - でも「サンドボックス」の制約あり

[テクニック紹介] GAE/JでBlazeDSを動かす

GAE/JのEclipse開発環境
1. GAE/JのEclipseプラグイン
  - ローカルでGAE/J環境を再現
  - クリック1つでデプロイ可能
BlazeDSとGAE/J
1. GAE/JでもAMF通信したい
  - RemoteObjectはラク
2. GAE/JにBlazeDSを載せる
  - blazeds.warの中身をWEB-INFに配置
  - でもこのままではエラーが出る
BlazeDSを動かすには
1. Martin氏のブログを見よ！
  - http://martinzoldano.blogspot.com/2009/04/appengine-adobe-blazeds-fix.html
  - Martinさんありがとう！
2. BlazeDSソースのビルドが必要
  - まずはBlazeDSをビルドする環境を用意
3. 要点
  - JMX APIの管理機能はオフに
  - AbstractAmfInput.javaを修正
  - BaseHTTPEndpoint.javaを修正
4. Adobe ADCにも記事掲載の予定
5. BlazeDSのservices-config.xml
  - system要素に以下を追加
    - <manageable>false</manageable>
  - GAE/Jでは使えないJMXを使わない
6. AbstractAmfInput.javaを修正
  - 58行目を以下に修正
    - this.in = new DataInputStream( new java.io.BufferedInputStream( in ) );
  - GAE/Jのコンテナは特殊なので、I/Oの振る舞いにクセがある？
7. BaseHTTPEndpoint.javaを修正
  - 404～418行目をコメントアウト
    - setupFlexClientメソッドにてセッション重複エラーを発生させる部分
  - GAE/Jは特殊なクラスタ環境なので、セッション情報の取り扱いにクセがある？
8. BlazeDSをビルド
  - JARファイルをWEB-INF/libにコピー
Datastore APIのtips
1. eagar lodingできません
  - BigTableはjoinできない
  - 1:Nの親Entityと子Entityがある場合
    - ループですべての子Entityをロードしてからクライアントに渡す
    - BigTableプログラミングってこんな感じ？

private void loadChildren(GtgCalendar gc) {
  for (GtgResponse gr : gc.getResponses()) {
    for (GtgAvailableRange gar : gr.getAvailableRanges()) gar.getKey();
  }
}

private void loadChildren(GtgCalendar gc) {

for (GtgResponse gr : gc.getResponses()) {

for (GtgAvailableRange gar : gr.getAvailableRanges()) gar.getKey();

}

1. PersistenceManagerはクローズする
  - Entityとpmの「ひも付き」を切ってからクライアントに渡す
    - さもないと例外が
  - Hibernateのセッションクローズと同じ

// クエリを作成
PersistenceManager pm = pmf.getPersistenceManager();
Query query = pm.newQuery(GtgCalendar.class);
query.setFilter("token == tokenParam");
query.declareParameters("String tokenParam");
 
// クエリを実行
List&lt;GtgCalendar&gt; results;
GtgCalendar gc = null;
try {
  results = (List&lt;GtgCalendar&gt;)query.execute(token);
} finally {
  query.closeAll();
  pm.close();
}

// クエリを作成

PersistenceManager pm = pmf.getPersistenceManager();

Query query = pm.newQuery(GtgCalendar.class);

query.setFilter("token == tokenParam");

query.declareParameters("String tokenParam");

// クエリを実行

List<GtgCalendar> results;

GtgCalendar gc = null;

try {

results = (List<GtgCalendar>)query.execute(token);

} finally {

query.closeAll();

pm.close();

}

1. 主キーは「Key as Encoded String」
  - Datastore APIでの主キー
    - long型：親から子へのナビゲーション不可
    - Key型：ナビゲーション可能
  - BlazeDSでKey型は渡せない
    - 中身がなくなる
  - Key型をString型にエンコードする設定

@Extension(vendorName="datanucleus", key="gae.encoded-pk", value="true")
private String key;

1 2	@Extension(vendorName="datanucleus", key="gae.encoded-pk", value="true") private String key;

[現在企画中] BigTableとSmallTable

SmallTableとは
1. BigTableに足りない点
  - リレーショナルモデルが使えない
    - やっぱりjoinしたい、LIKEも欲しい
2. SmallTableとは
  - リアルタイムDB同期フレームワーク
    - まだ構想中、絵に描いた餅
  - クライアント側SQLiteとBigTableを同期
    - AIR、Ajax、iPhone
  - クライアント側ORMもあるといいな
[事例紹介] イマヒマColabolo（http://www.colabolo.com/）
1. ローカルSQLiteで動作するAIRコラボツール
2. RailsのDB同期サーバ（差分同期）
3. Javaのメッセージサーバ（C10K対応）
SmallTableのメリット
1. BigTable + SmallTableのメリット
  - クライアント側ではSQLを使える
    1. AIR/Ajax/iPhoneの違いをORMで吸収
    2. BigTableはデートストアに徹する
  - オフライン対応
    1. ローカルDB紛失時もサーバでバックアップ
  - バックグラウンドでリアルタイム同期
    1. サーバレスポンスを待つ必要なし
    2. WordやExcelの使い勝手＋オンラインアプリの即時性

Q&A

[Q] GAEでトランザクションは使えますか？
- [A] APIがあるみたい。でもクラスタなので、分散トランザクションが出来るかは不透明。

pdf de Flex

タイトル： PDFポートフォリオとFlex

1	タイトル： PDFポートフォリオとFlex

from DNP 森嶋ゆかりさん

[紹介] PDFポートフォリオとは

Adobe Acrobat Pro Extended

Acrobat9から入った機能
いろんなファイルを取り込んで1つのPDFとして配布が可能
ナビゲーション部分をFlexで開発可能
PDF内で3Dビューア、画像再生が可能

その他発表内容は、以下についてでした。

http://www.riaxdnp.jp/?p=243

Q&A

[Q] Adobe Acrobat Readerでも閲覧可能なのか
- [A] Adobe Acrobat Reader 9以降なら可能
[Q] AIRのコンポーネントは使えるのか
- [A] 使えない模様
[Q] メニュー以外はFlash？
- [A] メニュー以外はFlashのページもある、そうでないページもある

[紹介] PDFポートフォリオテンプレート制作

作成手順概要
1. テンプレートSWFの作成
  - Flexでテンプレートの実体となるswfファイルを作成
2. パッケージ化
  - 設定ファイルを作成し、swfや素材をパッケージ化
PDFとの連携
1. An Acrobat plugin
2. Acrobat API
3. Acrobat Application Runtime
4. Acrobat ActionScript API
5. Your PDF Portfolic Navigator (a SWF file)
テンプレートファイル（.nav）ファイルの構成
1. mimetype
  - navigator.xml
  - swf
  - アセット
  - プロファイル
プロジェクト作成
1. ポイント
  - Flexプロジェクトで作成
  - sdkはFlex3
  - libsにAcrobatのAPI（AcrobatAPI.swc）を追加
  - 新規作成で新規MXMLモジュール
    - ルートはmx:Moduleタグになる
  - acrobat.collection.INavigatorをImplement!
  - width="100%" height="100%"
  - host:INavigatorHost
    - このメソッドは、Moduleがロードされた後すぐcallされる
    - いつ完了するかは不確定
    - シャットダウン時もcallされる
UIを作っていく
IAttachment
- ファイルの情報を持っている
CommandType
- 処理コマンド
テクニカルTIPS
1. オリジナルフィールドの追加
注意点
1. Acrobat Pro, Acrobat Extended
  - 編集モード： Read/Write
  - 通常モード： Read Only
2. Acrobat Reader
  - Read Only
パッケージ化
1. navigator.xml
2. mimetype
  - application/vnd.adobe.pdf-navigator
3. 必要なファイルが揃ったら、ZIPアーカイブを作成
デバッグ
- アラートをあちこちに仕込んで行う必要がある
EclipseでFlexの開発をするときは、プラグイン「Ant」を入れるといい
PDFポートフォリオのカスタマイズに関する技術情報
- http://www.adobe.com/devnet/acrobat/
- http://blogs.adobe.com/pdfdevjunkie/

Q&A

[Q] FlexのAPIはすべて使えるのか
- [A] だいたい使えるが、挙動がおかしかったり、アラートが上がらなかったりする場合もある
[Q] PDFから外へ通信出来るのか
- [A} 出来ないかもしれない
[Q] AcrobatのAPIとFlashのAPIが混在しているが、Flexの内部にPDFを表示したりできるのか
- [A] 出来るのはPDF内のナビゲーション部分をFlexで記述するぐらい

Flex標準コンポーネント飽きた

大礒琢磨早稲田大学在学中

http://blog.isocchi.com/
Flexじゃなくても出来ることを勉強しておくとよい

3Dの描画方法

3Dオブジェクトが表示されるまで
1. 座標変換
  - モデル変換
  - ビュー変換
  - 投影変換
2. テクスチャ
  - 3Dの表面
3. シェーダ
  - 光
4. シャドウ
アフィン変換
1. 平行移動
2. 回転
3. スケール
4. 歪み
行列（Matrix3D）を使う
x軸にθだけ回転
- matrix.appendRotation(rotateX, Vector3D.X_AXIS);
- matrix.appendTranslation(tx,ty,tz);

private function enterFrameHandler(event:Event):void {
  if(!box.transform.matrix3D) return;
  var matrix3d:Matrix3D = new Matrix3D();
  matrix3d.appendTranslation(-box.width, -box.height, 0);
  maxtrix3d.appendRotation(3, Vector3D.Y_AXIS);
  matrix3d.appendTranslation(box.width, box.height, 0);
  box.transform.matrix3D.prepend(matrix3d);
}

private function enterFrameHandler(event:Event):void {

if(!box.transform.matrix3D) return;

var matrix3d:Matrix3D = new Matrix3D();

matrix3d.appendTranslation(-box.width, -box.height, 0);

maxtrix3d.appendRotation(3, Vector3D.Y_AXIS);

matrix3d.appendTranslation(box.width, box.height, 0);

box.transform.matrix3D.prepend(matrix3d);

}

GPU
1. ベクトル演算に特化した演算ユニット
2. GPUのコアは200個ぐらいある
  - 並列に処理をすれば高速処理が可能
Zソート
- FlashPlayerはLibraryを使わないとZソートを自前で実装する必要がある
- FlashPlayerはaddChildした順に描画処理を行う

[事例紹介] 機械学習サポートベクターマシン

http://blog.isocchi.com/2009/03/flexair-1.html

[事例紹介] 手書き文字認識エンジン Zinnia

http://blog.isocchi.com/2009/01/flexair-zinnia.html

Q&A

[Q] GPUをサポートするのか
- [A] OpenGLをサポートする言語で記述すれば、GPUを制御することが可能
- [A] Pixel Bender
- [A] FlashPlayer10での制限：GPUで動かないので思ったより速くない
[メモ] GPUを使用するプログラムは、中間ファイルを配布して、実行環境PCでコンパイルしてから実行する
[キーワード] GPGPU
[Q] 機械学習の標準モジュールはあるか
- [A] ActionScriptで書かれたモジュールは見たことがない
- [A] CやJavaやRで実装されているモジュールがある

次回のアナウンス

2009/06/14（日）RIAカンファレンス（仮）
2009/06/24（水）Adobe Flex4/AIRベータ祭り（仮）
2009/06/27（土）RIA勉強会予定（仮）

comment コメントをキャンセル

「Windows　Azure のバランスの良さについて」という記事が公開されています

「Windows　Azure のバランスの良さについて」という記事が公開されています。 http://blogs.msdn.com/b/masamis/archive/2010/06/14/windo ...

顔をうずめて眠りたい「○○○○枕」

「くぼみがちょうどいい」そうです。
 
世の男性の憧れ、おっぱい。そのおっぱいの形をした枕。
 
その名も「あまえんぼう」。
 
そりゃ甘えたくもなりますよ。
 
低反発ウレタン製なので、寝心地は抜群そうですね。

「くぼみがちょうどいい」そうです。

世の男性の憧れ、おっぱい。そのおっぱいの形をした枕。

その名も「あまえんぼう」。

そりゃ甘えたくもなりますよ。

低反発ウレタン製なので、寝心地は抜群そうですね。

なに作ってんだかwww 是非誰か試して欲しい。関連

salesforce.comが日本国内のデータセンター協業先を探している（かもしれない）

—クラウドコンピューティングを利用する上で、データがどの国に存在するのかを気にする企業や官公庁は少なくありません。ワールドワイドでのデータセンター戦略はどのようになっていますか？米salesforc ...

Visual Studio 2010 Express 日本語版、本日より一般ダウンロード提供開始。

Visual Studio 2010 Express 日本語版が、本日 2010/04/28（水）より一般の方でもダウンロードが可能になりました。ダウンロード元のURLはこちら。http://www ...

Microsoft Partner Network登録者限定（登録無料）に Windows Azureの開発者・アーキテクチャコース（英語版）がリリース

Microsoft Partner Network登録者限定（登録無料）に「Windows Azureの開発者・アーキテクチャコース（英語版）」がリリースされているそうです。 @sqlazurejp ...

PREV: なぜRIAなのか、なぜFlex/AIRなのか
NEXT: Windows用Ruby on Rails開発環境「RoRED」

Flex3勉強会第71回＠東京 参加報告