New in 14: ボタンバーとアイコン

Version 2

     

     

     

     

    新しいボタンバーを使用すると、サイズと書式を統一してボタンの行または列を同時に定義することができます。このバーはセグメントに分割され、各セグメントには通常のボタンまたはポップオーバーボタンのいずれかが含まれます。単一のボタンバーに両方のタイプのボタンを含めることができます。ボタンの 1 つを「アクティブ」に指定することもできます。この操作は、通常、ユーザが最後にクリックしたボタンを示すために行います。

     

    ボタンバーはナビゲーションにも適しておりタブ間またはスライドパネル間の切り替え、ラジオボタンまたはチェックボックスセットの代用としても機能します。また、同じ機能を持つボタンをグループ化する場合にも適しています。


    各ボタンには特別なアイコンを関連付けることができます。140 個以上の用意されているアイコンのいずれかを使用するか、または自分で作成したアイコン (PNG または SVG フォーマット) をインポートすることができます。これらのアイコンは、ラベルに対してさまざまな方法で配置したり、それぞれに書式設定をしたり、サイズを変更したりすることができます。


    これまでは、イメージをボタンに追加するために背景塗りぶしイメージをボタン自体に指定したり、イメージをボタンの上に置く必要がありました。新しいボタンはこうした手法よりもいくつかの点で優れています。このアイコンを使用すると、ラベルとイメージを組み合わせたり、イメージの配置とサイズをより適切に管理したり、WebDirect でシームレスに作業することができます。さらに、SVG イメージのアイコンを使用して表示状態を設定することもできます。次のページを参照してください。


    ボタンバーを作成すると [ボタンバー設定] ダイアログが表示されます。FileMaker Pro から別のアプリケーションに切り替えるとこのダイアログは閉じられます。このダイアログはボタンバーのオブジェクトをダブルクリックして再度開くことができます。ダイアログの詳細図は、このページの下部にあります。

     

     


     

     

    目的:

     

    ナビゲーションおよび対象レコードの変更に使用するボタンを含むアイコン付きのボタンバーを追加します。


     

     

    手順:

     

    1. Pro」フォルダ内の「承認一覧 | Pro」レイアウトに切り替えます。レイアウトの上部ナビゲーションパートに 3 つの個別のボタンがあります。

    2. レイアウトモードに切り替えます。


    3. 上部ナビゲーションパートから既存の 3 つのボタンを削除します。
      598-delete+three+buttons.png

    4. ツールバーのボタンバーツールを選択します。
      599-Button+Bar+Tool.png

    5. 上部ナビゲーションパートで長方形をドラッグして、削除した 3 つのボタンと同じ領域を占めるボタンバーを作成します。[ボタンバー設定] ダイアログウインドウが表示されます。

      デフォルトではボタンバーに 3 つの横並びのセグメントがあり、最初のセグメントが選択されています。





      最初のボタンセグメントの設定


    6. アイコンをボタンラベルの左に配置するオプションを選択します。



      600-pasted-image-3.png
      ダイアログウインドウにアイコンのグリッドが表示されます。



    7. セグメントラベルに“連絡先”と入力し、Enter キーを押します。


      601-pasted-image-4.png
      ボタンセグメントにラベルが表示されます。



    8. アイコンのリストをスクロールして人の頭のようなアイコンを選択します。


      602-pasted-image-5.png
      ラベルの左にあるボタンセグメントにアイコンが表示されます。



    9. スライダをドラッグするか、またはスライダの右にあるボックスに値を直接入力してアイコンサイズを 18 pt に変更します。

      603-pasted-image-6.png

    10. 処理を [何もしない] から [単一ステップ] に変更します。[ボタン処理] ダイアログウインドウが表示されます。このウインドウは新しいスクリプトワークスペース環境の一種です。詳細については後のセクションで説明します。 



      できるだけキーボードを使用してみましょう。


    11. レイア”と入力します。

      これは「レイアウト切り替え」の先頭の数文字です。[レイアウト切り替え] ステップがドロップダウンに表示されます。


    12. 選択して Enter キーを押します。[レイアウト切り替え] スクリプトステップが単一スクリプトステップとして追加されます。


    13. スペースキーを押します。このスクリプトステップのオプションを含むドロップダウンが表示されます。


    14. 下向矢印キーを押して [レイアウト...] オプションを選択し、Enter キーを押します。[レイアウトの指定] ダイアログウインドウが表示されます。


    15. 下向矢印キーを複数回押して「連絡先一覧 | Pro」レイアウトまでレイアウトのリストを移動します。

    16. Enter キーを押して変更内容を保存し、[レイアウトの指定] ウインドウを閉じます。


    17. [OK] ボタンをクリックして変更内容を保存し、[ボタン処理] ウインドウを閉じます。このボタンではキーボードショートカットが使用できないことに注意してください。



      最初のボタンセグメントが完成しました。2 番目のセグメントに取り組みましょう。





      2 番目のボタンセグメントの設定


    18. [ボタンバー設定] ダイアログにある右向矢印 (またはキャレット) をクリックして、2 番目のセグメントに切り替えます。


      604-pasted-image-7.png
      セグメントのテキストが [1 / 3] から [2 / 3] に変わります。




    19. セグメントラベルに“自分の承認”と入力して Enter キーを押します。


    20. 一覧からチェックマークアイコンを選択します。

      605-pasted-image-8.png

      今回は単一ステップではなくスクリプトを実行します。



    21. 処理を [何もしない] から [スクリプト実行] に変更します。[スクリプト指定] ダイアログウインドウが表示されます。 


    22. スクリプト [自分の承認を表示] を選択します。


    23. [OK] ボタンをクリックして変更内容を保存し、ウインドウを閉じます。



      2 番目のボタンセグメントが完成しました。3 番目のセグメントに取り組みましょう。





      3 番目のボタンセグメントの設定


    24. 3 番目のセグメントに切り替えます。


    25. セグメントラベルに“すべての承認”と入力し、Enter キーを押します。

    26. 2 番目のボタンの場合と同様に、リストからチェックマークアイコンを選択します。


    27. 処理を [何もしない] から [単一ステップ] に変更します。[ボタン処理] ダイアログウインドウが表示されます。 


    28. 全レ”と入力します。

      [全レコードを表示] ステップがドロップダウンに表示されます。


    29. Enter キーを押します。[全レコードを表示] スクリプトステップが単一スクリプトステップとして追加されます。



      3 番目のボタンセグメントが完了しました。


    30. [OK] ボタンをクリックして変更内容を保存し、[ボタン処理] ウインドウを閉じます。


    31. ブラウズモードに切り替えて、新しいボタンバーのボタンを試してみます。

      現在の表示が以下のようになれば成功です。次のエクササイズではさらに書式設定を行います。

    606-button+bar+half-finished.png

     

     

     


     

     

    ヒント


    最初のボタンバーの作成を終了したので、今後のためにいくつかのヒントを以下に挙げます。

     

    • 各ボタンのサイズはラベルの長さに関係なく同じです。


    • ボタンバー、その区切り、セグメント、アイコンの全体にスタイル設定が適用されるため、各ボタンの書式が統一されます。


    • ボタンバーの 1 つのセグメントをアクティブに指定することができます。アクティブなセグメントを指定するには一覧からセグメントを選択するか、またはセグメントのオブジェクト名に一致するテキスト文字列を求める計算式を指定します。


    • 個々のセグメントは表示切り替え機能を使用して非表示に設定できます。この場合、空のスロットが表示されるのではなく、他のセグメントが拡大されてボタンバーの行全体または列全体を満たします。表示切り替えはボタンバー全体にも適用できます。

    • 各セグメントに個別に条件付き書式とスクリプトトリガを割り当てることができます。


    • ボタンセグメントは、セグメントをクリックして少しの間保持し、そのセグメントを新しい位置までドラッグすることによって調整することができます。


    • ボタンバーからセグメントを削除するには、選択してから Delete キーを押します。


    • 通常のボタンとボタンバーには、アイコンとテキストの同じ組み合わせを使用できます。



       

    ボタンバー設定


    次の図では、利用可能な設定の選択肢の大部分を説明しています。ただし、ダイアログの一部は選択するオプションによって変わります。

     

    607-pasted-image-2.png