OpenLaszloでマルチデバイス対応RIAを作ろう

第4回 LZXによるレイアウト[その1]

この記事を読むのに必要な時間:およそ 4.5 分

自動配置の属性

簡単なセンタリングや右寄せなどは座標で指定しなくても属性で自動配置できます。

横センタリング,右寄せ,左寄せ

横方向の自動配置はalign属性で指定できます。左寄せはleft(デフォルト)⁠センタリングはcenter,右寄せはrightです。もちろんその基準となる範囲は親タグの中です。

リスト6 横方向の自動配置

<canvas proxied="false" bgcolor="0xffffcc"> 
  <button align="left">左寄せ</button>
  <button align="center">センタリング</button>
  <button align="right">右寄せ</button>
</canvas>

リスト6のサンプル

縦センタリング,上寄せ,下寄せ

縦方向の自動配置はvalign属性で指定できます。上寄せはtop(デフォルト),センタリングはmiddle,下寄せはbottomです。

リスト7 縦方向の自動配置

<canvas proxied="false" bgcolor="0xffffcc"> 
  <button valign="top">上寄せ</button>
  <button valign="middle">センタリング</button>
  <button valign="bottom">下寄せ</button>
</canvas>

リスト7のサンプル

画像の表示,スライドショーの作成

ビューの大きさも位置も同じ場合,複数配置したときにはきれいに重なって一番前のビューだけが見えている状態になります。裏に隠れているビューを次々と自動的に最前面にもってくるようにすればスライドショーの完成ですね! 背面にあるビューを前面に表示させるメソッドはbringToFront()でしたね。

タイマーをセットするような感じでビューを自動で動かすにはアニメーション機能を使います。タグは<animator>を使います。複数の<animator>を同時あるいは連続して実行するには<animatorgroup>で囲みます。どんなタイミングで何をどう動かすかといった指示を与えるためのイベントハンドラというものも使います。

※アニメーション機能やイベントハンドラについては今後の回で詳しく解説します。ここでは背伸び的な応用ということでサンプルソースを眺めておいてください。

ビューによるスライドショー

bringToFront()だけだとチカチカと切り替わるだけで見た目おしゃれじゃないので,よくあるフェードイン型のスライドショーを作ってみましょう。

リスト8ではテストとしてとりあえず赤黄青のビューを用意しました。フェードインさせるには各ビューの透明度(opacity)を順番に「透明(0)→不透明(1)」にしていきます。そのままだと背面に隠れたままフェードインするだけになるので,透明度が変化し始めた瞬間(onopacity)にbringToFront()を使って該当ビューを前面にもってきます。

設定の解説はリスト8のソースのコメントをご参照ください。

リスト8 ビューのスライドショー

<canvas proxied="false" bgcolor="0xffffcc"> 
  <animatorgroup repeat="Infinity"><!--永久にリピートする-->
    <animator duration="2000"/><!--2秒待つ-->
    <animator attribute="opacity" from="0" to="1" duration="1000" target="a"/><!--aを1秒かけて透明から不透明に-->
    <animator duration="2000"/><!--2秒待つ-->
    <animator attribute="opacity" from="0" to="1" duration="1000" target="b"/><!--bを1秒かけて透明から不透明に-->
    <animator duration="2000"/><!--2秒待つ-->
    <animator attribute="opacity" from="0" to="1" duration="1000" target="c"/><!--cを1秒かけて透明から不透明に-->
  </animatorgroup>
  <!--それぞれのビューにid属性で名前をつける。透明度が変化した瞬間(onopacity)に最前面表示する-->
  <view id="a" width="200" height="150" bgcolor="#ff0000" onopacity="this.bringToFront()"/>
  <view id="b" width="200" height="150" bgcolor="#ffff00" onopacity="this.bringToFront()"/>
  <view id="c" width="200" height="150" bgcolor="#0000ff" onopacity="this.bringToFront()"/>
</canvas>

リスト8のサンプル

ビューで画像の表示

LZXではjpg,gif,pngなどの画像を表示することができます。<view>のresource属性で画像ファイルを指定するとそのビューの背景画像として表示することができます。

リスト9はlzxファイルと同じフォルダ内にあるa.jpgファイルを読み込んで表示した例です。

リスト9 画像の表示

<canvas proxied="false" bgcolor="0xffffcc"> 
  <view resource="a.jpg"/>
</canvas>

リスト9のサンプル

画像スライドショー完成品その1

リスト8とリスト9のコードを元に作ったフェードイン型スライドショーです。動作サンプルはFlashですが,HTML5としてコンパイルすればiPhoneなどFlash非対応デバイスでも動くスライドショーになります。

リスト10 スライドショー

<canvas proxied="false" bgcolor="0xffffcc"> 
  <animatorgroup repeat="Infinity">
    <animator duration="2000"/>
    <animator attribute="opacity" from="0" to="1" duration="1000" target="a"/>
    <animator duration="2000"/>
    <animator attribute="opacity" from="0" to="1" duration="1000" target="b"/>
    <animator duration="2000"/>
    <animator attribute="opacity" from="0" to="1" duration="1000" target="c"/>
  </animatorgroup>
  <view id="a" resource="a.jpg" onopacity="this.bringToFront()"/>
  <view id="b" resource="b.jpg" onopacity="this.bringToFront()"/>
  <view id="c" resource="c.jpg" onopacity="this.bringToFront()"/>
</canvas>

リスト10のサンプル

このサンプルはダウンロードしてFlash版とHTML5版の動作を試していただけます。

リスト10のサンプルのダウンロード(Flash版,HTML5版)

画像スライドショー完成品その2

次のサンプルはリスト10のコードを少し改造して画像を左から右にスライドさせるスライドショーにしてみたものです。

<animator>のattribute属性をxにしてx値を-200から0に移動させています。x値が-200というのは原点から200ピクセル左のことで,リスト11の場合は画像の横幅が200ピクセルなので完全に画面の左側に出ている状態です。画面から隠しておくという意味なら200以上であれば良いですが,微妙に動作が変わってきますので興味があればいろいろ試してみてください。で,そこからx=0の位置に移動することで横スライドを実現しています。bringToFront()を実行するタイミングもx値が変わる瞬間なので,イベントハンドラはonxを使います。

リスト11 スライドショー

<canvas proxied="false" bgcolor="0xffffcc"> 
  <animatorgroup repeat="Infinity">
    <animator duration="2000"/>
    <animator attribute="x" from="-200" to="0" duration="1000" target="a"/>
    <animator duration="2000"/>
    <animator attribute="x" from="-200" to="0" duration="1000" target="b"/>
    <animator duration="2000"/>
    <animator attribute="x" from="-200" to="0" duration="1000" target="c"/>
  </animatorgroup>
  <view id="a" resource="a.jpg" onx="this.bringToFront()"/>
  <view id="b" resource="b.jpg" onx="this.bringToFront()"/>
  <view id="c" resource="c.jpg" onx="this.bringToFront()"/>
</canvas>

リスト11のサンプル

著者プロフィール

ason(あそん)

京都の在宅ITエンジニア。サーバやネットワーク系が得意。初めて触った言語はOpenLaszlo。現在WebプログラマとしてHTML,CSS,PHP,CMSに詳しくなってきたところ。デスメタルドラマー。

URL:http://xtter.openlaszlo-ason.com/