コンテンツにスキップ

ADR-0072: コードを動かす画面を、幅が 48rem 未満か高さが 500px 未満のときに狭い配置にし、高さが 500px 未満ではペインを左の縦のタブで切り替える

Status

承認

Context

スマートフォンを横に向けたときの、コードを動かす画面の配置の条件を決める必要がある。

Decision

コードを動かす画面は、幅が 48rem 未満か、高さが 500px 未満のときに、狭い配置にする。

  • 狭い配置では、ファイルの木を左のドロワーで出し、エディタ、端末、プレビューのペインを 1 つずつ切り替えて出す。48rem 未満の幅に 4 つのペインを並べると、1 つのペインの幅が 192px に満たず、幅 375px では 100px に満たないためである。
    • 縦向きの画面（幅が 48rem 未満で、高さが 500px 以上）では、ペインを下のタブで切り替える。
    • 高さが 500px 未満のときは、幅にかかわらず、下のタブの代わりに、左に縦のタブを置き、選んだペインを右に広げる。下に帯を置くと、ペインの高さがさらに減るためである。
    • 記事に埋め込んだ実行環境では、下のタブの代わりに、枠の上のタブでペインを切り替える。高さが 500px 未満の iframe では、ツールのページと同じく左の縦のタブにする。
  • テーマ変数のファイルに、高さの条件の custom variant を 1 つ置く（short、(max-height: 499.98px)）。
    • 幅の md と並べて使い、コードを動かす画面の外では使わない。ブレークポイントを md だけにした規則の例外を、この画面に限るためである。
    • コードを動かす画面のコンポーネントの外で short を使うと、check:utilities が失敗する。
  • 500px は、横に向けたスマートフォンを含み、PC のブラウザのウィンドウを含まないように選んだ値である。
    • 横に向けたスマートフォンの高さは、端末の短い辺からブラウザのアドレスバーとツールバーを引いた値になる。短い辺は多くが 320〜440 CSS px の見込みで（未確認）、500px より低くなる見込みである。
    • PC のブラウザのウィンドウの高さは、多くが 600px 以上の見込みである（未確認）。

承認の条件

  • ADR-0062 を先に承認していること。
  • 実機の iPhone の Safari を横に向け、ツールのページが左の縦のタブの配置になり、選んだペインが画面の高さいっぱいに出ること。
  • PC の Chrome のウィンドウの高さを 500px 未満にしたとき、左の縦のタブの配置になり、500px 以上に戻すと PC の配置に戻ること。
  • 記事の段（640px）に、高さ 500px 以上の iframe で埋め込んだ実行環境が、枠の上のタブの配置になること。
  • 高さ 500px 未満の iframe で埋め込んだ実行環境が、左の縦のタブの配置になること。

Considered Options

選択肢 強み 弱み
採用: 高さ 500px 未満でも狭い配置にし、縦のタブを左に置く 高さが低くてもエディタの高さを保てる 高さの条件の variant が 1 つ増える
幅だけで分ける ブレークポイントが増えない 高さ 375px に 4 つのペインが並び、エディタが数行になる見込みである
高さ 500px 未満でも下のタブにする 縦向きと同じコンポーネントで組める 下の帯の分だけ、ペインの高さが減る
横向きを orientation: landscape で分ける 向きの名前のとおりに読める 高さの低い PC のブラウザのウィンドウと、高さの十分な横向きのタブレットを分けられない

Consequences

Positive

  • 横に向けたスマートフォンでも、エディタと端末を 1 つずつ広く使える。

Negative

  • コードを動かす画面の配置が、下のタブの狭い配置、縦のタブの狭い配置、枠の上のタブの記事の埋め込み、PC の配置の 4 つになり、撮って確認する幅と高さが増える。
  • 高さの条件の variant は、ブレークポイントを md だけにした規則（packages/ui/design/tokens.md）の例外になる。