akihiro kamijo: January 2007 Archives

« December 2006 | Main | February 2007 »

January 31, 2007

Flex Ajax bridge と Ajax Data Services

Flex と Ajax の世界を繋ぐ Flex Ajax bridge がアップデートされました。（Flex Ajax Bridge@Labs） また、Ajax Data Services と名前も新しくなって Ajax から FDS を使うためのライブラリが公開されています。（Ajax Data Services@Labs） どちらも Flex 2.0.1 が前提です。

Flex Ajax bridge はこちらからダウンロードできます　（FABridge.zip 763 KB） が、肝心の js ファイルがスパムフィルタによりテキストファイルに置き換えられているようです。現在対応中とのことですが、同じファイルが Ajax Data Services にも含まれていますので、とりあえずこちらをダウンロードすることをお勧めします。（Ajax Data Services 23 MB）

Ajax Data Services を使うと Ajax アプリケーションからでも FDS を使ったオブジェクトの同期や非同期のメッセージング、サーバからのプッシュができるようになります。

Posted by ackie at 04:59 PM | Comments (0)

January 26, 2007

Halo から Aeon へ

今回はビジュアルデザインの話です。といっても UI コンポーネント限定ですが。

Flash に興味のある方は Halo （ヘイロー） という言葉を聴いたことがある方も多いと思います。最近の Flash にはもれなく付いてる UI コンポーネントのビジュアルデザインのテーマ名ですね。

Halo はどんなデザインなのかよく分からないという方は、例えばボタンだと下の図のような感じです。言葉だけではぴんと来なかった人も見れば思い出したりしませんか？

halobutton.jpg

いまさらながら Flash 標準 UI コンポーネントが登場した背景

ちょっと前になりますが Flash が Web サイトで広く使われるようになって、スプラッシュページ以外の用途もだんだんと認知されるようになってきた頃がありました（Flash 5 あたり）。一方で、その頃は Flash の使用自体に対するネガティブな意見もまだまだ強い頃でした。jacob nielsen の "Flash: 99% Bad" などは覚えている人も多いのではないでしょうか。

上記の nielsen のドキュメント内でも記述されていたポイントに、Flash を使ったサイトではサイト毎にコンテンツの操作方法が異なるため混乱することがしばしばで、且つ大抵どのケースも十分に使いやすさが検証されていないコントロールが採用されている、というものがありました。この指摘に対する回答の一つとして（formerly known as） Macromedia から提供されたのが Flash MX 以来の標準 UI コンポーネントというわけです。

さて、その際にビジュアルデザインのテーマとして採用されたのが Halo でした。Flash MX 後も V2 コンポーネントや Flex 1 のコンポーネント等が作られていますが、全てルック＆フィールは Halo になっています。

Halo のデザインは枠の形やベベルなど特徴的で印象の強いものです。おかげでいくつかの問題を抱えることになりました。例えば、コンテンツ並みに目立ってしまうとか、サイトのデザインにあわせにくいとか。。。

結局あまり見かけない標準コンポーネントになってしまいました。

そうこうしている間に Adobe もいろいろと経験を積んだわけです。そうして新しくデザインされたテーマが Aeon （イーオン） です。Aeon が製品に使われたのは Flex 2 が初めてです。Flash ユーザの方はまだ馴染みがないかもしれませんね。

これが Aeon （のボタン）です。

aeonbutton.jpg

シャープになったエッジやシンプルなサーフェイスから背景との関係がより意識されていることが伺えます。

Flex 2 の Aeon コンポーネント

前述のように、今のところ Flex 2 のみ Aeon コンポーネントを持っています。Flex 2 の SDK をインストールすると Windows であれば \Flex SDK 2\frameworks\themes\AeonGraphical Source に AeonGraphical.fla というファイルが見つかると思います。このファイルを開くと各コンポーネントのスキンが定義されています。

aeonskins.jpg

実際には、これらのスキンが使用されているわけではなくて別のファイルに Flex 2 デフォルトのスキンの定義があるのですが、Aeon のデザインポリシーやスキンの構造を理解するにはこっちの方が分かりやすくて便利でしょう。

特に、Flex 2 の UI デザインをする際は Aeon を理解しておくといろいろと役に立ちます。ということで、ここでは一番単純そうなボタンコンポーネントのスキンを紹介します。

Aeon のボタンは下図のように 枠 + 塗り + ハイライト の３つのレイヤーからなるしごく単純な構造です。

aeonbuttonskin.jpg

