1)はじめに

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

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

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

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

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

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

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

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

  • 図01:「価格」フィールドを選択します

    図01:「価格」フィールドを選択します

  • 図02:タッチキーボードタイプを「数字 10 キー」に設定します

    図02:タッチキーボードタイプを「数字 10 キー」に設定します

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

  • 図03:「数字 10 キー」キーボード表示

    図03:「数字 10 キー」キーボード表示

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

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

  • 図05:「電話」キーボード

    図05:「電話」キーボード

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

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

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

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

  • 図07:「メールアドレス」フィールドを選択します

    図07:「メールアドレス」フィールドを選択します

  • 図08:タッチキーボードタイプを「電子メール」に設定します

    図08:タッチキーボードタイプを「電子メール」に設定します

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

  • 図09:「電子メール」キーボード

    図09:「電子メール」キーボード

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

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

  • 図11:「システムデフォルト」キーボード

    図11:「システムデフォルト」キーボード

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 図17:ボタンの名前とアイコンを設定します

    図17:ボタンの名前とアイコンを設定します

  • 図18:商品情報のマージフィールドをレイアウトします

    図18:商品情報のマージフィールドをレイアウトします

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

  • 図19:iPadで商品情報ボタンをタップします

    図19:iPadで商品情報ボタンをタップします

  • 図20:iPadで商品情報のポップオーバーに表示します

    図20:iPadで商品情報のポップオーバーに表示します

  • 図21:ポップオーバーの枠線の色をオレンジに変更します

    図21:ポップオーバーの枠線の色をオレンジに変更します

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

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

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

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

4-1)スライドコントロールのスライドに情報を移動

サンプルでは、連絡先・備考と取扱商品とサイトの3つのタブに分けています(図22)。

  • 図22:タブコントロール機能を使ったレイアウト

    図22:タブコントロール機能を使ったレイアウト

レイアウトツールから「スライドコントロール」を選択します。タブコントロールが表示されている場合は、長押しして「スライドコントロール」を選択します(図23)。

  • 図23:レイアウトツールからスライドコントロールを選択します

    図23:レイアウトツールからスライドコントロールを選択します

タブコントロールのエリアを配置するときと同様にドラッグしマウスボタンを離すとスライドコントロールが作成され、その設定ダイアログが表示されます(図24)。

  • 図24:作成された「スライドコントロール」と設定ダイアログが表示されます

    図24:作成された「スライドコントロール」と設定ダイアログが表示されます

作成されたスライドは、設定ダイアログの「+」で追加し「?」ボタンで削除して枚数を変更することができます。また左右の「<」と「>」ボタンで表示するスライドを移動します。

タブコントロールの内容を移動します。1枚目のスライドに連絡先・備考を配置します(図25)。

  • 図25:1番目のスライド

    図25:1番目のスライド

2枚目のスライドに取扱商品のポータルを配置します(図26)。

  • 図26:2番目のスライド

    図26:2番目のスライド

3枚目のスライドにサイトの Web ビューアを配置します(図27)。

  • 図27:3番目のスライド

    図27:3番目のスライド

スライドコントロールにタブコントロールのタブ名の相当するテキストをスライドパネル内の上部にレイアウトします。

最後にナビゲーションドットを大きくし操作しやすいサイズに変更し、色を緑に変更してみました(図28)。

  • 図28:ドットのサイズを30pt、色をグリーンに変更します

    図28:ドットのサイズを30pt、色をグリーンに変更します

iPad でスライドコントロールの表示と動作を確認してみましょう(図29、図30、図31)。

  • 図29:iPadでスライドコントロールを表示します

    図29:iPadでスライドコントロールを表示します

  • 図30:iPadで2番目のスライドを表示します

    図30:iPadで2番目のスライドを表示します

  • 図31:iPadで3番目のスライドを表示します

    図31:iPadで3番目のスライドを表示します

移動するには、指1本でスワイプする、または、ドットをタップして目的のスライドを表示します。

Tips1:タッチキーボードの表示/非表示

例)タッチキーボードの「 ON/OFF 」ボタンをタップしキーボードの表示/非表示を切り替える(図T1_1)。

  • 図T1_1 「 ON/OFF 」ボタンを作成する

    図T1_1 「 ON/OFF 」ボタンを作成する

1.「ON/OFF」ボタンを作成し、「ボタン設定」ダイアログで「単一ステップ」を指定します(図T1_2)。

  • 図T1_2 「単一ステップ」を選択する

    図T1_2 「単一ステップ」を選択する

2.「ボタン処理」ダイアログで「タッチキーボードの有効化」ステップを選択し、「切り替え」オプションを指定します(図T1_3)。

  • 図T1_3 「タッチキーボードの有効化」ステップの「切り替え」オプションを指定する

    図T1_3 「タッチキーボードの有効化」ステップの「切り替え」オプションを指定する

Tips2:ポップオーバーでレイアウト移動

例)ポップオーバーに配置した取引先ボタンをタップし取引先レイアウトに切り替える(図T2_1)。

  • 図T2_1 「商品」のポップオーバーボタンを作成する

    図T2_1 「商品」のポップオーバーボタンを作成する

1.「取引先」ボタンを作成し、「単一ステップ」を指定します(図T2_2)。

  • 図T2_2 「単一ステップ」を選択する

    図T2_2 「単一ステップ」を選択する

2.「ボタン処理」ダイアログで「レイアウト切り替え」ステップを選択し、「取引先」レイアウトを指定します(図T2_3)。

  • 図T2_3 「レイアウト切り替え」ステップのレイアウトに「取引先」を指定する

    図T2_3 「レイアウト切り替え」ステップのレイアウトに「取引先」を指定する

5)おわりに

FileMaker Pro の操作性をアップする機能として紹介した3種類は、このほかにもさまざまな使い方や制御方法があります。皆さんの目的やアイデアに合った使い方を考えて、スマートなインターフェース作りに役立ててください。

次回は、主に iOS に特化したデータの取得方法について紹介します。また、取得したイメージデータの表示方法についても説明します。

FileMaker で作ったカスタム App を募集するコンテスト
「FileMaker選手権 2020」開催中!!
  • FileMaker選手権 2020


>>詳細はこちら<<

[PR]提供:Claris