30min CustomApps

Build your own application worth using

Filemaker Template #002 Contact 履歴管理

テンプレートを参考にして連絡履歴を管理するアプリつくってみましょう!

 

 

   1.データベース概要

About this Template このテンプレートについて

客先との連絡履歴を管理するためのシンプルなデータベーステンプレートです。

 

Description 機能詳細

・ふりがなフィールドを使用したふりがなの自動入力。

サブフォームで詳細データ表示。

・ファンクションキーへのマクロを割り当て。

・印刷プレビュー時に表示するデータがない場合にメッセージを表示する。

 

Screenshot スクリーンショット

入力画面(Edit) ・・・レコードの新規作成・修正・削除等を行います。 

f:id:BeansWorks:20180122224325p:plain

 

一覧画面(List) ・・・レコードを一覧で表示します。

f:id:BeansWorks:20180122224351p:plain

 

Download ダウンロード

本書で作成するテンプレートをダウンロードすることができます。データベースの動作を事前に確認しておくことで開発をスムーズに進めることができるでしょう。ファイルをダウンロードするには下記サイトにアクセスして下さい。

 

 

   2.新規データベースの作成

FileMaker Proでは始めにファイルを新規作成し名前をつけて任意の場所に保存する必要があります。

2-1. ファイルメーカーを新規に起動すると「FileMaker クイックスタート」画面が表示されるので[新規データベースの作成...]をクリックします。

f:id:BeansWorks:20180129234755p:plain

 

2-2. ファイル名を入力して任意の場所に保存します。 f:id:BeansWorks:20180129234811p:plain

 

 

   3.新規フィールド設定

3-1.[ファイル]-[管理]-[データベース...]メニューを選択します。 「データベースの管理」ウインドウを開きます。

 

3-2.「フィールド」タブを選択し、「フィールド名:」を入力して「タイプ:」を選択後、[作成]ボタンをクリックするとフィールドが追加されます。 

f:id:BeansWorks:20180129234928p:plain

 

3-3.「フィールド」と「属性」を下記のテーブルデザインに従って設定しましょう。

「Contact」テーブルデザイン

f:id:BeansWorks:20180129235622p:plain

 

   4.テーブルの追加

4-1. [ファイル]-[管理]-[データベース...]メニューを選択し「データベースの管理」ウインドウを開きます。

f:id:BeansWorks:20180131004203p:plain

 

4-2.[テーブル]タブを選択し、[テーブル名:]に「memo」と入力後[作成]ボタンをクリックします。 

 

4-3.次に[フィールド]タブを選択し、「memo」テーブルにフィールドを追加します。

「memo」テーブルデザイン

f:id:BeansWorks:20180131004343p:plain

 

   5.リレーションシップの設定

5-1. [ファイル]-[管理]-[データベース...]でデータベースの管理ウインドウを開き「リレーションシップ」タブ切り替えて下記のようにリレーションを設定する。

f:id:BeansWorks:20180131004428p:plain

 

5-2. 「Contact」テーブルと「memo」テーブルの間にある“=”をダブルクリックしリレーションシップ編集ウインドウを表示する。「Contact」テーブルと「memo」テーブルのリレーションシップを下記の通り設定する。

f:id:BeansWorks:20180131004501p:plain

 

   6.フィールドのオプション設定

6-1. [ファイル]-[管理]-[データベース...]でデータベースの管理ウインドウを開き「フィールド」タブ切り替えて、「テーブル:」を「Contact」に切り替えます。

「Contact::Ref_No

①フィールド名「Ref_No」の オプションで「入力値の自動化」タブを選択し、[シリアル番号]にチェックを入れ[OK]ボタンをクリックします。

f:id:BeansWorks:20180131004530p:plain 

 

②「フィールド」ウインドウで「テーブル:」を「Estimate」に切り替えます。

f:id:BeansWorks:20180131004551p:plain

 

「Contact::Name」

③フィールド名「Name」の オプションで「ふりがな」タブを選択し、[ふりがなフィールドを使用する]にチェックを入れ[ふりがなを入力するフィールド]で「Name_Yomi」を選んで[OK]ボタンをクリックします。

f:id:BeansWorks:20180131233728p:plain

 

   7.フォームレイアウトの作成

