FILEMAKER

2021/7/29

FileMaker お蔵出し (2) - レイアウト

本ブログ・シリーズでは、これまでに Claris からお届けしてきた数々の珠玉の技術情報を、FileMaker ビギナーズ & ジュニアズのみなさんに、気になるテーマ別でご紹介します。
名付けて、「FileMaker お蔵出し」。
今回のテーマは、「レイアウト」です。必要な要素がすっきりと統一されたデザインで提示された機能的なレイアウトを、なるべく手戻り少なく作成するためのヒントをご紹介します。

今回の旅路：

  • FileMaker Pro で「レイアウトを作る」ということ
  • 「画面設計」してみる
  • 「データベース」との関係を確認する
  • 「道具」を知る
  • 「技」を知る
  • 忘れちゃいけない「パフォーマンス」のこと
  • おわりに

FileMaker Pro で「レイアウトを作る」ということ

FileMaker Pro は、ご存知のとおり、「ローコード開発プラットフォーム」です。
特に、カスタム App のレイアウト（画面）を作成する際は、ほぼ「ノーコード」で作り上げることもできます。
しかも、様々な色彩や図形や画像やアイコンを心ゆくまで駆使して、己の内なる魂の叫びを芸術としてキャンバス（レイアウト）に具現化することもできます。

いえ、そういうことは、普通はしません。

一方で、まっさらなキャンバス（レイアウト）を前に、どうしたら使いやすくて、しかもセンスが良い「レイアウト」が作れるのだろう、と途方に暮れたことがある方はいらっしゃるかもしれません（私は毎回暮れてます）。
あるいは、カスタム App を長年使い込んでいるうちに、あらゆる「必要（かもしれない）データ」が全部詰め込まれ、「特に重要（かもしれない）データ」があちこちにビビッドなカラーで散りばめられた結果、正直、一見さんには到底理解しづらいレイアウトになってしまい、折に触れて天を仰いでいる方もいらっしゃるかもしれません（そういうカスタム App 知ってます）。

使いやすいレイアウトを用意して、カスタム App を長く使っていく（使ってもらう）ためには、いくつかのポイントを押さえておく必要があります。いろいろなポイントがあると思いますが、ここでは次のポイントから、「レイアウトを作る」ことについて考えていきましょう。

  • 画面設計
  • データベースとの関係
  • 道具（レイアウトツール）
  • 技（レイアウトテクニック）
  • パフォーマンス

「画面設計」してみる

言うまでもなく、FileMaker Pro のカスタム App において「レイアウト」はユーザとカスタム App を結ぶ接点です。通常のアプリケーション開発と同じように、「画面設計」では、「要件定義」や「システム設計」を踏まえて、どのようにカスタム App を使っていくか、どんなデザインにするかなどを、ユーザと一緒に十分に時間をかけて検討していきます。

とは言え、「これ（カスタム App）は自分一人で使うんだから『画面設計』なんて大袈裟なことは省略していいんじゃないの」とか、「FileMaker Pro はいつでもレイアウトをノーコードで修正できるんだから、最初からそんなに考え込まなくていいんじゃないの」とか、様々な理由で「画面設計」をすっ飛ばしたくなることもあるかもしれません。
でも、もしユーザが一人以上になる可能性があったり（ちなみに 3 か月後の自分は「他人」です。さらに、年々「他人」の自分を目にする頻度が高くなります）、ちょっと考えれば防げる手戻りを無くしたいと思ったりするのであれば、まずは「画面設計」がどういうものなのかを押さえておくと良いでしょう。カスタム App を開発する状況によって要求される程度は大きく異なりますが、FileMaker の「プロフェッショナル」が「画面設計」をどう捉えているかを知ることはとても重要です。

なお、インターネット上に数多くある Web 制作の「画面設計」手法についての記事（デザインの「4 原則」とか）も参考になるので、よかったら検索してみてください。

レイアウト上に必要な要素（フィールドやボタン）を決めても、その配置に悩んでしまう場合は、これから作ろうとしているものに似たカスタム App のレイアウトが参考になるかもしれません。
シンプルなものであれば FileMaker Pro に組み込まれている「Starter テンプレート」、特定の業種・職種や用途については、Claris の提供する「業種別・職種別サンプル App」および「fmgo.jp」を覗いてみてください。

  • Claris: fmgo.jp
    • 2021/05 現在、iPad と iPhone で今すぐ使えるカスタム App サンプル & テンプレートを 96 個無料公開中
  • FileMaker Pro Starter テンプレート（[ファイル] > [新規作成…] > [作成] > [Starter]）

「データベース」との関係を確認する

レイアウトの作成を始める前に、そのベースとなる TO（テーブルオカレンス）とレイアウトの関係を確認しておきましょう。
作成しようとしているレイアウトがどの TO をベースにしているか、配置しようとしているフィールドがどの TO にあるかなどを確認しておくことによって、レイアウト上にフィールドが無理なく配置できるかどうかを確認できます。
もしかしたら、この期に及んで TO あるいはテーブルそのものが足りないことが判明するかもしれません。そういうときでも、FileMaker Pro では、レイアウトを作成している最中でもすぐにデータベースを改修することができます（と言いつつも、先にちゃんと設計しておくことに越したことはありません、はい）。

