【現象】
Flash Builder 4.0 に同梱されている AIR のバージョンが 1.5.3 / Flash Player のバージョンが 10.0では、
sparkテキスト（TLFを使ったテキスト）のIME入力（インライン入力）が出来ません。

【回避方法】
縦書で入力を行うようなコンテンツを作る場合は、Flex 4.1 SDKで開発し、
AIR 2.0 / Flash Player 10.1 を対象にする必要があります。

【参考】
「Adobe Tech Note : IME入力が機能しない」
http://kb2.adobe.com/jp/cps/836/cpsid_83672.html
　
　
２：Tabの挙動がおかしい

【現象】
Tab入力したのに、改行される

【回避方法】
FlashPlayer10では、Tabが改行扱いになるようで、
FlashPlayer10.1では、Tab（デフォで48pix）扱いになります。
FP１０でTabを使いたい場合は、下記のようにTabの入力回数毎に、
TabStopFormatを設定してあげる必要があります。

var tabStop1:TabStopFormat = new TabStopFormat();
tabStop1.alignment = TabAlignment.CENTER;
tabStop1.position = 100;

ちなみに、下記のコードでTLFでのTab入力を可能になります。

var config:Configuration = new Configuration();
config.manageTabKey = true;
var textFlow:TextFlow = new TextFlow(config);

【参考】
Adobeフォーラム　「Tab in TLF」
http://forums.adobe.com/message/2552548#2552548
Adobeフォーラム　「TabElement Not Supported with TextLayout Framework」
http://forums.adobe.com/message/2284240#2284240
　
　
３：FlashCS5でTLFを使うと、FlashVarsの値がとれない

【現象】
Flashvarsは、HTMLから埋め込みswfファイルに値を渡すプロパティで、
通常 loaderInfo.parameters で値が取得できます。
しかし、TLFを使ったコンテンツで、かつパブリッシュ設定がデフォルトのままだと、
値が取れなくなってしまいます。

【回避方法】
原因はランタイム共有ライブラリ（RSL）のようです。
まず、TLFテキストを使用するということは「textLayout.swc」ライブラリを利用することになり、
デフォルト設定のままパブリッシュすると、「textLayout_x.x.x.xxx.swz」というRSLファイルとして出力されます。
これによって、本体SWFの容量はスリムになりますが、実行時に”TLF　RSLの読込み”が必要となります。
このTLFのRSLのローディングに問題があり、下記コードで回避できます。

\\通常はこの１行で、Flashvarsの値が取れる
var params:Object = loaderInfo.parameters;

\\追加チェックする
if (parent != null && parent.parent != null)
{
params = parent.parent.loaderInfo.parameters;
}

＊但し、コンストラクタや２フレーム目に書くのは無く、必ず１フレーム目に書く

その他の回避方法として、
１：クラシックテキストを使う（TLFを使わない）
２：:パブリッシュ設定でTLFをコードにマージする（RSLを使わない）

【参考】
Adobeフォーラム 「TFL flashvars bug」
http://forums.adobe.com/message/2859307#2859307
Flash Professional CS5 ユーザーガイド 「TLF テキストを含む SWF ファイルのパブリッシュ」
http://help.adobe.com/ja_JP/flash/cs/using/WSb03e830bd6f770ee-4b0db644124bbdb363d-8000.html
Flex3 Help 「フレームワーク RSL の使用」
http://livedocs.adobe.com/flex/3_jp/html/help.html?content=rsl_09.html
　
　
４：TLF API で作ったテキストボックスで、日本語入力ができない

【現象】
TLF APIを使って、１から編集可能なテキストボックスを作成した場合、
IMEの入力モードが変更できず、日本語入力ができない。
詳しくはコチラ
（環境によって再現しないかも知れません）

【回避方法】
IMEを有効にするのに IME.enabled = true となる必要があるのですが、
作ったテキストボックスのフォーカス・インのタイミングで確認すると、
false になってますので、下記のように強制的に true にします。

function onFocus(e:FocusEvent):void
{
if(Capabilities.hasIME){
IME.enabled = true;
}
}