7-1.レイアウトモードでフィールドピッカーを表示し、ドラッグアンドドロップでフィールドを配置します。

f:id:BeansWorks:20180131233807p:plain

 

7-2.[レイアウトツール]から[ポータル]をクリック後、カーソルが十字になったらボディーにポータルを配置します。

f:id:BeansWorks:20180131233830p:plain

 

7-3.「ポータル設定」ウインドウで下記の様に設定し[OK]ボタンをクリックする。

f:id:BeansWorks:20180131233855p:plain

 

7-4.「ポータルにフィールドを追加」ウインドウで必要なフィールドを移動し[OK]ボタンをクリックする。

f:id:BeansWorks:20180131233915p:plain

 

7-5.ポータルとフィールドが配置されました。

f:id:BeansWorks:20180131233931p:plain

 

   8.レイアウトの設定

8-1.配置したフィールドのレイアウト設定をインスペクタで変更します。

「Contact::Company」

①[表示]-[インスペクタ]でインスペクタを表示させてから、「Estimate::Customer」フィールドをクリックで選択します。

②インスペクタのデータタブを選択し「コントロールスタイル」をドロップダウンリストに変更後、「値一覧:」の編集ボタンをクリックして「Estimate」の値一覧の管理ウインドウを開きます。

f:id:BeansWorks:20180131234011p:plain

 

③値一覧の管理ウインドウで左下の[新規...]ボタンをクリックします。

f:id:BeansWorks:20180131234032p:plain

 

④「値一覧名:」に「Company」と入力し「フィールド指定...」をクリックします。

f:id:BeansWorks:20180131234107p:plain

 

⑤最初のフィールドの値に「Estimate」テーブルの「Company」フィールドを指定し[OK]をクリックします。

f:id:BeansWorks:20180131234132p:plain

 

「Contact::Tel」

①[表示]-[インスペクタ]でインスペクタを表示させてから「Contact::Tel」フィールドをクリックで選択します。

②インスペクタのデータタブを選択し[動作]-[インプットメソッドの設定]を「半角英数字」に変更します。

f:id:BeansWorks:20180131234225p:plain

 

「Contact::Email」

※「Contact::Tel」と同様に「半角英数字」に変更します。

 

 

「memo::IPdate」

①[表示]-[インスペクタ]でインスペクタを表示させてから、「memo::IPdate」フィールドをクリックで選択します。

 

②インスペクタのデータタブを選択して、[フィールド]-[コントロールスタイル]をドロップダウンカレンダーに変更後、[カレンダーの表示切り替え用アイコンを表示]のチェックボックスにチェックを入れます。

f:id:BeansWorks:20180131234432p:plain

 

   9.タブ順の設定

ブラウズモードまたは検索モードで tab キーを押すと、デフォルトでは、左から右、上から下へとカーソルがフィールド間を移動します。 このデフォルトのタブ順を変更したり、必要に応じてフィールドを除外したりすることができます。

 

9-1.レイアウトモードで、[レイアウト] メニューから [タブ順設定...] を選択します。

f:id:BeansWorks:20180131234651p:plain

 

9-2.[ タブ順設定] ダイアログボックスとともに、番号を含んだ矢印がレイアウト上の各フィールド、タブコントロール、およびボタンに表示されるので必要に応じて矢印に表示されているタブ順の数字を変更します。

 

   10.リストレイアウトの作成

10-1.レイアウトモードで[レイアウト]-[新規レイアウト/レポート...]を選択してアシスタントウインドウを表示します。

 

10-2. [レイアウト名]に「List」と入力し、[コンピュータ]-[リスト]を選択したら「完了」ボタンをクリックします。

f:id:BeansWorks:20180131234746p:plain

 

10-3.リストレイアウトが追加されました。

f:id:BeansWorks:20180131234822p:plain

 

10-4.フィールドピッカーよりドラッグアンドドロップでフィールドを配置しレイアウトを調整します。

f:id:BeansWorks:20180131234905p:plain

 

 

   11.ボタン設定

ボタンを設定することによりワンクリックで様々な操作や処理をすることができます。

 

「レイアウト切り替え」

「Contact」と「List」レイアウトを切り替えて表示するボタンを作成します。

 

