FileMakerでメディア管理 – サムネイルのタイルビュー その3 レイアウト

FileMakerでメディア管理 – サムネイルのタイルビューを作った その3。ビューのために追加するレイアウトについて。

レイアウト

タイル状のビューを行うレイアウトがひとつ必要です。そして、試作品ではプレビュー用のレイアウトもひとつこしらえています。タイルビューで画像をクリックしたら、プレビューウインドウがカードスタイルで現れるという仕様です。

カードスタイルをやめて新規ウインドウにしたり、そもそもプレビューウインドウを使わず直接画像データベースのメイン画面にジャンプしてもいいんです。なんでもいいんです。ここではカードスタイルのプレビューウインドウです。

※ スタイルと書きましたが、FileMakerの用語についてまとめたこちらの記事もご参考に。 → FileMaker ウインドウに関する忘れがちな用語のまとめ

タイルビューのレイアウト

タイルビューのレイアウトにWebビューアを配置します。

タイルビュー ブラウザ
Webビューアを配置しただけのタイルビュー

レイアウト編集画面はこう。仕組みはwebビューアを配置しているだけです。

タイルビューのレイアウト編集画面
レイアウト編集画面

このレイアウトではWebビューア幅が380pxくらいでしょうか、小さく作っています。そうすることで小さなモニターで小さく表示できます。
「自動サイズ調整」でフレキシブルに設定することを忘れないようにしましょう。四方をロックすることで、ウインドウサイズに追随します。

FMサイズ調整全部ロック
サイズ調整 全部ロック

Webビューアの左側を空けているのは、後々ここにサイドメニュー的なフィールドやインターフェイスが配置されることを想定しているからです。

Webビューアの設定

webビューアの設定で表示させるアドレスを指定します。

表示させるのは生成したHTMLです。

フィールドに作成してそれを指定しています。その名も「HTML生成」。もうちょっとましな名前を付けるのがよろしいかと思います。フィールドを使わず、計算式をWebビューアの設定の中に直接書いてもいいです。

Webビューアの設定
実地ではもうちょっとマシな命名をこころがけましょう

プレビューのレイアウト

プレビューウインドウのレイアウトです。こちらも単純なものです。画像データベースのメインイメージを配置しているだけです。

プレビューウインドウ

プレビューレイアウト編集画面
レイアウト編集画面

Webビューアの配置と同じように、画面は小さく、イメージは大きく。自動サイズ調整でしっかり可変サイズにしておきます。

ここでは戻る進むボタンを配置しています。プレビューウインドウに戻る進むボタンがいらないなら取っ払いましょう。

 


タイルビューに必要なレイアウトについてでした。次回はフィールドを説明します。

→ 次のお話 その4 フィールド