【参考】
FxUG 「TextInput の IME 制御について」
http://www.fxug.net/modules/xhnewbb/viewtopic.php?topic_id=3867

7/10、お台場の東京カルチャーカルチャーで「おばかWindows 7アプリ選手権 決勝戦」が開催され、私たちも決勝戦に参戦してきました！
その決勝戦イベントのレポート記事が、@ITにて公開されましたのでぜひご覧ください。

投稿した２作品はこちらです↓
「おばか Windows 7アプリ選手権」に２作品投稿しました！」

投稿された約60作品の中から、7つの部門において部門賞を獲得した8作品が、最優秀おばか賞をかけてそのおばかっぷりを競いました。
AR三兄弟の川田さん、あの高橋名人やマイクロソフト執行役の大場さんをはじめ、とっても豪華な顔ぶれです。
会場も笑いが絶えず、本当に楽しいイベントでした。
参加させて頂きありがとうございました！

祝「お・ね・が・い、マルチ、タッチ、ここにタッチ♪」部門賞受賞！

■ Flash Playerのファイルアップロードの通信は、ブラウザから通信APIを利用していない

アップロードの通信は、Webブラウザからの通信とは違うもの、と考えておく必要があるようです。このため、ieHTTPHeadersやLiveHttpHeadersのようなHTTPヘッダーをキャプチャするツールでヘッダー情報をキャプチャすることができません。

■ FirefoxやSafariで自己SSL証明書のSSL通信でアップロードに失敗する

自己証明書によるSSL通信下でファイルアップロードを行うと、アップロードに失敗します。IEではセキュリティ例外を一度承認してしまえばアップロードできるのですが、SafariやFirefoxでは意図的にサーバー証明書やルート証明書をOSやブラウザにインストールする必要があります。

■ IE以外では、アップロードリクエストに「Cookie」や「Authentification」等のHTTPヘッダーの付加情報が付かない

これもFirefoxやSafari等のIE以外のブラウザの現象です。これで問題になるのは、

• セッション保持
• ベーシック認証
• Cookie-Insert等によるクラスタリング等

です。クラウド上のサーバーを利用するときも気をつけた方が良いですね。

■ Uploadメソッドでは、カスタム HTTP リクエストヘッダはサポートされない

Uploadメソッドでは、URLRequestのrequestHeaders プロパティは無視されるため、HTTPヘッダー情報をアレンジすることができません。
リファレンスより。

URLRequest オブジェクトの requestHeaders プロパティは無視されるため、カスタム HTTP リクエストヘッダはアップロードまたはダウンロードでサポートされません。

■ ネットワーク帯域が細いとき、サーバーレスポンスが遅延するときに、挙動がおかしくなる

ネットワーク帯域が遅いとき、サーバーに負荷がかかっていてレスポンスを返せないとき、ProgoressEventや、DataEventのタイミングがおかしくなることがあります。また、常駐ウィルススキャンソフトが原因のときもあります。

■ Flash Player10からはマルチスレッドアップロードがサポートされていない

Flash Player に追加された新しい機能により、Flash Player 10 にパブリッシュする場合は、FileReference.browse()、FileReference.upload()、FileReference.download()、FileReference.load() および FileReference.save() の中で、同時に実行できる操作は 1 つのみです。複数の操作を実行すると、Flash Player でランタイムエラー（コード 2174）が発生します。進行中の操作を停止するには、FileReference.cancel() を使用します。この制限は Flash Player 10 にのみ適用されます。以前のバージョンの Flash Player については、同時に複数の操作を実行しても、この制限には影響されません。

サーバ側からのCOMPLETEが受け取れないと、次のアップロードを実行できません。

　
Flash Playerのアップロード／ダウンロード機能を使うときは、これらのことに気をつけましょう！！
※Flash Player 10.1で挙動が異なっている点もあるかもしれないので、ご了承下さい。

「BINTA」　http://circle.zoome.jp/obaka2010/media/31/
「イエッサー！ センサーで参戦さー」/「いやー、仕事でも使えて、モテモテになりましたよ」部門
お仕事上の難しい人間関係を円滑にするためにも、こんなアプリは如何でしょう？

