ipadおよびiphone向けカスタムビジネスソリューション設...

iPad および iPhone 向け

カスタムビジネスソリューション設計のベストプラクティス

FileMaker How To Guide

FileMaker How To Guide ‒iPad および iPhone 向けカスタムビジネスソリューション設計のベストプラクティス

2

目次

このガイドの対象読者 .............................................................................................................................. 4 このガイドの内容 ....................................................................................................................................... 4 ステップ 1 ‒ ソリューションを計画する ............................................................................................. 5 ソリューション決定用の表 ........................................................................................................... 7 ステップ 2 ‒ ソリューションを設計する ............................................................................................. 8 ステップ 3 ‒ソリューションを開発する .............................................................................................. 9

初期セットアップ ......................................................................................................................... 11 FileMaker ソリューションの境界の定義 ............................................................................... 14 画面ステンシル ............................................................................................................................. 14 グリッド .......................................................................................................................................... 16 定規 .................................................................................................................................................. 16 ガイド .............................................................................................................................................. 17 ダイナミックガイド ..................................................................................................................... 17 レイアウトの作成 ......................................................................................................................... 18

1. iOS スタイルのツールバーを追加します ................................................................ 18 a. ヘッダパートのサイズを変更します ................................................................. 19 b. ツールバーにタイトルを追加します ................................................................. 19 c. ツールバーにボタンを追加します ..................................................................... 20

2. 再注文が必要な品目または在庫品目をリストに追加します .............................. 21 3. ポータルに表示される品目を変更するボタンを追加します .............................. 33 4. 品目詳細に進むボタンを追加します ........................................................................ 34 5. 在庫品の総価格を追加します ..................................................................................... 35 6. 各カテゴリーの品目の数量を示すグラフを追加します ....................................... 36 7. ユーザーの現在位置を示す地図を追加します ....................................................... 39 8. 最終的なレイアウト ..................................................................................................... 42 9. 残りのスペースをどうするか? .................................................................................. 42 10. 新しいレイアウトに自動的にナビゲートします ................................................... 43

自分だけのソリューション - 最終的な検討 ........................................................................... 40 ソリューションのテストと展開 ................................................................................................ 44

付録 ‒ FileMaker デザインツールについて知る .............................................................................. 45

テーマ .............................................................................................................................................. 45 テキストの処理 ............................................................................................................................. 46 塗りつぶし ‒ 単色、グラデーション、イメージ .................................................................. 47


3

枠と角の書式 .................................................................................................................................. 49 オブジェクトの状態 ..................................................................................................................... 51 アイコンとアートワーク ............................................................................................................. 54 アクセシビリティ ......................................................................................................................... 55

リソース ..................................................................................................................................................... 51


4

FileMaker How To Guide

FileMaker Pro でのカスタムソリューション開発で iOSテクノロジーを利用するベストプラクティスこのガイドでは、iOS 向けカスタムビジネスソリューションを設計する場合のベストプラクティスについて、概要を説明します。これらのソリューションは FileMaker プラットフォームで作成します ‒ FileMaker プラットフォームではフォームと機能が一体となり、ユーザーが満足する本当に便利なソリューションの作成に役立ちます。FileMaker プラットフォームは、FileMaker ソリューションを作成するための FileMaker Pro、iOS デバイス上でソリューションを実行するための無料の FileMaker Go クライアント、ソリューションを配信して数多くのユーザー間で情報を共有するための FileMaker Server で構成されています。このガイドの対象読者

このガイドは、次の 2つのタイプのソリューション作成者を対象として書かれています。

1. FileMaker の初心者 ‒ FileMaker Pro と FileMaker Go を初めて使用して、カスタムビジネスソリューションを作成したいユーザー。

2. 既存の FileMaker Pro ユーザー ‒ すでに設計済みのデスクトップ版データベースソリューションがあり、iPad および iPhone 上で実行するバージョンを作成する準備ができているユーザー。

このガイドの内容

このガイドでは、ユーザーが単にタスクを実行するだけでなく快適に使用できるようなカスタムiOS ビジネスソリューションを、計画し、設計し、開発する方法を説明していきます。

• ステップ1 ‒ ソリューションを計画する ‒ ユーザーは誰か、ユーザーが実行する必要のあ

るタスクは何か、ユーザーはどこで、どのようなデバイス上でソリューションを使用するかをすべて把握することが、ユーザーにとって必要な特性と機能を提供する上での重要な要素です。

• ステップ2 ‒ ソリューションを設計する ‒ 小型の画面に何を表示するかを入念に選択し、

ワークフローを簡略化する最適な表示方法を決定することが、ユーザーが満足する経験を生み出すための次のステップになります。

• ステップ3 - ソリューションを開発する ‒ このセクションでは開発手順をステップごとに説明し、ユーザーが毎日ソリューションを利用し続けるようにフォームと機能を一体化する方


5

法を示します。以上を読んでこのガイドが役立ちそうであれば、さっそく始めることにしましょう!

リソースとガイダンスこのガイドはあなたやあなたの開発チームにとっての出発点にすぎません。この先さらに豊富な学習リソース、技術資料、より多くのベストプラクティス、ヒント、コツ、テクニックを、FileMaker TechNet プログラムの一部として利用できます。デベロッパフォーラムを通して他の方々と情報交換をしたり、ビデオを見て FileMaker プラットフォームのより先進的な潜在能力を発見することも学ぶこともできます。また、FileMaker のデザインツールとオプションについてまだよく知らなければ、このガイドの付録を参照して、主要なツールおよびオプションを説明している基本的チュートリアルを入手してください。

ステップ 1 ‒ ソリューションを計画する

適切な特性と機能を提供するため、利用者を理解するソリューションの利用者と利用者のニーズを前もって理解することに時間を割くことは、ユーザーが快適に利用でき、本当に使い勝手が良く業務に役立つソリューションを設計するための第一歩です。ソリューションの特性と機能を計画するにあたり、以下の質問を自分およびチーム全員に問いかけてください。

• 誰が - 誰が使用するのでしょうか? o ソリューションを使用することになる個人のグループ、チーム、役職、名前のすべ

てまたは一部を特定します。

• 何を ‒ 主要な目的は何でしょうか? o ソリューションが支援するユーザーが業務遂行する主要なタスクは何でしょうか？

§ 組織内のチームやグループによって、ソリューションに対する要件が異なる場合があるため、どのグループにはどのタスクが最も重要かを一覧にして確認します。

o ユーザーはどのようなタスクを素早く実行する必要があるか? o 特定の順序で実行する必要のあるタスクはあるか?

• どこで ‒ ソリューションはどこで使用されるか?


6

o たとえば、オフィスで、現場で、明るい日光の下で、夜間に、車の中で、水の近くで、など。

o ユーザーが使用中にどのような姿勢をとるか? 立っている、座っている、片手、両手? ユーザーが使用中にどれだけ正確に操作できるか?

これらの側面を知っておくと、コントラストやタップゾーンなどを決定する際に役立ちます。

• どのタスクを ‒ どのタスクにどのデバイスが使用されるか?

o iPhone と iPad とでは、どのタスクを優先させる必要があるか? o どの方向の画面が最も多く利用されるか。横長? 縦長? 両方? o iPhone と iPad とでは、どのジェスチャー、音声ディクテーション、イメージキャ

プチャ機能が使用されるか?

• いつ‒ ソリューションをいつ展開する必要があるか ? o これはまず作業を始め、手始めに「バイトサイズ」ソリューションを作成するのに

役立ちます。 o ソリューション開発は反復型開発プロセスで行え、ソリューションの拡張と品質向

上を続けながら、常に新しいバージョンをユーザーに展開することができます。これがプロジェクトに適していれば、ユーザーの利用中断を最小限にとどめながら、いつ、どのようにして稼働中のソリューションの更新を行えばよいかを計画します。

• 他に使用するアプリは ‒ どのような補足アプリをユーザーが使用するか、または使

用したいか? o 作成中のアプリと並行してどのようなアプリが使用されるか? o ユーザーはどのようなアプリを使用したいか?

これによって、ユーザーが好きなアプリを作成するための発想がより豊かになります。


7

ソリューション決定用の表

以上の質問に答えた後で、ソリューションの定義に役立つ決定事項を導き出すことができます。単純な表でそれらを追跡すれば、ソリューションの定義と決定事項を俯瞰的に見ることができます。以下は、エグゼクティブに向けた在庫状況ソリューションの例です。情報

決定事項

誰が

上級エグゼクティブ

シンプルさを維持する

何を • 品目数 • 再注文する品目 • 在庫価値 • 現在の個数

要約情報を含んだレイアウトを追加するユーザーがファイルを開いたら、OnFirstWindowOpen スクリプトトリガを使用して、OSを確定し、適切なレイアウトにナビゲートする

どこでオフィス環境部屋から部屋へ移動

落ち着きのあるテーマを採用する

iPhone 上でどのタスクを

在庫状況がひと目でわかる一覧

最も重要な情報を強調する

iPad 上でどのタスクを

簡単にドリルダウンできる機能をもつ主要データのダッシュボード

iPad で使いやすく、簡単にナビゲートできるレイアウトを作成する

いつ展開するか

