初心者にもわかるファイルメーカーの
使い方

Webビューアを利用したカラーピックの作成と背景色を動的にする方法!!

2022-05-24 |  

こんにちは、1ヶ月のランニング量が100kmを超えそうなfilemakerチームの久保田です!!
実家に帰るたびに太ったことを親に煽られるので、痩せたいです、、、

今回書かせていただく記事はwebビューアを利用したカラーピックの作成と、背景色を動的に変更する方法を紹介させていただこうと思います。

今回の記事の流れはこの通りです。

1、カラーピックの作成
2、背景の作成

1、カラーピックの作成

カラーピックはhtmlのinputタグを利用して、作成していきます。
記述するhtmlは以下の通りです。

inputタグ内にあるvalue属性で読み込んだ際に表示される色を指定できます。
ここは動的にしたいので、いつでもデータを置換できるように値を入力しています。

このhtmlのデータをフィールド等に格納します。

格納する理由としては、webビューアで直接記述した場合、ダブルクォーテーションが記述されているため、そのまま記述するとエラーになるためです。
「\」の入力でエスケープ文字に対応はできますが、フィールド入力させたほうが、そこの考慮をしなくて大丈夫になります。

次にカラーピック用のwebビューアを作成します。

この設定のポイントは2点あります。

1つ目はhtmlの文で初期値というテキストを書き換えているという点です。
「html::カラー」は選択した色情報のデータを格納するためのフィールドとして用意しています。
初期値を「html::カラー」に変換することで、webビューアを読み込んだ際に、現在選択されている色が表示されるようになります。

2つ目は「JavaScriptによるFileMakerスクリプトの実行を許可」にチェックを入れるという点です。
こうすることで、JavaScript側からFileMakerスクリプトを実行することができます。

2、背景の作成

背景もWebビューアを利用して、ボディに対して、覆うように配置します。
記述するhtmlは以下の通りです。

次にWebビューアの設定をします。

カラーピッカーと同じようにRGBデータと記述されている部分をカラーピッカーで選択した色データに置換するようにしています。

では試していきます!!!

カラーピッカーで選択した色にボディの色が変化しています!!!

いかがだったでしょうか。
FileMakerで色を動的に扱うというのは難しいと思います。
今回紹介した方法では仕様によっては難しいこともあると思いますが、この記事をもとに色を動的に扱う足掛かりになれば幸いです。

ではこれで終わらせていただきます。
ご精読ありがとうございました!!