「SOUL FLAGS」　http://circle.zoome.jp/obaka2010/media/9/
「お・ね・が・い、マルチ、タッチ、ここにタッチ♪」部門
素敵なキャラクターと音楽、一緒にのって遊びましょう。はたから見るとおばかです。

　

「BINTA」

ビンタしたい相手をWebcamでキャプチャすると、相手の顔が検出されます。
加速度センサーを忍ばせた「BINTAグローブ」を手にはめ、左右往復ビンタと顔面パンチが画面上でできます。

Windows7のセンサー機能を使い、WPFで作成しました。

「SOUL FLAGS」

Windows7のマルチタッチを使った旗揚げゲームです。
こちらはSilverlightで作成しました。

【おばか Windows 7アプリ選手権】
http://www.atmarkit.co.jp/ad/obaka/obaka7/index.html
投稿〆切は5/31(月)。
作品のテーマとして７つの部門があります。
動画で投稿された作品の中から、各部門の優秀賞の7作品が決勝戦へ進み、決勝イベントにて最優秀賞が決定します。

決勝戦イベントは7/10(土)です。
詳細はこちら↓
http://tcc.nifty.com/cs/catalog/tcc_schedule/catalog_100519202981_1.htm

１．scaleプロパティの活用

なんの変哲もないよく見かけるscaleプロパティを使った小技。
Scaleを少し変更するだけで、同じインスタンスも素敵に変身します。

【Window領域に合わせた拡大表示】
大きなディスプレイを使っている人は、Windowもめいいっぱい広げて使いたいもの。Flexでは表示サイズに合わせた％指定やパディングの指定もできすが、座標計算をして表示しているコンポーネントの場合、Windowサイズが変更されるときにいちいち計算をしなおすのは面倒。そんなときは、今のWindowサイズにおける表示可能領域とそのコンポーネントのサイズを比較して、何％拡大可能か計算します。それをscaleにセットするだけで、簡単にリキッド・レイアウトが実現できます。

【一覧表示】
一覧表示や、Mini Map表示ならスケールダウン。scaleを小さく設定するだけでミニチュアコンポーネントが作れます。ミニチュアながらも機能はそのまま！なのがかわいらしい。必要に応じてステータスを変更しいらない機能は無効化しましょう。

scaleを変更するだけでいいので簡単です。インスタンスを使いまわせば経済的ですし、下手な計算なロジックを書いてバグを埋め込む心配もなし！

２．ドラッグプロキシーの活用

複雑なアプリになってくると、様々なコンポーネントが多重構造になってしまいます。通常各コンポーネントは自分の描画エリア内にしか、表示が行えないのでコンポーネント間を超えた表示を行いたい場合には、注意した設計が必要です。この画像を一番上のレイヤーに表示したいんだけど… そんな時の裏技！！

おなじみのドラッグプロキシーを辿っていくと発見しました。systemManager.addChildToSandboxRoot!

systemManager.addChildToSandboxRoot(“popUpChildren”, _imageProxy);

Sandboxという名が気になりますが、public function なのでお言葉に甘えておじゃまさせていただきました。

３．ToolTipの活用

ボタンがいっぱいあってどれを押せばいいのかわからないわ！
そんなとき、ボタンの上をうろうろしているとツールチップが現れてヒントをくれるのがバルーン表示。
toolTipプロパティに文字列をセットするだけで、バルーン表示が行えます。

toolTip=”表示したい文字列”

toolTipプロパティはUIComponentのプロパティなので、Flexのコンポーネントならなんにでも使えます。
もちろん、そもそも分かりやすいUIや分かりやすいラベル名を付けておく。
これが一番大事です。
バルーン表示も多用するとうざったくなるのでご利用は計画的に。

以上、すぐに使えるFlexコネタ集でした！
DNPドリームページでお試しください。

まず、基本となるTLFを使った編集可能なテキストボックスを作ります。

//TextFlowの生成
var textFlow:TextFlow = new TextFlow();
textFlow.fontSize = 40;
textFlow.color = 0xFFFFFF;

