スマートなインタフェースを作るためのテクニック

はじめに

データベースで扱う情報が多くなると、どの項目も重要で欠かせないという理由から、なるべく多くの情報を見渡せるようにしようと考えがちです。その結果、隙間もデータサイズも小さい状態のタイトルやフィールドが並べられた、窮屈なレイアウトになってしまうことがあります。

そこで第2回は、こういうときに役立つ、レイアウトスペースを拡張し、操作性をアップする便利な機能「スライドコントロール」と「ポップオーバー」について紹介します。

スライドコントロール機能について

以前のバージョンから、複数パネルで構成されるレイアウトオブジェクトのタブコントロール機能はありますが、FileMaker Pro 13では、スライド操作で各パネルに配置した情報にアクセスすることができる、スライドコントロール機能が追加されました。iOSのジェスチャに対応しているので、FileMaker Goでは指1本でスワイプしてパネルをスライドさせることができます。

タブコントロール機能と同様に、パネル数を追加することでレイアウトエリアが広がるため、テキストやフィールド、またポータルなどを配置する際も、余白のある見やすいレイアウトが作れます。

スライドコントロールに変更

本連載の第1回でも利用した商品管理レイアウトの一部を、スライドコントロールを使ったレイアウトに変更してみましょう。

まず、レイアウトツールから［スライドコントロール］を選択(図01)、イメージと備考フィールドが配置された場所にドラッグします(図02)。表示された［スライドコントロール設定］ダイアログ(図03)では、［＋］ボタンでパネルの枚数を「4」に増やし、ナビゲーションドットのサイズを［20pt］に指定してください。

そして、商品イメージの3つのフィールドと1つの備考フィールドを各パネルに配置(図04)。大きくなったドットで目的のパネルが選択しやすくなります。これで設定は終わりです。

ナビゲーションドットを大きくすることで、スライドコントロールのデフォルトのスタイルが変更されました。そのほかのスタイルを変更するときはインスペクタで行い、そこでは色や影、角丸なども指定できます。設定の保存については、第1回で紹介した方法を参考にしてください(図05)。

直接ではなく、ほかのレイアウトオブジェクト、例えば、配置したボタンの操作で、目的のパネルを表示することができます。その方法の一例として、まず各パネルに［名前］を付けておきます(図06)。そして、［オブジェクトへ移動］スクリプトステップの移動先において、その名前を指定したボタンで表示可能です。例えばレイアウトの「カバー裏」ボタンで、移動先に「panel2」を指定した［オブジェクトへ移動］スクリプトステップを実行するように設定します(図07、図08、図09)。ブラウズモードでこのボタンが実行されれば、「panel2」のパネルが表示されます。

ポップオーバー機能について

ポップオーバーは、ボタンをクリックまたはタップ(iOS)することで表示されます。レイアウトとは別の専用の表示エリアがあり、表示する情報に合わせてサイズも自由に指定可能です。配置できるレイアウトオブジェクトは、テキストやフィールド、ポータルなどで、データの表示または入力用としても利用できます。最前面の見やすい場所に出るので、関連する情報や処理の状態などを表示するのに便利です。

ポップオーバー作成手順

現在の商品に関連するレコードを表示する、ポータル配置したポップオーバーを作成してみましょう。

レイアウトツールから［ポップオーバーボタン］を選択し(図10)、レイアウト下部にドラッグします(図11)。表示された［ポップオーバー設定］ダイアログ(図12)では、ポップオーバーのタイトルと表示位置を指定(図13)。ここでは、価格が同じレコードを表示するポータルを配置しました(図14)。ポータルの機能紹介ではないため、レイアウト過程の操作説明は省略しますが、ボタンの色と名称を指定してポップオーバーボタンを仕上げました(図15)。

また、ポップオーバーは画面の最前面に表示します。ポップオーバーのサイズによっては閉じるボタンを用意しておくと、例えばポップオーバーの背面のフィールドに移動する場合、閉じることも可能です。ポップオーバーを閉じるには、［ポップオーバーを閉じる］スクリプトステップを使用します。

操作性をアップする設定

iPadで動作を確認する前に、操作性をアップする設定を2つ追加します。

◆キーボード

1つ目は、データタイプに対応したキーボードの設定です。FileMaker Go 13では、サポートされるキーボードの種類が増えました。URL用やe-mail用、電話用、数字10キーなど、フィールドごとに適したキーボードを指定できます(図16、図17)。対応したキーボード操作も楽になりデータ入力もスピードアップが可能です。

◆表示/非表示

2つ目は、フィールドやボタンなどを状況に合わせて、表示または非表示にする設定です。インスペクタの「データ」タブで、［次の場合にオブジェクトを隠す］の条件を指定すると(図18、図19)、設定されたレイアウトオブジェクトは、条件に一致した場合、非表示になります。ブラウズモードで非表示になったフィールドは、完全に見えなくなり一切アクセスできません。この設定を使うことで、これまでアクセスレベルや処理内容に合わせてたくさん作成したレイアウトの一部は、必要ではなくなるかもしれません。

FileMaker Goで確認

完成したレイアウトが、iPadのFileMaker Goでどのように表示されるか確認してみましょう。

スライドコントロールについては、商品レイアウトのスライドコントロール(図20）、そして同様に作成した取引先レイアウトのWebビューアを配置したスライドコントロール(図21)を表示しました。

ポップオーバーについては、商品レイアウトの価格関連ボタンをタップして表示されたポップオーバー(図22)を表示しました。

キーボードについては、商品レイアウトの「価格」の入力時に表示される［数字10キー］キーボード(図23)、取引先レイアウトの「メール」の入力時に表示される［電子メール］キーボード(図24)、「電話」の入力時に表示される［電話］キーボード(図25)を表示しました。

表示/非表示については、表示している商品レコードの価格「400円」と一致するほかのレコードが存在しなかったため、「価格関連」ボタンが非表示になっています(図26)。

スライドコントロール機能とポップオーバー機能については、このほかにもさまざまな使い方や制御方法があります。そのすべては紹介できませんでしたが、スマートなインタフェース作りに欠かせない機能であることは、ご理解いただけたと思います。ぜひ使ってみてください。

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

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

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