【FileMaker】TODOリストを作って改良していこう(4)ー開発設計と実装


さて、いよいよ開発設計ですね。
[前回](http://qiita.com/tyuma/items/8587ce3db285a6812839)は、業務設計をしていきました。
それを元にどう実装しようかな、というところです。

# 完了状態の決定

レイアウトを決める前に、前回の状態遷移図から、完了した時の状態をどう持つか決めましょう。
完了フラグや削除フラグで持ってもいいし、完了日付で持ってもいいですね。

今回は、「完了日付に日付が入っていたら、完了したこと」にしましょう。

# 機能の見積り

そして、最初に出た要件から、機能を見積ります。

・ 完了日付を入れたい
----> 完了日付のフィールドを作成する

・ 終わったら、終わったことがわかるようにチェックができるようにしたい
----> 完了チェックフィールドを作成する

・ 終わったTODOは、表示しなくていい
----> 完了日付か完了チェックフィールドに値が入っているTODOを対象外とする検索を実行する

・ どのくらいTODOがあるのか一覧で見たい
----> 一覧のレイアウトを作成する

・ 終わったTODOも履歴としてみたいので、残しておいて欲しい
----> 物理的に削除せず、論理的に削除する機能を実装する
----> 完了日付か完了チェックフィールドに値が入っているTODOを検索する機能を実装する

・ 忘れそうなことをメールで送って欲しい
----> TODOをメールを送信する機能を実装する

・ 「あと何日！」とか「あと何件！」というように自分を追い込んで欲しい
----> 選択しているTODOに「あと何日！」というようなメッセージを表示する
----> 一覧とは別に一つのTODOを表示するレイアウトを作成する
----> 一覧に「あと何件！」というメッセージを表示する

というところでしょうか。

このことから、

## レイアウト
・一覧
・TODOごとのフォーム
上記2つのレイアウトを実装

## ボタン（スクリプト）
・一覧とフォームを行き来する機能
・完了チェックをした際の完了日付をセットする機能
・未完了リストを表示する機能
・完了リストを表示する機能
・メールする機能
あたりでしょうか。

# テーブル設計

ではこれらを元にさっそく、TODOテーブルの項目をざっくり作ってみましょう。
![スクリーンショット 2015-12-09 23.57.46.png](https://qiita-image-store.s3.amazonaws.com/0/60538/e71faa27-dbf2-c703-31a6-37f27680aeaa.png)
はい、超ざっくりです^^;;;
でも、要望と設計の内容は反映されています。

idは、自動入力で1ずつカウントアップです。
作成日時と修正日時はFileMakerの標準機能である自動設定におまかせします。
おまかせできない完了日時は、完了フラグと連動し、完了フラグがONになったら完了日時を設定、OFFになったら完了日時をクリアすることにします。


# レイアウト

今回はiPhoneに入れたFileMaker Goで動かすので、レイアウトはiPhoneサイズで作ります。

## 一覧

チェックを入れれるように、まず値一覧で「ON」のみのものを作っておきます。
これは、単純にチェックボックスにチェックが入っているかどうかの判断をするのみです。

こんな感じで作ってみました。
![スクリーンショット 2015-12-10 0.02.41.png](https://qiita-image-store.s3.amazonaws.com/0/60538/aa0705d8-68b6-a5d2-1f9d-2e44918a28b2.png)
下は、表示に関するナビゲーションです。

左は「未完了」＝完了日時が入っていないTODOのみを表示します。
![スクリーンショット 2015-12-10 0.03.42.png](https://qiita-image-store.s3.amazonaws.com/0/60538/e4075e49-3b22-f34a-2a43-5eebf27f2103.png)

真ん中は「完了」＝完了日付が入っているTODOのみを表示します。
![スクリーンショット 2015-12-10 0.04.19.png](https://qiita-image-store.s3.amazonaws.com/0/60538/cb98ac5b-2c3e-8efd-bd27-17fc9b246d26.png)

右は要望では出ていませんでしたが、TODOを完了予定日順にみてこなしていきたい、ということもあると思うので、完了予定日の降順ソート機能を追加してみました。
![スクリーンショット 2015-12-10 0.05.01.png](https://qiita-image-store.s3.amazonaws.com/0/60538/62f078b7-dc01-85b1-3330-c5b7b1e4bdb7.png)

## フォーム

では、１件ずつ表示するフォームをみていきましょう。
フォームに盛り込む内容は、一覧に戻れることとメールが送れることをまず実装してみましょう。

盛り込むとこんな感じです。
![スクリーンショット 2015-12-11 8.45.52.png](https://qiita-image-store.s3.amazonaws.com/0/60538/2f726ac5-7619-7c94-9e64-a203c9b6912d.png)

一覧に戻る箇所です。
![スクリーンショット 2015-12-11 8.46.13.png](https://qiita-image-store.s3.amazonaws.com/0/60538/5d48eeee-edfa-0ced-0535-673e0f862ad4.png)

完了フラグがチェックされたら、完了日時が入るようにスクリプトトリガを設定します。
![スクリーンショット 2015-12-11 8.46.36.png](https://qiita-image-store.s3.amazonaws.com/0/60538/4b8026c2-3ec7-ac17-a77a-ea98451f7a5b.png)

メール送信は上に設置するか下に設置するか迷いましたが、毎度実行することではないので下に配置してみました。
![スクリーンショット 2015-12-11 8.47.13.png](https://qiita-image-store.s3.amazonaws.com/0/60538/b9ddc261-8971-d6a7-8763-a22422e3e7e9.png)

メールの設定は、ワンスクリプトで大丈夫です^^
![スクリーンショット 2015-12-11 8.47.34.png](https://qiita-image-store.s3.amazonaws.com/0/60538/a60d85a7-a12c-4ad5-a4cb-25ed03a7e560.png)

# 使ってみる（テスト）

何件か追加してみました。
![スクリーンショット 2015-12-11 8.51.49.png](https://qiita-image-store.s3.amazonaws.com/0/60538/b5d05bc8-afcc-d59f-612b-da984e1a492e.png)

フォームへは「→」ボタンで遷移できます。
詳細なメモを書くときは、このフォームに移って書く、という感じです。
![スクリーンショット 2015-12-11 8.49.26.png](https://qiita-image-store.s3.amazonaws.com/0/60538/7e36537b-4236-6508-f229-df8a17715823.png)

メールボタンを押して、メールを受信してみました。
![スクリーンショット 2015-12-11 8.50.02.png](https://qiita-image-store.s3.amazonaws.com/0/60538/3e8ac249-87af-4265-5fe5-872f67713b06.png)
OKですね^^

完了日付を入れてみます。
![スクリーンショット 2015-12-11 8.52.06.png](https://qiita-image-store.s3.amazonaws.com/0/60538/cfc65b73-ce84-b577-6359-116a8712f6ff.png)

完了日時が入りました！
![スクリーンショット 2015-12-11 8.53.07.png](https://qiita-image-store.s3.amazonaws.com/0/60538/d5f7b17e-943b-80e6-6146-d12fb62e6835.png)

未完了リストも表示してみましょう。
３件入れたうち、１件完了したので、２件表示されます。
![スクリーンショット 2015-12-11 8.52.13.png](https://qiita-image-store.s3.amazonaws.com/0/60538/26fb032f-ad27-5cde-c05e-23712a2cbe3d.png)

完了リストも表示してみます。
![スクリーンショット 2015-12-11 8.52.29.png](https://qiita-image-store.s3.amazonaws.com/0/60538/b6d3e0f6-1b32-9e0b-2339-5988e8791bb9.png)

ソートもやってみます。
![スクリーンショット 2015-12-11 8.52.51.png](https://qiita-image-store.s3.amazonaws.com/0/60538/dfed796d-1120-fffa-cfa9-2247156f045d.png)

なかなかいい感じですね。

# 追加

では、もう少し要件を追加していきます。
件数表示と「あと何日」というのを計算して表示していきます。

フィールドを追加します。
実は検索した時にその時の件数が出るようにするだけです。
![スクリーンショット 2015-12-11 9.09.51.png](https://qiita-image-store.s3.amazonaws.com/0/60538/170fb69e-9a02-ede6-248a-3ebf58744c47.png)

一覧に配置してみます。
![スクリーンショット 2015-12-11 9.11.50.png](https://qiita-image-store.s3.amazonaws.com/0/60538/ed7126e8-f455-27a5-6e8b-b2436a6ac966.png)

こんな感じで集計結果が表示されます。
![スクリーンショット 2015-12-11 9.14.14.png](https://qiita-image-store.s3.amazonaws.com/0/60538/da228fda-bbb2-2f44-06ff-e69642318431.png)

次に、「あと何日」をフォームに配置します。
表示のみなので、マージフィールドで追加しました。
![スクリーンショット 2015-12-11 9.13.04.png](https://qiita-image-store.s3.amazonaws.com/0/60538/74302dac-5594-b49c-8140-fda535dd7786.png)

一覧の件数も表示のみなので、マージフィールドでも問題ないです。

「あと何日」は、完了日付のそばに出しました。
![スクリーンショット 2015-12-11 9.14.03.png](https://qiita-image-store.s3.amazonaws.com/0/60538/aa16d439-7e15-3195-cc84-54e5afc79513.png)

なかなかよろしいんではないでしょうか！？
では、次回はいよいよiPhoneに入れてやってみましょう！