FileMaker 【11】画面設計（レイアウト）

前回までは構造設計を学びカスタムAPPを作成しました。
今回は、開発の３つの中の画面設計について学んでいきます。

レイアウトの種類とツール

レイアウトを作成していく上で使うツールの種類、位置、名称の確認です。

①　ステータスバー
②　右パネル
・タブ
・スタイルタブ
・外観タブ
・データタブ
③　左パネル
・フィールドタブ
・オブジェクトタブ
④パートラベル
ボディーパートなど

レイアウト作成の準備

新しいレイアウトを作成する。

１、⌘L　レイアウトモードに切り替え。

２、新しいレイアウトを作成します。
［レイアウト］［新規レイアウト / レポート］メニューを選択。
［新規レイアウト / レポート］ダイアログが表示される。

[レコードを表示：] どのテーブルオカレンスの出口にレイアウトを作成するかという意味。
クリックし[データベースの管理…]をクリック、新規でテーブルオカレンスを作成。

[テーブルを指定]　>>> テーブルオカレンスの入り口をどのテーブルにするか。（どのテーブルを表示するか）

３、[OK]をクリック。［新規レイアウト / レポート］ダイアログが表示される。[レコードを表示：]の内容が新規で作成した名称に変わっている。

４、[レイアウト名]を決める（入力）。[コンピューター]を選択。下に現れているレイアウトの形式を選択。[完了]

フィールドの配置

左右のパネルを使いながらドラック＆ドロップで配置していく。
一部紹介。

・左パネル[フィールドタブ][ドラッグ設定]　>>> [フィールドの配置]や[ラベル]の表示位置を設定できる。
・右パネル[データタブ][コントロールスタイル]　>>> 垂直スクロールバーを表示
・右パネル[データタブ][フィールド入力]　>>> ブラウズモードのチェックを外すとブラウズモードの入力ができなくなる。

作成したレイアウト上に新たなテーブルのデータを表示させたい

新規でテーブルを作成する。自動でテーブルオカレンスが作成される。
※今回の新規テーブルのデータは、最初に作ったレイアウト上に表示させたい。そこに繋がるテーブルオカレンスを作成する必要がある。

１、テーブルオカレンスの新規作成。今作った新規テーブル名を、入り口に設定。
２、テーブルオカレンスの名前を決める（入力）
３、最初に作ったレイアウトを出口に設定しているテーブルオカレンスとリレーションを組む。
主キーと外部キーを繋ぐ。
４、[リレーションシップの編集]の[このリレーションシップを使用して、このテーブルでのレコードの作成を許可]にチェック。[OK]

関連レコードの配置

１、⌘L　レイアウトモード　
２、左パネル[フィールドタブ]
３、現在のテーブル　 「関連させたいテーブルオカレンス」を選択。
４、下にフィールドが表示される。
[フィールドの配置]や[ラベル]の表示位置を設定
クリック＆ドロップで配置。

ポータル設定

１、⌘L　レイアウトモードに切り替え。
２、［ポータルツール］アイコンをクリック。
３、ポータルを配置したい位置でドラッグして□を描くように指定。
４、 マウスボタンを離すと［ポータル設定］ダイアログが表示される。

・[書式][行数]に数字を入れると、複数のレコードを入力できるようになる。
・[スクロールを許可]で複数のレコードが収まり切らない場合スクロールで表示してくれる。

[ OK]をクリックすると新たなダイアログが表示される。

テーマの変更

FileMakerではレイアウトのテーマの選択によってデザインの変更ができる。

１、⌘L　レイアウトモード
２、レイアウトツールバーの左［テーマ変更］アイコンをクリック
３、［テーマの変更］ダイアログが表示される
４、選択して[OK]

※テーマの名前の後ろに〜〜〜タッチ　と付くもの
タッチデバイス用　iPadi、Phonなどで使用するためのレイアウト（FileMaker Goの時）

レイアウトの整理

・限られたスペースをより有効に使う。
・必要なデータをグループ化する。
レイアウト上のフィールドやポータルを見やすく整理する必要がある。
２点。

タブコントロール

各パネルの上部にタブがついていてクリックしたタブが前面に表示されるというレイアウトオブ
ジェクト

１、⌘L　レイアウトモードに切り替え。
２、［タブコントロール］アイコンをクリック。
３、タブコントロールを配置したい位置でドラッグして大きく□を描くように指定。
４、マウスボタンを離すと［タブコントロール設定］ダイアログが表示される。
５、タブ名などを入力[作成]。その他の設定をし[OK]
６、各タブ上に前回作成したポータルを貼り付ける。

スライドコントロール

スライドコントロールはタブコントロールと同じく重なったパネルですが、上部のタブ部分が無い。代わりにパネルの下にナビゲーションドットという●がパネルの数だけ表示される。また、パネルの切り替えが左右に動くスワイプでできる。

１、⌘L　レイアウトモードに切り替え。
２、［タブコントロール］アイコンを長押し。
３、[スライドコントロール]を選択できるようになる。
４、スライドコントロールを配置したい位置でドラッグして大きく□を描くように指定。
５、マウスボタンを離すと［スライドコントロール設定］ダイアログが表示される。
６、ページ数、その他の設定で[OK]
７、各ページ上に前回作成したポータルを貼り付ける。

※その他の設定
[スワイプジェスチャを有効にする]　>>> iPhonなどでスワイプできる。
[ナビゲーションドットを表示]　>>> スライド下のパネル数表示

※タブコントロール内にスライドコントロールを設定するなどの重複利用はやめたほうがいい。

ナビゲーションパート

Webサイトでいう、上部のメニューバー

• ページをスクロールしてもナビゲーションパートは固定されたまま
• 印刷の場合は非表示

１、⌘L　レイアウトモードに切り替え。
２、[レイアウト][パート設定]でパートの新規作成。
３、上部ナビゲーションを選択。[OK]
４、レイアウトを揃えるために、各レイアウト画面で設定し、高さなどを揃える。
５、ボタンなどを配置していく。