実は Halo ボタンは6つのレイヤー（つまり Aeon の倍！）からできていました。Flex 2 でも Halo は使用できますが Aeon の方が全体的にシンプルな構造になっているため描画処理が軽いのです。

また、スキンのカスタマイズも Halo よりは分かりやすくなっているように思います。

Aeon スキンのカスタマイズ

Halo は中央から外へのグラデーションでした。Aeon は上下のグラデーションが基本です。

Flex 2 の Aeon ボタンでは fillColors というプロパティを使って "塗り" のレイヤーに上下両端の色を指定できるようになっています。指定の仕方は CSS と同じ要領です。下の例ではボタンの上から下にかけて白から薄いグレー（これがデフォルト値です）のグラデーションを指定しています。

Button { 
 fillColors: #ffffff, #cccccc;
}

実際にいくつかの値を適用してみた例が以下になります。左から順に、白（ffffff）→青（0000ff）、青→青、青→白を指定しています。

aeonbuttonfillcolors.jpg

さて、上の例を見ると、青（0000ff）を指定したのにちゃんとその色になってませんよね？もう理由分かってる人も多いと思いますが、これはボタンが透けているからです。

Aeon のボタンでは "塗り" と "ハイライト" のレイヤーに透明度のグラデーションを設定できます。使用するプロパティはそれぞれ fillAlphas と highlightAlphas で 0 （完全透明）から 1 （非透明）の間の値を設定します。

まず "塗り" の透明度を指定してみます。下の例は全て fillColors に白（ffffff）→青（0000ff）を指定したものです。fillAlphas は左から順に [1, 1]（ボタン全体が非透明）、[0.6, 0.4]（Aeon のデフォルト）、[0.4, 0.6] の値が使われています。

aeonbuttonfillalphas.jpg

次は "ハイライト" の透明度の指定を変えてみます。fillColors には白（ffffff）→青（0000ff）を、fillAlphas には [0.6, 0.4] を（つまり上のサンプルの真ん中のボタンと同じ）指定することにします。

下の例の左端は highlightAlphas に [0.3, 0] を指定しました。これは Aeon のデフォルトですので、上図の真ん中のボタンと同じはずです。中央のボタンには、[1, 0]（上端が非透明）、[1, 1]（ハイライト全体が非透明）を指定してみました。ハイライトの効果が分かるでしょうか。

aeonbuttonhighalphas.jpg

それから、ボタン自体が透明度を持つため背景によってボタンの見え方が変わります。下図は上の３つのボタンをそのまま Flex 2 デフォルトの背景色の上に乗せたものです。結構違った印象になります。

aeonbuttonalphas_bg.jpg

このように透明度を使って背景と重ねた効果を積極的に使おうというのは Aeon のデザインコンセプトの一つです。

おわりに

下のスクリーンショットは Flex 2 のサンプルアプリケーションとして公開されている Flex Store です。白い背景でコントラストの強い主役のコンテンツ領域に対し、画面左側の操作用のパネル部は少し背景が透けた状態でそこが2次的なエリアであることが表現されています。

flexstore.jpg

Halo がデザインされた頃は 3D 的な形状を与えることによりノーマン的アフォーダンスを持たせる（懐かしい）というのがトレンドでした。最近は透明なサーフェイスを重ねることでコンテンツやコントロールと背景の関係を表現するというのがトレンドの一つのようですので、Halo から Aeon になってもトレンドを追っかけるという点は変わっていないのかもしれませんね。

Posted by ackie at 04:59 PM | Comments (0)

January 25, 2007

Flex Ant tasks と Flex Compiler Shell

Adobe Labs に2つ新しく Flex 関連の公開がありました。

Flex Ant tasks

Flex Ant tasks は Ant プロジェクトとして Flex アプリケーションをビルドするためのタスクを提供します。提供されるタスクは以下の3つです。

  • mxmlc: コマンドラインのアプリケーションコンパイラーを起動します。Flex アプリケーションやモジュール、SWF を生成する際に使用します
  • compc: コマンドラインのコンポーネントコンパイラーを起動します。SWC や RSL を生成する際に使用します
  • html-wrapper: Flex アプリケーションをラップする HTML ファイルを生成するのに使用します

詳細は Labs の wiki をご覧ください。（Flex Ant tasks@Labs） ダウンロードは以下のリンクからどうぞ。 （ZIP ファイル, 112KB）

Flex Compiler Shell

Flex Compiler Shell (fcsh) は Flex アプリケーション等をコンパイルするためのシェルです。

