ノンプログラミング開発ツール ファイルメーカー

レイアウトを変える--住所録のiPhone版も作ってみる

「Claris FileMaker」で作成したカスタムAppの見た目を変える方法とその手順を解説する。

 前回は、「Claris FileMaker」を使い、実際に「住所録」の入力内容である「フィールド」を作成しました。FileMakerで作成する「カスタムApp」では、「Excel」の「セル」にあたる、「フィールド」を作ることから始めます。フィールドには、「テキスト」や「数字」というように入力する内容に応じた「タイプ」を指定する必要があります。

 前回の演習では、フィールドを5つ作っただけですが、カスタムAppの基礎部分は完成しています。後は、データを入力すれば、実際に使うことができます。

 ただ、作成した住所録を見て、「見た目をもう少し変えられないか」と思った人もいたのではないでしょうか。それが、今回学習する「レイアウト」です。レイアウトとはどのような機能なのか、また、レイアウトの種類にはどのようなものがあるのかなどについて解説します。

レイアウトとは?

 レイアウトとは、カスタムAppの表示を制御する機能です。「住所録」では、「氏名」や「住所」などのデータを扱いますが、それをどのように表示するかを制御するのがレイアウトです。 「ブラウズ」「検索」「レイアウト」「プレビュー」の4つのモードがあります。

編集部おすすめの関連記事

レイアウトを確認、作成する

(1)「住所録」ファイルを開く

図1
図1

 前回作成した「住所録.fmp12」(図1のアイコン)をダブルクリックして開いてください。

 すると、次の画面(図2)が開きます。

図2 図2
※クリックすると拡大画像が見られます

 この画面の状態は、「ブラウズ」モードと言います。ブラウズは、閲覧するという意味です。レイアウトを変更するためには、表示方法を「レイアウト」モードに切り換える必要があります。

(2)レイアウトモードの切り換え

 メニューの「表示」→「レイアウト」モードを選択します。そうすると、図3のように表示が変わり、レイアウトを編集できる状態になります。

図3 図3
※クリックすると拡大画像が見られます

 レイアウトモードは、3つのパネルで構成されています。左右のパネルは非表示にもできます。

  • 左側のパネル:フィールドやオブジェクト、アドオンを配置、管理する「オブジェクト」パネル
  • 中央のパネル:レイアウトを編集するためのパネル
  • 右側のパネル:さまざまな設定のための「インスペクタ」パネル

(3)「ふりがな」の位置の変更

 「氏名」の上に「ふりがな」があった方が自然なので、「ふりがな」を「氏名」の上に変更してみましょう。

 変更する方法は、「ふりがな」のラベルと「ふりがな」のフィールドを下の空いているスペースにドラッグして退避します。次に、「氏名」ラベルと「氏名」フィールドを「ふりがな」があった位置にドラッグして移動させます。最後に退避した「ふりがな」のラベルと「ふりがな」のフィールドを「氏名」のあった場所にドラッグします。すると、図4のようになります。

図4 図4
※クリックすると拡大画像が見られます

(4)タイトルをつける

 何のカスタムAppなのかを一見してわかるように、タイトルをつけましょう。

 画面中央のレイアウトパートには、ふりがなや氏名などのフィールドを配置した「ボディ」のほかに、レコードを切り替えても常に表示される「ヘッダ」「フッタ」や「上部」「下部」のナビゲーション、集計のための「前部総計」や「後部小計」などのパートが用意されています。

 上部にある「レイアウト」ツールから「T」をクリックして、上部ナビゲーションの部分にドラッグしてテキスト枠を設定します。テキスト枠に「住所録」と入力します。これで、だいぶ体裁が整ってきました(図5)。

図5 図5
※クリックすると拡大画像が見られます

(5)テーマの変更

 FileMakerには、あらかじめデザインのテンプレートである「テーマ」が設定されています。 メニューの「レイアウト」→「テーマの変更」を選択すると次の画面(図6)が表示されます。

図6 図6
※クリックすると拡大画像が見られます

 現在のテーマが「アペックスブルー」であることがわかります。左のテーマ名を選択すると右にプレビューが表示されるので、好みのテーマを選びます。今回は、「ソフィスティケーティッドタッチ」を選んで「OK」ボタンをクリックしてみましょう(図7)。

図7 図7
※クリックすると拡大画像が見られます

 そうすると、表示が図8のように変わります。

図8 図8
※クリックすると拡大画像が見られます

 だいぶ雰囲気が変わりました。テーマを変えるとフォントサイズなども変わるので、修正したい場合には、テーマを選んでから修正するようにしてください。

 「住所録」のタイトル文字が少し小さいので、大きくしてみましょう。レイアウト編集の画面では、右側に「インスペクタ」というさまざまな設定をするためのパネルを表示できます。インスペクタの「外観」タブ(パレットのアイコン)を選択し、下にスクールすると、「テキスト」というところがあるので、フォントサイズを「16」から「24」に変更します(図9)。

図9 図9
※クリックすると拡大画像が見られます

 「住所録」の文字サイズが大きくなりました。レイアウトを保存する場合には、メニューの「レイアウト」→「レイアウトの保存」を選択すると保存されます。

(6)変更したレイアウトの確認

 メニューの「表示」→「ブラウズ」モードを選択します。そうすると図10のような表示になります。

図10 図10
※クリックすると拡大画像が見られます

 以前より、上品な感じになりました。入力欄がもう少し下の方が入力しやすいので、レイアウトの微調整をしていきます。

 メニューの「表示」から「レイアウト」モードを選択します。ラベルとフィールドの全体を下に移動します。また、「住所」欄と「メールアドレス」欄が少し短いので、長くしてみましょう。

 微調整が終わったら、メニューの「表示」から「ブラウズ」モードを選択します(図11)。

図11 図11
※クリックすると拡大画像が見られます

 表示画面のバランスもよくなり、住所やメールアドレスも十分な長さとなりました。

「ノンプログラミング開発ツール」で読まれている記事

TechRepublic Japanで人気の記事

編集部オススメ

トレンドまるわかり![PR]

財務・経理
人事・労務
マーケ・営業
購買・調達
生産・製造
データ分析
コミュニケーション
通信・通話
文書・コンテンツ
PC・モバイル
新興技術
ITインフラ
クラウドサービス
OS・ミドルウェア
開発
開発ツール
開発支援
ノンプログラミング開発ツール
データベース
運用
セキュリティ

ホワイトペーパーランキング

  1. 最先端のデータサイエンティストでいるための5つのヒント—AIによる高度化でデータの達人であり続ける
  2. 経理部門 554人に聞いた「新しい経理部門の働き方」 その実現に向けた具体的な行動指針を解説
  3. パンデミックに乗じたサイバー攻撃に屈しない 最新の脅威分析レポートに見る攻撃パターンと対応策
  4. DX時代にIBM i は継続利用できるのか? モダナイゼーション実施で考えておくべき5つの視点
  5. サイバー攻撃でPCに何が起きている? サイバーディフェンス研究所の名和氏が語るフォレンジックのいま

Follow TechRepublic Japan

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]