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

伊達諒

2021-07-21 07:00

 前回は、「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
※クリックすると拡大画像が見られます

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

ZDNET Japan 記事を毎朝メールでまとめ読み(登録無料)

ホワイトペーパー

新着

ランキング

  1. セキュリティ

    警察把握分だけで年間4000件発生、IPA10大脅威の常連「標的型攻撃」を正しく知る用語集

  2. セキュリティ

    まずは“交渉術”を磨くこと!情報セキュリティ担当者の使命を果たすための必須事項とは

  3. セキュリティ

    「2024年版脅威ハンティングレポート」より—アジアでサイバー攻撃の標的になりやすい業界とは?

  4. セキュリティ

    生成AIを利用した標的型攻撃とはどのようなものなのか?実態を明らかにして効果的な対策を考える

  5. ビジネスアプリケーション

    Microsoft 365で全てを完結しない選択、サイボウズが提示するGaroonとの連携による効果

ZDNET Japan クイックポール

所属する組織のデータ活用状況はどの段階にありますか?

NEWSLETTERS

エンタープライズコンピューティングの最前線を配信

ZDNET Japanは、CIOとITマネージャーを対象に、ビジネス課題の解決とITを活用した新たな価値創造を支援します。
ITビジネス全般については、CNET Japanをご覧ください。

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