開発日記(2014/02/20)

引き続きスライドコントロールを実装中です。MacやiOSでの動作確認も行い、基本的な実装が完了したと思っていたのですが、アンカーの設定が反映されないことに気が付き、設定(下アンカーを除く)を反映できるようにしました。

アンカーを設定したスライドコントロール(その1)

アンカーを設定したスライドコントロール(その1)

上記のスクリーンショットはMacのSafariのものです。スライドコントロールには、上・左・右のアンカーを設定して中央揃えにしています。ウィンドウの幅を広げると、スライドコントロールの幅も広がり、なおかつ位置は中央を保ちます。猫の写真には上・左のアンカーを設定しているので、常に左寄せとなります。

アンカーを設定したスライドコントロール(その2)

アンカーを設定したスライドコントロール(その2)

上記のスクリーンショットはiPadのものです。iOS等のモバイルデバイスでは左右のスワイプ動作でコントロールが可能です。スライドコントロールには最初のスクリーンショットと同様に上・左・右のアンカーを設定して中央揃えにしています。猫の写真には上・右のアンカーを設定しているので、常に右寄せとなります。

アンカーを設定したスライドコントロール(その3)

アンカーを設定したスライドコントロール(その3)

上記のスクリーンショットでは、スライドコントロール内にタブコントロールを置き、さらにその中にスライドコントロールを置きました。オブジェクトを重ねてもアンカーの設定は反映されます。また、細かい点ではありますが、スライドコントロールのコントロール部分の黒丸についてもFileMaker Proで設定した大きさを反映しています。

FMPress Publisherで自動生成したWebアプリをお試しください

Publisherのライブデモを試す