//TextFlowに段落や文字要素を追加します。
var p:ParagraphElement = new ParagraphElement();
var s:SpanElement = new SpanElement();
s.text = “いろはにほへと　ちりぬるを　わかよたれそ　つねならむ”
+”　うゐのおくやま　けふこえて　あさきゆめみし　ゑひもせす”;
p.addChild(s);
textFlow.addChild(p);

//表示用コンテナをCanvasコンポーネント等に追加
var sprite:Sprite = new Sprite();
baseCanvas.rawChildren.addChild(sprite);

//上記コンテナとTextFlowを結びつけるコントローラを、flowComposerに追加
var controller:ContainerController = new ContainerController(sprite, 200, 200);
textFlow.flowComposer.addController(controller);

//編集マネージャの追加
textFlow.interactionManager = new EditManager();

//ここで更新して、適用させます。
textFlow.flowComposer.updateAllControllers();

これでテキストボックスに文字を表示できましたが、上図のように文字が溢れてる状態です。
（スクロールバーは自動的には付かないので、自前で用意する必要があります）

編集可能なテキストボックスなので、カーソル移動するとスクロールして、
隠れてる文字を表示することができます。
このスクロール機能のOn/Offで、文字溢れの判定方法が異なります。

■スクロール機能のOn/Off

//スクロールの処理を行う、コントローラのスクロールポリシーを変更します
controller.verticalScrollPolicy = controller.horizontalScrollPolicy = ScrollPolicy.OFF;

この図のようにスクロールOffにすると、見切れていた行は表示されなくなり、
カーソル移動してもスクロールしません。

（１）スクロール機能Onの場合

//文字溢れの判定対象のコントローラを指定します。
var lastContainer:ContainerController = textFlow.flowComposer.getControllerAt(textFlow.flowComposer.numControllers – 1);

//コントローラの”文字の表示可能領域(compositionHeight)”と、
//隠れて見えない部分を含む”文字の占有領域(getContentBounds())”を比較します。
//横書の場合は、”高さ”で判別。縦書の場合は、”幅”で判別します。
if(lastContainer.compositionHeight < lastContainer.getContentBounds().height)
{trace(“文字が溢れています！”);}

（２）スクロール機能Offの場合

//スクロールがOffの場合は、”文字の占有領域”が、
//”文字の表示可能領域”より大きくなることはないので、
//上記の方法では、文字溢れが判別できません。
//なので、最後の文字（この例では”す”）を含んでいるコントローラのインデックスを取得し、
//戻り値が”－１”の場合は、どのコントローラにも含まれていない =　文字溢れ　となります。

var containerIndex:int = textFlow.flowComposer.findControllerIndexAtPosition(textFlow.textLength-1);
if(containerIndex==-1)
{trace(“文字が溢れています！”);}

以上のように、コントローラのスクロール機能On/Offによって、
文字溢れの判定方法が異なるので、実装時に注意が必要ですね。

ドリームページは、専門の知識や経験がない人でも、「自分だけの本格的な本」を「１冊から、簡単に楽しく作ることができる」ことをコンセプトにしています。Web経由で提供するユーザーの操作画面として、Flashプラットフォームを活用したRIA技術を活用していますので、その中のRIA技術、おすすめ機能を紹介したいと思います！

　
【編集画面】

　
●ローカルプレビュー機能
ローカルプレビュー機能は、FlashPlayer10の新機能です。画像のアップロード画面でサムネイルを表示する際に使われています。

　
●印刷屋さんならではの細かい気配り
写真は、ドラッグ＆ドロップで配置できます。印刷物特有の問題として、アップロードされた画像ファイルの画像解像度が足りないと、出力後荒れてしまうので、拡大/縮小の制御や、アラートのアイコンを表示しています。写真の枠にフチが無い場合は、本にする際の断ち落とし領域を考えて配置するよう制御しています。

編集の終わったデータは、サーバー側でＤＴＰファイルに流し込まれ、印刷用のＰＤＦが作成されます。弊社の印刷技術が、この組版部分で生きています。
　
●新しくなったFlashの文字組！
ページに文字を入力・描画する機能には、Flash Player10から搭載されているText Layout Framework（以下TLF）を使っています。段組や行送りなどの組版機能が豊富なため、Dream Pagesでは背表紙の縦書きや縦方向の揃えの表現などでTLFが活躍しています。

　
【サーバ通信技術】
Flashと連携するサーバーアプリケーションとしては、Javaを使っています。その通信モジュールとして、　Flashがサーバーアプリケーションとバイナリ通信するための「Blaze DS」を利用しています。これで開発の効率化と、大量の画像ファイルをアップロードする際の通信量の削減を行っています。