10 日間特性を簡素化するログインスクリプトに、新バージョンが利用可能かどうかをユーザーに通知するステップを入れる

他に使用するアプリは

カレンダー地図

ユーザーがアプリを切り替えても気にならないよう、ユーザー体験を類似したものにするユーザー体験に一貫性をもたせるために iOS の慣例に従う


8

ステップ 2 ‒ ソリューションを設計する

ユーザーが喜んでタスクを実行できるようにするモバイルソリューションの設計は、ただデスクトップのソリューションを iPhone や iPad に合うよう、小型化するという作業ではありません。もちろん画面のサイズは重要ですが、人々がソリューションを心から楽しんで使うのか、それともすぐ飽きてしまうのかは、画面で見せる要素、それらをどのように見せるかで決まるのです。ユーザー体験は、どのデバイスでも容易でなければなりません。以下に、iOS 用ソリューションを設計する場合に従うべきいくつかのガイドラインを示します。

• それぞれのデバイスタイプに適したレイアウトを作る ‒ それぞれのデバイスに向けて

別々のレイアウトを作ることによって、ソリューションが各タイプのデバイスで最高の使い心地をもつようになります。ほとんどの場合、iPhone と iPad に同じレイアウトを使うことも、デスクトップと iPad に同じレイアウトを使うことも、お勧めできません。

• 第一の用途 ‒ 各レイアウトの第一の用途は、ユーザーにとって一目瞭然でなければなり

ません。ホームレイアウトで迅速なタスクをいくつかサポートするとともに、頻繁に必要となるタスクは、すぐ使えるようにします。

• シンプルに ‒ 複雑なレイアウトを 1つだけ作るのではなく、直観的に操作できるシンプ

ルで明確なレイアウトを複数作り、ユーザーが必要に応じて柔軟にナビゲートできるようにします。

• タッチ ‒ ボタンはどんなに小さくても 44 x 44 ポイント以上とし、指先で簡単にタップ

できるようにします。

• グループ化 ‒ 1 つのフォーム上にグループ化したデータを表示する場合は、関連のあるフィールドを隣り合わせに配置し、一番外側のフィールドの角は 10 ポイントの半径で丸くします。

• タイプ入力を最小限にとどめる ‒ タッチインターフェースでは、タイプ入力が最適な入力方法とは限りません。可能であれば、自動入力フィールド値、値一覧、日付ピッカーなどの代わりの方法を考え、キーボードを表示せずに音声入力を使うこともできます。iOS デバイスのユニークな機能を活かして、インテリジェントなデフォルトのフィールド値、値一覧、日付ピッカー、音声認識などを用意します。


9

• 色 ‒ ソリューションのユーザーインターフェースは、それが示すデータと競い合うものであってはなりません。基調色と補色を選び、その色のパレットで組み立てます。たくさんの異なる色を使うことは避け、鮮やかな色（飽和色）は重要なデータやエラーなど、特別に注意を引く必要がある要素にとっておきます。最初は FileMaker に組み込みのテーマの1つを利用するのが早道でしょう。FileMaker のテーマは、よく合う色を組み合わせたカラーパレットを使っています。

• グラデーション ‒ グラデーションを利用すると、レイアウトに立体感が生まれます。レ

イアウトの中のツールバーやボタンなどの対話型要素を強調する場合や、背景に向かう大きい放射状のグラデーションで大気のような雰囲気を生み出すのに向いています。あまり重要でない要素や、他の要素のうしろに隠れてしまう要素には、グラデーションの使用を避けるようにします。

• 複数のウインドウ ‒ ソリューションでは、複数のウインドウを開く方法はとりません。その代わりに、ユーザーが同じウインドウの中のレイアウトに簡単にナビゲートして、思った通りのタスクを実行できるようにします。

[Apple] ヒューマンインターフェースガイドラインを読んでください iOS ヒューマンインターフェースガイドラインは、iOS ソリューション向けに最高のユーザーインターフェースとユーザー体験を設計するのに役立つ原則を説明しています。これを読むと、ソリューションをユーザーにとってパワフルで魅力的なツールにするためのインスピレーションとガイダンスを得られます。このガイドラインは Apple のサイトで読むことができます（場所）。

ステップ 3 ‒ソリューションを開発する

このセクションでは、優れた設計をもつ FileMaker ソリューションのユーザーインターフェースを FileMaker Pro を使用して開発する、ステップごとの手順を説明していきます。ユーザーがソリューションを毎日繰り返し利用するように、フォームと機能を一体化する方法を学びます。目標は、iPad に最適化され、ダッシュボードのようなインターフェースをもつレイアウトを作成することで、図 1と 2に縦長と横長の画面を示したように、重要な要約情報を強調しながら、さらに多くの情報を簡単に見られるものにします。


10

図 1: 縦長の画面でのダッシュボードレイアウト


11

図 2: 横長の画面でのダッシュボードレイアウト以下の手順では「目録」という FileMaker Starter Solution を使用します。これは FileMaker Pro に用意された数多くの Starter Solution の 1 つです。あるいは、すでにテーブル、フィールド、リレーションシップの定義を終え、ソリューションのユーザーインターフェースを作成する準備ができているのであれば、独自のファイルでレイアウトを作成することもできます。その場合はステップ 1をスキップし、ステップ 2から始めてください。初期セットアップ

1) 目録 Starter Solution を作成します a. FileMaker Pro または FileMaker Pro Advanced で、[ファイル] > [Starter

Solution から新規作成] を選択します。. b. Inventory のテンプレートを選択します。


12

c. Starter Solution を保管する場所を選択して、[保存]をクリックします。

図 3: Starter Solution 選択ダイアログ

2) ダッシュボード用の新しいテーブルとレイアウトを作成します a. キーボードショートカットの Cmd+Shift+D または Ctrl+Shift+D を使用するか、

[ファイル] > [管理] > [データベース…] を選択して、[データベースの管理]を開きます。

b. Dashboard という名前で新規テーブルを作成します。 c. [OK]をクリックして、[データベースの管理]ダイアログを閉じます。 d. ステータスツールバーの[レイアウトの編集]ボタンをクリックします。 e. ステータスツールバーの[新規レイアウト/レポート]ボタンをクリックします。 f. [レコードを表示:] ドロップダウンで “Dashboard” を選択します。 g. レイアウトに “iPad Inventory Dashboard” という名前を付けます。 h. レイアウトタイプとして[標準レイアウト]を選択します。


13

図 4: [新規レイアウト/レポート]ダイアログの最初の画面

i. [次へ]をクリックします。 j. フィールドを指定せずに[次へ]をクリックします。 k. テーマとして[川タッチ]を選択します。 l. [完了]をクリックします。

図 5: [新規レイアウト/レポート]ダイアログのレイアウトテーマ選択画面


14

これで、iPad のダッシュボードに使用するレイアウトを作成できました。 FileMaker ソリューションの境界の定義

境界は、レイアウトが画面上で占める幅と高さです。ソリューションを複数のデバイスで使用する場合は、各デバイス用の別々のレイアウトで、それぞれのデバイスの境界を定義する必要があります。

デバイスの方向と自動サイズ変更ソリューションは、縦長と横長の両方向で使用できるものとし、中心となる機能を両方向で使用できるようにする必要があります。たとえば、横長方向でレイアウトの右端に見える要素が、画面を縦長方向に回転した場合に見えなくなったり、半分隠れてしまったりしては困ります。主要機能にフォーカスを保つために重要なのは自動サイズ変更で、画面の方向に応じてオブジェクトのサイズを変更し、適切な位置に移動させることができます。このセクションでレイアウトに要素を追加する際には、必要に応じて自動サイズ変更を適用していきます。

画面ステンシル

FileMaker Pro には、ソリューションの境界を簡単に定義できるよう、画面ステンシルが含まれています。各ステンシルはレイアウトで使用可能な区画を表し、デバイスの画面から、ツールバーなどの iOS および Go アプリケーション要素に使われるスペースを差し引いたものです。画面ステンシルを自由に組み合わせることも、ステンシルをカスタマイズすることもできます。この演習では、縦横両方向で使用できるスペースを見るために、iPad（縦）および iPad（横）の両方を使用します。 • 画面ステンシルを使用してレイアウトの境界を設定するには:

a. [表示] > [レイアウトモード] を選択します。 b. レイアウトツールバーの画面ステンシルの矢印をクリックします。 c. ドロップダウンリストから iPad: 768 x 929 （縦）を選択して、必要なステンシルを表示

します。 d. 画面ステンシルのドロップダウンをもう一度クリックして、iPad: 1024 x 673 （横）を

選択します。


15

