画面の中で、何が変わるか

HTML、CSS、JavaScriptを、読書メモの実際の操作へ対応させます。画面の状態を分けると、見た目と動作の修正を具体的に頼めます。

この回は、しくみを読むことと、実際の結果を確かめる練習を組み合わせます。付属見本はブラウザーだけで保存する一人用の版です。アカウント・データベース・共有は拡張課題として扱います。

構造、見た目、動きを対応させる

読書メモで登録ボタンを押すと、画面が変わります。その裏では、構造、見た目、動作を担当する記述が組み合わさっています。すべてを書けるようになる前でも、役割を分けて見ておくと、AIへ『文字を大きくする』と『保存を直す』を別の作業として渡せます。

HTMLは、内容の構造を記します。読書メモなら、見出し、題名の入力欄、メモ欄、状態の選択、登録ボタン、一覧です。MDNの入門では、見出しや段落、一覧を要素で区別することが説明されています。大きな文字を置いただけで見出しの意味まで表せるとは限らず、内容の役割を記す必要があります。資料 S24

CSSは、HTMLの要素をどのように見せるかを決めます。文字の大きさ、行間、余白、色、並び方を扱います。題名とメモの間が狭くて読みづらいなら、見た目の指定が修正候補です。題名が一覧へ増えない問題とは、確認する場所が違います。MDNもCSSを見た目を指定する言葉として説明しています。資料 S25

JavaScriptは、入力の確認やボタン操作などの動きを作ります。登録を押したとき、題名が空でないか、上限を超えていないかを調べ、条件を満たせば一件を追加します。MDNの入門では、このような検証、ボタンの動作、イベントをWebの動きとして扱っています。資料 S26

同じファイルの中へ、この役割をまとめることもできます。ファイルを分けた構成でも、仕組みそのものは変わりません。初めは一枚で全体を試し、直しが増えたら構成を分けるという進め方も選べます。ファイルの数が多いだけで完成度が上がるわけではなく、変更する場所を追いやすいかで判断します。

状態という言葉も、ここで実物へ対応させます。入力欄にまだ何もない状態、題名を入力した状態、条件を満たさず止まった状態、登録して一覧に増えた状態です。同じ画面でも、利用者が何をしたかによって表示が変わります。色を決める前に、この変化を紙へ書くと必要な文言が見えてきます。

読書状態の未読、読書中、読了と、画面の状態は別のものです。前者は一件のメモが持つデータ、後者は入力や処理がどこまで進んだかを示します。変数やstateという言葉を聞いたら、この画面では何を覚えているのかを尋ねます。言葉の説明を、抽象的な定義だけで終わらせない方法です。

入力した題名が一覧へ現れても、それが保存された証拠とは限りません。画面を描くためのデータと、閉じた後も残る記録を分けて考えます。保存を付けるときは、保存に成功してから成功表示を出す条件も加えます。表示できた、処理が終わった、保存できたという結果をそろえて見ます。

修正を頼むときは、観察した差を一つ渡します。たとえば『題名は増えたが、選んだ読了が一覧に出ない。題名とメモの表示を保ち、状態も表示してほしい』。事実と期待と変更範囲があれば、何を確かめ直すかも決まります。修正後は、同じ入力を使って結果を比べてください。

一つの修正を伝える

題名とメモは一覧に出ますが、読了を選んでも状態が表示されません。
選んだ状態が一覧に出るようにしてください。題名とメモの表示は保ってください。
未読、読書中、読了をそれぞれ登録し、表示が一致するかを確認します。

手を動かす順番

• 構造と見た目と動作を分ける
• 登録前後の状態を書く
• 同じ入力で修正後を比べる

狭い画面と、失敗の後も使えるように

画面が整ったら、自分が普段使うマウス以外でも試します。キーボードだけで題名へ移り、メモを入れ、状態を選んで登録してみる。W3Cのキーボードに関する説明でも、操作できることが基準として扱われます。ボタンの形が見えることと、そのボタンへ操作で届くことを分けて確認します。資料 S30