コマンドラインで mxmlc や compc を使うのと同じような機能ですが、fcsh のほうがコンパイルに必要なリソースをメモリ上に保持し続けること等から実行は早くなるようです。つまり起動し続けて使う形が想定されているということですね。Flex Builder では既にこの形の最適化が採用されています。

こちらも詳細は wiki をご覧ください。（Flex Compiler Shell@Labs） ダウンロードはこちらです。（ZIP ファイル, 72KB）

Posted by ackie at 05:13 PM | Comments (0)

January 22, 2007

Flash Media Encoder プレリリース版公開の続き

前の記事（Flash Media Encoder プレリリース版公開）の補足です。

Flash Player 6 以降にはビデオエンコーダの機能が入っています。Adobe の調査によると日本では 98.5%の PC や Mac には既に Flash Player 6 以降がインストールされているとの数字ですので、ほとんどの環境で特に今回公開された Flash Media Encoder なしでも FMS を使ったライブストリーミングが可能だということになります。

では、なぜ Flash Media Encoder をわざわざ新たに開発したかということですが、Flash Player のエンコーダはいろんな環境でできるだけ手軽に使えることを目的としているため、（多少機材に投資してでも）クオリティの高い映像を配信したい場面には向いていません。そんな場合でも Flash Video のソリューションが使えるように、と考えられたのが Flash Media Encoder というわけです。

細かい点ですが前の記事では不明確でしたので念のため追記です。

Posted by ackie at 05:38 PM | Comments (0)

Docking ToolBar

Adobe Exchange に新しい Flex コンポーネントが公開されました。Docking ToolBar　です。

Docking ToolBar　コンポーネントはアプリケーションウインドウの上端または下端にドックするか、アプリケーション領域内に浮いた状態で使えるツールバーです。ダウンロードのリンクおよび簡単な説明がこちらのページにありますのでご覧ください。（Docking ToolBar@Adobe Exchange）

Posted by ackie at 04:59 PM | Comments (0)

January 19, 2007

Flash Media Encoder プレリリース版公開

Adobe Labs に Flash Media Encoder のプレリリース版が公開されました。（Flash Media Encoder@Labs） ダウンロードはこちらからどうぞ。（Flash Media Encoder Prerelease: EXE, 1.1 MB）

Flash Media Encoder はカメラ等から PC に取り込んだ映像を Flash Video フォーマット （VP6 ） に変換してそのまま Flash Media Server （FMS） にストリーミングすることで Flash Video でのライブ配信を可能にします。これでようやく、オンデマンド配信には Flash 8 Professional のエンコーダ、ライブ配信には Flash Media Encoder とペアが揃いました。Flash Media Encoder はストリームをファイルに記録することもできます。

機能の詳細はユーザーガイド （using_flash_media_encoder.pdf: 1.1MB） をご覧ください。例によって英語のドキュメントです。すみません。

Flash Media Encoder には、デフォルトで 100kbps から 800kpbs までの3つの設定がされていて 100kbps だと以下が推奨スペックになります。

Video Size: 176×144 px; Frame rate: 15 fps; Bitrate: 100 kbps

  • Intel Pentium® 3 or compatible processor; 933MHz
  • 256MB RAM
  • 40MB hard disk space
  • 1024 x 768 Screen Resolution with 32 bit Color Quality
  • Microsoft DirectX End-User Runtime version 9.0c
  • Microsoft DirectShow-compatible video capture device

Flash Media Encoder にあわせて FMS のアップデータも公開されています。必要なソフトウェアは以下の通りです。

  • Microsoft Windows XP Service Pack 2
  • Flash Media Server 2.0.4 （FMS 2.0.4 のアップデータ; ZIP, 7.47 MB)
  • Flash Player 8 （またはそれ以降）
  • 下はオプションです
    Flash Media Server Authentication Add In （Authentication Add In; MSI, 522 KB）

Flash Media Encoder は FMS に対するアドオンとして配布される予定です。つまり、FMS を使用するライセンスがあれば追加の料金を支払う必要はないことになります。

では、是非お試しください。

Posted by ackie at 06:27 PM | Comments (0)

January 18, 2007

Flex 2 Tag Library for JSP

公開からちょっと経ってしまいましたが、Adobe Labs に Flex 2 用の JSP Tag Library が公開されています。（Flex Tag Library for JSP）