図 6: 画面ステンシルのドロップダウンリスト次に、レイアウトモードのままボディーパートのサイズを変更し、フッターの最下部を 717 ポイントの位置に設定します。これは iPad（縦）画面ステンシルの最下部のすぐ下にあたります（ファイルを開くとスクリプトがツールバーを消去するので、レイアウトはステンシルより 44 ポイント長くすることができます）。[[位置]タブで現在の測定単位が[センチメートル]または[インチ]になっている場合は、任意の測定ラベルを単位が[ポイント]になるまでクリックし、測定単位を[ポイント]に変更しておいてください。] ボディーパートのサイズは、そのパートラベルをクリックしてからインスペクタの[位置]タブで[高さ]の値を 641 ポイントに変更するか、ボディーパートとフッターの間にある線をクリックしてドラッグすることによって、変更することができます。インスペクタを使用する高さ（次に幅）の変更が、オブジェクトおよびレイアウトパートのサイズを最も正確に設定できる方法です。次にレイアウトの幅を、iPad（横）画面ステンシルの右辺に正確に合うよう変更します。それには、何も選択せずにインスペクタの[位置]タブで[幅]の値を 768 ポイントに変更するか、レイアウトの右辺をクリックしてドラッグします。レイアウトの辺が画面ステンシル（または、ツールバーが表示されていない画面領域の 1ポイント内側）と正確に一致していることが大切です。これが正確に一致していないと、ユーザーが思い通りにスクロールできなかったり、デバイスを回転させたときにレイアウトが正しくサイズ変更されなかったりすることがあります。

図 7: レイアウトの右辺が、iPad: 767 x 929 （縦）画面ステンシルの右辺と一致


16

グリッド

グリッドを使用すると、小さいデバイス画面上ですべてを整然と最適に配置することができます。グリッドでは、レイアウト上に印刷されない何本もの縦横に交差したラインが表示され、それらのグリッドラインを利用してオブジェクトを作成、サイズ変更、配置、整列することができます。グリッドを表示するには、[表示] > [グリッド] > [グリッドを表示]を選択します。レイアウト上でオブジェクトをどのように整列させて配置するかを決めなければならない場合に、画面上のグリッドを利用して位置を決定します。オブジェクトをグリッドラインに沿わせて配置する「スナップ」機能を利用して、レイアウトを構成することができます。スナップ機能がオンの場合、オブジェクトを移動またはサイズ変更すると一番近い副グリッドラインに沿って配置されます。新規オブジェクトを追加すると一番近い主要グリッドラインに沿って配置されます。「スナップ」機能をオン/オフするには、[表示] > [グリッド] > [グリッドに沿わせる] を選択します。グリッドライン間の距離も、インスペクタの[位置]タブの[グリッド]領域で、[グリッド間隔（大）]および[グリッドステップ（小）]に値を入力することによって変更できます。このとき便利な「秘訣」は、[グリッド間隔（大）]をデバイスの大きさ（この場合は768ポイント）に設定し、[グリッドステップ（小）]を 32 ポイントや 64 ポイントなどの偶数の約数に設定することです。こうしておけば、オブジェクトを縦横のグリッドラインに沿わせて配置するだけで、また下記の「ガイド」の項にあるように、2、3、4 列のレイアウトを素早く作成することができます。定規

定規の機能では、レイアウトの辺に縦横の定規が表示され、レイアウト上でポインタを移動するとポインタの位置を追ってガイド線が移動します。フィールドやボタンなどのオブジェクトを移動すると、定規はそのオブジェクトの領域も表示するので、オブジェクトが占める部分の大きさを確認するのに役立ちます。定規を表示するには、[表示] > [定規] を選択します。ガイド

レイアウトに適したグリッド間隔を設定できたら、レイアウト上に縦横の位置を示すガイドを作成でき、またガイドの共有をオンにして同じガイドを他のレイアウトでも使用することができます。


17

レイアウトにガイドを追加するには、レイアウトの左端または上端にある定規をクリックして、必要な位置までドラッグします。ガイドの位置を調整するには、既存のガイドをクリックしてドラッグします。ガイドの位置は、対応する定規およびインスペクタの[位置]タブ内に表示されます。ガイドをすべてのレイアウトで共有することもでき、複数のレイアウトで要素を同じ配列にしたい場合に役立ちます。ガイドはロックすることも取り除くこともできます。ガイドを右クリックするか Ctrl を押しながらクリックすると、コンテキストメニューが表示され、ガイドを共有、ロック、および取り除くオプションがあります。 [ガイドに沿わせる]機能もあります。[グリッドに沿わせる]と[ガイドに沿わせる]は類似した機能を実行するので、次のような使い方を考慮してください。

• [ガイドに沿わせる]と[グリッドに沿わせる]のどちらか一方だけを有効にします。両方同時に有効にしてしまうと、要素がガイドとグリッドのどちらに沿って配置されているのか見分けるのが難しくなることがあるので、両方同時には有効にしないでください。

• グリッドを利用してガイドを設定した後、グリッドを非表示にし、[ガイドに沿わせる]だけを使ってレイアウトを構成します。

• ガイドを利用して複数のレイアウトで共通の位置を示し、[グリッドに沿わせる]だけを使ってレイアウトを構成します。

ダイナミックガイド

ダイナミックガイドは、移動、配置、またはサイズ変更している最中のオブジェクトがレイアウト上の別のオブジェクトの間隔、位置、またはサイズに一致したときだけ表示される、消えたり現れたりするラインです。ダイナミックガイドは、レイアウト上の他の要素と調和するようにオブジェクトを配置およびサイズ変更するのに役立ちます。ダイナミックガイドを有効または無効にするには [表示] > [ダイナミックガイド] を選択します。ダイナミックガイドがどのように機能するかを見るには、ダイナミックガイドを有効にしてから、2 つ以上のフィールドまたはオブジェクトをレイアウトに追加し、一方のオブジェクトをドラッグしてもう一方の周辺で移動させます。ドラッグしているオブジェクトがもう一方のオブジェクトの位置に揃うと、ダイナミックガイドが表示されて整列したことを示します。次に、選択ボックスをドラッグしてオブジェクトのサイズを変更してみます。そのオブジェクトのサイズがもう一方のオブジェクトのサイズと一致したとき、またはそのオブジェクトの辺の 1つがもう一方のオブジェクトの位置に揃ったとき、ダイナミックガイドが表示されます。


18

レイアウトの作成

このセクションでは、iPad 用のダッシュボードを作成する手順を説明します。画面の方向の項ですでに述べた通り、縦横どちらのモードの画面でもレイアウトがユーザーの期待通りに機能するよう、各要素に自動サイズ変更を適用することが重要です。自動サイズ変更の適用方法は、この項で説明します。 1. iOS スタイルのツールバーを追加します

iOS では通常、ツールバーはソリューションの上部にあって、横方向に伸びています。iPadのメールやカレンダーがその例です。ソリューションに iOS スタイルのツールバーを追加するには、新規レイアウトの作成時に自動的に追加されたヘッダパートを変更します。このセクションでは、このパートを iPad でよく見る標準的なツールバーのルック&フィールに合わせて変更する方法を説明していきます。

インスペクタレイアウトモードで複数のインスペクタを開くと、レイアウト上での作業が容易になります。たとえば、1つのインスペクタでは[データ]タブを、もう 1つのインスペクタでは[外観]タブを表示して、両方のタブから設定を行うことができます。最初のインスペクタを開くには、キーボードショートカットの Cmd+I または Ctrl+I を使用するか、[表示] > [インスペクタ] を選択します。追加のインスペクタを開くには、[表示] > [新規インスペクタ] を選択します。あるいは、1つだけのインスペクタで作業し、キーボードショートカット（Mac では Cmd+1、Cmd+2 、または Cmd+3、Windows では Ctrl+1、Ctrl+2、または Ctrl+3）を用いて必要に応じて異なるタブにアクセスすることも、複数のインスペクタを開いて同じキーボードショートカットでそれぞれ切り替えて使用することもできます。

a. ヘッダパートのサイズを変更します

ヘッダパートをサイズ変更するには、次の 2つの方法があります。 § ヘッダパートの下辺をクリックしてドラッグし、インスペクタの[位置]タブの[サイ

ズ]領域で高さを確認しながら、サイズを 44 ポイントに変更します。 § または、レイアウトの左側でヘッダパートのラベルをクリックし、インスペクタの

[位置]タブの[サイズ]領域で高さを変更します。

b. ツールバーにタイトルを追加しますツールバーにタイトルを追加するにも、2つの方法があります。


19

§ ステータスツールバーからテキストツールを選択し、ヘッダをクリックしてからタイトルを入力します。同じようにテキストツールを選択し、ヘッダ内に四角形をドラッグして、入力を始めます。テキストが四角形より長い場合は、複数行に折り返されて、幅の中に収まります。

§ または、選択ツールを選択して、ヘッダをクリックし、タイトルの入力を始めるます。

ボディなどの異なるパートに入力する場合には、デフォルトのテキスト形式が、ヘッダに入力する場合と異なることがわかります。このように、どこに入力しているかを「認識」し、それによってデフォルトのテキスト形式が自動的に変わることが、FileMaker のテーマの特徴です。

どちらの方法でも、テキストボックスとレイアウトの両方で、テキストを中央に揃えます。 1. テキストボックスの外をクリックして（またはキーボードで Enter キーを押して）

選択ツールに戻ります。次に、以下のいずれかの操作をします。 § キーボードショートカットの Cmd+\ または Ctrl+\ を使用します。 § [書式] > [テキスト配置] > [中央] を選択します。. § 書式設定ツールバーで[中央揃え]ボタンをクリックします。

