チュートリアル 201:

作成

チュートリアル 201: レッスン 4

レイアウト

レッスン教材
ファイルのダウンロード

Windows: zip ファイルを展開すると、最上位のフォルダー名が英語で表示されます。サブフォルダー及びコンテンツは日本語です。

Windows 7: 展開された zip ファイルに含まれるフォルダーおよびファイル名(日本語)が適切に表示されない場合があります。Microsoft がこの問題についての対応手順を公開しています。こちらをご確認ください。 Zipfldr.dll hot fix >

ユーザインターフェースの設計

前回のレッスンで、情報を収めるテーブルとフィールドを定義しました。ただし今のところ、ユーザがデータを表示し操作するのに適した方法がありません。いくつかのレイアウトが必要です。

レイアウトとは、ユーザがカスタム App を使用するための画面です。ヘッダーの表示や情報のナビゲーションなど、レイアウトはそれぞれの役割を持ついくつかのパートから成り立っています。

FileMaker Pro には、画面ステンシルや整列ツールを含む一連のツールがあり、特定のデバイスのサイズに合わせたプロ仕様の画面作りに役立ちます。新規レイアウト/レポートでは、画面の指示に従って新しいレイアウトを作成できます。フィールドピッカーツールは、素早くレイアウトに一連のフィールドを追加できます。

レイアウトテーマは、レイアウトオブジェクトの色、フォントその他のデザイン要素を保持することでレイアウトの一貫性を保ち、簡単に適用し、更新できます。シンプルなカスタム App でも多くのレイアウトが含まれるため、FileMaker Pro にはレイアウトを手軽に整理するための便利な機能が用意されています。

これが重要な理由は?

  • レイアウトはカスタム App の顔です!ここがユーザの目に触れ、操作する場所になります。
  • レイアウト設定ツールを使用すると、ユーザのデバイスに最適なインターフェースを作成することができます。
  • ユーザの目は無意識に不揃いの場所を見つけます。ここで紹介する整列ツールにより、プロがデザインしたようなインターフェースを作成できます。

ビデオ 1

はじめてのユーザレイアウトの作成

「顧客リスト」レイアウト作成を通じて、レイアウトのセットアップの基本を学びます。

このビデオで学ぶこと
  • [新規レイアウト/レポート] ウィザード:ゼロからのレイアウト作成をサポート (0:50)
  • 画面ステンシルの設定:特定の画面サイズに向けたレイアウトを作成する (2:04)
  • レイアウトパートとは:レイアウトの構造を理解する (3:07)
  • フィールドピッカーによるフィールドの追加:素早くレイアウトにデータを表示する (4:08)
  • ダイナミックガイドを使った整列:フィールドとラベルをドラッグで整列させる (7:39)

ビデオ 2

リストレイアウトの改良

ユーザが重要なデータを見やすくなるように、新しいレイアウトを調整します。

このビデオで学ぶこと
  • レイアウトの高さの調整:画面スペースを節約する (0:47)
  • レイアウトの変更を元に戻す/再実行:不要な変更を元に戻す (2:08)
  • スタイルとテーマの適用:数回のクリックでレイアウトの外観を整える (3:05)
  • レイアウトの管理:レイアウトを整理する (5:26)

関連リソース