どうもシステム開発担当の山本です。待望(?)のFileMakerでガントチャートを作成の第2弾です。
実はこういう、グラフなどの動的なUIはFileMakerって得意ではないんですよね。JavaScript駆使してwebビューア上で作った方が品質の高いものが作れるんですが、「もっと手軽で簡単に安く作りたいよ」という方に向けて、標準機能のみを使って作ります。
今回は何をするかといいますと、ガントチャートの上にテキスト情報を乗っけてみようと思います。
完成図はこんな感じです。(必要最低限の項目しか作っていないので、見た目はあまりよろしくないですが、作り込めば可能性は無限大です。)
塗りつぶされたメモリの頭にテキストが表示されています。もちろん日付を変更すればテキストの位置も変わります。
では早速作り方を説明していきます。前回のガントチャートのブログの続きから...といきたいところですが、自分で見返してみるともっと分かりやすく書けよっ!!ってなったので最初から説明していきます。若干内容もシンプルになっています。
目次
●ガントチャートを作成する
1.方針
2.テーブル定義
3.レイアウト作成
●テキスト情報をのせる
1.方針
2.レイアウト修正
3.テーブル定義
4.レイアウト作成
Lesson1. ガントチャートを作成する
1.方針
一般的にガントチャートとは、メモリがあって、そのメモリに対応する日付が、その予定の期間に一致していれば色が塗りつぶされるというものです。
なのでこれをFileMakerで作成するには、色が変わるメモリ、メモリに対応する日付、予定の期間があれば良さそうですね。
2.テーブル定義
まず予約テーブルを作成します。今回必要なテーブルはこれだけです。
続いて、フィールドを作成します。
●ガントチャート開始基準日
グローバル格納の日付が入ります。
この日付がガントチャートに表示する最初の日付になります。
●ガントチャートメモリ別_日付
これがガントチャートの日付のメモリになります。基準日から繰り返し数だけ日付を計算します。
計算結果を日付にすることを忘れないでください。
●ガントチャートメモリ別_日のみ
ガントチャートメモリ別_日付はyyyy/mm/ddと文字数が多く、レイアウトに表示しきれないので、日にちのみを計算するフィールドを用意します。
●ガントチャートメモリ別_塗りつぶし
これは色が変わるメモリの役割をします。レイアウトに配置してから条件付き書式を設定し、色が変わるようにします。
●終了日
日付です。
●開始日
日付です。
●予約番号
シリアル値番号を入れます。
●予約名
テキストで予約の名称が入ります。
3.レイアウト作成
●データ確認用レイアウトを作成する
まず、データ確認用の表形式レイアウトを作成します。なくても大丈夫ですが、開発時にはデータを確認する用のレイアウトがあったほうが何かと便利です。
この段階でテストデータを作成しておきましょう。動作テストが捗ります。
●ガントチャートレイアウトを作成する
テーブルは”予約”で、表示はリスト形式のレイアウトを作成します。
パートはヘッダとボディを用意し、ヘッダには
予約::ガントチャート開始基準日,予約::ガントチャートメモリ別_日付のみ を配置します。
繰り返し数は31にしてますが、表示したいだけ配置してOKです。
ボディには、予約::ガントチャートメモリ別_塗りつぶしを配置します。
次にボディに配置した”予約::ガントチャートメモリ別_塗りつぶし”に条件付き書式を設定して色が変わるようにします。
繰り返し位置ごとに日付を評価して、予約の期間内であるかを計算する式です。
土日は灰色にするなど条件付き書式を追加しても面白いと思います。
こんな感じになればOKです。ここまでがFileMakerでガントチャートを作成する第一弾の内容になります。
Lesson2. テキスト情報を乗っける
1.方針
さて、ガントチャートの塗りつぶしに合わせてテキスト情報を配置するにはどうしたらいいでしょうか。これは非常に悩みました。冒頭にも記述したのですがFileMakerは動的な構造は苦手なんですよね。なので結構強引につくります。
ボトルネックは塗りつぶしの開始位置とテキストの開始位置を揃えることなんですが、これを1メモリ分の幅を”テキストの文字サイズの倍数”にすることで解決します。
つまり、テキストが14ptならメモリの横幅は 28pt(14の倍数) x 31(繰り返し数) = 868ptにするということです。あとはテキストの頭に倍数分の全角空白をくっつければOKという寸法です。
2.レイアウト修正
方針を踏まえて、レイアウトを修正しましょう。
今回はガントチャート上に表示するテキストを14pt、メモリ1つ分の幅を28pt、繰り返し数は31にするので、メモリの幅を868ptに調節します。
3.テーブル定義
予約テーブルにフィールドを2つ追加します。
●表示用テキスト開始位置
計算式フィールドにします。基準値から塗りつぶしメモリの前に何メモリあるかを計算して取得します。ない場合は0になります。
●表示用テキスト
1メモリ分の幅は文字2つ分にするので、空白は全角2個にします。
表示用テキスト開始位置の数だけ空白を頭に追加します。
4.レイアウトに追加
ボディの繰り返しフィールドの上に”予約::表示用テキスト”を14pt、左詰、幅868pt、背景透明でのせると完成です。
まとめ
繰り返しフィールドの幅をテキストサイズの倍数にするという条件がありますが、標準機能のみでガントチャートを作成することが出来ました。
条件付き書式をいろいろ追加して、予約が完了のものは塗りつぶしを灰色にするなど、状況に合わせて好きに拡張できますので、ぜひ“Myガントチャート”を作成してください。
2022-05-24
Webビューアを利用したカラーピックの作成と背景色を動的にする方法!!
2022-04-20
ポップアップメニューで空白を選択したい
2022-02-07
タブコントロールの移動を特定条件で移動できなくする!!
2022-01-14
filemakerでカラーパレット!?テキストの色を自在に変更する!!
2021-12-08
Filemakerで効果音を鳴らしたい
2021-11-24
FileMaker開発者コラム〜こだわりとはなにか〜
2021-10-15
特定のレコードの数を表示したい
2021-10-07
スクリプト内で複数の値をリスト形式のデータにして変数に納める!!
2021-09-21
プログラムの命名にも活かせる!?「日本語の良さを知ろう!」