2. タイトルを、ヘッダ内部で、レイアウトの中央までドラッグします。レイアウトの幅からタイトルの幅を引いて 2 で割り、タイトルの左辺をその値に合わせることによって、位置を計算することができます。あるいは、レイアウトと同じ幅に設定してレイアウトの左辺に置いた線や長方形などのオブジェクトに、タイトルの位置を合わせします。そのオブジェクトに対してタイトルを中央揃えにするには、タイトルの中央がオブジェクトの中央に揃ったことを示すダイナミックガイドが表示されるまでタイトルをドラッグするか、オブジェクトとタイトルの両方を選択し、インスペクタの[位置]タブで[縦方向に中心を整列します]ボタンをクリックします。タイトルをオブジェクトに位置揃えしようとドラッグし、レイアウト上に他のオブジェクトがあると、タイトルをドラッグしている間に他のオブジェクトの位置でもダイナミックガイドが表示されることがあります。その位置が、他のオブジェクトに揃った位置ではなく、オブジェクトの中央位置であることを確認してください。

c. ツールバーにボタンを追加します

ほとんどの iOS アプリでは、ツールバーには 2、3個しかボタンがありません。新規レコードを追加するボタンや、異なる領域や上位のビューにナビゲートするボタンなどです。このダッシュボードでは、Eメールで在庫リストを送信するボタンを追加します。目録 Starter Solution の既存の目録レイアウト（デスクトップレイアウトグループにあるもの）で、このスクリプトをもつボタンをコピーするか、各自のレイアウトで以下の手順に従ってください。


20

1. ステータスツールバーのボタンツールを使用して、ヘッダの右上隅にボタンを作成

します。 2. そのボタンが[Send Inventory by E-Mail]スクリプトを実行するように設定し、

[スクリプト実行:]ドロップダウンから[終了]を選択します。OKをクリックして[ボタン設定]ダイアログを閉じます。

3. ボタン名に “Send Inventory by E-Mail” と入力します。 4. フォントサイズを 14 ポイントに縮小し、ヘッダ内の位置で適切なガイドやレイア

ウト上のオブジェクトと気持ちよく揃うようボタンを配置します。 5. ボタンがツールバーのスタイルに合うように、ボタンの塗りつぶし、グラデーショ

ン、線、テキスト色を変更します。 a. ボタンを選択し、インスペクタの[外観]タブで、[グラフィック]領域の[塗りつ

ぶし]から、左のグラデーションストップを選択し、色をサンプリングするか、ヘッダの一番上の色に設定します。（色をサンプリングするには、グラデーションストップの中をクリックし、カラーパレットからサンプルツールを選択します ‒ サンプルツールは虫眼鏡のような形をしています。次に領域周辺でマウスを移動し、サンプルツールの中の領域が拡大されるのを確かめます。使いたい色が見つかったら、そこをクリックします。これによって作業中の領域―ここではグラデーションストップの 1つ―に選択した色が入ります。）

b. 右のグラデーションストップを選択し、色をサンプリングするか、ヘッダの一番下の色に設定します。

c. 線の色をヘッダの一番下の色に変更します。 d. フォントをボディ塗りつぶし色に変更し、ボタンの新しい色の中で見えるよう

にします。

これで、ヘッダは標準的な iOS ツールバーに似た外観と機能をもつようになりました。

図 8: タイトルとボタンが入ったヘッダ

2. 再注文が必要な品目または在庫品目をリストに追加しますダッシュボードが意味をもち、役立つためには、ユーザーがすぐ知る必要のある情報と、ユーザーが各自のタスクを素早く簡単に実行できるようなツールを揃えなければなりません。この


21

ダッシュボードでは、再注文が必要な品目や在庫品目のリストと、在庫の概要を示すグラフを見ることができれば便利です。テーブルとリレーションシップの作成再注文が必要な品目または在庫品目のリストを表示するには、まず Dashboard テーブルにフィールドを追加するとともに、Inventory テーブルにリレーションシップを追加する必要があります。 1. キーボードショートカットの Cmd+Shift+D または Ctrl+Shift+D を使用するか、[ファ

イル] > [管理] > [データベース…] を選択して、[データベースの管理] を開きます。 2. [フィールド]タブで、Dashboard テーブルに “DashboardAvailability" という名前のグロ

ーバル格納テキストフィールドを作成します。 3. [リレーションシップ]タブで、Inventory テーブルオカレンス（TO）と新しい

Dashboard TO の間にリレーションシップを作成します。 a. Dashboard TO 内の DashboardAvailability をクリックしてから Inventory TO 内の

Availability までドラッグして線を引きます（Availability を表示するには、Inventory TO 内のフィールドのリストが見えるまでスクロールダウンが必要になることがあります）。

b. または、[データベースの管理] ウインドウの左下にある[リレーションシップ作成]ツールを選択し、各欄で TO を選択してから、Inventory の欄では Availability のフィールド、Dashboard の欄では DashboardAvailability のフィールドを選択します。

4. リレーションシップをデカルト積に変更します。これはテーブル欄の間にあるドロップダウンの一番下の “x” です。（上記の 3a を使用してリレーションシップを作成した場合は、まずリレーションシップの線をダブルクリックして[リレーションシップ編集]ダイアログを開いてから、デカルト積の “x” を選択します。）


22

図 9: デカルト積の選択 5. [OK]をクリックして、[データベースの管理]ダイアログを閉じます。

図 10: リレーションシップグラフでリレーションシップが設定されたテーブルオカレンス（TO）


23

ポータルの作成次に、新しいリレーションシップに基づいてポータルを追加します。 1. レイアウトモードで、ガイドを表示していなければ表示するよう設定し、15 ポイント、

500 ポイント、515 ポイント、751 ポイントに配置します。これはレイアウトを 2/3 および 1/3 で効果的に分割し、左右に 15 ポイントのボーダー、各「欄」の間に 15 ポイントの間隔を入れます。

2. ステータスツールバーのポータルツールを選択し、ドラッグしてレイアウト上にポータルを作成します。

3. [ポータル設定]ダイアログが表示されたら、[関連レコードを表示:]ドロップダウンから Inventory を選択します。

図 11: レイアウトへのポータルの追加

4. [垂直スクロールバーを表示]のボックスにチェックを入れます。 5. [ポータルレコードのフィルタ]の横にある[指定]ボタンをクリックします。 6. [計算式の指定]領域に、次の計算式を入力します。

Dashboard::DashboardAvailability = Inventory::Availability （この手順で後から Dashboard::DashboardAvailability の値を設定するボタンを追加します。）


24

図 12: フィルタ計算式の指定

7. [OK]をクリックします。 8. [行数]に 7 を入力して[OK]をクリックします。

図 13: [ポータル設定]ダイアログ


25

9. [ポータルにフィールドを追加]ダイアログで、以下のフィールドを[含まれているフィール

ド]の欄に追加します。 • Image | Container • Item • Units on Hand • Unit Cost

図 14: ポータルに表示するフィールドの選択

10. [OK]をクリックします。

ポータルのサイズ変更これでレイアウトに新しいポータルができ、ほとんどの場合は配置とサイズの変更が必要です。まず、インスペクタの[位置]タブの値を見ながら、レイアウトの上から 144 ポイント、左から15 ポイントの位置までポータルを移動して、左のガイドと位置合わせします。あるいは、ポータルをドラッグするのではなく、インスペクタでただ上辺と左辺の値を変更することもできます。ここでポータルのサイズを変更して、右辺が 500 ポイントのガイドに合い（ポータルの幅は485 ポイント）、下辺が 686 ポイントに合うようにします（ポータルの高さは 542 ポイント）。ここでも、インスペクタの[位置]タブに適切な値を入力することも、ポータルのハンドルをクリックしてドラッグし、サイズを変更することもできます。[ガイドに沿わせる]や[グリ


26

ッドに沿わせる]が有効になっている場合、ハンドルをドラッグしてポータルを正確なサイズに変更するのは難しいことがあります。インスペクタで値を変更するのが最も正確な方法です。

図 15: インスペクタを用いるポータルの配置とサイズ変更フィールドのサイズ変更 Image | Container フィールドのサイズを幅 70 ポイント、高さ 70 ポイントに変更し、その他のフィールドのサイズをポータルに見映えよく入るサイズに変更します。（Item フィールドの値がより大きいスペースを必要とする可能性があると予想できるなら、このフィールドの高さを 70 ポイントに設定します。）また、すべてのフィールドを選択し、塗りつぶしと線を除去します（インスペクタの[外観]タブの[塗りつぶし]ドロップダウンから[なし]を選択し、[線]ドロップダウンから[なし]を選択するか、[線]ドロップダウンの下にある[すべての枠]のボックスをクリックします）。その結果、図 16 のようになります。


27

図 16: インスペクタで[塗りつぶし]と[線]の属性を[なし]に設定ポータルの自動サイズ変更デバイスを回転したときにポータルとその内容が適切に伸び縮みするよう、自動サイズ変更を正しく構成しておく必要があります。これにはポータルを選択し（ポータルのみで、フィールドは選択しない）、インスペクタの[位置]タブの[自動サイズ調整]領域にあるアンカーアイコンを有効にします（有効になったアンカーアイコンは錠前のように見え、無効なアンカーアイコンでは白い箱がグレー表示されます）。

図 17: インスペクタによるポータルの[位置]と[自動サイズ調整]の設定


28

