講座ページをミラーカラムに揃え、タイポグラフィとSVG拡大を共通モジュール化する
同じ講座なのに、片方だけ矢印キーで動く
税務講座の入門ページを開くと、左に見出しの列が並び、右に本文が流れる。矢印キーを叩けば隣へ移る。読み進めるあいだ、マウスに手を伸ばさなくて済む。
一方、書いたばかりの財務諸表Q&Aは1本ずつ独立したページになっていて、次を読むには一覧へ戻って選び直す。200問ぶんこれを繰り返す気にはならない。
そこで、Q&Aの記事をまるごと税務講座と同じミラーカラムに寄せることにした。頭にプロジェクト名、講義ノート、記事タイトルの階層が出て、矢印キーで隣へ動く。今どこを読んでいるのかが上に出る。
おそらくセクショントピックで全部まとめられるだろう、という見当もあった。Q&Aは問いごとに独立していて、税務講座のように章と節が積み上がっているわけではない。それでも節に相当する単位さえ決まれば、同じ器に流し込めるはずだ、と踏んだ。
お手本はどう組まれているか
指示そのものは「こういう感じのミラーカラムレイアウトに全部してくれませんか」の一言で済む。ただ、実装より先に、お手本のページがどう組まれているかを確認させた。見てもらったのは、ページの構成、データの形、キー操作が入っているかどうかの3点だ。
寄せる先の作りを読まないまま似た見た目を組み直すと、あとで本物と細部が食い違う。似ているが同じではないページが2種類できて、直すたびに両方を触ることになる。
確認が済んでから、7問ぶんの表示を切り替えさせた。「決算情報の入手と実務」の7問は、税大講本と同じミラーカラムで出るようになった。見当のほうも外れてはいなかった。
歯抜けのページが404を返す
Q&Aには200問ぶんの器がある。本文が入っているのはまだ一部で、残りは歯抜けだ。番号だけあるページを開くと404が返ってくる。
書いていないのだから404で正しい、とも言える。ところが、矢印キーで渡り歩く前提だと話が変わる。左右に動いた先が404なら、そこで移動が止まる。その先に何問あるのかも伝わらない。
「404にするんじゃなくて、簡易的なページでいい。TBDとか一言入れるだけでいい」と伝えた。返ってきたのは「執筆予定（TBD）」の1ページで、開いても404にはならなくなった。
見てから、条件をひとつ足した。ページを作ったうえでミラーカラムは維持してほしい。つまり、矢印キーで全部動きたい。
プレースホルダーもミラーカラムのまま表示され、← → キーで200問すべてを渡れるようになった。書いていない場所には「執筆予定」の札が立っているだけで、移動は止まらない。
すでにやっている気がする
次に、見た目そのものに手を入れた。対象は、コンテンツ領域の左右のマージン、本文の文字の大きさ、h1からh6までのフォント設定だ。これをコンポーネントにまとめて、どの講座にも同じものを当てたい。
講座はこれから増える。増えるたびに同じ指定を書き写していては、直すときにどれが正なのか分からなくなる。
伝えている途中で引っかかった。すでにやっているような気もする。もともと公開している講座のレイアウトを見てくれ、と付け足した。
勘は当たっていた。仕組みは前からあって、新しく書いたQ&A側がそこに乗っていなかった。まず「すでにあった仕組みと、ずれていた点」を並べてもらった。
そのうえで、本文のタイポグラフィを共通モジュールに切り出させ、税大講本とQ&Aの両方に当てた。揃ったのは、本文カラム760px中央、文字1.125rem、行間2、それにh1からh6までの設定だ。Q&Aの記事も、税大講本と同じ設定で描画される。
新規に作るのではなく、あるものに乗せ直す作業だった。自分の「気がする」を口に出しておいてよかった、と思う。
クリックしても拡大しない
共通の見た目を当てたQ&Aを見ていて、部品がひとつ抜けているのに気付いた。SVGをクリックしたときに拡大表示するモーダルが、こちらには付いていない。
拡大できなければ、図は本文の幅に収まったサイズのまま読むことになる。線と文字の細かい図では、そこが読めるかどうかの分かれ目になる。
これも共通化させた。ライトボックスをモジュールに寄せて、本文の見た目とあわせて全講座に一括で当てた。Q&AのSVGをクリックすると、税大講本と同じモーダルが開く。
抜けに気付けたのは、両方のページを行き来していたからだ。共通化は同じ設定を当てる作業だと思っていたが、実際には「あちらにあって、こちらにない部品」を探す作業でもあった。
テーブルの幅という例外
もうひとつ、先に言葉にしておきたい制約があった。コンテンツのmax-widthは税務講座にも設けてある。ただしテーブルだけはその外に出して、コンテンツ幅いっぱいに広げてよいことにしている。表をmax-widthに押し込むと幅がギチギチになって読みづらいからだ。
共通モジュールに寄せるとき、この例外ごと均されると困る。税大講本のほうを正確に見てほしい、と伝えた。
確認の結果、その挙動は共通モジュールでもそのまま残っていた。税大講本の幅の決まり方は変更前と同じで、テーブルだけがmax-widthの外に出る。
ついでに、直前に出したはずの指摘が、すでに直っていたことにも気付いた。再読み込みしたら反映されていた。直っていなかったのではなく、自分が古い画面を見ていた。
今日の整理
- お手本があるなら、実装より先にお手本の組み方を読ませる。ページの構成、データの形、キー操作の有無を押さえてからでないと「同じにして」は始まらない
- 歯抜けを404で返すと、キー操作の導線がそこで切れる。中身がなくてもページは返す。TBDの一言で足りる
- 「すでにやっている気がする」は当たった。仕組みはあって、新しく足した側が乗っていなかった
- 共通化の前に、例外の制約を言葉にしておく。テーブルだけmax-widthの外、のような取り決めは黙っていると一緒に均される
- 直っていないように見えたら、まず再読み込み
ライトボックスは、自分が気付いたから戻ってきた。気付かないまま揃っていない部品が、まだどこかに残っている可能性は消えていない。次に講座を足すとき、同じ探し方をもう一度やることになる。