なお、この機会にレイアウトと TO の関係についてちゃんと整理したい場合は、次の学習コンテンツをご利用ください。

「道具」を知る

さて、設計したレイアウトを実現する「道具」についてです。
FileMaker Pro で「レイアウトモード」に入ったことがある方は、多かれ少なかれ、FileMaker Pro のレイアウトを作成するための「道具」についてご存知のことでしょう。「今さら」と思われる向きもあるでしょうが、でも FileMaker Pro のレイアウト機能は結構豊富なので、「知らなかった道具」が意外に使える場面もあるかもしれません。
FileMaker Pro のユーザインタフェースは一目で使い方がわかるものも多いですが、どんな「道具（レイアウトツール）」があって、どういうふうに使うかを、一度じっくり復習しておくのもいいですね。

（↓たくさんあるので、スクロールしすぎにご注意ください！）

  • 動画：FileMaker オンライン学習 中級編　第 9 章 レイアウトツール
    • 処理を実行する舞台を作成する (4), (5)
      • レイアウトの設定、レイアウトの管理
    • 処理を実行する舞台を作成する (6)
      • レイアウトパート
    • 処理を実行する舞台を作成する (7)
      • レイアウトエリア
    • 処理を実行する舞台を作成する (8)
      • ステータスツールバー
    • 処理を実行する舞台を作成する (9), (10)
      • アンカー（自動サイズ調整）
    • 処理を実行する舞台を作成する (11)
      • レイアウト一般（左パネルの利用）
    • 処理を実行する舞台を作成する (12), (13), (14)
      • レイアウト一般（右パネルの利用）
    • 処理を実行する舞台を作成する (15), (16), (17), (18), (19), (20)
      • 値一覧、動的値一覧
    • 処理を実行する舞台を作成する (21)
      • オブジェクトを隠す
    • 処理を実行する舞台を作成する (22), (23), (24), (25)
      • Web ビューア
    • 処理を実行する舞台を作成する (26)
      • テーマとスタイル
    • 処理を実行する舞台を作成する (27), (28)
      • マスタ／詳細レイアウト
    • 処理を実行する舞台を作成する (29), (30)
      • デカルト積と関連

FileMaker App 専用アイコン and ピクトグラム素材

JavaScriptを利用した新アドオン

FileMaker Pro 19.1.2 からは、上記レイアウトツールの他に、JavaScript を利用した 9 個のアドオンが新しく組み込まれています。これらを利用することによって、見た目も美しい、高度で洗練された機能をカスタム App に簡単に組み込むことができます。
新しいアドオンについては、次の学習コンテンツを参照してください。

FileMaker Pro 19.1.2 よりも前のバージョンをお使いの方は、この機会に最新版の FileMaker Pro を使って上記アドオンをお試しください。  

今まで知らなかった「道具」を使うことで、より理想的なレイアウトに近づけそうだったら、もう一度、画面設計に戻っても構いません。場合によっては、構造設計（データベース設計）に戻っても構いません。こうやって身軽に開発フェーズを行き来できるのも FileMaker Pro でのカスタム App 開発の醍醐味の一つですね。

「技」を知る

「道具」は知っていても、実際にどういうふうに使うか、どう使っちゃいけないのか、なかなか想像できないときがありますよね。また、同じバージョンの FileMaker Pro を使っているはずなのに、自分のとは段違いに美しいレイアウトや、魔法のような効果を持つ部品を見せつけられて、愕然とすることもあります。
そういうときは、様々な経験を積んで「技」を会得した先達（せんだつ）に教えてもらうのが一番。直接聞いてみるのも良し、FileMaker コミュニティで有名なあの人のサンプルファイルを入手して解析してみるのも良し。先達が実務で培った様々なテクニックを抜け目なくゲットしてください。

例えば、次のサンプル集や学習コンテンツの中に使ってみたい「技」はありませんか？

忘れちゃいけない「パフォーマンス」のこと

ときに、レイアウトの作り方次第で、カスタム App の表示が遅くなったりすることはもうご存知ですよね。
データが少ないうちはあまり気にならないかもしれませんが、こういうのは、気がついたときにはどうしようもなくなっているものです。転ばぬ先の杖、ということで、カスタム App でのレイアウトの表示の仕組みやパフォーマンスへの影響を回避する方法を理解し、見た目や機能性だけでなく、快適に動作するレイアウトを作成するためには、次のガイドと学習コンテンツを参照してみてください。

おわりに

以上、FileMaker Pro で「レイアウトを作る」際に押さえておくべきポイントのいくつかと、その学習コンテンツについてご紹介しました。
お気づきのように、「レイアウト」の見た目、使い勝手、パフォーマンスはそれぞれトレードオフになることもあります。でも、「レイアウトを作る」際に最も気をつけなければならないのは、やはり、そのカスタム App を「ユーザ」が無理なく使えること、でしょうか。
さらに、ユーザの使い方や業務内容は、使っていくうちにどんどん変わっていくのが常です。カスタム App が出来上がってからもユーザと十分に意思疎通を図り、カスタム App をどんどん進化させていってください。

それでは、次の「FileMaker お蔵出し」もなんとなく楽しみにしてくださっていると嬉しいです。
ciao!