これでポータルは、デバイスの回転時に必要に応じて伸び縮みします。フィールドの自動サイズ変更ポータル内のフィールドでは、それぞれに少し違う方法で自動サイズ変更する必要があります。Image | Container は上と左にアンカーし、Item は上と左右、Unit と Unit Cost は上と右にアンカーします。ポータルが伸び縮みすると、Image | Container はその位置を保ちますが、Item は伸び、Unit と Unit Cost は Item の幅が入るように右に移動します。ポータル内のすべてのフィールドについて、（インスペクタの[データ]タブの）[ブラウズ]モードと[検索]モードの両方でフィールド入力を選択解除します。フィールド入力が選択解除されていると、ユーザーは行をタッチしても、フィールドに値を入力したりフィールドの値を編集したりすることはできません。ポータルへの線の追加ここで、各行の間に分割線を加え、レイアウトがさらに iOS らしく見えるようにします。ステータスツールバーから線ツールを選択し、ポータルの 1行目にあるフィールドの下辺に沿って線を引きます。Shift キーを押しながら引けば、線は水平に保たれます。（Shift キーを押しながら線を縦に引けば、線は垂直に保たれます。）線を必要に応じて移動およびサイズ変更して、ポータルの行の内側全体にわたって延び、ポータルのスクロールバーにはかからないよう調整します。インスペクタの[位置]タブの[自動サイズ調整]オプションを使用して、線を上および左右にアンカーします。これによって、方向が変わっても線はポータルとともに伸び縮みします。ポータルへのタイトルの追加次に、ポータルにタイトルを追加します。ステータスツールバーからテキストツールをダブルクリックし（ダブルクリックするとツールがロックされ、他のツールを選択するまでずっと使えるようになります）Image | Container フィールドの上側をクリックします。“Image” と入力します。他の各フィールドの上側もクリックし、それぞれのタイトルを入力します。最後のタイトルの入力を完了したら、ステータスツールバーから選択ツールをクリックして、テキストツールのロックを解除します（またはキーボードで Enter を 2 回押します―Return キーではありません）。各タイトルを最終的な位置までドラッグし、ダイナミックガイドを利用して他のタイトルや該当するフィールドと位置合わせします。このとき、各タイトルはフィールドの上辺から 120 ポイント離れた位置に配置します。このテーマのフィールドはすべて、すべての辺に 5ポイントの枠がついているので、それを考慮してタイトルを位置合わせしてください。タイトルのフォントサイズを、スペースを節約するために 16 ポイントに設定することができます。すべてのタイトルを選択するには、それら全体にわたってポインタをドラッグします


29

（他の要素に触れると、それも選択に含まれるので注意してください）。書式設定ツールバーまたは [書式設定] > [サイズ] から、カスタムサイズを選択してフォントサイズを変更します。（多くのフォントサイズは、キーボードショートカット Cmd+Shift+< または Ctrl+Shift+<を使用してサイズを縮小するか、Cmd+Shift+> または Ctrl+Shift+>を使用してサイズを拡大することによっても、設定できます。）タイトルとポータルが同じオブジェクトに属している外観になるよう、ステータスツールバーから角丸四角形ツールを選択して、タイトルの周囲にボックスを描きます。ボックスのサイズを変更し、幅はポータルと同じに、高さは 34 ポイントに設定します。これをポータルの上から 112 ポイントの位置で左に揃え、ガイドの間に配置します。ボックスを背面に送り、タイトルより後ろにします。次に、[外観]タブの[スタイル]セクションにある[オブジェクトのスタイルをコピー]ボタンをクリックして、ポータルのスタイルをコピーしてから、ボックスを選択して[スタイルを貼り付け]ボタンをクリックし、このボックスに属性を適用します。塗りつぶし色をボックスに適用することによって、タイトルがさらに引き立ちます。ボディの色を基調にし、彩度がわずかに低く輝度がわずかに高い色を選んで試してみてください。そして最後に、インスペクタの[外観]タブの[角丸の半径]の設定を用い、ボックスの下側左右の角をオフにし、次にポータルを選択してその上側左右の角をオフにします。

角これらの指示では角の半径にデフォルトの 5をそのまま受け入れます。各自のレイアウトでこの数字を大きくしたり小さくしたりして、どのくらいの値が最も見映えがよいか、特にフィールドのグループではどう見えるかを試してみてください。たとえば、iPad では iPhone より大きい値のほうがきれいに見えることがあります。

タイトルとフィールドの位置揃えポータルをさらに美しく見せるために、Unit と Unit Costs のフィールドとタイトルを右揃えにし、それぞれのタイトルをフィールドの右辺から 5ポイント（このテーマのフィールドの枠の太さ）だけ差し引いた位置に配置します。この時点で、レイアウトは図 18 のように見えるはずです。


30

図 18: フィールドとタイトルの位置揃え

データ! ポータルにデータを表示するために、デスクトップレイアウトグループの[Product Details]レイアウトを使用して、Inventory テーブルにレコードを追加します。カテゴリー、品目、単価を必ず入力してください。各レコードにイメージも追加します。ほとんどのレコードで（ただし全部のレコードではなく）[Add Transaction]をクリックして、日付、ロット番号、説明、入/出庫数を指定した項目を 1つ以上追加しておきます。これによって、一部のレコードではステータスが “In Stock” になり、一部のレコードでは“Reorder Required” になります（これはフィールド Availability で、Units on Hand と Reorder フィールドに基づいて計算されます）。目録レコードを作成できたら、iPad の Inventory Dashboard に戻って、レイアウトの作成を続けます。

3. ポータルに表示される品目を変更するボタンを追加します

ポータルは DashboardAvailability フィールドの値に基づいてフィルタ処理されるため、ユーザーはその値を “Reorder Required” または “In Stock” のいずれかに設定できる必要があります。これらは Inventory テーブルの Availability フィールドに入っている可能性がある値です。ユーザーがこれを簡単にできるよう、ポータルの上部に 2つのボタンを作成します。最初のボタンでは DashboardAvailibility を “Reorder Required” に設定する[フィールド設定]ステップを実行し、ラベルを “Reorder Required” とします。同様に 2番目のボタンではDashboardAvailibility を “In Stock” に設定する[フィールド設定]ステップを実行し、ラベルを “In Stock” とします。ボタンが 1つにデザインされたオブジェクトの一部に見えるよう、それぞれをポータルのちょうど半分の幅にします（ここではボタンの幅を 242.5 ポイントにする必要があります）。最初のボタンを 15 ポイントの位置にある左ガイドに揃え、2番目のボタンの右辺を 500 ポイントの位置にあるガイドに揃えるとともに、両方のボタンをレイアウトの同じ高さ（上辺から59 ポイント）に揃えます。これによってポータル上部のスペースにボタンを配置し、2つの


31

ボタンの間に空白をあけずに並べることができます。ボタンを高さ 38 ポイントにサイズ変更します。次に、インスペクタの[外観]タブの[角丸の半径]の設定で、最初の（左の）ボタンの右上と右下を選択解除します。さらに 2番目のボタンだけを選択して、左上と左下を選択解除します。最後に、両方のボタンに自動サイズ変更を設定し、上だけのアンカーを有効にします。これにより、方向の変化に応じてボタンが左右に移動して、ポータル上部の中央位置に表示されるようになります。さらに凝った作りにするには、DashboardAvailability フィールドにボタンによって設定される値が含まれる場合、各ボタンに条件付き書式を設定します。条件付き書式によってテキストを太字に設定すると、ボタン上の低い位置にあるように見えるため、テキストの色、枠の処理、背景の塗りつぶしを変化させるようにします。

ファイルを開く時点で DashboardAvailabil ity を設定ユーザーがダッシュボードを最初に開く時点で Reorder Required または In Stock に設定された品目を見られるようにしたい場合は、DashboardAvailability フィールドを適切な値に設定するために、OnFirstWindowOpen を実行するステップをスクリプトに追加します。

4. 品目詳細に進むボタンを追加します

ユーザーがポータル内の各品目の詳細にナビゲートできるよう、関連レコードに進むボタンを追加します。 1. ステータスツールバーからボタンツールを選択し、ポータルの最初の行の上にボタンを作

成します（この時点ではサイズを気にする必要はありません）。 2. [ボタン設定]ダイアログで、[関連レコードへ移動]を選択します。 3. [指定]をクリックして、[関連レコードを表示:]ドロップダウンから Inventory を選択しま

す。 4. [レイアウトを使用してレコードを表示:]ドロップダウンからレイアウトを選択し、[レイア

ウトの指定]ダイアログでは Product Details | iPad を選択します。 5. [OK]をクリックして[レイアウトの指定 ]ダイアログを閉じます。 6. [関連レコードのみ表示]の横にあるボックスにチェックを入れます。 7. [OK]をクリックして[関連レコードへ移動]オプションダイアログを閉じます。 8. [OK]をクリックして[ボタンのセットアップ]ダイアログを閉じます。 9. ボタンの外をクリックして、タイトルを追加せずにコミットします。


32

