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

伊達諒

2021-07-21 07:00

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

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

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

レイアウトとは？

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

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

（1）「住所録」ファイルを開く

図1

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

　すると、次の画面（図2）が開きます。

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

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

（2）レイアウトモードの切り換え

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

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

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

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

（3）「ふりがな」の位置の変更

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

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

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

（4）タイトルをつける

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

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

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

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

（5）テーマの変更

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

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

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

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

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

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

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

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