まちの読書メモを、一冊を通して育てます。最初に決めるのは、機能の数より、何ができれば役に立ったと言えるかです。
この回は、しくみを読むことと、実際の結果を確かめる練習を組み合わせます。付属見本はブラウザーだけで保存する一人用の版です。アカウント・データベース・共有は拡張課題として扱います。
練習用の「まちの読書メモ」を開く。見本には追加・読書状況の変更・JSONの書出があります。編集・削除・検索・復元・共有は、依頼文を使って追加する拡張課題です。練習用データを使い、一つのタブで操作してください。
入力から結果まで、一往復を作る
読んだ本の題名と、忘れたくない一言。これだけを残したいとき、毎回どのアプリへ書くか迷ったことはありませんか。本書では、その小さな作業のために、まちの読書メモを作ります。題名を入れ、一言を書き、登録すると一覧へ増える。この往復を、最初の完成条件にします。
練習には架空の題名を使います。たとえば、題名は『雨の日の地図』、メモは『最後の一章をもう一度読みたい』。読書状態は未読、読書中、読了から選びます。実在する人の連絡先や職場の資料は使いません。題材を架空にすると、失敗を恐れず入力を変え、結果を比べられます。
AIへ日本語で頼むと、画面を表示するためのコードが返ってきます。コードは、コンピューターが処理する指示や構造を記したものです。最初の版は、一つのHTMLファイルにまとめられます。HTMLはWebページの構造を表す言葉で、ブラウザが読み取って見出しや入力欄を表示します。資料 S2資料 S24
最初の一往復
題名とメモを入力し、登録後の一覧と比べます。この時点では、保存や共有までできたとは判断しません。
- 題名とメモを入力
- 登録する
- 一覧へ一件追加
- 入力と結果を比べる
- 架空の教材データだけを使います。
- 未入力のときも試します。
最初の依頼では、アプリの大きな名前より、利用者の操作を順番に書きます。題名を入力し、必要ならメモを書き、状態を選んで登録する。登録後は一覧に一件増え、追加した内容が読める。この順番が分かれば、AIが提案した画面も、自分の期待と比べられます。
会員登録、表紙画像、他の人との共有は、最初の版に入れません。題名とメモを一覧で見たいという目的は、それらがなくても確かめられます。機能を後へ回すと、初めて動いた画面が期待と違ったときも、入力、登録、表示のどこで止まったかを探しやすくなります。
ファイルを受け取ったら、名前と保存場所を見ます。index.htmlという名前で保存する場合、末尾に.txtが付いていないかを確認します。エディタにコードが表示されたことと、ブラウザに画面が出たことは別の結果です。保存した同じファイルをブラウザで開き、題名を一つ登録してみます。
一覧へ題名が増えたら、次に空の題名を試します。登録を押しても空の記録は増えず、題名を入れる必要があると分かるでしょうか。こうした失敗の試し方も、最初の体験に含めます。うまく動く入力だけを試すと、使う人が困る場面を見落とします。
画面が動いた段階では、閉じた後も記録が残るか、別の端末で使えるかはまだ分かりません。本書は、この不明な部分を順番に確かめていきます。動いたものに次の条件を足し、結果を見て進む。用語は、その作業で出会ったときに覚えれば間に合います。
章を読みながら、結果を短く残してください。保存したファイルの名前、開いたブラウザ、登録した架空の題名、実際に起きた変化を書きます。AIからの『完成しました』という返答と、自分が見た結果を分けておくと、次に何を確かめるかが自然に決まります。
最初の一画面を頼む
まちの読書メモを作ります。題名、一言メモ、読書状態を入力し、登録すると一覧へ増える一画面にしてください。
最初は私のブラウザで一人が使います。外部送信、ログイン、画像取得は入れません。
HTMLファイルにまとめ、保存して開く方法と、動作の確認方法を説明してください。
手を動かす順番
- 入力と期待する結果を一組書く
- ファイル名と保存場所を確かめる
- ブラウザで登録と未入力を試す
できたと言える条件を先に書く
一覧に題名が増えるだけでも、作れた感覚はあります。そのまま使い続けるには、もう少し細かい約束が要ります。長い題名はどうするか、保存に失敗したら何を見せるか。曖昧な希望を、操作して確認できる条件へ変える作業が、ここからの仕様づくりです。
本書の題名は必須とし、前後の空白を除いて空なら登録しません。上限は120文字、一言メモは任意で1000文字までにします。これは教材の扱う範囲として決めた値です。あらゆる読書アプリの正解という意味はありません。上限があると、受け入れる入力と断る入力を具体的に試せます。
状態は、未読、読書中、読了のいずれかにそろえます。『読みかけ』『途中』など同じ意味の表記が混じると、一覧を絞り込むときに迷います。登録した一件には、変わらない識別用のIDと、作成日時を持たせます。題名を後で直しても、同じ記録だと分かるようにするためです。
希望を、確かめられる条件へ
便利、見やすい、安心という希望を、入力、結果、失敗時の操作へ置き換えます。条件には実際に試す方法を添えます。
- 120文字と1000文字は本教材の仕様です。
- 失敗時には入力を残します。
入力が条件を満たさないときは、理由を入力欄の近くへ表示します。メモを1001文字書いたなら、1000文字以内へ直すと続けられると知らせます。失敗したからといって、題名やメモを消してはいけません。修正できることまで含めて、一回の登録操作を考えます。
入力した文字は、そのまま文字として表示します。たとえば題名へ<b>旅</b>と入れたら、その記号も一覧に残し、HTMLとして解釈させません。文字列と画面を作る命令を混ぜないための条件です。初学者が実装の安全性をすべて判定できるわけではありませんが、この具体例なら期待する表示を比べられます。
保存を付ける章では、画面の一覧と保存先の記録が一致するかを加えて確認します。先に成功表示を出し、保存に失敗していたのでは困ります。成功は保存結果を確かめてから伝え、失敗なら入力を保つ。最初の仕様に書いておくと、後の機能追加でも同じ判断基準を使えます。
使いやすさも、印象だけで済ませません。キーボードで題名、メモ、状態、登録ボタンへ順に移動できること。幅320ピクセルの画面でも入力欄と一覧が横にはみ出さないこと。この本で確かめる操作を先に決め、スマホらしくしてという依頼から一歩進めます。
仕様が増えて読みにくくなったら、今回の完成条件と、後で作る機能を分けます。ブラウザ内で一人が使う版に、利用者別の権限を無理に足す必要はありません。クラウド保存へ進むときには、誰の記録かを示すownerIdと、誰が読めるかという別の条件を加えます。
依頼後に返ってきた案も、この仕様へ戻して見ます。見た目が魅力的でも、失敗時に入力を消すなら直す対象です。条件を満たしていて色だけが違うなら、機能の不具合とは分けて相談できます。何を試せば判断できるかを書いた一枚が、この先の作業を支えます。
読書メモの完成条件
題名は必須で120文字まで、メモは任意で1000文字まで。状態は未読、読書中、読了です。
未入力や上限超過は登録せず、直し方を表示します。入力は失敗時に消しません。
入力をHTMLとして実行しません。320ピクセル幅とキーボードで操作を確認します。
手を動かす順番
- 正常な入力と期待結果を書く
- 断る入力と直し方を書く
- 今回の範囲と後の機能を分ける
演習：一枚の仕様書を作る
まちの読書メモについて、画面で確かめられる完成条件をまとめます。実装の方法は決めず、入力、結果、失敗後の操作を決めてください。
- 架空の題名とメモを一組用意する。
- 空の題名、121文字の題名、1001文字のメモの期待結果を書く。
- 登録の成功と失敗で、一覧と入力欄がどう変わるかを書く。
- キーボードと320ピクセル幅で試す操作を書く。
解答例を読む
正常な登録では、題名、メモ、状態を持つ一件が一覧へ増えます。
空の題名と上限超過は登録せず、理由と修正方法を知らせます。
失敗時には入力を保ちます。表示した一件が保存済みかは、保存を扱う章で別に確かめます。
題名から登録ボタンまでキーボードで進め、狭い画面で横へはみ出さないかを見ます。
この回で確かめること
- 架空の題名とメモを一組用意する。
- 空の題名、121文字の題名、1001文字のメモの期待結果を書く。
- 登録の成功と失敗で、一覧と入力欄がどう変わるかを書く。
- キーボードと320ピクセル幅で試す操作を書く。