まだ、ボタンがフィールド全体を覆い隠しているかもしれません。フィールドの背面に移し、レイアウトの他の部分から浮き立ってしまわないよう、書式設定する必要があります。ボタンをフィールドの背面に移動するには、まずボタンをポータルいっぱの大きさにサイズ変更します。フィールド全体を覆い、スクロールバーには重なり合わないサイズにしてください。次に [配置] > [背面へ移動] を選択します。ボタンが背景に馴染むように、インスペクタの[外観]タブで塗りつぶし、線、角丸の半径を除去します。またボタンを上および左右にアンカーして、方向が変わった場合にはポータルとともに移動して拡大するようにします。ポータル内のフィールドについては[ブラウズ]モードと[検索]モードのフィールド入力を選択解除したことを思い出してください―ユーザーは行をタッチしてもフィールドに値を入力できず、その代わりに常にボタンがトリガされます。また、押された状態が自動的にボタンに適用されているため、ユーザーが行にタッチすると（したがってボタンをタッチすると）、フィールドの背面のポータル行全体にわたってボタンが現れます。 Dashboard レイアウトに戻るために、Product Details | iPad レイアウトにボタンを追加する必要があることに注意してください。ユーザーがダッシュボードで常に最新のデータを見られるようにするために、単一ステップで “Refresh” という名前の新しいスクリプトを作成します‒ [ウインドウ内容の再表示 [キャッシュされた結合結果を書き込む]]。iPad の Inventory Dashboard レイアウトで Refresh スクリプトを実行するために、OnRecordLoad および OnLayoutEnter スクリプトトリガを有効にします。[ウインドウ内容の再表示]のアクションは、下記のステップ 7で追加されるWebビューアに関連しています。

5. 在庫品の総価格を追加しますユーザーに在庫品の総価格を表示するために、Dashboard テーブルに以下の計算式を含んだ計算フィールドを作成します。

Sum(Inventory::Stock Value) レイアウトのポータルの右側に、“Total Value of Inventory” というタイトルの新しいフィールドを追加します。インスペクタの[データ]タブの[データの書式設定]セクションで、フィールドの書式を通貨に設定するとともに、それぞれの要件に合わせたその他のオプションを適用します（たとえば、小数点以下 2桁に固定した数値で、3桁ごとの区切りのコンマを入れるなど）。


33

フィールドのサイズを、レイアウトの右の「欄」を示しているガイドの間に合わせて変更します（左辺が 515 ポイント、右辺が 752 ポイントで、フィールド幅は 237 ポイントになります）。フィールドの上辺をポータルの 144 ポイントの位置に合わせ、タイトルをポータル上部の他のタイトルに整列させます。次にフィールドとタイトルを中央揃えに書式設定し、互いの中央を揃えるとともに、上と右だけにアンカーします。これによって、方向が変化してもタイトルとフィールドは常にポータルの右側の位置に表示されます。最後に、インスペクタの[データ]タブで、[ブラウズ]モードと[レイアウト]モードの両方でフィールド入力を許可するオプションのチェックを外します。タイトルとフィールドがポータルの外観にマッチするよう、ポータルのタイトルの背面にあるボックスを複製し、Total Value フィールドの幅に合わせてサイズ変更します。ボックスをガイドの間に位置合わせし、テキストおよびフィールドと中央を揃えるとともに、上辺の位置を元のボックスと同じ（122 ポイント）にします。ボックスを背面に移動してタイトルの後ろに置き、上と右にアンカーします。

6. 各カテゴリーの品目の数量を示すグラフを追加します在庫品のスナップショットがあれば、ユーザーがシステムの全体像を理解するのに役立ちます。このグラフは「目録」の新しい集計フィールドに基づいて作成され、Units on Hand フィールドの合計に設定されます。レイアウトにグラフを追加する前に、「目録」にそのフィールドを作成します（以下のリストでは、このフィールドの名前は sUnitsOnHand になっています）。グラフを追加するために、レイアウトモードでステータスツールバーからグラフツールを選択し、ポータルの右側に長方形にドラッグします。[グラフ設定]ダイアログで、グラフ領域を次のように書式設定します。

• グラフのタイトル: “Quantity By Category” • グラフタイプ: 棒グラフ • X 軸のタイトル: “Quantity” • X 軸のデータ、計算式の指定: GetSummary(Inventory::sUnitsOnHand;

Inventory::Category) • Y 軸のタイトル: “Category” • Y 軸のデータ、フィールド名を指定: Inventory::Category • グラフ上にデータポイントを表示

[スタイル]の領域に進み、一番下にある[相対的なテキストサイズ]を -1 に変更します。 [データソース]領域に進み、以下を選択します。

• グラフデータ: 関連レコード


34

• 関連テーブル: Inventory • 関連レコードのソート順に Category を指定 • レイアウトがソートされたときのグラフ表示: 集計レコードグループ

図 19: [グラフ設定]ダイアログの 3つのセクション

[終了]をクリックして、[グラフ設定]ダイアログを閉じます。ここでグラフのサイズを変更して、レイアウト上のガイドで作成された 2番目の「欄」に合わせ、左辺を 515 ポイントの位置のガイドに、右辺を 752 ポイントの位置に揃えます。必要となる高さは、在庫品目に割り当てられているカテゴリーの数によって、また一部は使用可能なスペースの大きさによって決まります。ここではグラフの高さを 229 ポイントに設定します。また上辺を 192 ポイントに揃えます（これによって在庫総計フィールドの下辺とグラフの上辺との間に 15 ポイントの間隔が空き、ポータル上部のボタンとタイトルボックスの間隔と同じになります）。


35

7. ユーザーの現在位置を示す地図を追加します

ユーザーにさらに多くの情報を提供すると同時に、FileMaker Go のロケーション機能を活用するために、地図上にユーザーの現在位置をピンポイントで示す Web ビューアを追加します。 Web ビューアを追加するには、ステータスツールバーからWeb ビューアツールを選択し、2番目の「欄」の下に長方形を描きます。[Web ビューアの設定]ダイアログの[Web アドレス]の領域に、次の計算式を指定します。 Let(p = Get(SystemPlatform); If(p = 3; "https://maps.google.com/maps?q=" & Substitute(Location(10; 5); " "; ""); "data:text/html, <body>You are using a " & If(p > 0; "Mac"; "Windows computer") & "... Open this file on an iOS device to see a map of your location. </body>" ) ) この計算式は iOS で計算され、10 メートルの精度でデバイスの緯度と経度を示す Google マップの URL を示します。Location および LocationValues 関数はデスクトップ上のFileMaker Pro では計算されないため、計算式の残り部分によって、正しく計算されないURL を呼び出す代わりにメッセージを表示することに注意してください。 [OK]をクリックして[Web ビューアの設定]ダイアログを閉じ、Web ビューアをサイズ変更してグラフと同じ幅（237 ポイント）および 217 ポイントの高さに設定してから、左辺を 515ポイント、上辺を 468 ポイントの位置に揃えます。このWeb ビューアを上と右にアンカーし、方向が変わった場合にグラフといっしょに右辺に固定して表示されるようにします。ポータルと Total Value フィールドの外観を一致させるために、Total Value フィールドの上にあるタイトルとボックスを複製して、上辺から 436 ポイントの位置に置きます（最も重要な値を表示するために 2 つをグループ化し、その後作業を続けるにはグループを解除します）。ここでもグラフと地図のタイトルボックスとの間に 15 ポイントの間隔が空いて、他の縦横の間隔と同じになります。タイトルを “Your Location” に変更します。これは地図なので、ユーザーはクリックして拡大表示することが考えられます。Google マップには地図管理のボタンが含まれているため、地図に直接ボタンを追加すると能率が低下します。その代わりに、地図上部のタイトルボックスをボタンに変更します。それには、ボックスを右クリックして[ボタンの設定]を選択し… 以下の URL を指定することによって、ダイアログなしに[URL を開く]スクリプトステップを実行するようボタンを設定します。


36

Let( L = Substitute(Location(10; 5); " "; ""); If(Get(SystemVersion) ≥ 6; "maps://?ll="; "https://maps.google.com/maps?q=") & L )


37

この計算式は Let 関数によって始まり、変数 “L”（Location の頭文字）を Location 関数の結果として宣言します。次に、Apple の Maps on iOS 6 以降またはバージョン 6 より前のGoogle Maps on iOS のいずれかにリンクするために、システムのバージョンを確認します。結果の地図をデフォルト（Apple マップおよび Google マップのいずれでも 15）と異なるレベルにズームしたい場合は、URL の末尾に以下を追加してください。

& “&z=19” //to zoom in further (the higher the number, the closer the zoom) ‒ or ‒ & “&z=10” //to zoom out

