方向と間隔 — 座標を使わない配置

第1回の画面はノードが三つで、それぞれ子を一つしか持たなかった。実際の画面はそうではない。

複数を抱えるノード

{ "type": "linear", "direction": "vertical", "spacing": 12, "alignment": "center",
  "children": [ ... ] }

linear は children を受け取る。そして決めるのは三つだけだ。

direction — vertical か horizontal
spacing — あいだの間隔
alignment — 交差軸の揃え

横に並べたければ、そのノードの direction だけを変える。子には触らない。

{ "type": "linear", "direction": "horizontal", "spacing": 16,
  "children": [
    { "type": "box", "width": 90, "height": 56, "decoration": { "color": "#ede9fe", "borderRadius": 10 } },
    { "type": "box", "width": 90, "height": 56, "decoration": { "color": "#ddd6fe", "borderRadius": 10 } },
    { "type": "box", "width": 90, "height": 56, "decoration": { "color": "#c4b5fd", "borderRadius": 10 } } ] }

box は大きさと見た目を持つ四角だ。子を入れればその子の器になり、入れなければ色を塗った面でしかない。上の三つは子が無い。

座標が無い

この画面定義のどこにも top・left・x・y が無い。ランタイムが怠けているからではない。

画面がサーバーから来るということは、画面を書いた側が、それが置かれる場所の大きさを知らないということだ。906バイトのこのファイルは、幅1000ピクセルでも、タブレットでも、半分に縮めたデスクトップの窓でも同じファイルだ。座標を書けば、その三つのうち一つでしか正しくない。

方向と間隔は、大きさを知らなくても書ける。だからこの層にはそれしか無い。

検査 — 座標が入れば失敗

grep -qE '"(top|left|right|bottom|x|y|dx|dy)"' screens/step2.json && \
  die "step2: the layout is positioned by hand"
grep -q '"direction"' screens/step2.json || die "step2: no direction"
grep -q '"spacing"' screens/step2.json || die "step2: no gap"

最初の一行と残り二行は向きが逆だ。最初は 有れば 失敗、残りは 無ければ 失敗。

この検査が要るのは、レンダー結果では区別がつかないからだ。座標で置いても今のこの絵と同じものが出る — 窓の大きさが変わらないあいだは。

レンダー

step2  906 B, 12 lines, type "page" -> step2.png

縦の linear の中に文字が二つと横の linear が一つ。横の中に色の違う箱が三つ。spacing が12と16なので、二つの層の間隔がはっきり違う。

大きさをどこまで書くか

box には width・height を書いた。座標ではないが絶対値ではある。

この線が実務では曖昧になる。基準は一つ — 外を知らないと決められない値なら、画面定義には書かない。 箱の大きさは箱自身の性質だから書けるし、箱の位置は兄弟と親を知って初めて決まるので linear に任せる。

自分で回してみる

cd content/sample/course-ui
bash verify.sh
open captures/step2.png

screens/step2.json の "direction": "horizontal" を "vertical" に変えて回すと、箱三つが縦に並ぶ。ホストには触らない。

持ち帰るもの

linear — direction・spacing・alignment
box — 大きさと見た目、子は任意
座標禁止の検査 — レンダー結果では区別がつかないので定義を見る

次回

ここまで画面は固定だ。ファイルに書いた文字しか出ない。次は、ファイルに無い値が画面に出る方法。