FileMaker Pro/FileMaker Go 超活用! 2020(2) FileMaker を使いやすくする! 操作性をアップするためのテクニック

1）はじめに

データベースで管理する情報は古くならないように維持することが重要です。そのためには、開発者は操作性のいいインターフェースを提供することで、ユーザーが積極的に情報の更新を行い、さらに、活用して便利だと実感できるようにしなければなりません。

ただし、データベースで管理したい項目を考えると数が多くなり入力に手間がかかります。また、雑然とした窮屈なレイアウトになりがちです。そこで第2回では iOS での操作性をアップするための3つの機能、「キーボード」と「ポップオーバー」と「スライドコントロール」について紹介します。

＊記事内の画像はクリックすると拡大できます＊

2）キーボード：データタイプに合わせたキーボード設定

FileMaker Pro では FileMaker Go で表示させるタッチキーボードタイプが複数用意されています。 URL 用、メール用、電話番号用、また、数字 10 キー用など、フィールドごとに適したキーボードを指定することができます。これによりキーボード操作も楽になりデータ入力のスピードアップが可能です。

ここでは、2種類のキーボードについて設定方法を紹介します。

2-1）数字データ用のキーボード設定

レイアウトモードに切り替えて、商品レイアウトの「価格」フィールドを選択します（図01）。インスペクタのデータタブを表示し【動作】メニュー内のタッチキーボードタイプを「数字 10 キー」に設定します（図02）。

図01:「価格」フィールドを選択します
図02:タッチキーボードタイプを「数字 10 キー」に設定します

iPad で「価格」フィールドに移動したときに、「数字 10 キー」のキーボードが表示されます（図03、図04）。数字キーだけが並んでいるため簡単にタップできます。また、電話番号のキーボードと比較してもキーの配列が異なります（図05、図06）。

図03:「数字 10 キー」キーボード表示
図04:フローティングの「数字 10 キー」キーボード

図05:「電話」キーボード
図06:フローティングの「電話」キーボード

2-2）メールアドレス用のキーボード設定

取引先レイアウトの「メールアドレス」フィールドを選択します（図07）。インスペクタのデータタブを表示し【動作】メニュー内のタッチキーボードタイプを「電子メール」に設定します（図08）。

図07:「メールアドレス」フィールドを選択します
図08:タッチキーボードタイプを「電子メール」に設定します

iPad で取引先の「メールアドレス」フィールドに移動すると「電子メール」のキーボードが表示されます（図09、図10）。@ や . など電子メールアドレスの入力に必要な記号が使いやすくなっています。部署名に指定したキーボードと表示を比較してみるとキーの配列が異なります（図11、図12）。

図09:「電子メール」キーボード
図10:フローティングの「電子メール」キーボード

図11:「システムデフォルト」キーボード
図12:フローティングの「システムデフォルト」キーボード

3）ポップオーバー：小さいスペースを有効活用する

ボタンをクリック／タップしたときに吹き出し状のレイアウト前面に表示するポップオーバー機能があります。この機能により、常に表示される必要はないが、一時的に確認したい情報を表示することができます。

ポップオーバーでは、現状のレイアウトエリアをさらに拡張することができます。ボタンをクリックすると吹き出し状のレイアウトを表示します。関連する情報を表示するのに便利です。

商品情報の一部をポップオーバーで作成して置き換えてみましょう。

3-1）ポップオーバー機能を使って商品情報を表示

サンプルでは、サイズと形式と商品情報を表示しています（図13）。

図13:商品情報を削除します

レイアウトツールから「ポップオーバーボタン」を選択します。ボタンが表示されている場合は、長押しして「ポップオーバーボタン」を選択します（図14）。

図14:レイアウトツールから「ポップオーバーボタン」を選択します

ボタンを作成する時と同様にレイアウトでドラッグしマウスボタンを離すとポップオーバーが作成され、その設定ダイアログが表示されます（図15）。

図15:作成された「ポップオーバー」と設定ダイアログが表示されます

ポップオーバーに、サイズと形式、そして、スペースが広がったのでカラーを追加します（図16）。

図16:商品情報をレイアウトします

スペースのサイズを調整した後、設定ダイアログでボタンの名前とアイコンを指定、そして、タイトルを表示しないようにしました（図17）。また、ポップオーバーを閉じても選択した内容が表示されるようにマージフィールドを配置してみました（図18）。

図17:ボタンの名前とアイコンを設定します
図18:商品情報のマージフィールドをレイアウトします

iPadで商品情報ボタンをタップしポップオーバーを表示してみましょう（図19、図20）。サンプルではポップオーバーの枠線に色を付けて表示を強調しました（図21）。

図19:iPadで商品情報ボタンをタップします
図20:iPadで商品情報のポップオーバーに表示します
図21:ポップオーバーの枠線の色をオレンジに変更します

4）スライドコントロール：タブのように確保したエリアを簡単な操作で切り替える

スライドコントロールは、複数のパネルから構成されるレイアウトオブジェクトです。

タブコントロールと同様に、パネル数を追加することでレイアウトエリアが拡張できるため、多くの管理項目をパネルごとにグループ分けすることで、整理された見やすいレイアウトを作ることができます。また、スライドコントロールは iOS のジェスチャに対応しているので、 FileMaker Go では指1本でスワイプしてパネルをスライドさせることができます。

タブコントロールで作成したレイアウトをスライドコントロールで作り変えてみましょう。