開発者がCatalyst上で軽い修正を施す

そこで、「写真の切り替え」をどのように行えば良いかというところでハタと手が止まってしまった。このフォトギャラリーで表示する全ての写真は、デザイナの手によって、デザインの中に全て埋め込まれている。どのように埋め込まれているかを確認すると、全ての写真が1ピクセルのズレもなく重ねられている状態だ。

全ての写真がぴったり重ねられている。

この状態で、表示されている写真の切り替えを行うには、画像の重なり順を入れ替えてあげれば良いだろう。つまり「Photo1→Photo2→Photo3」という順序で重なっている状態で「NEXT」ボタンを押されたら、一番上に重なっている写真(Photo1)を一番下に持って行けば、「Photo2→Photo3→Photo1」という重なり順になる。PREVIOUSはこの逆で、一番下の写真を一番上に持ってくれば良い。

今回はこの処理をスマートに記述するために、「表示する全ての写真を一つのUIコンポーネントとしてまとめてしまおう」と考えた。やはり上記のようなロジックを実現するには、動的に変化させる部分をデザインから切り出しておいた方が、何かと都合が良い。

それを行う方法として、MXMLコードを直接手で修正するというのを選択することもできる。しかし、「デザイン要素をコンポーネントに変換する」ということであればCatalystの専門領域だ。ということで、開発者役である筆者もCatalystを開き、写真に使用する全ての画像を選択して、カスタムコンポーネントへと変換した(こうした操作の詳細については前回の記事を参照)。