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

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

このページ内の見出し

レイアウト

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

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

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

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

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

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

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

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

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

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

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

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

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

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