【FileMaker】進捗を見える化する

今年もやってきました、Qiita Advent Calendar 2018、みなさまいかがお過ごしでしょうか。
この25日間、小窓が開くのを毎年楽しみにしている私です。

今回もFileMakerの小窓を開くのにあたり、何がいいか悩みました。
最新のバージョン17に特化した記事にするか、それともどのバージョンでもできそうな小ネタにするか。。。
初心者向けの記事を中心に提供している私としては、やはりどのバージョンでも動くものの方が万人受けするだろうと思い、ほぼどのバージョンでもできる小ネタにしました。

今回は、「進捗を見える化する」です。

どういうことかというと、「どこまでできたかを、職場の言語やレベルを取っ払ってもきちんと把握することができるような見せ方をFileMakerで実装する」ということです。

長ったらしいですが、要は「図的な表現にすれば見栄えもいいし、目に留まる率も高くなるだろう」という見え見え感ありの実装です。

動き

まずは、動きを確認してください。
https://youtu.be/s7nUcpbVlGw

どうですか?
動画では、動きとともに実装もチラ見せしていますので、動画だけでも実装の参考になりますよ。

実装の詳細

単純な入力とラジオボタン

まずは、単純に進捗率の入力として、
・数値入力
・ラジオボタン
の実装です。
これは、誰でも普通に(?)実装する方法ですよね。

進捗_数値入力.png
数値ラジオボタン.png

ただ、ラジオボタンのやり方は、あまりやらないです。
どちらかというと、チェックボタンセットの方が多いのではないでしょうか?
進捗1が終わり、進捗2、進捗3と進む、、、という流れの場合は、それぞれの進捗ごとにチェックできるチェックボタンセットの方が都合いいと思います。
進捗_チェックボックスセット.png

これらのやり方は、単純にFileMakerの「コントロールスタイル」で実装可能です。
コントロールスタイル.png

この基本的な実装でも進捗は見える化すると思いますが、これをさらに絵的に仕上げていきましょう。

ボタンをクリックしたら進捗入力されたことにする

ボタンをクリックしたら、そのステップの進捗が済んだということで、自動で進捗力を入力し、さらに進捗済みであることが一目でわかるようにボタンの色を変える、という仕組みです。
進捗_ボタン1.png

この実装は、
・1行スクリプト
・条件付き書式
を使って実装しています。

それぞれのボタンでは、進捗ごとのフィールドに進捗率を自動で入力します。
進捗_ボタン2.png

条件付き書式では、進捗率が入力されている(20か、それ以外か)かどうかの条件により、文字色と背景色の切り替えを行います。
進捗_ボタン3.png
進捗_ボタン4.png
忘れがちなのは、2個目のOFF状態の時の設定です。
以外と、ベース部分について設定し忘れがちですが、忘れずに基本状態も書式を設定します。

進捗バー

次は、ちょっとかっこいい進捗バーの実装です。
進捗_バー1.png
進捗率っぽいですよね!
この実装は、先ほどのボタンクリックの応用です。

ボタンを隙間なく並べます。
進捗_バー2.png
そして、ボタンのフィールド設定や条件付き書式は、先ほどのボタンクリックと同様に仕上げます。

違うところは、ボタン中央に配置したテキストです。
進捗_バー3.png
よく見えませんが、進捗率が隠れています。

進捗_バー4.png
そのテキストを、進捗率が入力されて全体的なパーセントになったら文字列を表示する、という設定です。
次の進捗2では、全体の進捗率が40%になったら現れます。
そんな感じで、次々とボタンの隠し文字の実装をすると、進捗バーの完成です。

積み上げてコップの水位のように見せる

次は、先ほどの横に広がった進捗バーを、縦に積み上げてコップの水位のように見せるやり方です。
進捗_積み上げ1.png

これも単純です。
縦に隙間なく積み上げます。
進捗_積み上げ2.png
条件付き書式は、今までと同じです。

違うところは、外側(100%、0%)の角を丸くする、というところでしょうか。
コップにこだわるなら、0%の底は丸くしなくてもいいです。
進捗_積み上げ3.png

途中にある進捗は、丸くせずにすると、コップに見えます。
進捗_積み上げ4.png

円図形で表示する

では、入力はないですが、表示のみということで、円図形のような実装を紹介します。
進捗_円グラフ1.png
ちょっとかっこいいですね。

レイアウトモードにすれば、こんな感じで、円が重なっています。
進捗_円グラフ2.png
やり方は、先ほどのコップの実装を円図形にしただけですが、だいぶ違って見えますよね。
違うところは、円の重ね方です。
↓トンネルのようですよね。
進捗_円グラフ5.png

分解してみます。
進捗_円グラフ3.png
外枠を最下位にして、100%、80%、、、と円を上に重ねていきます。
重ねる順番が逆だと、100%の円が上になるので20%などの小さな円が100%の円に被って思った通りに表示できませんので、注意してください。

メータ表示

最後に、メーター標識のような表示の仕方です。
さっきの円図形よりもだいぶかっこいいです。
進捗_メーター1.png

レイアウトモードでみてみます。
進捗_メーター2.png

これは、小さめの円と大きめの円を重ねています。
進捗_メーター3.png

小さい円は、背景と同じにすることで、なんとなくメーターっぽくなっています。
進捗_メーター4.png

大きい円は、色をグラデーションすることで、進捗の危険度合い・終了度合いなどを表現しています。
進捗_メーター5.png

では、メーターの針はどうなっているんでしょう?
進捗_メーター6.png
はい、先ほどの円図形の実装と同じく、進捗の累積を計算して針の表示・非表示を行なっています。

サンプルファイル

今回のサンプルファイルは、GitHubにアップロードしてありますので、ご自由にダウンロードして現場で役立ててください。
Sample_ButtonSwitchProgress.fmp12というファイル名です。
Github Repository : FileMakerSample

まとめ

いかがですか?
進捗の表現もFileMakerで色々実装できますね!
生産現場などでは、複数の工程を経て製品が出来上がるので、生産の進捗を表現する機会は多いと思います。
手軽にFileMakerで進捗を管理し、見える化をしてハッピーになってくださいね。

では、楽しいFileMaker Lifeを!