11-1.「Contact」レイアウトをレイアウトモードで開きステータスツールバー上にあるボタンツールを使用して、レイアウトのヘッダー部分にボタンを作成します。

f:id:BeansWorks:20180131235118p:plain

 

11-2.[ボタン設定]ウインドウで [切り替え/移動]-[レイアウト切り替え]の動作をクリックし、オプションで[指定]-[レイアウト]を選択する。 

f:id:BeansWorks:20180131235151p:plain

 

11-3.[レイアウトの指定]ウインドウで [List]を指定し[OK]をクリックする。 

f:id:BeansWorks:20180131235333p:plain

 

11-4.[ボタン設定]ウインドウに戻ったら[OK]ボタンをクリックしてウインドウを閉じ、「List」のレイアウトモードでボタン名を「List」と入力する。

f:id:BeansWorks:20180131235400p:plain

 

「関連レコードへ移動」

「List」レイアウトの「‘No」をクリックすると「Contact」レイアウトの該当する 「‘No」のレコードを表示することができるようにボタンを設定します。

 

11-5.「List」レイアウトをレイアウトモードで開き、[Ref_No]フィールドを右クリックし、[ボタン設定]を選択します。

f:id:BeansWorks:20180131235645p:plain

 

11-6.[ボタン設定]ウインドウで[関連レコードへ移動]という動作を選んでからオプションの[指定...]ボタンをクリックします。

f:id:BeansWorks:20180131235719p:plain

 

11-7.[[関連レコードへ移動]のオプション]ウインドウで[関連レコードの取得元]と[レコードの表示に使用するレイアウト]を「Contact」に設定し、[結果オプション]の[関連レコードのみを表示]にチェックを入れます。

f:id:BeansWorks:20180131235817p:plain

 

11-8.「List」レイアウトで「Ref_‘No」をクリックすると「Contact」レイアウトに切り替わり、クリックした「Ref_No」のレコードが表示されます。

 

   12.起動時レイアウトの指定

起動時に表示するレイアウトを指定することができます。

 

12-1.[ファイル]-[ファイルオプション...]を選択すると[ファイルオプション「Contact」]ウインドウが表示されるので [開く]タブで[表示されるレイアウト]のチェックボックスをチェックして[指定…] ボタンをクリックする。

f:id:BeansWorks:20180202000442p:plain

 

12-2.[レイアウトの指定]ウインドウで[Contact]レイアウトを指定し[OK]をクリックする。

f:id:BeansWorks:20180202000421p:plain

   13.デザインカスタマイズ

フォームやボタンをお好みのデザインに変更することができます。

「テーマの変更」によるデザインカスタマイズ

13-1.レイアウトモードで[レイアウト]-[テーマの変更...]を選択すると、「テーマの変更」ウインドウが表示される。

  

13-2.プレビューでデザインを確認しながら、お好みのレイアウトテーマを選択し[OK]ボタンをクリックする。 

f:id:BeansWorks:20180202000250p:plain

 

「インスペクタ」によるデザインカスタマイズ

13-3.レイアウトモードで[表示]-[インスペクタ]を選択し「インスペクタ」ウインドウを表示させます。

f:id:BeansWorks:20180202000227p:plain

 

13-4.次にボタンを選択します。

f:id:BeansWorks:20180202000158p:plain

 

13-7.「インスペクタ」ウインドウでアクションに連動したボタンの外観(カラー、フォント等)を変更することができます。

      f:id:BeansWorks:20180201000437p:plain 

  • その他のアイテム(フィールド、テキスト等)も必要に応じてカスタマイズしてください。

 

   14.カスタムスタイルとテーマの保存

カスタマイズしたデザインをテーマとして保存することができます。

14-1.「インスペクタ」ウインドウで[外観]-[スタイル]-[新規スタイルとして保存..]をクリックします。

f:id:BeansWorks:20180201000407p:plain

 

14-2.「スタイル名を指定」ウインドウでスタイル名を入れて[OK]をクリックします。

f:id:BeansWorks:20180201000348p:plain

 

14-3.同様に[テーマの変更を保存..]しておくことが可能です。(保存したテーマは他のデータベースで使用することができます。) 

f:id:BeansWorks:20180202000830p:plain

 

© 2015 BeansWorks All rights reserved