タイトルバーをタップすれば地図を拡大できることをユーザーに知らせるために、幅 30 ポイント、高さ 30 ポイントの四角形を追加し、上から 438 ポイント、左から 720 ポイントの位置に置いて、タイトルボックスの上辺および右辺から 2ポイント内側に配置されるようにします。インスペクタの[外観]タブの[グラフィック]セクションで長方形に塗りつぶした画像を適用し、地図のグラフィックを選択します（地図のグラフィックは、手元になければオンラインで入手可能で、会社の位置の地図部分の画像をキャプチャすることもできます）。画像プレビューの下のドロップダウンから[Select to Fit]を選択します。四角形の上と右をアンカーし、タイトルボックスといっしょに動くようにします。四角形にボタンを付けることもできますが、これはタップできるボタンに推奨されているサイズの 44×44 ポイントより小さくなっています。地図のグラフィックはユーザーの目を引いてタップを誘うので、タイトルバーにボタンが付いていれば、ユーザーがグラフィックにあいまいに触れるだけでスクリプトがトリガされます。パフォーマンスについて最後に一言注意しておきます。このWeb ビューアは Location 関数を含んだ計算される URL を使用しているため、イベントが何回発生しても再表示されます ‒ レイアウトがアクセスされる、または再表示される、iOS デバイスの方向が変わる、ユーザーがソリューションに戻る、ユーザーが画面を手動で再表示する、などの場合です。このような場合の地図の再表示の回数を減らしたい場合は、地図の再表示が必要な時点の現在位置でWeb ビューアを URL に設定するスクリプトを使用してください。これを、レイアウトのスクリプトトリガによって呼び出される再表示スクリプトか、ユーザーが地図を更新するためにタップするボタンに接続されたスクリプトか、[On Timer スクリプトをインストール]ステップでスケジュールされるスクリプトに入れておきます。


38

8. 最終的なレイアウト

最終的なレイアウトは図 20 のようになっているはずです。

図 20: 最終的なレイアウト

9. 残りのスペースをどうするか?

このレイアウトの要素は、画面の方向の変化に伴って拡大して移動するよう設定されていることを忘れないでください。縦長の方向では、Web ビューアの下に別の小さい要素を表示できるスペースが残っています。そこで、次のものを追加することができます。

• 最近 1時間、1日、または 1週間等の販売活動を示すグラフ（Stock Transactions::Out フィールドに基づく）


39

• 最も新しく追加されたレコードを見られる Stock Transactions テーブルへのポータル

• ユーザーの会社の株価チャートを表示するWeb ビューア • クライアントメモ、約束、To Do リスト用のタブを示したタブパネル（これにはテー

ブルと別のスキーマを作成する必要があります）このスペースに何かの要素を表示したい場合、幅がWeb ビューアおよびタイトルの幅を超えず、高さが iPad（横）と iPad（縦）画面ステンシルの下辺の間にあるスペースを超えないサイズにします。実際には上下に 15 ポイントずつの間隔を確保するために、そのスペースより30 ポイント小さくしなければなりません。要素は下と右にアンカーし、Web ビューアとタイトルの背面に移動するとともに、下辺をWeb ビューアの下辺に揃えて完全に隠れるようにします。こうしておくと、iPad を縦方向にした場合だけ要素が下方向に移動して、地図の下に見えるようになります。横方向では地図の背後に隠れます。

10. 新しいレイアウトに自動的にナビゲートします目録 Starter Solution では、ユーザーがファイルを開くと “Trigger | On First Window Open” というスクリプトが実行されるように設定されています。このスクリプトは、プラットフォームのテストを含み、適切なレイアウトにナビゲートします。ここでは iPad ユーザーのためにダッシュボードを作成したので、スクリプトに手を加え、If [PatternCount ( Get ( ApplicationVersion ) ; “iPad” )]の後にある最初の Go to Layout ステップを新しいレイアウトに進むよう変更します。さらに、前述の通り、ユーザーが初めて iPad の Inventory Dashboard レイアウトを開く時点で表示したい製品に応じて、Dashboard::DashboardAvailability フィールドを “Reorder Required” または “In Stock” のいずれかに設定するステップを追加します。異なるファイルを使用する場合には、[ファイル] > [ファイルオプション…] > [スクリプトトリガ] で必ず OnFirstWindowOpen スクリプトトリガを使用して、プラットフォームのテスト、適切なレイアウトへのナビゲート、フィールドの設定を行うスクリプトを実行するよう設定してください。


40

自分だけのソリューション - 最終的な検討独自のソリューションの設計を完了したら、次のように自問して、プロフェッショナルなデザイナーの視点で最終的な検討を行います。 • 設計のバランスはとれているか?

o ページの左右どちらか一方が、反対側より密集しているか暗くなっていませんか? ページの上下ではどうですか? レイアウトからレイアウトの順に変化している場合、それはユーザーによるページの理解を助けていますか、それとも邪魔していませんか?

o 使用する色の数を、情報やブランドを適切に表現できる数だけに減らしましたか? o ボックスや線の使用をできるだけ抑えましたか? ただのスペースで置き換えられるものは

ありませんか? • 明確な視覚的階層ができているか?

o 目を細めて見てください。最初に目が行くのはどこですか? どの要素がページから飛び出して見えますか? それらは、ユーザーが実行する第一のタスクにとって最も重要な要素ですか?

o ページには、視線が自然に動くはっきりした経路がありますか? その経路はユーザーのタスクの順序に合っていますか?

• ナビゲーションに一貫性があり、わかりやすいか? o 同じレイアウト内、および複数のレイアウトの間で、類似した要素を同じ方法で使用しま

したか? o 使用したアイコンおよびユーザーインターフェース要素は、ユーザーが目にする他のソフ

トウェアでの意味を引き継いでいますか? • ユーザーインターフェースのアイコンと言葉が明白で一貫性を保ち、文法的誤りがないか?

ソリューションのテストと展開

テストの準備が整ったら、展開方法も考える必要があります。FileMaker Server でホストし、ユーザーはリモートからアクセスしますか? 各ユーザーのデバイスに移すスタンドアロンソリューションにしますか? その場合には、ユーザーにはどんな方法でコピーを配布しますか? ‒ Web ページ上のリンクを利用しますか、それとも Eメール、またはサーバーを利用しますか? 展開に関するガイドについては、FileMaker How To Guide ‒ iOS への簡単な展開をご覧ください。FileMaker の TechNet サイトにあります。


41

付録 ‒ FileMaker デザインツールについて知る

FileMaker Pro に慣れていない場合、FileMaker デザインツールおよび利用できるオプションの基本的な使用法を理解することが大切です。 FileMaker Pro 12 には次のデザインツールとオプションがあり、以下では FileMaker Starter Solution の「コンテンツ管理」を例として用いて、使い方を示しています。

o テーマ o テキストの処理 o 塗りつぶし ‒ 単色の背景色、グラデーション、イメージ o 枠と角の処理 o オブジェクトの表示状態 o アイコンとアートワーク o アクセシビリティオプション

テーマ

FileMaker Pro 12 には、iPhone および iPad での利用に合わせてデザインされたテーマがいくつか用意されています。それらは「タッチ」テーマと呼ばれ、よく調整された背景、枠、フォント、陰影などが使われています。異なるテーマを使うとソリューションのルック&フィールがどのように変化するか見てみましょう。

1. FileMaker Pro 12を起動します。

2. [ファイル] > [Starter Solutionから新規作成…]を選択します。

3. コンテンツ管理.を選択します。

4. [表示] > [レイアウトモード]を選択します。

5. [レイアウト] > [テーマを変更…]を選択します。

6. [レイアウトテーマ]のリストでテーマを選択し、各テーマのプレビューを表示します。

7. 名前に「タッチ」が付いているテーマを選んで、iPhoneおよびiPadアプリでの利用に合わせてデザインされたテーマを見ます。どれが最も気に入ったかのメモをとり、ステップ 4 でソリューションを作成する際に適用できるようにします。


42

図 21: オニキスのテーマは、コンテンツ管理Starter Solution で使用

図 22: クールグレータッチは、iPhone & iPadでの利用に合わせてデザインされたテーマを適用.

テキストの処理

ソリューションで使用するテキストのフォント、サイズ、スタイル、配置、方向、文字色を、さまざまなオプションから選択することができます。

異なるテキスト処理を試してみましょう。

1. [表示] > [レイアウトモード]を選択します。

2. [表示] > [レイアウト] > [iPad] > [内容の詳細 | iPad]を選択します。

3. テキスト要素 <<タイトル>> をクリックして選択します。

4. [書式] > [フォント] を選択してから、任意の他のフォントを選択します。

FileMaker Starter Solution は通常 Helvetica Neue を使用しており、これは iPad とiPhone で見映えのするフォントです。各種のデバイスに適していると考えられるフォントには、以下のものが挙げられます。

o Helvetica Neue o Verdana o Gils Sans o Times New Roman o Georgia o Courier New

5. [書式] > サイズ、スタイル、配置、行間、方向、文字色を選択し、操作する必要があるすべての異なるテキスト属性を確かめます。


43

図 23: テキストサイズの変更塗りつぶし ‒ 単色、グラデーション、イメージ

塗りつぶしには、単色の背景色、グラデーション、イメージがあり、テキスト、ボタン、フィールド、オブジェクトなどに適用することができます。以下の手順に従って、さまざまな塗りつぶしを試してみましょう。

1. テキスト要素 <<タイトル>> をクリックして選択します。

2. インスペクタが画面に表示されていなければ、「表示」 > [インスペクタ]を選択します（またはキーボードショートカットの Cmd+I または Ctrl+I を使用します）。

3. [外観]タブをクリックします。

4. インスペクタの[グラフィック]セクションで、[塗りつぶし]のドロップダウンをクリックします。


44

図 24: 塗りつぶし色の追加

5. 塗りつぶしに[単色]を選択して、背景色を単色に変更します。下にあるカラーピッカーをクリックして、自分の好きな別の色を選びます。