JSP Tag Library を使うと JSP の機能で動的に mxml ドキュメントを生成しコンパイルすることができます。この機能は Flex 1.X の時にはあったのですが、Flex 2 の出荷時には実装されていませんでした。

使用するには先日公開された FDS 2.0.1 が必要です。使用する手順は以下の通りです。

  1. FDS を停止します
  2. ZIP ファイルをダウンロードします（flex2_tag_library_for_jsp.zip: 31KB)
  3. ダウンロードした ZIP ファイル内の flex-bootstrap-jsp.jar を /WEB-INF/lib にコピーします
  4. ダウンロードした ZIP ファイル内の flex-webtier-jsp.jar を /WEB-INF/flex/jars にコピーします
  5. web.xml ファイルを編集して以下の定義を追加します
    <taglib>
    <taglib-uri>FlexTagLib</taglib-uri>
    <taglib-location>/WEB-INF/lib/flex-bootstrap-jsp.jar</taglib-location>
</taglib>
  6. FDS を再起動します

簡単な使い方も紹介しておきます。下の例はユーザの役割によって表示する画面を切り替える例です。

<%@ taglib uri="FlexTagLib" prefix="mm" %>
 
<mm:mxml>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*">
    <% if (request.isUserInRole("admin")) { %>
      <AdminConsole/>
    <% } else { %>
      <UserConsole/>
    <% } %>
  </mx:Application>
</mm:mxml>

動的なコンパイルはサーバの負荷の高い処理です。使用する際は十分にパフォーマンス面の検証を行うようにしてください。といっても、まだ正式版のリリース前でした。

Posted by ackie at 05:04 PM | Comments (2)

January 17, 2007

Linux 用 Flash Player 9 リリース

Linux (x86) 用 Flash Player 9 (9.0.31.0) が adobe.com のダウンロードセンターに公開されました(Adobe Flash Player Download Center). スタンドアローン版およびデバックプレーヤはサポートのページからダウンロード可能です。（ support downloads ）

Windows, Mac 版と比べると Express Install や自動更新の通知機能はまだ実装されていません。その他にも WMODE のサポートや Opera サポート、それからフルスクリーンでのビデオ再生等いくつかの機能が次回以降のアップデートで対応予定になっています。詳細はとりあえず英語ですがリリースノートをご覧ください。（Flash Player 9 Release Notes ）

Posted by ackie at 09:20 PM | Comments (0)

January 16, 2007

Flash Player 9 アップデートのログファイル

先日アップデートされた Flash Player 9 からログファイルの場所が変更されていましたのでお伝えします。

最初に公開された Flash Player 9 （9.0.16.0） では mm.cfg ファイルでログファイル名やディレクトリを指定することができましたが、アップデート版 （9.0.28） からはログファイル名も場所も変更できないようになっています。

それぞれの OS でのログの格納場所もしくはファイル名は以下のとおりです。user_name の箇所は実際のユーザ名で置き換えてください。

Windows: C:\Documents and Settings\user_name\Application Data\Macromedia\Flash Player\Logs

Windows Vista: C:\Users\user_name\AppData\Roaming\Macromedia\Flash Player\Logs

Macintosh: Users/user_name/Library/Preferences/Macromedia/Flash Player/Logs/

Linux: home/user_name/.macromedia/Flash_Player/Logs/flashlog.txt

Posted by ackie at 05:49 PM | Comments (0)

January 07, 2007

Flex 2.0.1 英語版リリース

Flex 2.0.1 （英語版）がリリースされました。英語版の Flex Bulder 2 をお使いの方はアップデータがダウンロードできます。（Adobe Flex Support Center） また、SDK 等のフルインストーラもダウンロード可能です。（Adobe Trial Downloads）

日本語版のリリースはまだですが、いろいろとバグが直っていますので時間のある方はぜひお試し下さい。なお、実際のプロジェクトでの使用に際しては十分に検証をしてから移行されることをお勧めします。

Flex 2.0.1 は基本的にはバグフィックスのためのリリースですが、いくつかの新機能も追加されています。主なものは以下の通りです。

  • Mac OS 10.4.7 サポート（PowerPC & Intel）
  • 大規模アプリケーションを分割する手段を提供する mx.modules パッケージ
  • ランタイム CSS のサポート
  • Mercury QuickTest Pro 9.1 との連携による自動機能テスト（Windows のみ、FDS のライセンスが必要）
  • ASDoc が SDK の一部に

日本でのサポートについては正式なアナウンスをお待ちください。

Posted by ackie at 08:13 AM | Comments (0)