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 コメントをキャンセル

Microsoft Update実施後、Windows XPが起動しなくなる場合がある（ATI Radeon HD 2400 シリーズのドライバが原因）

Microsoft Update (11月のセキュリティ更新)を行った後に、Windows XPが起動しないという報告がWeb等でも散見されています。
この件、ですが、 ATI Radeon HD 2400 シリーズの古いバージョンのドライバに起因することが判明しました。

1 2	Microsoft Update (11月のセキュリティ更新)を行った後に、Windows XPが起動しないという報告がWeb等でも散見されています。この件、ですが、 ATI Radeon HD 2400 シリーズの古いバージョンのドライバに起因することが判明しました。

すでに、起動しなくなってしまった場合は、以下の手順で、一時的にセキュリティ更新プログラム (MS09-065/KB969947)をアンストールして対処します。　
現象が出ていない場合や、これからのセキュリティ更新プログラムを適用する場合は、
まず ATIのサイトで、最新のドライバを入手してインストールした後に、
セキュリティ更新プログラムを適用することをお勧めします。

すでに、起動しなくなってしまった場合は、以下の手順で、一時的にセキュリティ更新プログラム (MS09-065/KB969947)をアンストールして対処します。　

現象が出ていない場合や、これからのセキュリティ更新プログラムを適用する場合は、

まず ATIのサイトで、最新のドライバを入手してインストールした後に、

セキュリティ更新プログラムを適用することをお勧めします。

   1. コンピューターの起動時に、Windows 拡張オプション メニューが表示されるまで、F8 キーを繰り返し押します。
      注 : お使いのコンピューターによって、Windows 拡張オプション メニューに表示される項目が異なる場合がございます。
   2. 方向キーや下方向キーで [セーフ モード] を選択し、Enter キーを押してください。
   3. セーフ モードで Windows XP が起動します。
   4. [スタート] ボタンをクリックし、[コントロールパネル] をクリックしてください。
   5. [コントロールパネル] ウィンドウの中から [プログラムの追加と削除] を開いてください。
   6. [更新プログラムの表示] チェックボックスにチェックを入れてください。
   7. [Windows XP セキュリティ更新 (KB969947)] をクリックし、[削除] ボタンをクリックします。
   8. [ソフトウェア更新の削除ウィザード] で [次へ] をクリックしてください。
      注 : KB969947 ダイヤログが表示された場合、そこに表示された更新プログラムをインストールした順番に削除してください。詳しくは http://support.microsoft.com/kb/823836/ja をご覧ください。
   9. [完了] ボタンが表示されるまで待ち [完了] ボタンをクリックします。自動的に再起動が起こらない場合、[スタート]ボタンから再起動してください。
  10. Windows XP 起動後に [スタート] ボタンをクリックし 、[コントロールパネル] 、[プログラムの追加と削除] を開いてください。
  11. ATIのビデオドライバを選択し、削除してください。
  12. Catalyst Control Centerを選択し、削除してください。
  13. Microsoft Update もしくは Windows Update を実行し、[Windows XP 用セキュリティ更新プログラム (KB969947)] をインストールしてください。詳細は http://support.microsoft.com/kb/882797/ja をご覧ください。
  14. ATI のサイトから、ドライバのダウンロードを行い、インストールしてください。

1. コンピューターの起動時に、Windows 拡張オプションメニューが表示されるまで、F8 キーを繰り返し押します。

注 : お使いのコンピューターによって、Windows 拡張オプションメニューに表示される項目が異なる場合がございます。

2. 方向キーや下方向キーで [セーフモード] を選択し、Enter キーを押してください。

3. セーフモードで Windows XP が起動します。

4. [スタート] ボタンをクリックし、[コントロールパネル] をクリックしてください。

5. [コントロールパネル] ウィンドウの中から [プログラムの追加と削除] を開いてください。

6. [更新プログラムの表示] チェックボックスにチェックを入れてください。

7. [Windows XP セキュリティ更新 (KB969947)] をクリックし、[削除] ボタンをクリックします。

8. [ソフトウェア更新の削除ウィザード] で [次へ] をクリックしてください。

注 : KB969947 ダイヤログが表示された場合、そこに表示された更新プログラムをインストールした順番に削除してください。詳しくは http://support.microsoft.com/kb/823836/ja をご覧ください。

9. [完了] ボタンが表示されるまで待ち [完了] ボタンをクリックします。自動的に再起動が起こらない場合、[スタート]ボタンから再起動してください。

10. Windows XP 起動後に [スタート] ボタンをクリックし、[コントロールパネル] 、[プログラムの追加と削除] を開いてください。

11. ATIのビデオドライバを選択し、削除してください。

12. Catalyst Control Centerを選択し、削除してください。

13. Microsoft Update もしくは Windows Update を実行し、[Windows XP 用セキュリティ更新プログラム (KB969947)] をインストールしてください。詳細は http://support.microsoft.com/kb/882797/ja をご覧ください。

14. ATI のサイトから、ドライバのダウンロードを行い、インストールしてください。

[ ...

ReMIX Tokyo 09 ブレイクアウトセッション資料

ReMIX Tokyo 09 ブレイクアウトセッション資料が公開されています。 http://www.microsoft.com/japan/events/remix/2009/conference. ...

NuPack, ASP.NET MVC 3 Beta, WebMatrix Beta 2 がそれぞれ公開されました。

NuPack, ASP.NET MVC 3 Beta, WebMatrix Beta 2 がそれぞれ公開されました。（2010/10/07）「Announcing NuPack, ASP.NET M ...

「Windows Phone 7用のUIデザインテンプレート」がダウンロードできます

「Windows Phone 7用のUIデザインテンプレート」が公開されています。以下のURLをクリックすると、「Design Templete for Windows Phone 7」がダウンロー ...

「Windows AzureでWebサーバーを再開発してみる」がデブサミ2010で講演

「Windows AzureでWebサーバーを再開発してみる」というセッションが、 Developers Summit 2010で行われました。その時の資料がhttp://d.hatena.ne.j ...

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

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