第44話 レイアウトの見栄えを整理する

エヌ・ケイ・カスタマイズの沖田でございます。鹿児島でも桜が咲いてきたりと春を感じる季節になってまいりました。
今回は、Appのレイアウトの見栄えについて、学んでいきましょう。

テーマを変える(タスク詳細)
 前回、学習したレイアウトをもとに、いろいろなテーマを確認していきます。以下のレイアウトを元にテーマを変更していきましょう。テーマの変更方法は次のとおりです。

元のテーマ

(1) 「タスク詳細」レイアウトでレイアウトモードに切り替えます。

(2) テーマを変更します。
   a. レイアウトツールバーの[テーマ変更]アイコンをクリックします。

図 [テーマの変更] アイコン

   b. [テーマの変更]ダイアログが表示されます。
   c. 「ソフィスティケーテッド」を選択します。
   d. [OK]ボタンをクリックします。

(3) レイアウトを保存してブラウズモードで表示を確認します。

テーマが変更された

 FileMakerでは他にもいろいろなテーマが用意されております。テーマを変更するだけでもAppの印象は変わりますので、いろいろ試してみてはいかがでしょうか。続いては、項目を整理してきましょう。

項目を整理する
レイアウトにフィールドやポータルをどんどん並べていくと画面が雑然としてしまいます。
今回使用しているタスク詳細レイアウトには、複数のテーブルの情報が配置されていて、入力もおこなえます。

  ・ タスク → タスクの情報を入力する
  ・ 割り当て(担当者) → タスクの担当者を割り当てる
  ・ 添付ファイル → タスクの添付ファイルを入力する

レイアウトの項目配置は、ユーザにどのように使用されるかを考えて見やすいように整理します。
今回の各テーブルのフィールド数は少ないので、すぐに項目を分類してわかりやすく並べ替えられます。しかし、沢山のフィールドがある場合には注意が必要です。

すべての項目をレイアウトに並べたくなるかもしれませんが、場合によっては次のようなことが起こります。

  ・レイアウトに全項目を配置したけれど、すごく小さいフォントサイズでないと配置ができなかった。
  ・ 項目が多すぎて見づらいけれど、画面を大きくするとパソコンのモニタよりも大きくなってしまう。

 本当に全項目を『いつも見ていたい』ですか?必要な項目だけが見えていればよいのでは?ワンクリックで他の項目が表示されれば便利かもしれません。

FileMaker Pro Advanced にはレイアウトの内容を整理して見やすくするためのレイアウトオブジェクトが用意されています。その中から「タブコントロール」「スライドコントロール」を確認してきましょう。

タブコントロール
タブコントロールは、1 つの場所に複数の重なった同じサイズの四角いパネルを置いて、そのパネルの上にフィールドなどが配置されているものと思ってください。実際に作成していきましょう。

(1) 「タスク詳細」レイアウトでレイアウトモードに切り替えます。
(2) タブコントロールが配置しやすいように2 つのポータルをエリアの外に配置します。

フィールドの退避

(3) タブコントロールを作成します。
   a. [タブコントロール]アイコンをクリックします。
   b. タブコントロールを配置したい位置でドラッグして大きく□を描くようにします。
   c. マウスボタンを離すと[タブコントロール設定]ダイアログが表示されます。

図 タブコントロールアイコン

(4) タブコントロール設定画面が開きますので、設定をします。
   a. [タブ名]で「担当者」と入力して[作成]をクリックします。
   b. 同じようにして「添付ファイル」も[作成]します。
   c. [デフォルトのフロントタブ]は、「担当者」を選択します。
   d. [タブ揃え]は、「両端揃え」を選択します。
   e. [タブ間隔]は、「ラベル幅」を選択します。
   f. [OK]をクリックします。

図 タブコントロール設定画面

(5) タブコントロールがレイアウトに配置されます。

(6) それぞれのタブに、移動しておいたポータルを戻します。

(7) レイアウトを保存してブラウズモードに切り替えて動作を確認します。

(8) タブコントロールのタブ部分をクリックするとパネルが切り替ります。

図 タブをクリックすることで、表示が切り替わる

スライドコントロール

スライドコントロールはタブコントロールと同じく重なったパネルですが、上部のタブ部分がありません。代わりにパネルの下にナビゲーションドットという○がパネルの数だけ表示されます。また、パネルの切り替えが左右に動くスワイプジェスチャで表現されます。

ナビゲーションドットは非表示にすることもできます。例えばiPad やiPhone での使用時に指のスワイプだけで十分な場合は、非表示にします。
※FileMaker Go で指を左右にスワイプするジェスチャに対応していますのでモバイルデバイスでの使用に適しています。

スライドコントロールをレイアウト上に配置する方法は、タブコントロールとほとんど同じです。実際に作成していきましょう。

(1) 「タスク詳細」レイアウトでレイアウトモードに切り替えます。

(2) スライドコントロールを作成します。
   a. [タブコントロール]アイコンの横の下矢印をクリックします。
   b. すると、スライドコントロールを選択できます。

図 スライドコントロールアイコン

   c. [タブコントロール]アイコン作成時と同じように配置したい位置でドラッグして大きく□を描くようにします。
   e. マウスボタンを離すと[スライドコントロール設定]ダイアログが表示されます。
   f. スライドコントロールがレイアウトに配置されました。

(3) スライドコントロールを設定します。
   a. [スライド]の数を[+][-]をクリックしてタブコントロールと同じ数 2 にします。

図 [スライドコントロール設定] ダイアログ

(4) タブコントロール上のポータルを移動します。
   a. タブコントロールの各タブパネルからポータルをスライドコントロールに配置します。

(5) レイアウトを保存してブラウズモードに切り替えて動作を確認します。

図 スライドコントロールの完成

今回はここまでになります。Appを作成していく上で、表示したい項目はたくさん出てくると思います。[タブコントロール]や[スライドコントロール]を使用することで、表示したい項目の整理が可能になります。また、視覚的にも情報が整理されて、使用するユーザが使いやすいAppになってきます。
次回もよろしくお願いします。

Follow me!