ADR-0027: トップの庭の絵を、訪問者の端末の日付と時刻で、季節と時間帯ごとに変える¶

Status¶

承認

Context¶

トップの庭の絵を、季節と時刻で変えるかと、その決め方を決める必要がある。

• 運営者は、舞う物を季節で変えると決めた。春は桜、秋は紅葉、冬は雪である。
• 運営者は、季節を現実の時間に応じて変えると決めた。
• 運営者は、時刻でも絵を変えると決めた。
• サイトは静的なファイルで配る。Worker の deploy は、運用者が deploy workflow を手で起動したときだけ行う。
• テーマ（ライトとダーク）は、訪問者か OS が選ぶ。
• トップの庭は、three で描き、庭を出すときだけ場面の束を読み込む。
  • ADR-0026: トップの最初の訪問で水墨の門を描き、門をくぐった立体の庭にプロフィールを置く

Decision¶

季節と時間帯を、訪問者がページを開いた時点の端末の日付と時刻で決め、庭の絵を変える。

• 決め方
  • head のスクリプトが、季節と時間帯を html の属性に書く。ビルドの日付は使わない。deploy が手で起動したときだけなので、季節が古いまま残るためである。
  • 季節は月で分ける。3〜5 月が春、6〜8 月が夏、9〜11 月が秋、12〜2 月が冬である。二十四節気では、8 月上旬から紅葉が舞い、体感とずれるためである。
  • 季節は、境目の日に切り替える。2 つの季節の物は混ぜない。
  • 時間帯は 4 つに分ける。5〜10 時が朝、10〜16 時が昼、16〜19 時が夕、19〜5 時が夜である。
  • 南半球の訪問者にも、日本の季節を出す。絵は日本の庭で、日付からは半球が分からないためである。
  • スクリプトが動かないときは、庭を出さないので、季節と時間帯の絵も出さない。
  • 季節と時間帯を選ぶ URL の引数は、開発のビルドだけに残す。
• 季節で変わるもの
  • 舞う物は、春が桜の花びら、秋が紅葉、冬が雪である。夏は蛍で、夕と夜だけに出す。
  • 舞う物の数は、春が 70、夏が 34、秋が 60、冬が 110 から始める。
  • 季節の木の葉が変わる。春は桜の花、夏は青もみじ、秋は紅葉である。冬は枝だけになり、白砂と苔が白くなる。
• 時間帯で変わるもの
  • 空と霞の色、光の色と向き、日と月、灯籠の明かり、和紙と字の色が変わる。墨の濃さは変えない。
• テーマとの関係
  • 場面の色は、時間帯で決める。
  • 紙と墨の色（イントロの墨の絵、端の余白、ボタン）は、テーマで決める。夜の場面の端の余白だけは、夜の霞の色にする。
• 組み合わせ
  • 時間帯の色の表と、季節の表を掛け合わせる。組み合わせごとの素材は持たない。

承認の条件¶

実装の中で、次を確認する。

• 16 通りの絵を、ライトとダークで目で確認する。
• 文と和紙のコントラストを、時間帯とテーマの組み合わせごとに測り、4.5:1 以上にする。ライトのテーマの夜と、ダークのテーマの夕は、試作で和紙が中間の明るさになった。
• 冬の雪（110 個）と、葉の多い季節のコマの数を測る。コマが落ちる端末での扱いを決める。

Verification¶

design/prototypes/top/ の試作（i-mon.html）で確認した。

• 4 つの季節の昼の絵と、秋の 4 つの時間帯の絵を、ライトとダークで撮った。
• 季節と時間帯を決める head のスクリプトは、訪問の回数の判定と場面の束の読み込みを含めて 854 バイトだった。
• 舞う物は、「動きを止める」のボタンで止まった。
• コマの数を測ったのは、秋の昼だけである。
• 端末の日付と時刻を変えての確認はしていない。URL の引数で確認した。

Considered Options¶

Consequences¶

Positive¶

• 訪れるたびに、季節と時刻に合った庭が出る。
• 絵を変えるための deploy と、組み合わせごとの素材が要らない。

Negative¶

• 文と和紙のコントラストを、時間帯とテーマの組み合わせごとに確認する必要がある。
• 見た目の回帰のテストは、季節と時間帯を固定して撮る必要がある。
• 場面だけの色が、時間帯ごとに 20 個を超える。