Flex と Twitter と Google Maps と

Flex, Twitter, Google Maps を組み合わせる練習。

This movie requires Flash Player 10

大きく表示

ホントは Google Maps 上につぶやきをポップアップ表示したかったけど、つぶやきの座標はとれないみたい(プライバシー保護的にあたりまえ)なので、右のエリアに表示します。 緯度経度情報のあるつぶやきだけ地図上に載せました(2009/9/17 追記)

地図をドラッグすると周囲のつぶやきを表示します。

コメント中の「@ユーザ名」とか URL とかをリンクにする処理は省略。 つけました(2009/9/15 追記)

なんだか途中で飽きてしまってとっても中途半端で意味のないものになったけど、せっかくなので載せておく。

[2009/9/15 追記]
検索範囲を示す円を描いてみた。
そして地図のポイントをブックマークできるようにした。(大崎半径5km以内のつぶやき

[2009/9/16 追記]
経度/緯度情報のあるつぶやきだけ地図上にアイコンをマッピングしてみたよ。

[2009/9/17 追記]
地図内につぶやきを表示するようにしたよ。
検索もできるようにしたよ。(大崎半径50km以内の「falsh」を含むつぶやき
ジオコーディングを使って経度緯度情報がなくてもアイコンが出せるようになったよ。わお!

[2009/9/18 追記]
地図のリンクを使いやすくしたよ。

Flex 4 でボタンにアイコンを表示する

Flex 4 (Gumbo) フレームワークのスキンにも少し慣れてきたので、Mac の Mail のようなツールバーをスキンで作ってみる。

見た目はちょっと手抜きだけど、出来上がりはこんな感じ↓

This movie requires Flash Player 10

割と似たものが簡単にできたかな。

ソースは以下。

"Flex 4 でボタンにアイコンを表示する" の続きを読む …

Flex でビュー(デザイン)とロジックの分離

呼んだ?呼んだよね?
さあ今日はね。 Flex アプリでレイアウトや配色などのデザイン(ビュー)とロジックを分離するやり方を考えてみようよ。

なに?大丈夫だよ。絶対できるって。
じゃあ始めるよ。

すごく簡単なウェブアプリなら「 Flex ってこんなに簡単にできちゃうよー」ってサンプルを紹介するサイトなんかにあるように MXML だけでもできちゃうことがあるけど、ちょっと複雑になってくるとそうはいかないよね。

ってゆうか、そんな「MXML だけで作れちゃうウェブアプリ」のサンプルはエラーハンドリングを実装していない場合がほとんどだしね。
だって Flex を布教するためにはエラーハンドリングみたいな地味で面白くもない技術を紹介してもしょうがないもん。
仕方ないよね。うん。

・・・で、ちょっと複雑になると <mx:Script> タグを使って MXML に実装を書くこともあるけど、規模が大きくなってくると「やっぱりビューとロジックは分けるべきじゃない?」って言い出す人がいるよね。

面倒だけど仕方ないよ。

そんな訳でここらへんでビューとロジックの分離方法についておさらいしておこうね。

やり方はたくさんあると思うけど、今回はよく使われる二つの方法を復習するよ。
いいかい。ちゃんとついてきてよ。

"Flex でビュー(デザイン)とロジックの分離" の続きを読む …

Flex でドラッグでリサイズできる Panel を作る

Flex で mx.containers.Panel クラスを拡張してリサイズ可能なパネルを作ります。
Mac OS X のようにウィンドウの右下でのみリサイズできるように実装してみます。

完成形はこんな感じ。

This movie requires Flash Player 10

ソースは以下。

"Flex でドラッグでリサイズできる Panel を作る" の続きを読む …

Flex で Google 風のページナビゲーション

google_pagenation

Google のページを切り替えるリンク。ページネーションとかページャっていうのかな。あれを Flex で作ってみる。

出来上がりはこんな感じ。

This movie requires Flash Player 10

ASDoc は面倒なので作ってませんが、linkColor という独自のスタイルを追加しています。linkColor でリンク文字の色を指定します。現在のページの色は よく使われる color で指定。あとは適当にテキスト系のスタイル等をコピーしています。

リンクをクリックすると flash.events.Event.CHANGE が飛びます。

ソースは以下。
"Flex で Google 風のページナビゲーション" の続きを読む …

Flex のロギング

ずっと前から言われてることだけど、trace() の処理は重い。
かなり重い。とにかく重い。

一方 Flex のロギング API は軽い。trace() と比べると断然軽い。しかもリリースビルドして AIR にログを送ることもできるので便利。

簡単な例を作ってみた。

flexlogger

AIR アプリ: FlexLogger.air
ソース: FlexLogger.zip

上の AIR アプリをインストールして、下のボタンを押すと押すとログが取得できます。

デモとソースは以下。
"Flex のロギング" の続きを読む …