New in 14: オブジェクトコンポーネント

Version 3

     

     

     

     

    FileMaker Pro 14 では、多数の新規オブジェクトのコンポーネントパートを書式設定できるので、オブジェクトの表示方法をより適切に制御することができます。たとえば、ボタンバー全体の書式設定だけでなく、セグメント、アイコン、および区切りの書式設定も指定することができます。

    586-button+bar.png


    オブジェクトのコンポーネントの書式設定を確認するには、[インスペクタ] > [外観] タブ > [テーマ] 領域で、ラベルが付いていないドロップダウンからコンポーネントを選択します。

    587-pasted-image-10.png


    このページの下部にある表では、FileMaker Pro 14 で利用できるすべてのオブジェクトコンポーネントを示しています。新規のオブジェクトコンポーネントは太字で示されています。


    オブジェクトとオブジェクトコンポーネントには、さまざまな表示状態の書式を設定することができます。この設定により、インタラクティブで視覚的なフィードバックをユーザに提供することができます。ほとんどのオブジェクトでは、[通常] (または [非アクティブ])、[ポイントしたときに表示]、[押したとき]、および [フォーカス] の 4 つの基本的な表示状態を利用できます。オブジェクトの中には、[メイン]、[代替]、[アクティブ] などの他の表示状態を利用できるものもあります。


    これらの状態はいずれも FileMaker Pro 14 で新規追加されたものではありませんが、新しい方法でオブジェクトと組み合わされています。たとえば、ポータル行では 2 つの新しい状態 ([ポイントしたときに表示] と [押したとき]) を利用できるようになりました。使用しているテーマに組み込まれているオブジェクトの表示状態を時間をかけて確認し、ソリューションの理想的なユーザ体験を達成するために必要に応じてオブジェクトの表示状態をカスタマイズするようにしてください。.

     


     


    目的:

     

    ボタンバーのセグメントのテキストサイズとボタンバーのアイコンの色を変更します。別のレイアウトでは、ポータル行の上にカーソルを合わせたときに色が変わるようにします。


    メモ:


    このエクササイズの内容は、前ページのボタンバーとアイコンの続きです。

     

     

    手順:

     

    1. レイアウトモードで「Pro」フォルダ内の「承認一覧 | Pro」レイアウトを表示していることを確認します。

    2. 先に作成したボタンバーを選択します。

      ボタンバーの色がレイアウトの配色に一致するよう、カスタムスタイルを適用しましょう。

    3. [インスペクタ] > [スタイル] タブで、カスタムスタイル [グリーン] を選択します。これによって [通常] 状態の塗りつぶし色を含むボタン全体のスタイルが設定されます。
      588-pasted-image-11.png


      ボタンバーのセグメント

      ボタン全体のスタイルの設定が終了したのでセグメントの外観を変更しましょう。

    4. [インスペクタ] > [外観] タブで、オブジェクトタイプドロップダウンから [ボタンバー: セグメント] を選択します。
      589-pasted-image-12.png
    5. これを選択すると、行った書式設定の変更が現在選択しているボタンバーのセグメントに適用されるようになります。書式設定は各セグメントごとにではなく、すべてのセグメントに同時に適用されることに注意してください。

    6. 表示状態ドロップダウンがデフォルトの表示状態である [非アクティブ] に設定されていることを確認します。
      590-pasted-image-13.png

    7. [テキスト] 領域でテキストサイズを 16 pt に変更します。
      591-pasted-image-14.png


      ユーザがボタンセグメントの上にカーソルを合わせたときのテキストの色を変更しましょう。

    8. 表示状態ドロップダウンから [ポイントしたときに表示] を選択します。
      592-pasted-image-15.png

    9. [テキスト] 領域のテーマのカラーパレットで、文字色を白からライトグリーンに変更します。

      593-color+picker+green.png
      FileMaker Pro 14 に新しく組み込まこまれたカラーピッカーに注目してください。上部の色セットには、テーマのために作成されたカラーパレットが含まれています。この上部セットに色を追加すると、2 つの追加の色調が自動的に生成されます。


      ボタンバーのアイコン


    10. [インスペクタ] > [外観] タブで、オブジェクトタイプドロップダウンから [ボタンバー: アイコン] を選択します。

      すべての書式設定の変更がボタンバーのアイコンに適用されるようになります。[ポイントしたときに表示] 状態が選択されているのでこの状態から始めます。

    11. [グラフィック] 領域で、塗りつぶし色を白からポイントしたときに表示されるテキストに使用したものと同じ色のライトグリーンに変更します。

    12. 表示状態ドロップダウンから [非アクティブ] を選択します。

    13. [グラフィック] 領域のテーマのカラーパレットで、塗りつぶし色を濃いグレーから白に変更します。
      594-pasted-image-17.png

    14. ブラウズモードに切り替えます。ボタンバーの外観は次のようになります。
      595-button+bar+display+state+result.png




    自分で探究する

     

    各オブジェクトコンポーネントで利用できる書式設定オプションをよく理解するために、必要に応じて学習してください。例:

     

    セグメント

    • 塗りつぶし色は、3 つすべてのセグメントの背景に影響を与えます。
    • ラベルはセグメントに含まれるため、文字色はボタンラベルの色に影響を与えます。
    • 線の色と枠のオプションは、各セグメントの枠の設定に影響を与えます。

    アイコン

    • 塗りつぶし色は同時にすべてのアイコンの色に影響を与えます。アイコンが輪郭線である場合は、塗りつぶされず、輪郭線のみに色が付けられることに注意してください。
    • パディングは、アイコンとラベルの距離に影響を与えます。ラベルが右側にある場合は、右パディングを変更できます。ラベルが下にある場合は、下パディングを変更できます。他の場合も同様です。

    区切り

    • 塗りつぶし色は設定できません。
    • 線の色は同時にすべての区切りの色に影響を与えます。

     

     


    設定可能なオブジェクトコンポーネント

     

    異なるオブジェクトには、異なるコンポーネントがあり、そのほとんどに対して表示状態を設定することができます。次に FileMaker 14 のすべてのオブジェクトと設定可能なコンポーネントの一覧を示します。新しいオブジェクトとコンポーネントは太字になっています。これらのコンポーネントの一部は、オブジェクトが特定の方法で設定されている場合にのみ使用できることに注意してください。たとえば、ドロップダウンカレンダーには [カレンダーの表示切り替え用アイコンを表示] オプションを設定する必要があります。

     

    596-object+diagram.jpg

     

    * ポータル行では、2 つの新しい表示状態 ([ポイントしたときに表示] と [押したとき]) を利用できます。ポータル行の [ポイントしたときに表示] 表示状態は、ほとんどのテーマに組み込まれています。

     

    ** チェックボックスアイコンは、ボックスが選択されたときに [X] または [チェックマーク] (✔︎)のどちらを表示するかを書式設定できるようになりました。[インスペクタ] > [データ] タブ > [フィールド] 領域の [コントロールスタイル] オプションの下を参照してください。
    597-pasted-image-18.png