困りごと:めちゃ繊細なレイアウト
こんばんは🐇
今、納期前の対応で夜中まで働いていた余波で起きている時間帯なので、「こんばんは」と言わせていただきます、YASHIROです！ねむいです🐇
さて本日、
BIツールのTableauを使って、かなり細かいレイアウトのダッシュボードを組む要件と格闘しておりました。
要件がシビア、といったのは・・・
ひとつのダッシュボードに100個くらいの細かいアイテムが入るものを、「すべてをかっちり設計書通りのデザインで」
とのことでしたので・・・
まあ、ディスカッションのメモの一部だけ見せると、こんな感じ
これが縦にズラーと長くて、全アイテムがピクセル単位で決められているもの、とお考えください
tableauはデザイン用のツールではないので、こんなダッシュボードの実現は「本来は」困難です
本来は・・・
といったのは、
本来は「tableauはそういうものではないので」と断ってもいい要件
という意味です
でもクライアントの希望でこれを実現すべきとなったら？
いちおう、tipsを見つけました
そうです、やれなくもないのです
Tips:浮動で組んだほうがデザイン自由度が高い？！
tableauのダッシュボードを普通にコンテナで組んでいくと、
レイアウト画面に「タイル」というものが出てきて、水平オブジェクトも垂直オブジェクトも、すべてそのなかに収められますよね？
この「タイル」というやつが、どうやらクセモノで
タイルの中に「水平」や「垂直」を細かく組み合わせていっても、ちょっとした操作で、せっかく微調整しながら配置していた各オブジェクトのサイズが、勝手に伸縮させられてしまいます。
そうではなくて、
「このオブジェクトは、高さ80ピクセル、このオブジェクトは、幅200ピクセル・・・」というように、数値単位で入れ込みながら繊細なダッシュボードを作りたい時は？
これがベストプラクティスかはわかりませんが、私のやり方としては、こうです↓
注意点は、、、はじめに画面サイズと同じ大きさの浮動オブジェクトを作ったわけなので、その中の部品のピクセルの総和が、その浮動オブジェクトの高さ・幅を超えない事。簡単に言えば、高さ768ピクセルのオブジェクトに、高さ100ピクセルのオブジェクトを8個入れようとしても、最後に「ありゃ、足りない」となってしまいます。ま、当たり前ですが、、、。
最初に「高さ100ピクセルのオブジェクトを八個、縦に並べる設計なので、画面サイズの高さも800にしよう」と数値定義まで決まっているなら、おおいに使える技です（ただし、外部パディングを入れる場合は、パディング分のピクセルも計算に入れることを忘れずに！）
