![見出し画像](https://assets.st-note.com/production/uploads/images/120206983/rectangle_large_type_2_579cc64a52d163abc278876c074ff037.png?width=1200)
【FileMaker】透明ボタンの擬態をとく
透明ボタン、それは
そこにあって、そこにはないもの。…いや、ある!あるよ!
レイアウトで、背景色なし枠線なしで見えないけど
クリックしたら何か処理したい場合があります。
個人的にはあまり多用したくないけど、仕方ないときもある。
例えば、こんなとき。
例)この分類エリア内どこかがクリックされたら、詳細画面へ
![](https://assets.st-note.com/img/1698551515018-9CHpL7Hxl9.png)
普段はこんな作りにしませんが、例ということで。
ではレイアウトモードでは というと
![](https://assets.st-note.com/img/1698554286641-idcWqQ0tsV.png)
ボタン見えない。分かんないいぃぃ!
透明な生物でも内臓くらいは見えてるよ。
気づかれないということは、不具合にも繋がるということ。
開発者への存在アピールが必要です。
なので私は以前は近くに赤字で注意書きをしていました。
「この画面には透明ボタンを置いています」と。
大体大きい範囲の使い方だったので。
これでも良さそうな気がしますが、複数あったり小さいとやり辛い…
で、この困ったカメレオンを見える化するアイデアを先日頂きました。
基本的には使いませんが、なにか目立つ色をつけておいて、条件付き書式: 「計算式 1 」で塗りつぶし色:透明 とすれば、レイアウトモードの時だけ見えたり... pic.twitter.com/ZTCCjnohl6
— tomida (@qbxxdp) October 26, 2023
条件付き書式で1(True)にしておき、塗りつぶし色を"なし"にする。
天才ですか。
更に、ボタンの下に何を置いてるのかも見たいので、
下記のようにしてみました。
色を半透明にした上で、条件付き書式で背景色を"なし"に設定します。
![](https://assets.st-note.com/img/1698557844001-2cTqOcxB6w.jpg?width=1200)
これで見逃すことはないと思います。
しかし。画面によっては装飾に見えてしまう可能性もあるんじゃないかと思い、更にもう一段階アピールすることにしました。
それがこちら
![](https://assets.st-note.com/img/1698558372051-nKXt5E7Ybc.jpg?width=1200)
透明ボタンですよ というアイコンを表示しておき、
条件付き書式で背景色と、アイコンを"なし"に設定しておきます。
透(トオル)君の印鑑ではありません。
これで、レイアウト画面でも分かりやすく認識できて、
ブラウズモードでは透明で見えないようになりました。
開発ルールにも設けたいですね。
せっかく作ったので、配布します。
ご自由にお使いください。(商用利用可、二次加工・配布可)
この記事が気に入ったらサポートをしてみませんか?