５月３１日までオープニングキャンペーン中なので、ぜひ覗いてみてくださいね。
DreamPages http://dreampages.jp/
　
その他ドリームページを楽しむためのコンテンツも要Check！！
　
【ギャラリー公開】
自分が作った作品を公開したり、みんなが作った作品を見ることができます。
⇒みんなの作品を見てみよう！
ブログパーツとして自分のサイトに貼付けすることもできます。ここのサイトにも！→

【アフィリエイトプログラム】
ブログなど自分のWebサイトにバナーやテキストリンクなどの広告を貼って、サイト訪問者がその広告を経由してドリームページの商品を購入した際に、成果報酬を得ることができるプログラムもあります。
⇒アフェリエイトプログラムのお知らせ

Silverlight 4 の様々な新機能に加え、Windows phone 7のSilverlight 対応など、楽しい話題が盛りだくさんですね。

現在Silverlightの普及率は60%、日本では70%以上に上昇しているとのこと。昨年のPDC09（2009/11）時点では45%ということで、短期間での注目度アップが伺えます。

Silverlight 4 のたくさんある新機能の一つとして、COMオートメーション機能を使ったExcel連携を試してみましたので、以下簡単な使い方を載せました。

まず、いくつかポイントを挙げます。

●権限昇格モードのOut-of-browser実行します。

●beta版からの変更あり。
　ComAutomationFactory Class
　名前空間：System.Windows.Interop

　↓
　AutomationFactory Class
　名前空間：System.Runtime.InteropServices.Automation

