by FileMaker社の英語サイトで、開発者向けのテンプレートファイルが3種類公開されています。
少し階層が深いところにありますが、コンタクト情報を入力することでダウンロードが可能です。FileMakerの試行版と一緒にダウンロードするか、演習用か完成版か、を選択する必要があります。
私は特に、カードウインドウを使ったナビゲーションメニューが参考になりました。今回は、これらのテンプレートの開発に協力したSoliant Consultingの関連記事を紹介します。
FileMaker Templates: Give Your Users a Better Experience
(元記事はこちら)
Alycia McGuire
2019/1/29
あなたのための開発基盤ファイル
これらのFileMakerテンプレートには、一貫した設計・すっきりした見た目・戦略的なユーザインターフェイスとユーザ体験があります。設計情報を見れば、それをよりよく理解できるでしょう。それは偶然ではありません。私たちのチームは、これらのアプリケーションの外観・画面遷移、そして最も重要な開発方法を決定するのに、多くの時間を費やしました。
スターターソリューションとは異なり、これらのファイルは、詳細に分析・理解・学習され、実際の開発の基盤になることを想定して作られています。設計と開発のプロセスで私たちが得たベストプラクティスについて詳しく説明します。
ユーザインターフェイスとユーザ体験のベストプラクティス
ユーザ体験とは、ユーザがアプリケーションの特定の機能をどう認識するかを表します。使いやすさ・効率性・全体的な操作の流れがこれに該当します。一方ユーザインターフェイスは、アプリケーションの全体的な外観とスタイルをさします。私たちは、毎日楽しむスマホアプリと同じ感覚で操作できるように、これらのソリューションを構築することを目標としました。
戦略的ナビゲーション
たとえば、さまざまなレイアウト間のナビゲーションがアプリケーション全体でどのように動作するかを見てみてください。各レイアウトにナビゲーションバーを表示する代わりに、FileMakerの新しい機能であるカードウィンドウでナビゲーションレイアウトを表示するようにしました。FileMaker 16で導入されたカードウィンドウを使用すると、ウィンドウの上に別のウィンドウを重ねることができます。これは、ファイルナビゲーションを設計するときに利用できる優れた機能です。これにより、各レイアウトのスペースが広くなり、レイアウトが乱雑になりません。ナビゲーションメニューの設計も簡単になります。ナビゲーションメニューを含むすべてのレイアウトを変更するのではなく、一つのレイアウトを変更するだけで済みます。
各レイアウトの右上にあるハンバーガーアイコンのボタンに、カードウィンドウでナビゲーションレイアウトを開くスクリプトを設定しました。カードウィンドウのサイズと位置を制御できるので、ウィンドウの任意の場所にナビゲーションレイアウトを表示させることができます。私たちは、縦長のウィンドウを画面の右端に表示することにしました。Get (WindowHeight)スクリプトステップを使えば、ナビゲーションウィンドウを常にアクティブウィンドウと同じ高さに保つことができます。Get (WindowWidth)で得た値からナビゲーションメニューのレイアウト幅(今回の場合は320pt)を引くと、ナビゲーションウィンドウは常にウィンドウの一番右側に開きます。
その結果、ユーザが必要とするときにだけ表示される機能的なナビゲーションウィンドウとなり、メインレイアウトもよりすっきりした外観になりました。
色の一貫性
これらのカスタムソリューションを設計する際に私たちが重視したユーザ体験のもう1つのポイントは、アプリケーション全体で一貫した色を使用することでした。ワークフロープロセスができるだけ自然に流れ、混乱がないことを目指しました。
1つの方法は、特定の色でワークフローを誘導することです。これは、ボタンまたはクリック可能テキストのどちらであっても、操作のタイプによって色を区別することを意味します。全体では色をシンプルに保ちつつ、「Yes」または「次のステップ」に一つの色を設定し、「No」または「キャンセル」には抑えた色を設定しました。
たとえば、Job Trackingファイルで新規の時間エントリを作成するユーザには、時間の入力が完了した時点で「閉じる」と「削除」の2つのオプションがあります。自然な動作である「閉じる」は、ボタンの色を明るくします(今回の場合は青)。ユーザは「削除」のオプションも必要かもしれませんが、すぐに注意を呼び起こすべきものではありません。そこでより抑えた色(今回の場合はグレー)にしました。
ユーザ体験のこの部分は、各コアファイルおよび追加のbuild-on全体に適用されています。ユーザに操作を促したり、注目させたい操作については、ボタンとホバー時の色を青にしました。選択肢であるものの、通常の次の操作ではなく、ユーザが選択する確率が小さいボタンやテキストには、グレーを使用しました。
デザインテーマ
開発プロセスの最初にデザインテーマを設定すると、ソリューション全体で一貫したデザインを簡単に適用できます。あなた自身のデザインによるカスタムテーマを作ることができる一方、FileMakerにあらかじめセットされているテーマを使うこともできます。テーマには、各種類のオブジェクトに一貫した色・フォント・スタイルが設定されています。
設計プロセスの最初にテーマを選択し、変更を加えないようにすることをお勧めします。これにより、開発中のデザインの不統一が発生するのを防ぎます。
私たちのチームでは、このプロセスで何回か開発サイクルを回す必要がありましたが、結局カスタムテーマを作り、すべてのレイアウトパーツ、図形、ボタン、ポータル、編集ボックスなどのスタイルをカスタマイズしました。これには最初は少し余分な作業が必要でしたが、各レイアウトの設計段階で時間とストレスを節約できました。追加されたすべてのオブジェクトはスタイルを持っているので、それぞれのオブジェクトのスタイル設定について考える必要はなく、レイアウト間で一貫したレイアウトを保つことを意識する必要もありませんでした。
スクリプトの一貫性
また、プロジェクトの最初にスクリプトのコーディング規約を作り、スクリプト・フィールド・テーブル・変数などの命名規則を決定することをお勧めします。
テンプレートファイルについても、かなりの時間を費やして、開発が始まる前に開発標準と命名規則を定義しました。一貫性はテスト・品質保証をやりやすくし、将来手直しが必要になったときに助けになります。
同様に、スクリプト全体の構成とスクリプトの書き方の一貫性についても意識する必要があります。フォルダを作ることで、スクリプトが整理されて見つけやすくなります。コアファイル内の各スクリプトには、スクリプトの詳細を説明するヘッダセクションがあります。ここには、スクリプトの目的・コンテキスト・スクリプトに渡される引数・終了時に返す値・未来のユーザに役立つ可能性のある注意事項が含まれます。これにより、スクリプトが整頓され読みやすくなります。また、スクリプト情報を編集したい人にとっても、スクリプトとその目的を理解するのに役立ちます。
スクリプトの全体にコメントを入れることは、ステップの背後にあるロジックを他の人が理解するのにも役立ちます。大規模なソリューションを開発したり、複数人で共同開発するときには、スクリプト作成時の思考プロセスを忘れがちです。コメントを挿入することで「ここで何をしていたのか、またわからなくなった!」ということがなくなります。その結果、プロフェッショナルのように見え・動作するだけでなく、中身もきれいに整理されたソリューションができます。
グローバル変数
また、設計の全般でレイアウトを操作するために、FileMakerの標準機能であるグローバル変数を使用しました。前述したように、ナビゲーションだけでなく、さまざまなレコードのデータ入力や編集用に、ファイル全体でカードウィンドウを使用しました。
たとえば、Job Trackingテンプレートでは、カードウィンドウを使用して新規および既存の時間の入力を行います。ヘッダー名など、わずかな違いがあるだけでほぼ同一のレイアウトを2つ作成する代わりに、呼び出すスクリプトで設定したグローバル変数を使用し、レイアウトでその操作用の適切なヘッダテキストを表示するマージ変数として使用しました。2つの操作のヘッダは、”Edit Time Entry”あるいは”New Time Entry”と表示されますが、レイアウトモードでは“<<$$globalField>> Time Entry”と設定しています。ユーザがスクリプトを起動して新しい時間エントリを追加すると、グローバル変数<<$$globalField>> に”New”が設定されます。ユーザには、カードウィンドウに”New Time Entry”というヘッダが付いたレイアウトが表示されます。これにより、複数の操作に対して単一のレイアウトを使用できます。
同じ考え方が複数のレイアウトの操作ボタンで使われています。新規レコード作成のためのボタンは、レコード編集または削除のためのボタンとは動作が異なります。このJob Trackingの例に従って、次は新規のタイムエントリを作成するのではなく、既存のタイムエントリを編集する場合です。これらの複数種の操作には、それぞれ別のボタンが必要です。グローバル変数・「次の場合にオブジェクトを隠す」の使用・ボタンを重ねて配置することで、複数種の操作に同じレイアウトを流用できます。これにより、設計プロセスが単純になり、レイアウト数を最小限に抑えられます。
マスタ/詳細レイアウト
私が共有したい最後のFileMakerの標準機能は、ユーザインターフェイスとユーザ体験の両方を大きく強化してくれる、マスタ/詳細レイアウトです。これはFileMaker 17の新機能で、現在のテーブルの対象レコードと対応するポータルを作成できます。自己結合のリレーションやスクリプトを追加する必要がなくなるため、設定のための時間が節約できます。
その結果、ユーザは同一レイアウト内で、リスト中のレコードをクリックしてその詳細を見ることができます。これはスタッフやクライアントの詳細などを表示するのに最適です。すべてのコアファイルで、標準でマスタ/詳細レイアウトを使用することにしました。これにより、視覚的にも機能的にもワンランクアップできます。
すべてのFileMakerソリューションで戦略的なユーザ体験を与える
最初に時間をかけて一貫した設計と構成を行うと、後で効果が出ます。それが開発時間を減らし、プロレベルの品質を保証します。
テンプレートの使い方の詳細については、 Sara Seversonの投稿もチェックしてください。
私たちのチームは開発過程の全体でこれらのベストプラクティスに従っています。FileMakerソリューションを一つ上のレベルに引き上げるために私たちの知見をご希望の場合は、ご連絡ください。