【FileMaker】祝日をカレンダーに表示したい 2/2

[前回](https://qiita.com/tyuma/items/891f22ada032b28067e2)は、手動もしくはAPIを経由して、FileMakerに祝日データを取り込みました。
今回はそのデータを使って、カレンダーに祝日の色分けをしていきます。

まだ前回を読んでいない方は、参考までに読んでみてください。

https://qiita.com/tyuma/items/891f22ada032b28067e2

# この記事の対象者
初級者くらい。

カレンダーに限らず、色分けも色々方法はあると思います。
こちらでは、あまり難しくない初級者向けで解説していきます。
あまり凝った内容ではないですが、何かプラグインを入れてどうのこうのとか、APIを使ってどうのこうのはないので、いろんなところで応用ができる内容になっています。

# 最終ゴール
祝日テーブルを使って、祝日をカレンダーで色分けして表示します。
祝日テーブルを作るくだりは、前回の記事を参考にしてください。

https://qiita.com/tyuma/items/891f22ada032b28067e2

# この記事の範囲
最終ゴールである、FileMakerで表示している日付データの祝日に、色を使って表していきます。
[FileMakerのガイドブック](https://content.claris.com/ja/fmguidebook)初級編にも載っている、以下の技術を使ってレイアウトを見やすくします。

・ 集計用フィールドの一覧タイプ (初級編 第14章 14.5 集計用フィールド)
・ リレーションシップの「すべて」演算子 （初級編 第７章 7.4 リレーションシップグラフ参照）
・ 条件付き書式 (初級編 第13章 13.5.2 条件付き書式)

ガイドブックをお持ちの方は、この辺を使っているんだな〜と公式ガイドブックで確認してください。

# この記事の範囲外
FileMakerでのカレンダーの作り方は、「filemaker カレンダーの作り方」とキーワードを入れて検索してみてください。
ここでは、簡易的に日付フィールドを配置して、土日祝日の色分けの仕方を解説しているので、応用してみてください。

# 実装
では、実装していきましょう。
実装する順序は、次のとおりです。

1. 祝日テーブルに集計用フィールドの追加
2. テスト用にカレンダーテーブルを作成 （既にカレンダーがある場合は、そのカレンダーで実装してみてください）
3. カレンダーテーブルと祝日テーブルをリレーションシップグラフでつなぐ
4. レイアウトにカレンダーを配置する
5. カレンダーに条件付き書式で色分けを実装する

## 1. 祝日テーブルに集計用フィールドの追加
この追加は、チェックしたい日付が祝日かどうかを確認するためのリスト（一覧）です。
![スクリーンショット 2023-10-10 15.43.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/6014bd92-4bb3-1713-c8df-49cf3eec35de.png)

## 2. テスト用にカレンダーテーブルを作成
テスト的にカレンダーテーブルを作ります。
今回は、1ヶ月分の配列を用意しました。
![スクリーンショット 2023-10-10 15.43.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/d9ccbf4e-38f2-89f0-1c22-6f16d12148ba.png)

## 3. カレンダーテーブルと祝日テーブルをリレーションシップグラフでつなぐ
カレンダーと祝日テーブルを、「すべて(X)」でつなぎます。
つなぐキーは特に指定しないですが、ここでは主キーで繋いでいます。
![スクリーンショット 2023-10-10 15.42.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/114f4f33-8f3f-6ddf-658e-87a671ad3a36.png)
「すべて」は、何らかの意図的な目的があってつなぐのではなく、使用するレイアウトで祝日テーブルを条件付き書式で使いたいためだけです。

## 4. レイアウトにカレンダーを配置する
作成したテーブル、「カレンダー」をTOとして、レイアウトを作成し、カレンダーを配置します。
1ヶ月分の表示として、定義した31個の配列全てを表示しています。
![スクリーンショット 2023-10-10 15.43.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/036e2ee8-91d5-12b0-0bba-ffdaa6a8a6e4.png)

## 5. カレンダーに条件付き書式で色分けを実装する
配置したカレンダー配列に条件付き書式を追加します。
まずは、土日を設定します。
![スクリーンショット 2023-10-10 15.44.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/ceb5d6e3-ddda-f138-01d9-4e59fe60691a.png)
![スクリーンショット 2023-10-10 15.44.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/df277215-17a2-44e5-7f40-9a7b0820a4e4.png)
[DayOfWeek](https://help.claris.com/ja/pro-help/content/dayofweek.html)関数は、曜日を数字で返します。
7の時は土曜日、１の時は日曜日です。

次に、祝日を追加します。
![スクリーンショット 2023-10-10 15.44.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/91ca3c91-6c10-ddff-2da4-8abedc62936a.png)
今回は、[PatternCount](https://help.claris.com/ja/pro-help/content/patterncount.html)を使って、1で作成した祝日リストに入力した日付があるかどうか（祝日かどうか）をチェックして、日付が存在した場合は祝日ということで色を塗りつぶします。
ちなみに、[Substitute](https://help.claris.com/ja/pro-help/content/substitute.html)で"/"を"-"に変換していますが、これは、APIで取得した祝日のフォーマットが"-"で区切られていたので変換してチェックしていることになります。
入力したカレンダーの日付が"-"で入力されていた場合はしなくてもOKです。

実装は、ここまでです。

# 入力してみる
では、カレンダー配列に日付を入れてみます。
![スクリーンショット 2023-10-10 15.43.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/5b06af98-3dc4-6cd1-ea27-ebdf0311c5e5.png)
いい感じで土日祝日の色が入っていますね！

# 気をつけること
条件付き書式を追加するときの注意点です。
条件付き書式は、設定した順序で、つまり上からチェックされます。
このため、条件の順番には注意が必要です。

例えば、先に祝日チェックのPatternCountを入れた場合です。
![スクリーンショット 2023-10-10 15.46.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/4b1aeb62-14f8-f194-7d70-5e576793d01c.png)
5月の祝日で土日に被っているところで検証します。
![スクリーンショット 2023-10-10 15.47.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/6a8e7be2-20b9-26b3-39d8-df94a0e455bb.png)

こんなふうに先に祝日をチェックしますが、その後、順々と曜日をチェックしていくので、祝日ではなく土日と判定されてしまいます。
![スクリーンショット 2023-10-10 17.10.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/6e78cf18-f4ee-af5e-3862-f4270f0ef6c1.png)

こうならないために、条件付き書式の順序を戻し、祝日チェックを最後に持ってきます。
![スクリーンショット 2023-10-10 15.47.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/0b4c0a99-9cf1-9dba-b9fb-a4987f5e403f.png)

はい、ちゃんと祝日になりましたね！
![スクリーンショット 2023-10-10 17.09.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60538/a962ebd3-efab-5dbf-240b-a714a1dbf340.png)

これで、2回シリーズ終了です！