●dynamic変数を使うため、Microsoft.CSharp.dllを追加します。
(デフォルトでインストールすると、C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Libraries\Clientあたりにある）

●COMオブジェクトのリソースの解放をしないとプロセスが残ってしまうので、使い終わったCOMオブジェクトはDispose()を忘れずに。

それでは、簡単なExcelの操作方法を挙げてみます。

・Excelオブジェクト生成して表示
dynamic excel = AutomationFactory.CreateObject(”Excel.Application”);
excel.Visible = true;

・ワークブック追加
dynamic workbooks = excel.Workbooks;
workbooks.Add();

・アクティブなシートを取得
dynamic sheet = excel.ActiveSheet;

・[1,1]のセルを取得して文字列を入れる
dynamic cell = sheet.Cells[1,1];
cell.Value = “名前”;

・Excel側の変更イベントをSilverlight側で受け取れるようにする
delegate void SheetChangeDelegate(dynamic excelSheet, dynamic rangeArgs);

excel.SheetChange += new SheetChangeDelegate(SheetChangedEventHandler);

//イベントハンドラでExcel情報を受け取る例
private void SheetChangedEventHandler(dynamic excelSheet, dynamic rangeArgs)
{
  string sheetName = excelSheet.Name; //シート名の取得
  int row = rangeArgs.Row; //変更されたセルの列を取得
  int col = rangeArgs.Column; //変更されたセルの行を取得
}

・チャートを追加
dynamic shapes = sheet.Shapes;
shapes.AddChart(4, 300, 10, 400, 300); //AddChart(Type, Left, Top, Width, Height)

その他、Excel操作ではありませんが、動作状況を確認する方法です。

・Out-of-browserで実行されているか確認
if ( !App.Current.IsRunningOutOfBrowser ){…}

・COMオートメーションが利用可能か確認
if ( !AutomationFactory.IsAvailable ){…}

以上、簡単な使い方の例でしたが、これでSilverlightのDataGridコントロールなどで表示しているデータと、Excel上のデータを簡単に連動させられるようになります。特に業務系のアプリケーションなどでの活躍に期待大です！

Excelボタンを押すとExcelを起動し、その際SilverlightのDataGridが持つデータをExcelへ渡しています。
この例では、AddChartの第１引数に”-4102″を指定して、3D円グラフを表示させました。

エントリ作品はこちら⇒「変身ベルト　仮面リーダー」

結果発表はこちら⇒「コンテスト結果発表！」

こちらからICCWで行われた結果発表の様子がご覧いただけます。
⇒http://www.ustream.tv/recorded/5310652

なかなかネタが思いつかず苦悩した日々、ネタ決定後もなかなか時間がとれずあせりましたが
みんなのスキルと時間を少しづつ持ち寄り、なんとか形になってよかったです。
そういうわけで、意外にもたくさんのメンバーと、たくさんの技術が詰まっているアプリになりました。

技能賞ということで、技能の解説を。

説明しよう！（技術解説）

１．さぁ！変身ベルト（R/W）を装着したら、Webカメラの前に立つんだ！

アプリの起動とともにカメラの検知、FeliCaポートの認証、専有処理などを行います。

２．通りすがりのヒーロー…名前を教えてくれ…(ひらがなとカタカナ、大体６文字ぐらいで)
３．そして、変身！ボタンを押すと、カッコいいオープニングムービーが流れるよ！

FeliCaがかざされたことを検出するためにここからタイマーでPolling開始。
findTimer = new Timer(500, 240);
とした。0.5秒毎ならリアルタイム感は十分。
検出されなかった場合は、一旦ポーリングを停止して、リトライするか確認する。

４．いよいよ、変身だ！！！変身カード（FeliCa搭載の電子乗車券）をベルトに挿入！

検出と同時に、IDm取得、FeliCaの残高取得、FeliCaカード外されたことを検知するタイマー開始
lostTimer = new Timer(2000);
こちらはリアルタイム感は必要でないので2秒毎のポーリング。

IDm下1桁よりスーツを選択。
残高からパワーを決定。

FeliCa検出後、色認識されたポイントに変身スーツや炎をレンダリング
描画は2Dのみの想定だったのでマーカーは使わず、色による位置検出のみ
◎kawanetさんのLivePointersライブラリを使用されていただきました。
http://www.slideshare.net/kawa0117/jsartoolkit-livechromakey-livepointers-next-gen-of-ar

緑色の2点のマーカーから大体の
・ポジション
・スケール
・角度
を計算しています。

５．赤い必殺カードを手にかざし、炎を発射！

同じくピンクのマーカーを検出

６．必殺技をキメたら記念撮影だ！（ポーズを決めて、ちょっと待ってネ！）

いい感じで炎が出たタイミングを狙って！

７．撮影した画像はTwitterに投稿されるよ！（要必殺カード）
歴戦のヒーロー達を見てみよう！
http://twitter.com/MaskedReadar

キャプチャした画像をJPEGEncoderでJPEGに変換。ローカル保存しておきます

８．撮影が終わったら、カードを取ってね！

FeliCaが外されたこと（ポーリングでレスポンスが失敗）をTimerで検知します。

９．エンディングムービーが流れます。

最後に撮影した画像をTwitPicに投稿。

http://twitpic.com/api/uploadAndPost

（おまけ）

投稿した画像のURLをFeliCaを使って携帯に送信。
http://twitpic.com/show/large/ + mediaid;

1０．クローズ

FeliCaポートの認証解除、専有解除など

いかにもMashUpです。
この短期間でここまでやれたのは、DNPの総合力をうまく発揮できたおかげです。
ご協力いただいたみなさまに感謝いたします。

＜謝辞およびメンバー紹介＞
・FeliCa技術協力
　小野寺さん（情シス）、小原さん（C&I事業部）
・AR企画支援・技術支援
　宮下さん（デジタルコム）
・アプリ開発、ベルト開発
生田/森嶋/丸山（riaxdnp）
・Flashオーサリング
　吉川さん/日暮さん（デジタルコム）
・アートディレクション
　金指さん/高島さん/行田さん（デジタルコム）
・変身ベルト 作成キット
　森川（riaxdnp）
・協賛
　IPS事業部

引き続き、バージョンアップや別のアプリも開発していきたいですね。
SONYさんには次回コンテスト開催も期待しています。
どうもありがとうございました！