Tabで移るたびに、いま選ばれている場所が分かるでしょうか。入力欄からボタンへ順に進み、迷わず登録できるかを見ます。見た目の都合で選択中の枠を消すと、キーボードで使う人は現在地を見失います。操作する順序と、画面に並ぶ順序が不自然に離れていないかも試します。

入力欄には、題名、一言メモ、読書状態という名前を付けます。欄の中に薄く出る例だけでは、入力すると名前が消えます。W3C WAIのフォーム教材では、入力する物を識別できるラベルを扱っています。表示された名前と実際の入力欄を対応させることで、読み上げるときにも何を入れる場所か伝えられます。資料 S27

題名を空のまま登録し、失敗から戻る操作も試します。『エラー』だけでは、何を直すべきか分かりません。題名を入力してください、と問題の場所で伝え、すでに書いたメモは残します。WAIは、エラーの場所や内容と、修正の方法を知らせる説明を示しています。資料 S28

成功の表示も、利用者が次にする行動へつなぎます。一件を登録したなら、登録した題名が一覧へ増えたと分かるようにします。保存がある版では、保存結果も確かめてから成功を伝えます。入力欄を消すなら成功後です。失敗した人に、同じ長いメモをもう一度書かせない画面にします。

次に幅を狭くします。この教材では320ピクセル幅で、入力欄、登録ボタン、一覧が横へはみ出さないかを確かめます。W3CのReflowの説明も、狭い幅で内容を読める並びへ組み直すことを扱っています。数字を指定しただけで規格に適合したとは判断せず、実際の本文と操作を見ます。資料 S29

短い題名だけなら収まっていても、長い題名や改行の少ないメモで崩れることがあります。120文字の題名と1000文字のメモを教材データで試し、一覧の文字が途中で隠れないかを見ます。大きな画面の縮小写真を置くだけでは、スマホの文字の読みやすさまで確かめられません。

図にも同じ考え方を使います。色だけで成功と失敗を分けず、文字を添えます。仕組みの図は、画像の横に流れを文章でも置きます。WAIの複雑な画像の説明では、短い代替テキストに加えて必要な詳細を伝える方法が示されています。図が見えない場合にも、登録から保存までの順序をたどれるようにします。資料 S13

ここまで試してから、気になる見た目を直します。文字を大きくしたらボタンが見切れた、余白を増やしたら失敗の理由が遠くなった。こうした変化を実画面で見れば、見た目と使い方を一緒に調整できます。修正した箇所だけでなく、題名から登録までの基本操作をもう一度通してください。

使い方を条件で頼む

Tabで題名、メモ、状態、登録へ順に進め、選択中の場所が見えるようにしてください。
入力欄へ常に見える名前を付け、未入力と上限超過の理由をその欄の近くで知らせてください。
320ピクセル幅と長い教材データで、横にはみ出さず登録できるかを確認します。

手を動かす順番

• キーボードのみで登録する
• エラーを直して続ける
• 狭い幅と長い入力で表示を確かめる

演習：違う使い方で、同じ登録を試す

同じ読書メモを、マウス、キーボード、狭い画面で使います。結果を合格・修正・未確認に分け、実際に試した操作を残してください。

• マウスを使わず、題名から登録ボタンまで進む。
• メモだけ入れて登録し、理由を見て題名を直す。
• 120文字の題名と1000文字のメモを、320ピクセル幅で登録する。
• 旅を題名に入れ、文字として表示されるかを比べる。

この回で確かめること

• マウスを使わず、題名から登録ボタンまで進む。
• メモだけ入れて登録し、理由を見て題名を直す。
• 120文字の題名と1000文字のメモを、320ピクセル幅で登録する。
• 旅を題名に入れ、文字として表示されるかを比べる。

次の回：Gitで、戻れる場所をつくる

参考資料

• S13 W3C WAI: Complex Images
• S24 HTML: Creating the content — MDN
• S25 CSS: Styling the content — MDN
• S26 JavaScript: Adding interactivity — MDN
• S27 Labeling Controls — W3C WAI
• S28 User Notification — W3C WAI
• S29 Understanding Success Criterion 1.4.10: Reflow — W3C WAI
• S30 Understanding Success Criterion 2.1.1: Keyboard — W3C WAI