【ソーシャルワークのFileMakerカスタムアプリ入門８】１画面のシステムで学ぶこと〜レイアウトデザイン②〜

増井｜現役の医療ソーシャルワーカー、ソーシャルワークをより良く

2024年1月22日 19:28

前回の記事では、レイアウト、モード、パートについて学び、背景色の変更にもチャレンジしました。

今回は、ボディ・パートのデザインを仕上げていきます。一つ一つ、身体に覚え込ませましょう。

タイトル

上部ナビゲーション・パートは、画面をスクロースしても動かないので、タイトルやナビゲーション・ボタンの設置に用いられます。1画面システムでも同様にタイトルとボタンを設置しています。

タイトルはレイアウトモードの画面上部、ステータスツールバーの「テキスト」コマンドボタンを使って挿入します。

「Ｔ」のボタンをクリックしてカーソルをレイアウトエリアに持って行くと、テキスト入力用にカーソルの形が変化します。クリックしてそこに、テキスト（タイトル）を入力します。

テキストのフォントタイプ・フォントサイズ・フォントカラーは、レイアウトバーの右端にある「Aa」アイコンをクリックするとすぐ下に表示される書式設定バーで設定します。

フォントは、デフォルトと「MSゴシック」、テキストサイズは24pt、テキストカラーは白（「FFFFF」）です。

テキストを配置します。場所は、左辺16pt、上辺13ptです。テキスト・オブジェクトを近い場所にドラック・アンド・ドロップしたら、あとはパレットの「左辺」「上辺」を見ながら矢印キーで配置すると早いです。

ボタン

次は、ボタンの配置です。ボタンのコマンドボタンをクリックします。

右の▼をクリックすると「ボタン」と「ポップオーバーボタン」がプルダウンで選択できますが、今回は「ボタン」を選択します。

上部ナビゲーション・パート上の任意の場所をクリック→ドラック→離す、の動作でボタンの図形を作成します。

ラベルのテキストを入力します（「新規レコード作成」）。文字色が背景色と同じになっているので見えませんが、実際は入力されています。

このオブジェクトを選択したまま、フォントカラーを書式設定バーで「FAFAFA」に変更します。

サイズをパレットの「縦幅」と「横幅」で設定します。角の丸めはデフォルトの5ptのままでOKです。

テキストがオブジェクトの下に寄ってしまっています。オブジェクトの外枠線からテキストまでの距離を「パディング」で設定します。上下左右すべて5ptにします。

ボタンを左辺182pt、上辺68ptに配置します。

これをコピーして、他のボタンも同じように作成します。

他の全オブジェクトの属性・配置データについて

他のオブジェクトについては、その属性や配置位置のデータをスプレッドシートにまとめましたので、こちらを参照しながら、配置してみてください。

８５個くらいのオブジェクトがあるので、「これらを１個１個手で打ち込むの？」と思われたかも知れません。

安心ください。実際の開発場面で、そのようなことはあまりしません。ラベルとフィールドは、通常はテーブルを作成した際にフィールドを作れば、それぞれ同じ書式でレイアウトに自動的に挿入されます。新規でレイアウトを作成した場合は、レイアウト画面左にフィールド一覧があるので、それを選択し、レイアウト上にドロップして配置することができます。

ラベルは同じようなデザインにしますし、フィールドも基本的なデザインは統一するものです。なので、適当に配置してから、デザインは一括でちょっとずつ調整する事が多いです。

途中から追加する場合は、コピペ（[ctrl]キーを押しながら[C]→[V]の連打）して複数のコピーを作ります。そして、同じようなラベルやフィールドはほぼ全てコピーして作る事が多いです。

コピペの場合、ラベルは、ダブルクリックしてテキストを入れ替え、フィールドはダブルクリックで、対応するフィールドを指定して、サイズを調整します。あとは目的の場所近くまでドラッグ・アンド・ドロップして矢印キーで位置を調整する、ということを繰り返して作って行きます。

今回は、すでにラベルとフィールドはボディ・パート上にありますので、これらを変更していきます。まず、ラベルは書式はほぼ同じなので、これらを一括で変更しましょう。クリック→ドラッグの範囲選択ですべてのラベルを選択します。ラベルは「MSゴシック「サイズ：12pt」「カラー：808080」「テキスト位置：左寄せ」となっているので、書式設定ツールバーでそれらを一括で設定します。