6. 塗りつぶしに[グラデーション]を選択してその効果を確認し、次にスライダーと別のオプションをいろいろに使って、グラデーションの外観を変化させてみます。たとえば、オニキスとクールグレーのテーマでボタンとヘッダパートを見ると、異なる効果を利用しているのがわかります。

グラデーションバーの 2つのカラーストップの間でコントラストを大きくすると、ツールバーとボタンの奥行きが増して見えますが、背景のレイアウトオブジェクトそのものでは線形グラデーションのカラーストップの間のコントラストを最小限に抑えるか、開始点と終了点の間を非常に大きくして放射状グラデーションを使用するようにします。


45

枠と角の書式

テキスト、ボタン、フィールド、オブジェクトなどを囲む枠に、異なる色、幅、パターンを適用することができます。またフィールドの角丸の半径も変更することができます。以下の手順に従って枠と角の書式を変化させてみましょう。

1. フィールドの[タイプ]をクリックして選択します。

2. インスペクタが画面に表示されていなければ、表示します。


4. インスペクタの[グラフィック]セクションで、[線]のドロップダウンをクリックします。

図 25: 枠の変更

5. なし、無地、破線、点線を選択して、異なる効果を確認します。

6. 線の幅のポイントサイズを変更し、太くしたり細くしたりします。

7. カラーピッカーのボックスをクリックして、枠に好きな色を選びます。


46

8. すぐ下にある一連のアイコンの 1 つをクリックし、枠がフィールド全体を取り囲む場合と、左、上、右、下の枠だけが現れる場合を確認します。

9. [角丸の半径]を変更するために、[角丸の半径]フィールドに表示されている値を 5 から20 に変えて、数字が大きいほど角が丸くなることを確認します。さまざまな値を選んで、異なる効果を見てみましょう。

図 26: 角の変更


47

オブジェクトの状態

ユーザーがブラウズモードで実行したアクションに視覚的フィードバックを提供できるよう、オブジェクトで異なる属性を表示するように書式指定することができます。たとえば、ユーザーがボタンを押すと異なる塗りつぶし色（あるいは異なる枠などのその他の書式）でそのボタンが表示されるよう、書式を指定できます。オブジェクトの状態を設定するには、次の手順を実行します。

1. レイアウトの左上隅にある「コンテンツリスト」のテキストをクリックします。

2. インスペクタが画面に表示されていなければ、表示します。


4. [通常状態]をクリックし、[ポイントしたときに表示]を選択します。

5. [塗りつぶし]に[単色]を選択し、好きな色を選びます。あるいは、色の明るさを 25%高めたり、枠の幅を 1から 2ポイント増やしてその色をさらに明るくしたりできます。

図 27: オブジェクトの状態の変更


48

図 28: 「ポイントしたときに表示」の設定で表示されているボタン

これによって、ユーザーがブラウズモードで「コンテンツリスト」というテキストにポインタを置いたとき、このテキストの色が変化します。

6. ドロップダウンリストで異なるオプションを次々に選択し、それぞれに異なる書式を指定してみましょう。

a. 通常状態: ユーザーはこのオブジェクトを使用できますが、現在は選択されていません。

b. フォーカス: オブジェクトはアクティブになっています。

c. ポイントしたときに表示: ユーザーがオブジェクトの上にポインタを置いたときに表示されます（Mac およびWindows のみで、iOS は対応していません）。

d. 押したとき: オブジェクトがクリックまたはタップされ、リリースされていません。


49

アイコンとアートワーク

アイコンはスペースを節約できるとともに、言語に関係なく使用することができます。インターネットの画像検索によって、特定のアクションを表すアイコンの例を数多く見ることができます。アイコンの他に、学校や会社のロゴもソリューションを特別なものにし、ユーザーにブランドを示すことができます。とはいえ、可能な限り、そのソリューションが主に使用されるデバイスへの期待に沿ったアイコンと画像を使用してください。アイコンと画像は、タスクをより簡単に実行できるようにして、タスクに役立つものでなければならず、ソリューションの目的を損ねたり、その目的から外れたりするものであってはなりません。また、いくつかの一般的な記号は状況によって誤解されることもあるので注意が必要です。これを避けるために、使用しようとするアイコンを多様な人に見せてテストしてください。 iOS のアイコンは、通常は光を照らすイメージで、中央の真上に配置されます。たとえば、以下は FileMaker Go for iPad & iPhone のアイコンと、iOS 天気ソリューション用アイコンです。

図 29: 上から光を照らす印象を与える iOS アイコン独自のアイコンやグラフィックを作成する場合には、上から光を照らす効果を表現するよう考慮してください。レティナディスプレイでは、アートワークおよび画像はすべて、鮮明に見えるだけの十分な解像度を持っていなければなりません。ただし、画像が大きくなればなるほどロードに時間がかかることを忘れてはなりません。一般的には、144 DPI の画像を使用します。アイコンの位置は、すべてのレイアウトで一貫性を持たせるようにします。ユーザーは、レイアウトが変わっても、要素とアクションオブジェクトがだいたい同じ位置にあることを期待しています。2つのレイアウトの目的とデータがまったく異なっているとしても、ナビゲーションボタンやアイコンなどの配置に一貫性を持たせることによって、ユーザーは見ているものを理解しやすくなり、ソリューションを効果的に利用できるようになります。アイコンの位置、書式設定、デバイス固有のサイズ設定の例として、FileMaker の異なる Starter Solution を確認してください。さらに Apple は、iOS デベロッパライブラリーでカスタムアイ


50

コンおよび画像作成のガイドライン（英語）を提供しています。iOS ヒューマンインターフェースガイドラインにも一部記載があります。アクセシビリティ

設計者はすべてをデバイスに適したサイズに設定するので、ほとんどのユーザーはズームレベルを 100%に固定して利用します。視覚障害を持つユーザーは、ズームの倍率を高くすればソリューションを利用できることがあり、その場合はこうしたユーザーのためにズームを使用可能にする必要があります。ズームレベルを設定およびロック/アンロックするには、[ズームレベルの設定]スクリプトステップとそのオプションを使用してください。システムにユーザーのテーブルを用意し、各ユーザーについてズームを使用可能にするべきかどうかを追跡する方法があります。ユーザーがログインしたらすぐ、そのアカウント名とユーザーテーブルに保存されている名前を比較し、各ユーザーに保存されている設定値に従ってズームレベルとオプションを設定します。あるいは、すべてのユーザーがログイン時に見る最初のレイアウトに、作業に必要であればタッチまたはクリックしてズームできるボタンを用意することもできます。もちろん、このボタンは視覚障害を持つユーザーが利用できるように書式設定する必要があります。


51

リソース

このガイドの作成に役立った推奨資料には、以下のものがあります。

l iOS ヒューマンインターフェースガイドライン l Luke Wroblewski によるモバイルファースト（英語）

このガイドの他にも、ソリューションの展開、ワークグループのセキュリティ、同期化などの多彩なトピックを扱っている FileMaker How to Guide を、http://fmdev.filemaker.com からダウンロードして入手することができます。 FileMaker Pro アプリケーションに含まれているヘルプのトピックも、レイアウトオブジェクトで以下の操作を行う場合に役立ちます。

• オブジェクトの選択 • インスペクタを使用したオブジェクトの書式設定 • オブジェクトのコピー、複製、削除 • オブジェクト間またはレイアウトパート間でのスタイル属性のコピー • レイアウト上のオブジェクトの移動 • オブジェクトのサイズと形の変更 • レイアウトオブジェクトの自動サイズ変更オプションの設定 • オブジェクトの塗りつぶし、線のスタイル、および枠の設定 • オブジェクトの表示状態の指定 • カラーグラデーションを用いるオブジェクトまたはレイアウトパートの塗りつぶし • イメージを用いるオブジェクトまたはレイアウトパートの塗りつぶし • レイアウト上のグラフィックの書式設定 • オブジェクトの変更からの保護 • オブジェクトの名前の指定 • レイアウトオブジェクトの条件付き書式の定義


52

© 2012 FileMaker, Inc. All rights reserved. FileMaker は、米国およびその他の国において登録された FileMaker, Inc. の商標です。ファイルフォルダロゴは FileMaker, Inc. の商標です。その他の商標はすべて、それぞれの所有者の財産です。製品の仕様および発売予定は予告なしに変更されることがあります。

本文書は、一切の保証なしに「現状のまま」提供されるものであり、FileMaker は明示または黙示を問わず、黙示の商品性の保証、特定の目的についての適合性、非侵害の保証を含め、またこれに限らず、一切の保証を否認します。FileMaker またはそのサプライヤは、直接的損害、間接的損害、偶発的損害、結果的損害、営業利益の損失、懲罰的損害、特別損害を含め、たとえ FileMaker またはそのサプライヤがそのような損害が生じる可能性について知らされていたとしても、いかなる損害についても一切の責任を負わないものとします。法域によっては、無保証あるいは責任制限を認めない場合があります。FileMaker は、本文書を予告なしにいつでも変更できるものとします。本文書はいずれ時代遅れとなるかもしれませんが、FileMaker はこの情報を最新の情報にすることを約束するものではありません。

ipadおよびiphone向け カスタム ビジネスソリューション 設...

Documents

ipadおよびiphone向けカスタムビジネスソリューション設...