演習: コントローラー

この章から画面を作っていきます。B- は本文の書店アプリ bookstore への追加、T- はゼロから作るタスク管理アプリ tasks の問題です。完成イメージと同じ表示になるよう、コントローラー・テンプレート・CSS を自分で書きます。

B-1. 書店のヘッダー

本文書店には home.html・about.html・books/new.html の 3 ページがあります。この 3 ページに、Spring.io のような共通ヘッダーを追加します。左端にサイト名「Spring Books」、右端にナビゲーションのリンクを置きます。

ナビゲーションのリンク

ラベル	リンク先
ホーム	/
このサイトについて	/about
本の登録	/books/new

デザイン（最小限）

本文の書店の style.css は、本文テキストが #34302d、見出しが #6db33f です。ヘッダーのスタイルはこの style.css に追記します。

• ヘッダー：横並びにし、サイト名を左端・リンクを右端に寄せ、下に 1px solid #e5e5e5 の区切り線
• サイト名：文字色 #6db33f、太字、文字サイズ 1.6rem
• リンク：文字色 #34302d、リンク間の間隔 16px

このヘッダーを 3 ページすべてに追加します。

完成イメージ:

ヒント

サイト名とリンクを左右に振り分けるには、ヘッダーを display: flex にして justify-content: space-between を指定します。

同じヘッダーを 3 つのファイルに書くことになりますが、この重複は次章のフラグメントで 1 か所にまとめます。

T-2. TasksController と画面

TasksController と 2 つのテンプレートを作り、2 つの画面を表示します。

担当するパスとテンプレート

パス	ビュー名	テンプレート
/tasks	tasks	templates/tasks.html
/tasks/new	tasks/new	templates/tasks/new.html

各ページの内容

タスク一覧 /tasks：

• リスト名「マイタスク」を見出しに表示する
• タスクを 3 件並べる。各タスクはチェックボックスとタイトルを表示し、完了したタスクは取り消し線にする
• 一番下に「＋ タスクを追加」のリンクを置き、/tasks/new へ移動できるようにする

タスク追加 /tasks/new：

• タスク名の入力欄と「保存」ボタンを置く
• /tasks へ戻る「キャンセル」リンクを置く
• 送信処理はこの章では作らない。T-4 で作る

デザイン（最小限）

• 全体：フォント sans-serif、文字色 #202124
• 本文領域：最大幅 640px、中央寄せ、内側に padding 24px
• 見出し：文字サイズ 1.4rem
• タスクの行：下に 1px solid #eee の区切り線
• 完了したタスク：取り消し線、文字色 #999
• リンク：文字色 #1a73e8

仕上げ

• CSS を static/css/ に置き、両テンプレートから /css/style.css で読み込む
• タスクはこの章ではテンプレートに直接書く。次章で Task クラスと Model を使って動的にする
• アプリの入り口 / から /tasks へのリダイレクトは T-4 で追加する

完成イメージ:

タスク一覧（/tasks）

タスク追加（/tasks/new）

ヒント

ビュー名はファイル名から拡張子を除いたもので、return "tasks" が templates/tasks.html、return "tasks/new" が templates/tasks/new.html に対応します。.html を付けると templates/tasks.html.html を探して Whitelabel Error Page になります。

完了したタスクは <li> に class="completed" を付け、CSS で .completed に取り消し線と #999 を指定して見分けます。