–>CakePHPカンファレンス東京が10/25(土)に行われました。:)私も発表者として、「Agileな開発現場での実践例」というお題で、テスト駆動開発の実例を紹介してきました。;)駆動?!、まぁ駆動はしてなかったのですが。testing)とにかく、あっという間の申し込み締め切りという盛り上がりが、当日も続いており非常に楽しい&有意義な時間を過ごすことができました。家に帰ったらBlogを書くまでがイベントです、というお約束も、このところこの会に向け資料の準備、ネタの仕込みなど気が張っていたので、帰宅後は死んだように寝てしまいました。出遅れたので、当日の盛況ぶりは、イベント申込ページにトラックバックされている他の方のBlogで・・・・CakePHP1.2本の話も少ししたかったのに、結局最後に軽くネタをふって終わってしまいました。そうそう、Slideshareでフォントを思いどおりにしたい場合は、自分の端末でPDFにすればよかったのですね。今回はキレイにヒラギノなどが閲覧できました。–>現在、オブジェクト倶楽部のメールマガジンで連載している「Flexで体験するリッチクライアント」を補足するTechnoteです。第八回は、画像を重ね合わせる手法を整理します。■今回サンプルの完成イメージ画像をクリックしながら、左右に動かしたり、勢い良く左右に動かしたりすると、CoverFlowのように加速効果付きでスクロールします。前回は画像を掴んで勢い良く放したり、掴みながらスクロールさせるといった動作を、マウスイベントを取得して実装してみました。今回は、画像を重ね合わせていきます。■ファイルの準備プロジェクトファイルをダウンロードして、任意のディレクトリで解凍します。reflector.as3projreflector.mxmlImageReflector.asTransformUtil.asCoverFlowLayout.asRepeaterHBox.as新しいファイルCoverFlowLayoutとRepeaterBoxの2つが追加になっています。追加になったファイルは後ほど詳しく解説します。reflector.as3projをダブルクリックすると、FlashDevelopが実行されます。■選択している画像以外の表示幅を狭くする画像を重ね合わせるときに、まずはじめに考える方法は、標記のとおりだと思います。そこで、今回はoverrlapWidthをいう変数を使って、重ね合わせの幅を定義してみました。アニメーション描画を開始する処理です。画像は左右の両側から重なるイメージなので、重なり幅が20とすると、実際の画像幅は倍の40必要となりますので、画像の幅として*2をしています。overrlapWidth*2;このように修正してプレビューしてみるとどうなるでしょうか?残念ながら赤丸で囲ったように、選択画像より右側の並びが変になってしまいます。■要素のZ順序を入れ替えるWindow操作のプログラミングをした経験のある人なら、この状況を標記のとおり解決できる、と推測するでしょう。Flexでも同様の機能を持っています。そこで以下のようにmxmlのonCreationComplete()を変更してみました。最初の重なりは一番右の項目が下になるよう(逆順)にする。}}このように修正してプレビューしてみるとどうなるでしょうか?うわぁーーーーーー、なぜか表示する順番が変になってしまいました。なるのでしょうか?■Flexはオープンソースだから、ソースを読めばいいじゃないかFlexの各クラスはcoreでない限りソースが提供されています。h_frameのクラスであるHBOXの描画について調べてみましょう。frameworks/source/mx/containers/HBox.asにはほとんど処理はないので、親クラスであるBoxのコードを見ます。unscaledHeight);}描画のコードはこのようになっていて、実際の描画はどうもlayoutObjectがやっているようです。gap;}のように、getChildAtを使って、子要素の順番(=Z順)に表示位置の計算をしているのがわかります。swapChildrenは子要素の順番を変更することで描画の重なりを変更しようとしているので、2番目のプレビューのようになるのはやもえません。どのようにHBoxに定義された順番(レイアウト計算順序)とZ順(表示順序)を別々に管理し、描画したら良いのでしょうか?■Repeaterを使うHBox、RepeaterHBoxを作るつまりこういうことです。HBox内に要素を並べるとき、通常は要素の並びを持っている訳ではありませんが、HBox内でRepeaterを使っているなら、要素の順番はRepeater自信が保持しています。そこでRepeaterHBoxを作ることにします。今回は簡単に要素の並びを取得できるように、mxml上のパラメータrepeaterArray=“{imageReflector}"でクラス変数に配列を渡すことにしました。</Repeater></local:RepeaterHBox>RepeaterHBoxの特徴は、HBoxを継承しHBoxである機能はもちろん、前節で問題となっていた、BoxLayoutを変更することです。RepeaterHBoxでは独自のレイアウト処理CoverFlowLayoutを使っています。gap;}表示順を変更しても、リピーターの定義(target.repeaterArray)順に要素の表示位置(レイアウト)を計算すれば問題は解決します。■mx_internal::で内部要素にアクセスするRepeaterHBoxクラスでは見慣れない記述mx_internalがあると思います。CoverFlowLayout();実はこのmx_internalは、Flexの内部クラスに直接アクセスするために、重要な記述です。今回のように標準コンポーネントをカスタマイズする場合、通常のメソッドオーバーライドだけでは、どうしてもうまくカスタマイズできない場合があります。coreの中の変数だったり、以下のように内部名前空間に変数が定義されている場合です。BoxLayout();これはBoxクラスで、レイアウトオブジェクトを定義している例ですが、要はprivate変数として扱っているものなのです。これだと独自レイアウトによる描画ができないので、上記のようにmx_internal::layoutObjectと書くことで、内部スコープの変数値を上書きできるのです。■クロスドメインの注意事項amazonの画像サーバのcrossdomain.xmlは画像サーバ内からだけしか参照できないので、ここで作成したSWFファイルをサーバにアップロードしてもうまく表示できません。本記事上の完成イメージは、PHPサイトでプロキシしています。最終回、最後にamazonからタイトル、著者を取り出して表示する機能を実装してみます。–>現在、オブジェクト倶楽部のメールマガジンで連載している「Flexで体験するリッチクライアント」を補足するTechnoteです。第七回は、マウスイベントを取得する手順を整理します。■今回サンプルの完成イメージ画像をクリックしながら、左右に動かしたり、勢い良く左右に動かしたりすると、CoverFlowのように加速効果付きでスクロールします。前回はスクロール処理とアニメーション効果を付けてみました。今回は画像を掴んで勢い良く放したり、掴みながらスクロールさせるといった動作を、マウスイベントを取得して変更していきます。今回は、mxmlファイルのみ修正していきます。■ファイルの準備プロジェクトファイルをダウンロードして、任意のディレクトリで解凍します。reflector.as3projreflector.mxmlImageReflector.asTransformUtil.as前回から修正したのは、reflector.mxmlだけです。reflector.as3projをダブルクリックすると、FlashDevelopが実行されます。■マウスの基本動作はクリックと移動Flexではマウスを操作した結果は、マウスイベントをフックすると知ることができます。mxmlで以下のように書いてみます。>このコードが今回修正したCoverFlow表示領域のボックス記述です。マウスポインターがHBOXから出たときに発生するのような意味を持っています。■マウスがどこで操作されたのか調べるマウスイベントは表示領域で取得しますが、対象のHBOXには様々な子コントロールが含まれています。横スクロールバーです。料にする場合は、MouseEvent#target.parentを使います。HScrollBar)のように記述する必要があります。■マウスが領域外に出たときを考慮するマウス操作を実装していて、忘れがちになるのが、この処理です。全画面表示で操作しているようなケースでは無縁ですが、実際はドラッグしながらウィンドウの外でマウスを放した、というケースは珍しくありません。このときイベントを拾っておかないと、再度マウスが領域に戻ったとき、マウスが押されたままと間違って判断してしまうことがあります。マウスが領域から出たら、一旦マウスを放した、という仮定が必要となります。マウスが領域外に出たかどうかはステージオブジェクトのマウスイベントをフックします。これは前述のMouseOutでHBOXから出たのか判断していますが、勢い良くマウスを動かして、一気にFlashPlayerから出てしまうと、MouseOutが呼ばれないことがあります。onMouseOut);のように、記述します。似たイベントで、MouseEvent.ROLL_OUTがありますが、これはHTMLの:hoverのような実装をする際に使うイベントです。対象のコントロールの上に来た・離れたというのを制御します。■クロスドメインの注意事項amazonの画像サーバのcrossdomain.xmlは画像サーバ内からだけしか参照できないので、ここで作成したSWFファイルをサーバにアップロードしてもうまく表示できません。本記事上の完成イメージは、PHPサイトでプロキシしています。隙間をなくして、ホンモノのように画像が重なって表示されている効果を実装してみます。–>「Webアプリケーションテスト手法」という本を共著しました。「SimpleTestによるPHPのテスト」というお題で、PHPの自動テストについて書きました。実はこの本は紆余曲折あったのですが、まさに”無事”という言葉が当てはまります。:cheers:で、SimpleTestとはxUnit系のテスティングフレームワークなんで。'Hello');みたいになってるんで、本もそのとおりにしています。戻り値);みたいに書きたいわけですが、まぁ大きな問題ではないです。期待値);のほうになってるんですね。SimpleTestベースに使っているから、そのままなんだと思います。戻り値);になってますね。テストコード見ると、SimpleTestベースなのかPHPUnitベースなのかわかるという副作用もありますが。–>現在、オブジェクト倶楽部のメールマガジンで連載している「Flexで体験するリッチクライアント」を補足するTechnoteです。第六回は、アニメーション効果を付けて表示する手順を整理します。■今回サンプルの完成イメージ画像をクリックしたり、スクロールバーを動かすと、CoverFlowのようにアニメーションで動きます。前回は画像を台形加工して表示するサンプルを紹介しました。今回はその画像を左右にスクロールさせながら、アニメーションで選択・非選択の表示を変更していきます。今回も、カスタムコントロール(ImageReflector.as)とmxmlファイルの両方を修正していきます。■ファイルの準備プロジェクトファイルをダウンロードして、任意のディレクトリで解凍します。reflector.as3projreflector.mxmlImageReflector.asTransformUtil.asreflector.as3projをダブルクリックすると、FlashDevelopが実行されます。■アニメーション効果を簡単にするAnimatePropertyFlashでは、AnimatePropertyを使うと簡単にアニメーション効果を実現することができます。AnimatePropertyには、指定したプロパティの値を開始値から終了値まで変化させる機能があります。位置を移動させたり、定型的に図形を変形したい場合など、特定のプロパティを非同期に操作することができるのです。refrector.mxmlでは以下のように記述しています。_animation.play();}_animation.propertyに指定したhorizontalScrollPositionという変数を、toの値まで変化させると記述することができます。アニメーションはhorizontalScrollPositionが1ずつ加算されていくといった単純なものでなく、easingFunctionに値を指定することで増減する値をコントロールできます。easingFunctionにはFlexが用意してくれているものがあり、イーズアウト・イーズインと呼ばれています。これは変数の変化が加速なのか減速なのかといった指定ができ、イーズアウトはtoValueに近づくと値の変化が少なくなり減速感を与え、イーズインは変化が大きくなっていくことで加速感を与えることができます。AnimatePropertyクラスの値を設定したら、play()関数を呼ぶだけで勝手にhorizontalScrollPositionの値が変化していきます。このアニメーション効果は、表示領域を滑らかにスクロールするために使用しています。最初に中央の画像を選択状態にして、センターに表示する画像がクリックされたら、その位置を選択状態にして、センターに表示するという機能で使っています。選択された画像の左端位置に、選択画像の幅/2を足して、表示領域の半分の幅戻ると、センターになる。pos;}■最初に中央の画像を選択状態にして、センターに表示する各ImageReflectorが描画されたときに呼ばれるonCreationCompleteでは、これまで最後のImageReflectorが描画されたときに、中央の選択画像を決定していました。今度のサンプルでは、initScroll()関数を呼ぶように変更しています。initScroll()関数は、中央の画像を選択状態にして、そこまでスクロールさせる役割があるのですが、中央までスクロールさせるのには、そこまでの位置が確定していなければなりません。画像の横幅が固定であれば良いのですが、CoverFlowの中で縦横サイズがバラバラな写真に対応しようと思うと、描画が完了していなければ、位置を取得することができません。描画が終わってないので、遅延呼び出しする。2);と書くことで、全てのImageReflectorが描画完了するまで、待つことができます。callLaterはイベントキューの最後に、再度関数呼び出しを入れることで後で処理をさせることができます。すべて描画できていたらscrollItemを呼んで、中央までスクロールしてやれば良いのです。true;}と書くことで、invalidatedReflectionフラグがonになるまで待ってくれます。invalidatedReflectionフラグは、amazonより画像を呼び出して、実際の描画が開始されたときにonとなるので、この時点で画像サイズなどが決定しています。■選択画像が変わったら、パラパラ漫画のように選択画像がカーソルで前後にしか変化しないのであれば、中央位置と左右の画像だけを変化させれば良いのですが、マウスで2つ先、3つ先が選択されるケースを想定すると、現在位置から選択位置までパラパラ漫画のように画像をめくっていく必要があります。移動先が右なのか、左なのか判断して、どちら方向へスクロールを展開するか決めてやります。}}後は実際にleftScrollやrightScroll関数で処理させます。i;)し、1つ前の選択画像(oldSelectIndex)を台形へ変形させ、新しい選択画像を台形から正面表示画像へ変形させます。変形させるときもアニメーション効果を付けるため、ImageReflectorクラスにdoAnimate()関数を用意しました。doAnimate()関数では、mxmlの横スクロールと同じように、AnimatePropertyを使っています。台形を正面表示に変更したりといった、ある変数の値を単純に変更するだけではうまくいかないケースは多々あります。そこで、ここでのギミックは、animateTransformというプロパティのsetter/getterをfunctionで定義してしまうというものです。これは前回(第5回)でもふれましたが、クラスのメンバ変数を直接操作させないための手段である一方で、トゥーイングで変化する値を受け取って処理させることもできるのです。具体的に、animateTransformの値が変化するときには、以下の関数が呼ばれます。transformImage(value);}選択画像なら、横幅をアニメーション値にし、そうでなければ台形変化後の幅にしてしまいます。後は、前回作成したtransformImage()関数へ値をアニメーション変化値を渡します。■実際に描画するtransformImage関数を修正して、アニメーション描画を行います。tiltingWidth);のように、どのくらいの割合で値が変化しているか%値であらわし、それをtiltingMarginにかけて変化させています。tiltingMargin;のように、%値をかけてy1からy6までの高さを制御しています。横幅は関数の引数(アニメーション値)をそのまま使用します。選択画像の場合は、どちらからめくったかという効果を出すために、前回の選択画像位置を_prevSelectに覚えておき、左から中央、右から中央といった分岐をします。前回も書いたのですが、amazonの画像サーバのcrossdomain.xmlは画像サーバ内からだけしか参照できないので、ここで作成したSWFファイルをサーバにアップロードしてもうまく表示できません。本記事上の完成イメージは、PHPサイトでプロキシしています。PHPのコードは過去記事を参考にしてください。■次回予告マウスイベントを取得して、画像をめくる方法を増やしてみたいと思います。