レイアウト時間を短縮するためのテクニック

はじめに

「FileMaker Pro 13」ではデザイン機能が強化され、洗練されたデータベースを簡単に短時間で作成することができるようになりました。また、iOS独自のインタフェースに特化した操作環境にも対応。iPad/iPhoneでの使い心地はより快適になり、楽しく魅力的なソリューションを作成できます。

本連載では3回に渡り、FileMaker Pro/FileMaker Goの新機能の中から、開発に役立つデザイン機能をテーマ別にピックアップしてご紹介いたします。

第1回目は、レイアウトする作業をスピードアップするために欠かせない、"テーマ"の機能について紹介します。

テーマ機能について

FileMaker Pro 13は、これまでの40種類のテーマに加え、新たに11種類を追加。さらに、既存のテーマを自由にカスタマイズし、自分用のテーマを作ることも可能になりました。

テーマは、フィールド、テキスト、ボタン、背景などにレイアウトオブジェクトやパートなどを設定したものに名前を付け、「スタイル」として保存し再利用することができます。

スタイルに保存できる設定オプションには、フィールドやテキストのフォント名やフォントサイズ、色、そして枠線の角の形、またパートの背景、ポイントやフォーカスしたときに表示状態が変化するレイアウトオブジェクト、さらにFileMaker Pro 13で追加されたレイアウトオブジェクトの境界線内外の影やパディングの量などがあり、いずれもインスペクタの外観で指定します。

次にスタイルの作成方法と、そのスタイルを保存しておくための新しいテーマの作成方法を説明します。

テーマの選択

使用するサンプルは商品管理レイアウト(図01)。テーマはFileMaker Pro 13で追加された「エンライトンドタッチ」を選択します(図02)。このテーマには、すでにレイアウトオブジェクトごとにいろいろなスタイルが設定されているため、その内容や名称などが参考になります(図03)。

スタイルの追加

フィールドの枠線の色が赤になるスタイルを追加します。ここでは、商品名フィールドの枠線に設定します。

まずは商品名フィールドを選択(図04)。インスペクタの「スタイル」タブではデフォルトが反転表示されます(図05)。

インスペクタの「外観」タブにある、グラフィックの「線」の色を赤に変更します(図06)。

変更に伴い、インスペクタの「外観」タブの上部にある、黒から赤に変わったスタイルの横の「▼」ボタンをクリック(図07)。表示されたメニューから「新規スタイルとして保存」を選択します。

そして表示されたダイアログでは、スタイル名の入力欄に「空欄不可編集ボックス」と入力し、「OK」ボタンをクリック。インスペクタに表示されるスタイルが「空欄不可編集ボックス」という名称になります(図08)。これでスタイルの追加が完了です。

テーマの追加

さらに、スタイルが追加されたエンライトンドのテーマを、別名で保存します。

インスペクタの「外観」タブ上部にある、テーマの横の黒から赤に変わった「▼」ボタンをクリック(図09)。表示されたメニューから「新規テーマとして保存」を選択します。

そして、表示されたダイアログではテーマ名の入力の欄には「エンライトンドタッチ コピー」と表示されていますので、そのまま「OK」ボタンをクリックして保存します。これで新しいテーマが作成されました。テーマの名称変更はインスペクタのスタイルや外観のテーマの「▼」ボタン、または、ファイルメニューの「テーマの管理」で自由に変更することができます。

テーマが保存されると、「▼」ボタンの色は赤から黒に変わります(図10)。赤いままであれば、いつでも直前のテーマの状態に戻すことができますが、保存したあとでも、追加したインスペクタの「スタイル」タブから削除することができます。なお追加したテーマは、ファイルメニューの「テーマの管理」から削除できます。

追加したスタイルの再利用

「空欄不可編集ボックス」スタイルを、ほかのフィールドにも利用してみましょう。価格フィールドにも同じスタイルを設定します。

価格フィールド(図11)を選択し、インスペクタの「スタイル」タブから「空欄不可編集ボックス」(図12)を選択すると、自動的に枠線が赤に変わります。

ただし「空欄不可編集ボックス」スタイルは、コントロールスタイルがドロップダウンリストになっているフィールドには利用できません。例えば、同じ編集ボックスの価格フィールドには利用できますが、ドロップダウンリストが指定されているサイズフィールドには利用できません。新しくドロップダウン用のスタイル、例えば「空欄不可ドロップダウンリスト」を追加します。操作手順は同じです。現在のテーマ「エンライトンドタッチ コピー」に保存するには、「▼」ボタン(図13)をクリックし、表示されたメニューから「テーマの変更を保存」を選択します。この操作では「変更はこのテーマを使用するすべてのレイアウトに適用されます。…」と表示されるので、「保存」ボタンをクリックします。

ここまでの説明でテーマを使いこなすことができます。操作は簡単ですが、データベースのインタフェースを洗練されたものにできるかどうかは、皆さんしだいです。

なお作成したテーマは、別のデータベースファイルにインポートすることができます。その方法は、まずファイルメニューの管理からテーマを選択。「テーマの管理」を表示して「インポート」ボタンをクリックします。次に作成したテーマが保存されているデータベースのファイルを指定。該当するテーマをチェックして「OK」ボタンをクリックするとテーマがコピーされ、テーマの管理に追加されます。これでデータベースを作成するたびに、フィールドやボタンなどのスタイルを設定する必要はなくなります。

テーマを利用するメリット

フィールドだけでなく、パートの色で業務内容を区別したり、レイアウト移動や印刷などの処理によってボタンの色を指定するケースがあります。それぞれスタイルとして登録し利用することで、容易にデザインが統一されたインタフェースを作ることができます(図14、図15、図16)。

また、ここでは枠線のみを指定したスタイルでしたが、角丸の半径や影など、複数の設定を行ったスタイルでも同様です。「テーマの変更を保存」を実行後、同じテーマを指定したほかのレイアウトに、自動的に反映します。

データベースを仕上げるとき、レイアウト調整がたびたび発生することがあります。このテーマの機能に対応させておけば、レイアウトの調整時間を短縮できるだけでなく、レイアウトの数がたくさんあっても設定を忘れるというミスはありません。

ぜひ、このテーマの機能をデータベース作成に利用してみてください。そして、さまざまな業務用のテーマを作ってみてはいかがでしょうか。

「FileMaker選手権2014」開催
マイナビニュースでは、ファイルメーカー社のデータベースソフト「FileMaker Pro」で作成したテンプレートから、優れた作品を決めるコンテスト「FileMaker選手権2014」を開催中です(エントリー期間は2014年11月3日まで)。

応募作品の中から金、銀、銅賞の受賞者には、MacBook Proなど豪華賞品が授与されます。さらに、審査員による「審査員特別賞」や読者投票による「読者投票賞」、学生向けの「学生賞」なども用意。今までFileMakerを触ったことのない人も、現在バリバリ使っている人も、誰でも応募可能です。また、投稿していただいた作品は、誰でもダウンロードすることができます。

皆様のご応募ご参加をお待ちしております。