1)はじめに
データベースで管理する情報は古くならないように維持することが重要です。そのためには、開発者は操作性のいいインターフェースを提供することで、ユーザーが積極的に情報の更新を行い、さらに、活用して便利だと実感できるようにしなければなりません。
ただし、データベースで管理したい項目を考えると数が多くなり入力に手間がかかります。また、雑然とした窮屈なレイアウトになりがちです。そこで第2回では iOS での操作性をアップするための3つの機能、「キーボード」と「ポップオーバー」と「スライドコントロール」について紹介します。
2)キーボード:データタイプに合わせたキーボード設定
FileMaker Pro では FileMaker Go で表示させるタッチキーボードタイプが複数用意されています。 URL 用、メール用、電話番号用、また、数字 10 キー用など、フィールドごとに適したキーボードを指定することができます。これによりキーボード操作も楽になりデータ入力のスピードアップが可能です。
ここでは、2種類のキーボードについて設定方法を紹介します。
2-1)数字データ用のキーボード設定
レイアウトモードに切り替えて、商品レイアウトの「価格」フィールドを選択します(図01)。インスペクタのデータタブを表示し【動作】メニュー内のタッチキーボードタイプを「数字 10 キー」に設定します(図02)。
iPad で「価格」フィールドに移動したときに、「数字 10 キー」のキーボードが表示されます(図03、図04)。数字キーだけが並んでいるため簡単にタップできます。また、電話番号のキーボードと比較してもキーの配列が異なります(図05、図06)。
2-2)メールアドレス用のキーボード設定
取引先レイアウトの「メールアドレス」フィールドを選択します(図07)。インスペクタのデータタブを表示し【動作】メニュー内のタッチキーボードタイプを「電子メール」に設定します(図08)。
iPad で取引先の「メールアドレス」フィールドに移動すると「電子メール」のキーボードが表示されます(図09、図10)。@ や . など電子メールアドレスの入力に必要な記号が使いやすくなっています。部署名に指定したキーボードと表示を比較してみるとキーの配列が異なります(図11、図12)。
3)ポップオーバー:小さいスペースを有効活用する
ボタンをクリック/タップしたときに吹き出し状のレイアウト前面に表示するポップオーバー機能があります。この機能により、常に表示される必要はないが、一時的に確認したい情報を表示することができます。
ポップオーバーでは、現状のレイアウトエリアをさらに拡張することができます。ボタンをクリックすると吹き出し状のレイアウトを表示します。関連する情報を表示するのに便利です。
商品情報の一部をポップオーバーで作成して置き換えてみましょう。
3-1)ポップオーバー機能を使って商品情報を表示
サンプルでは、サイズと形式と商品情報を表示しています(図13)。
レイアウトツールから「ポップオーバーボタン」を選択します。ボタンが表示されている場合は、長押しして「ポップオーバーボタン」を選択します(図14)。
ボタンを作成する時と同様にレイアウトでドラッグしマウスボタンを離すとポップオーバーが作成され、その設定ダイアログが表示されます(図15)。
ポップオーバーに、サイズと形式、そして、スペースが広がったのでカラーを追加します(図16)。
スペースのサイズを調整した後、設定ダイアログでボタンの名前とアイコンを指定、そして、タイトルを表示しないようにしました(図17)。また、ポップオーバーを閉じても選択した内容が表示されるようにマージフィールドを配置してみました(図18)。
iPadで商品情報ボタンをタップしポップオーバーを表示してみましょう(図19、図20)。サンプルではポップオーバーの枠線に色を付けて表示を強調しました(図21)。
4)スライドコントロール:タブのように確保したエリアを簡単な操作で切り替える
スライドコントロールは、複数のパネルから構成されるレイアウトオブジェクトです。
タブコントロールと同様に、パネル数を追加することでレイアウトエリアが拡張できるため、多くの管理項目をパネルごとにグループ分けすることで、整理された見やすいレイアウトを作ることができます。また、スライドコントロールは iOS のジェスチャに対応しているので、 FileMaker Go では指1本でスワイプしてパネルをスライドさせることができます。
タブコントロールで作成したレイアウトをスライドコントロールで作り変えてみましょう。
4-1)スライドコントロールのスライドに情報を移動
サンプルでは、連絡先・備考と取扱商品とサイトの3つのタブに分けています(図22)。
レイアウトツールから「スライドコントロール」を選択します。タブコントロールが表示されている場合は、長押しして「スライドコントロール」を選択します(図23)。
タブコントロールのエリアを配置するときと同様にドラッグしマウスボタンを離すとスライドコントロールが作成され、その設定ダイアログが表示されます(図24)。
作成されたスライドは、設定ダイアログの「+」で追加し「?」ボタンで削除して枚数を変更することができます。また左右の「<」と「>」ボタンで表示するスライドを移動します。
タブコントロールの内容を移動します。1枚目のスライドに連絡先・備考を配置します(図25)。
2枚目のスライドに取扱商品のポータルを配置します(図26)。
3枚目のスライドにサイトの Web ビューアを配置します(図27)。
スライドコントロールにタブコントロールのタブ名の相当するテキストをスライドパネル内の上部にレイアウトします。
最後にナビゲーションドットを大きくし操作しやすいサイズに変更し、色を緑に変更してみました(図28)。
iPad でスライドコントロールの表示と動作を確認してみましょう(図29、図30、図31)。
移動するには、指1本でスワイプする、または、ドットをタップして目的のスライドを表示します。
Tips1:タッチキーボードの表示/非表示
例)タッチキーボードの「 ON/OFF 」ボタンをタップしキーボードの表示/非表示を切り替える(図T1_1)。
1.「ON/OFF」ボタンを作成し、「ボタン設定」ダイアログで「単一ステップ」を指定します(図T1_2)。
2.「ボタン処理」ダイアログで「タッチキーボードの有効化」ステップを選択し、「切り替え」オプションを指定します(図T1_3)。
Tips2:ポップオーバーでレイアウト移動
例)ポップオーバーに配置した取引先ボタンをタップし取引先レイアウトに切り替える(図T2_1)。
1.「取引先」ボタンを作成し、「単一ステップ」を指定します(図T2_2)。
2.「ボタン処理」ダイアログで「レイアウト切り替え」ステップを選択し、「取引先」レイアウトを指定します(図T2_3)。
5)おわりに
FileMaker Pro の操作性をアップする機能として紹介した3種類は、このほかにもさまざまな使い方や制御方法があります。皆さんの目的やアイデアに合った使い方を考えて、スマートなインターフェース作りに役立ててください。
次回は、主に iOS に特化したデータの取得方法について紹介します。また、取得したイメージデータの表示方法についても説明します。
[PR]提供:Claris