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

2024年1月25日 20:35

はじめに

前回は、ボディ・パートの大部分を配置しました。パーツをあっちこっちにドラッグしたり矢印キーで移動させたり、最初は時間がかかったのではないでしょうか？

でも、慣れると必ず早くできるようになりますから、安心してください。最近は、カラーパターンを選択して画画面の印象を確認できるようなサイトがありますので、この１画面システムのデザインを是非自分仕様にしてみてください。そんなのができたら是非お知らせくださいね。

さて、今回は、デザインの細かい部分を仕上げていきます。ここまでの作業で、おそらく下図にようになっていると思います。ブラウズモードとレイアウトモードの両方のイメージを載せておきます（いくつかのフィールドの高さは画像を切り貼りしているので少しずれているかもしれません。ご容赦ください。）。

完成版とは、表示のされ方がまだいくつか違います。完成版の「Case No」は、普通のフィールドとは違う形です。「紹介経路」と「入外区分」はラジオボタンです。

今回は、このような見た目の部分の仕上げと、日付け入力にカレンダーを表示させたり、スクロースする事が考えられるテキストフィールドに垂直スクロースバーを設置します。

そうすると、実は今回で１画面システムの見た目の部分は完成となります！！
早速始めましょう！

マージフィールド

「Case No」は普通のフィールドではなく、「マージフィールド」という特殊な形式です。これは、印刷のレイアウト用で、文字列とフィールドを繋げて表示させる事ができます。あくまで表示用なので、入力は出来ません。

[挿入]メニューから[マージフィールド]を選択すると、どのフィールドを表示させるか聞かれるので指定します。マージフィールドは「<<〜>>」の形で表示されます。

「<<」の直前をダブルクリックしてラベルの「Case No：」を繋げます。フォントカラー（808080）とサイズ（14pt）、テキスト表示位置（右寄り）を書式設定バーで設定します。先にあった「Case No」フィールドは削除します。

位置を整えます（左辺915ptと上辺157pt）。

ブラウズモードで見ると、このようになります。

「日付」タイプフィールドのカレンダー表示（ドロップダウンカレンダー）

「日付」タイプのフィールドは、カレンダーから入力できると便利です。「開始日」「終了日」「生年月日」「入院日１，２」「退院日１，２」「開始時の状況」「終了時の状況」です。

[shift]キーを押しながらクリックしていくと複数のフィールドを選択できるので、まとめて設定します。

「終了時の状況_日付」フィールドまで選択出来たら、右のデータベースアイコンから「コントロールスタイル」の「ドロップダウンカレンダー」を選択します。

下に二つチェックできる項目がありますが、このチェックは入れません。

これで、日付タイプのフィールドを入力する際にドロップダウンカレンダーが表示されるようになりました。

「開始時の状況_日付」と「終了時の状況_日付」は、他のフィールドと異なり、フォントサイズは少し小さく、塗りつぶしや枠線がないデザインとなっていますので、そのように直します。

二つのフィールドの距離が離れていて、選択したフィールドが画面から見えなくなる位置までスクロールすると、選択されたフィールドが表示できる画面位置に戻ってしまいます。そのため、このような状況では二つのフィールドを同時に選択することができません。

一つずつ選択して、塗りつぶしと枠線を両方とも「なし」に設定します。

これでOKです。

ドロップダウンリスト

「性別」「主治医」「診療科」「病棟」のように複数の中から一つの値を選択して入力したい場合、値のリストを用意してそこから選択できると入力がスムーズです。このようなときは「ドロップダウンリスト」を使います。

「主治医」にドロップダウンリストを設定します。「主治医」フィールドを選択し、「コントロールスタイル」から「ドロップダウンリスト」を選択します。

これで「主治医」にドロップダウンリストが設定されますが、どのような値の一覧を表示させるかを更に設定する必要があります。値一覧はまだないので空欄になっています。その横の鉛筆アイコンをクリックします。

「ファイル「MyFirstApp」の値一覧の管理」というウインドウが表示されるので、「新規」をクリックします。「値一覧の編集」ウインドウが表示されます。「値一覧名」を設定します。そして、任意のリストを表示させたい場合は「カスタム値を使用」に改行区切りで値を入力します。サンプルなので「あいうえお」と入力しました。