FileMaker Pro 15 基本講座

ボタンバーで画面遷移の基本を用意する

全413コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
ボタンバーは、複数のボタンやポプオーバーボタンを配置して、デザインや操作の一貫性を持たせるのにとても便利に使えます。まずは、基本のナビゲーションの画面遷移の設定を理解しておきましょう。
講師:
10:27

字幕

このレッスンでは、ボタンバーの基本的な利用方法について説明します。このカスタムアップは見積もりを作成するそして管理するためのデータベースと考えていますがここで「商品管理」については既に詳細画面と一覧画面を用意し行き来できるようになっています。まだ全て作っていないですが他に、この様に「見積管理」それから、これらの行き来ができるようになっておりもう1つ「顧客管理」についても同様に「詳細」と「一覧」の行き来ができるように画面の遷移を考えています。これら3種類の「見積もり」「顧客」「賞品」それぞれについて全体のナビゲーションが簡単に行えるように設定をしてみたいと思います。まず、今、ここの既に出来ている「商品管理」の所からレイアウトの設定を行っていきます。「ボディ」の上に「ヘッダ」がありますがそのさらに上にナビゲーションのためのパートをまず用意すると良いでしょう。「レイアウト」>「パート設定」を選択しそして「上部ナビゲーション」を選択してOK を押します。「終了」を押します。「ヘッダ」のさらに上ですのでこの様に一覧の場合は「ヘッダ」の部分にはフィールドのラベルが配置してあります。「上部ナビゲーション」にはボタンバーを利用してこれら3種類のテーブルの行ったり来たりをできるようにします。 ボタンバーのアイコンはこのツールのアイコンになりますのでここをクリックしてそして、ある程度ボタンが並ぶようなイメージで横長にドラッグ&ドロップして矩形領域を描きます。「ボタンバーの設定」ダイアログでは最初に3つのボタンが配置できるように用意されていますがこれを「セグメント」と呼びます。このセグメントの中で1つ目、2つ目、3つ目それぞれ何を設定するかを決めていきます。それぞれの中には「ボタン」あるいは「ポップオーバーボタン」のいずれかが設定できます。ここでは、まず画面の切り替えだけを考えていますので今、「商品管理」ですが順番に「見積管理」から考えていきます。次は「商品管理」最後が「顧客管理」このように3種類のナビゲーションの切り替えを考えてみます。処理については「見積管理」に単一ステップを割り当てます。「レイアウト切り替えの」レイアウトの切り替え先は「見積管理」OK を押して、OK を押して良いでしょう。次に「商品管理」についても同様に考えます。「レイアウト切り替え」切り替え先は「商品管理」OK を押してOK を押します。3つ目は「顧客情報」ここを選択してもこちらの、今、選択しているセグメントが3/3 という風に切り替わりますので矢印キーを使ってもどちらでも結構です。 ここもレイアウトの切り替えを設定します。「顧客管理」これで3つのレイアウトへの行き来ができるようになりました。これから、このナビゲーション用のボタンバーを各画面にコピーしてペーストしていこうと考えていますが今、現在は実は「商品管理」ですのでこのボタンがアクティブセグメントであると考えます。「商品管理」を選びます。これを選択しておくことによって動きがどのように変わるか見てみましょう。「商品管理」については自分自身の今のレイアウトが「商品管理」であると分かるようにまず、ここにアクティブ状態であることが分かるようにカラーのスタイルが変わっています。マウスオーバーすると「顧客管理」に切り替わる予定です。こちらは「顧客管理」ここに切り替わりました。今は「商品管理」にしか置いていませんのでこの様に行ったり来たりできるようにするためにはこのボタンバーをコピーしてそれぞれに貼り付けていくと良いでしょう。「レイアウトの編集」に移動しこれをコピーします。「上部ナビゲーション」のサイズを確認しておきます。高さ 56これを他のエリアにも割り当てていくわけです。商品の詳細も同様で基本、全く同じもので良いでしょう。 ここに「レイアウト」>「パート設定」を行い「上部ナビゲーション」を配置そして、これを高さ 56 と指定。ここに貼り付け(ペースト)します。この様な感じです。これについてもアクティブセグメントは「商品管理」のままで良いでしょう。こちらは詳細画面です。同様のことを、他のレイアウトにも行なっていきます。次は「見積管理」のレイアウトです。「パートの定義」を開け「上部ナビゲーション」を配置これの高さを 56 にしそして、ここにボタンバーをペースト。ここで「見積管理」に変わりましたのでこのボタンバーの「アクティブセグメント」を「見積管理」に切り替えます。他はこのままで良いでしょう。これを、また「コピー」してもう1つ詳細の見積管理のこの画面にも同様に「パートの設定」を行い追加していきます。この様に、各パートをナビゲーションのパートを用意しておくと楽に設定ができます。そして、1つ目で1回作ったボタンバーのアクティブセグメントだけを切り替えていけば良いわけです。ここは同じ「見積管理」の詳細ですのでこのまま。最後が「顧客管理」です。この「顧客管理」にもボタンバーを割り当てたら「アクティブセグメント」は切り替える必要があります。 「顧客管理」に変えました。そして、これの詳細の方のレイアウトにはこのままコピーすれば良いでしょう。これは「顧客管理」。はい、これで良いです。では、ブラウズモードに行って動きを確認します。今は「顧客管理」にいます。そして「商品管理」に移動すると商品の画面に「見積管理」に移動すると見積管理の画面にそして、これらの詳細と一覧は行き来ができるようになったわけです。この様にナビゲーションバーを利用してそしてボタンバーをそれぞれに配置していくといったパターンはアクティブセグメントを切り替えるだけで楽に組み込むことができるようになっています。ボタンバーについてはもう1つ横に並べましたが、縦に並べるオプションもあります。例えば、ここに縦に並べることをやる場合はおそらくポップオーバーボタンを用意してこの辺りに配置しそして、この中にボタンバーを設定すると良いでしょう。例えば、ここにラベルで「メニュー」とします。そして、この「メニュー」のここのタイトルバーは特に無くて良いでしょう。この中にボタンバーをコピーして入れるわけなのですがこのポップオーバーボタンのパネルの中にペーストしたいと思います。少し領域を開けてこの中にペーストをします。 そして、これを、例えば、縦に並べるともう少し省スペースで良いかもしれません。これで、どの様に見えるかブラウズモードで見てみます。こうすると、この様にポップオーバーの中にボタンが表示され今と同様の機能がこじんまりとまとめられることになります。このレッスンではボタンバーで画面遷移の基本を設定する方法について説明しました。

FileMaker Pro 15 基本講座

FileMaker Proは特に開発の経験がなくてもアイデアをすぐに形にできます。このコースではFileMaker Proの基本操作はもちろん、データベースの仕組みからリレーションシップの作成や、コンテキストの概念などについて基礎から学習します。また美しいレイアウトの作成や操作性を向上させるためのさまざまなコツも紹介します。

9時間51分 (99 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
プラン加入者限定
発売日:2017年02月03日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。