仕事でAir for ios/Androidでアプリを制作していました。
このアプリでTwitter投稿機能を実装したのですが、いろいろ試行錯誤したのでメモ。

== アプリ登録をして、OAuth認証するつぶやき方 ==

きちんとOAuth認証する方法です。
https://dev.twitter.com/で、アプリ登録をして、
・Consumer key
・Consumer secret
を発行してもらいます。
Airのみで認証を通すのはかなり大変そうだったのでライブラリを使います。
⇒Tweetr(http://wiki.swfjunkie.com/tweetr)

アプリ内でStageWebViewを生成、それを受け渡して認証ページを展開します。
取得したConsumer keyとConsumer secretはAOuth.asにセットします。
こちらの記事が大変参考になりました。
http://blog.appforandroid.info/?p=411

実行してTwitterのID/PASSを入力すれば、上記Blogの参考ソース
//OAuthが終わったらTweetrでやりたい放題できます。
のところまで行きつくはず。
ただしtweetr.updateStatusでつぶやいてみたところ、
日本語を含む投稿がエラーになる。
これはTweetr.asの1893行目escape(value);を、escapeMultiByte(value);
にしたところ解決、と思いきや記号『.』を含んでもエラー。
よく分からないが、自前でデコードしてやる。
そこらへんのコード。

private function strEscape(value:String):String
{
	if (_oAuth)
	{
		/*元記述
		var str:String = escape(value);*/
		var str:String = escapeMultiByte(value);
		str = str.replace("%2E", ".");
		return str;
	}
	return value;
 }

もしかしたら『.』以外にもダメなのがあるかもしれない。
そのあと下のつぶやき方法に変えたので検証不十分、申し訳ない。

== AOuthなしでつぶやく ==

今回特定の文言を入力欄にいれた上で、自由に改編・付け足ししてつぶやいてもらうだけ、
別にその人のフォロワー取ってくるわけでもなし、アプリ内に自前で入力フィールド作るのも面倒、
よくある文言付きでTwitterにリンクするのをStageWebView内でやればいいんじゃないかと。

package
{
     import com.swfjunkie.tweetr.Tweetr;
     import com.swfjunkie.tweetr.oauth.OAuth;
     import com.swfjunkie.tweetr.oauth.events.OAuthEvent;

     import flash.media.StageWebView;
     import flash.events.ErrorEvent;
     import flash.events.Event;
     import flash.events.LocationChangeEvent;
     import flash.geom.Rectangle;
     import flash.display.Sprite;

     public class TweetMain extends Sprite
     {
          private var tweetr:Tweetr;
          private var webview:StageWebView;

          public function TweetMain()
          {
               if (stage) init();
               else addEventListener(Event.ADDED_TO_STAGE, init);
          }

          private function init(e:Event = null):void {

               removeEventListener(Event.ADDED_TO_STAGE, init);

               //StageWebView用意
               webview = new StageWebView();
               webview.addEventListener(LocationChangeEvent.LOCATION_CHANGE, pageChange);
               webview.addEventListener(ErrorEvent.ERROR, pageError);

               webview.stage = this.stage;
               webview.viewPort = new Rectangle(0, 0, 640, 960);
               //入力欄に入れておきたい文言をクエリで
               var url:String = "http://twitter.com?status=" + "hogehoge" +  " %23ハッシュタグ";
               webview.loadURL(url);
          }

         private function pageError(e:ErrorEvent):void
          {
               //ページエラー
          }

          //つぶやき完了URLを判定してStageWebView閉じる
          protected function pageChange(e:LocationChangeEvent):void
          {
               if(e.location == "https://mobile.twitter.com/" || e.location == "https://twitter.com/" ){
                    webview.stop();
                    webview.dispose();
                    webview = null;
               }
          }

     }
}

これで勝手に個人認証ページが挟まって、アプリ内からつぶやくことができる。
注意点としてはページ遷移をする度URLを監視して、つぶやき後にStageWebViewを破棄する部分。
iPhoneや多くのAndroidでは、
https://mobile.twitter.com/
に飛ばされるのだが、最近発売されたAndroid4.0機種では、
https://twitter.com/
に遷移する。
その分リダイレクトが一回多いらしくStageWebViewをstop()しておかないと、
破棄してからページを開こうとしてブラウザを立ち上ようとするという現象が起こった

以上。

昨日の記事のイベントでも登壇されたClockMaker 池田さんが執筆した書籍
ActionScript Beautifl Code〜Beautifl: Flash Gallery of wonderfl〜
何の因果か自分の拙いサンプルも載っていることから献本いただきましたので
紹介させていただきます。

ご存知Wonderflに投稿された数多くのFlashの中から、ゲーム・物理演算などの
カテゴリ毎に池田さんがえいやと選ばれた作品の解説本です。
なので入門用ではないです、ある程度スクリプト書いたことある人向け。
しかしながら古今東西様々なFlasherのアイデア、発想なんかが垣間見えつつ、
定石からちょっとトリッキーなテクニックまで習得できるかなりお得な本だと思います。
Wonderflで見たときは、もう何かスゴすぎて理解することを放棄した
あの作品も載ってるかもしれません。レッツ再チャレンジです、頑張ります。

6月11日に開催されたAdobe Developer Connection(ADC)へ行ってきたのでそのメモ書き。
途中入場だったのと集中力がないので相当抜けがありますが、まぁメモ書きとして。

SESSION2
スマートフォン向けWebサイトの制作

・スマートフォンサイトの制作方法
PC用のページを制作したら、スマートフォン用のCSS、JSを別途作成。
CSS3 Media Queriesによりデバイス毎にJS/CSSの切り替えができる。
大抵の場合スマートフォンの横幅にあわせてレイアウトを修正する必要があるので、
複数カラムを1カラムにするために要素の回りこみを変更したり、不要な要素をdisplay:noneしたり。
Dreamweaver CS5.5 ではライブプレビュー機能で、
スマートフォンでの見た目を再現しながら編集ができるよ。
・Androidの困った仕様（機種により）
ピンチアウトしたときの幅でメディアクエリが解除されてしまう。
（横幅が大きいと判断されてしまい？PC用のCSSが適用される）
対策として、user-scalableをnoにする。
拡大率をAndroidのみウィンドウの幅より少し小さくしてやる。
全体縮小しても文字サイズはそのままになってしまうので、
拡大率１以下の場合は文字サイズも合わせて小さくする

SESSION3
ネイティブアプリに変わる、新しいアプリ開発スタイル

・jQuery Mobile
HTML5のみでスマートフォンアプリが開発可能に。
data属性を使ってマークアップにセマンティクスを与えることができる。
簡単に作れるゆえカスタマイズが大変というデメリットも。
アプリ内ページ遷移が簡単につくれる。
div id=”page2″とかにすると２ページ目がアプリに作られ、
戻る・進むの履歴が効く。
ウェブ上にコンテンツを置くので、アップデートが楽。
グラフィカルな表現は苦手（業務用、ユーティティに向いている）
・PhoneGap（ネイティブアプリビルド）
さらにこの技術を使えば、完全にネイティブアプリ化できる。
カメラ機能などブラウザアプリからアクセスできない機能にも対応。
ただし使えない機能もある、音声認識など。
これも当然ながらゲームアプリなどには向かない。
アプリ制作の低コスト化が見込める。

SESSION4
FlashCS5.5の変更点

・イラレとの連携強化
テキストまわりタブやフォントサイズなども正確に再現されるように。
・コンテンツをステージに合わせてリサイズ
PhotoShopの解像度変更みたいな。
中のアニメーションも一緒にリサイズしてくれる。
マルチスクリーン対応には９グリッドが大活躍。
・ベクター画像のビットマップ化
書きだした際にベクターをビットマップ化してしまう
（スクリプトから操作するcashAsBitmapとは違う）
・AIR for iOS
iOS4&3GS以上対応なので注意。
AIRforAndroidアプリをiPhoneアプリへさっくり移植していた。
iPhone上部のメニューはAIR for iOSの書き出し設定で消せるが、
それにより通信のインジケーターも消してしまう。
それを理由に審査を落とされる場合があるので注意。

SESSION5
Flashによるマルチデバイスアプリ開発ワークフロー

・Flash CS5.5の機能紹介
モバイル向けのコードスニペットが追加。
スニペットを選んだら、対象となるオブジェクトにドラッグ＆ドロップ
（ラインがにゅっと伸びます）するUIで定義ができる。
アセットの共有機能で、
共通の素材/プロジェクトでマルチスクリーン対応できる。
（修正がすべてのリリースに反映される）
FlashBuilderとの連携強化
どちらでもプロジェクトを開けるように。
エディターとしてFBを使うと制作効率UP。
リファクタリング、参照検索　etcが使える。
インクリメントコンパイル（キャッシュ機能）で書き出しが高速化。

SESSION6
Flash Platform開発者が知らないと損をするFlex Mobile

・アプリケーションテンプレート
Flexモバイルプロジェクトは3種類
ビューベース：ビューと管理するビューナビゲーター（複数ページ）
タブ付き：ビューナビが複数（上より大規模なアプリに）
空白：ゼロから作りたい
・AIR for Androidの権限
様々な機能を使用をON/OFFする
・スマートフォンのDPI（Dot Per Inch）
端末のDPIを取得するAPIがある。
DPIProviderにより、
160、240、320のいずれかに丸めることができる。
・ゲームアプリのデモ
TigerMinesweeper（Androidマーケットにて配信中）
MovieClipSWFLoaderで過去のSWFをそのまま使用している。
新規で機能追加したスコア登録部分はswfObject経由でつなぎこみ。
今度配信されるADCの記事で詳しく。

SESSION7
Flex 4.5 を使用したモバイルアプリケーションの開発

公式に記事が。
http://www.adobe.com/jp/joc/devnet/flex/articles/flex_mobile_03.html

ESSION8
Sneak Peeks & 抽選会

・Wallaby
FlashをHTML5・CSS3アニメーションに変換。
・Edge
参考
AEのようなインターフェイスのHTML5,CSS3アニメーションオーサリングツール。
x,y座標、拡大率などプロパティ毎のタイムラインでアニメーションをつけていく。
HTMLページを直接編集できるのが特徴で、Flaファイルのような編集用ファイルがない。
アニメーションはjsonで保存され、元となったHTMLは無傷。
そのためレガシーブラウザでは動かない元HTMLがそのまま表示される。
（代替コンテンツを用意する必要がない）
年内にベータ版？がリリース。
・FlashPlayerの3D表示デモ
モルヒル、StageVideoとかのあれ。

というざっくりメモ。
とりあえずEdgeは早く触ってみたいです、Adobe製品にしては起動が早いと絶賛されていましたｗ
CS5.5の紹介もいろいろありましたが、
思った以上に使えそうな新機能が盛り沢山で正直かなり欲しくなりました。
バグ修正で金取る気かよとか誰か言ってたようですが、ホントすいませんでした。

このADC、ROUND01と銘打ってるわけで、
今後も開催され、いろんな技術や新情報を開発者に届けてくれるらしいです。
100くらいまで続けたいとおっしゃっていたので乞うご期待ですね。

Firefox3.6で読み込み失敗が取れない – wonderfl build flash online

さて、MacでPHPを弄ろうと思い、ローカルにWebサーバーを構築するフリーソフトMAMPをインストールしました。
Windowsだと多分XAMPPですね。Macにもありますが、どうせなら違うのを入れようとこっちを選びました。
PHPはすぐに動作するようになったのですが、スペルミス、構文エラー等発生したときにミスった箇所の行数などがデフォだと出ません、WinのXAMPだと出たんですが。
デバッグに不便なのでエラーを表示するよう設定する方法を調べましたが、PHPのバージョンなのか行数などが違っていたのでメモっておきます。

忘れずにMAMPの再起動をしましょう、エラー行数等の表示が出る筈です。

　
ということでこれからFlash以外にも、まだ慣れないMac環境でのメモとかも書くかもしれません。
新しいMBPはiPhoneでテザリングっぽいことが出来るかもとのことですが、全然気にしていません。

プラットフォーム依存しないことが大きな売りである筈のFlash君が
Windows7とVistaでのみ動かない事態に遭遇し、
解決に多大な労力を費やしたのでメモ。
願わくば同じ境遇の人が検索で引っかかってくれますよう。

結論を述べると、Windows7とWindowsVistaのPCにサウンドの出力装置が接続されていないと、
SoundChannelがnullで返ってきます。

var sc:SoundChannel = sound.play(); //戻り値がnullらしい

sc.soundTransform = new SoundTransform(0.5);//エラー

if(sc  != null)sc.soundTransform = new SoundTransform(0.5);//解決

イヤホン指したら普通に動いたときは狐につままれた気分でした。。。

　
イヤホンで検索したら出てきた。
http://www.flash-jp.com/modules/newbb/viewtopic.php?topic_id=9794&forum=6

• FlashPlayer９以下
• wmodeが”transparent”
• テキストフィールドへ動的に文字列を流し込んでいる
• そのテキストフィールドのY座標が2880px以上

でした。
対処法は以下のいずれか。

1. 書き出し＆閲覧Playerバージョンを10以上にする
2. フォントを埋め込む
3. cacheAsBitmap = true （ビットマップとしてキャッシュにチェック）

Flashの表示オブジェクトの限界が縦横2880pxらしいのでそれが関係していると思われる。
FlashPlayer10からはその制限が緩和されているため（参考）、
試してみたところテキストが表示されました。

該当のテキストフィールドにフォントを埋め込んでしまうのも効果あり。

表示されないだけで、文字列自体は入っているっぽかったので、
テキストを含むMovieClipのcacheAsBitmapをtrueにしたところ、これも効果あり。
今回はレギュレーションがPlayer8で固定、
日本語も入るのでフォントを埋め込むと容量が大きくなりすぎるということで、
3番の方法で対処しました。

【2010/12/17】
・上条彰宏氏「Flash Player描画機能の最新情報」の資料URLを追記
・公式にもレポートが追加されました

公式　 http://www.adobe.com/jp/joc/max/retweet/
Twitter     #maxjp

• 01-A「Deep Dive into Flex 4.5 (Hero) Preview」
  taiga.jp
  廣畑大雅氏
  発表資料：http://blog.taiga.jp/archives/2010/11/25/171000/
  
• 01-B「スマートフォンアプリ開発とFlexフレームワーク”Hero”入門」
  ClockMaker
  池田泰延氏
  発表資料：http://clockmaker.jp/blog/2010/11/adobe-max-2010-retweet/
  
• 02-A「進化するデザイン／開発ワークフロー：Flash Builder “Burrito” + Flash Catalyst “Panini”」
  AKABANA
  有川榮一氏
  発表資料：http://akabana.info/2010/11/27/adobe-max-2010-retweet/
• 02-B「Flash Player描画機能の最新情報」
  cuaoar.jp
  上条彰宏氏
  発表資料：http://www.adobe.com/jp/joc/max/articles/retweet_flash2/
  
• 03-A「Flex 4.5 （Hero）による モバイルアプリケーション開発とサーバ連携」
  クラスメソッド株式会社
  横田聡氏
  発表資料：http://d.hatena.ne.jp/sato-shi/20101128/p1
• 03-B「アメーバピグ for Android の作り方」
  株式会社サイバーエージェント
  浦野大輔氏／切通伸人氏
  発表資料：

上記発表意外に基調講演もあったのですが、そこで個人的に注目だったのはAdobeが提供するアプリ流通の仕組み、AdobeInMarket。
専用のSDKをアプリに埋め込み登録することで、ポータル＆提携する複数のストアでアプリを販売できるとのこと。
Androidの弱点としてAppStoreのような使い勝手の良い＆ここは賛否あるでしょうがフィルタリングの効いたマーケットがないことがよく言われているようなので期待したところ。
登録一回で複数のマーケットで売れるのなら楽ですし。

Twitterを見ると、自分が参加したのとは別会場で今回の全セッションをAdobeTVで公開してくれるとアナウンスがあったらしい？
会場別で半分は見れない形式だったのでこれは嬉しい、待ってます。

■アイテム、インスタンスが『ボタン』かどうかを調べる
ライブラリにあるアイテムはitemTypeで「movie clip」、「graphic」、「button」等取得できます。
ステージ上にあるシンボルの場合instanceTypeでは、ムービークリップ、ボタン、グラフィックが一緒くた「symbol」としか表示されません。
何とかならないか調べたところ、ボタンインスタンスであればbuttonTrackingが取得できるのでそれで対応。

//ライブラリのアイテムがボタンか？
if(fl.getDocumentDOM().library.items[0].itemType == "button")

//ステージのインスタンスがボタンか？
if(fl.getDocumentDOM().getTimeline().layers[0].frames[0].elements[0].buttonTracking != undefined)

　
■キーフレームかどうかを調べる
そのフレームがキーフレームかを調べるには、公式リファレンス(注:PDF) の例そのまんまですが、frame.startFrameプロパティが配列のインデックスと一致しているかどうかを確認。

//キーフレームか否か？
var frameArray = fl.getDocumentDOM().getTimeline().layers[0].frames;
var n = frameArray.length;
for (i=0; i<n; i++) {
	if (i==frameArray[i].startFrame) {
		alert("Keyframe at: " + i);
	}
}

//現在のタイムライン全体からキーフレームに置かれている要素一つ一つを走査する
var tl = fl.getDocumentDOM().getTimeline();
var layerNum = tl.layers.length;
for (var l = 0; l < layerNum; l++) {
	var frameNum = tl.layers[l].frames.length;
	for (var f = 0; f < frameNum; f++) {
		//キーフレームか否か
		if (f == tl.layers[l].frames[f].startFrame) {
			var elementNum = tl.layers[l].frames[f].elements.length;
			var elts = tl.layers[l].frames[f].elements;
			for (var e = 0; e < elementNum; e++) {
				var elt = elts[e];
				fl.trace("element of Keyframe : " + elt);
			}
		}
	}
}

【導入方法】
まず公式サイトからファイルを入手します。
そのままパブリッシュしようとすると、DListNode云々と怒られるので、ここからpolygonalクラスというのを入手して配置する必要があります。データ構造を扱いやすくするライブラリだそうです。

【実装】
まず各クラスの処理を簡略化したものがこちら。

WOW-EngineとPapervisionで全く同じ舞台を作ってやります。
Physics側では何も表示されませんが、物体が壁に当たると跳ね返ったりします。
View3D側では物体が表示されますが壁に当たっても素通りしてしまいます。
物理演算が適用された舞台をディスプレイに表示するため、毎フレームrenderとstep(WOW側のrender) を実行すると同時に、PV3Dのオブジェクトの座標をWOW-Engineの座標と同期させてやるわけです。

ポイントとしては主にWOW-Engine側、初期設定はこんな感じ。

//WOWインスタンス化。引数はフレームレートに対してどのくらいの間隔で計算を行うか。
wow = new WOWEngine(1);
//衝突判定設定？値が大きいと細かい衝突が無視される。　wow.STANDARD=100、SELECTIVE=200、SIMPLE=300。
wow.collisionResponseMode = wow.STANDARD;
//常に働く力（ここではY：重力を設定）
wow.addMasslessForce(new WVector(0, -4, 0));
//力の加速度（重力加速度を適用）
wow.damping = .98;

WOWオブジェクトは空間に設置されてた壁(バウンドエリア)と、動くものを分ける必要があります。

//バウンドエリアの設定(PV3Dで作る立方体と同じ大きさ・座標にする)
var ba:WBoundArea = new WBoundArea(900, 900, 900);
ba.setPosition(0, 0, 0);
//弾力
ba.elasticity = 2;
//摩擦
ba.friction = 1;
wow.setBoundArea(ba);

//この箱の中で動く球を作成(x座標、ｙ座標、ｚ座標、半径、固定物か否か、質量、弾力、摩擦)
var sphere:WSphere = new WSphere(0, 450, 0, 60, false, 0.5, 0.7, 0);
//初速度を設定(x,y,z方向への初期速度)
sphere.velocity = new WVector(Math.random()*100-50, Math.random()*100-50, Math.random()*100-50);
//空間に生成
wow.addParticle(sphere);

View3D側で同じ状態をPV3Dで作るとこんな感じ。

//WOWのバウンドエリアに対応する球
var ba:Cube = new Cube(materialList, 900, 900, 900, 4, 4, 4);
addChild(ba);

//箱の中で動く球
var ball:Sphere = new Sphere(material, 60, 8, 8);
addChild(ball);

View3D側、毎フレームWOW-Engineの座標をトレースする処理。

//動かすものの数が多いときはそれぞれ配列に格納して回しましょう。
//WOW-Engineの座標はpx,py,pzなのに注意。
for(var i:uint=0; i<pvObjArray.length; i++) {
	pvObjArray[i].x = _physics.wowObjArray[i].px;
	pvObjArray[i].y = _physics.wowObjArray[i].py;
	pvObjArray[i].z = _physics.wowObjArray[i].pz;
}
render.renderScene(scene, camera, viewport);

　
【SWF】WOW-Engine + PV3D デモ
上記のスクリプトを使ったデモです。
箱の中に球を生成させランダムな方向に降らせています。一定個数で古いものから消すようにしますが、当然Physicsとview3Dの両方でオブジェクトを消す必要があります。
view3Dは普通にremoveChildで。
注意するのはphysics(WOW-Engine)側、消すときはremoveParticleというメソッドを使うのですが、生成する際のaddParticleの引数にはWParticle型を指定するのに対して、removeParticleはDListNode型を指定する必要があります。これはaddParticleをした際返り値として取得ができます。

//球オブジェクトを生み出す関数内
var sphere:WSphere = new WSphere(0, 450, 0, 60, false, 0.5, 0.7, 0);
sphere.velocity = new WVector(Math.random()*100-50, Math.random()*100-50, Math.random()*100-50);
//WOWエンジンにWSphereを追加した際の返り値を配列に保存
var p:DListNode = wow.addParticle(sphere);
DListNodeArray.push(p);
//古いオブジェクトから消す処理、DListNodeArrayに保存されたDListNodeをremoveParticleには使用する。
if (DListNodeArray.length > 10) {
	wow.removeParticle(DListNodeArray[0]);
	DListNodeArray.shift();
}

　
3次元と物理演算ということで身構える要素沢山ですが、このようなライブラリを使用すると驚くほど簡単にとりあえず動くレベルのものができました。
いろいろパラメーターがあるので気持ち良く動くまで試行錯誤です。