以下の手順で進めていきます。
- トップページ / を表示する
- 新規登録画面へのリンクをトップページに追加する
- 新規登録画面からユーザー登録できる
- ユーザー登録すると登録完了画面を表示する
- トップページに戻ると登録したユーザーのアカウントIDと名前を表示する
- アカウントIDと名前をプロフィールページへのリンクにする
- アカウントIDまたは名前をクリックするとプロフィールページを表示する
- 各ユーザーごとのプロフィールページを作成する
- プロフィールページにツイートのフォームを追加する
- プロフィールページからツイートすると、その内容をデータベースに保存する
- プロフィールページにその人のツイートの一覧を表示する
- トップページに全員のツイートを表示する
- プロフィールページに画像登録フォームを追加する
- プロフィールページから画像URLを登録できる
- プロフィールページから画像URLを更新できる
- プロフィールページから画像URLを削除できる
課題配点
| 課題 | URL | 配点 |
|---|---|---|
| トップページにアクセスできる | / | 5 |
| 新規登録画面にアクセスできる | /register | 5 |
| 新規登録画面でユーザー登録できる | /register | 5 |
| ユーザー登録すると完了画面を表示する | /newuser | 5 |
| トップページにユーザー一覧を表示する | / | 5 |
| トップページに全員のツイート一覧を表示する | / | 5 |
| プロフィールページにアクセスできる | /profile/{id} | 5 |
| プロフィールページからツイートできる | /profile/{id} | 5 |
| プロフィールページにその人のツイート一覧を表示する | /profile/{id} | 5 |
| プロフィールページから画像を登録できる | /profile/{id} | 5 |
| プロフィールページから画像を更新できる | /profile/{id} | 5 |
| プロフィールページから画像を削除できる | /profile/{id} | 5 |
| プロフィールページでツイートを検索できる | /profile/{id} | 10 |
| トップページでツイートを検索できる | / | 10 |
| トップページの「Twitter」をセンタリングする | / | 2 |
| トップページの「Twitter」の文字色を変更する | / | 2 |
| トップページの背景色をCSSで変更する | / | 2 |
| プロフィールページの名前の文字色をCSSで変更する | /profile/{id} | 2 |
| プロフィールページのアカウントIDの文字色をCSSで変更する | /profile/{id} | 2 |
| プロフィールページのツイート時刻の文字サイズをCSSで小さくする | /profile/{id} | 2 |
| プロフィールページの背景色をCSSで変更する | /profile/{id} | 2 |
| プロフィールページからトップページ(/)に戻るリンクを追加する | /profile/{id} | 5 |
| トップページのツイート時刻の文字サイズをCSSで小さくする | /profile/{id} | 2 |
| トップページの各ツイートにユーザーの画像を表示する | / | 5 |
トップページの各ツイートのデザインをCSSでツイッターっぽくする |
/ | 10 |
| 合計 |
提出用ファイルの作成
Eclipseのインストール
VSCodeでは提出用ファイルの作成ができないようなので、Eclipseをインストールする。
共有フォルダにある pleiades-2023-12-java-win-64bit-jre_20231211.exe をダブルクリックする。
作成先をZドライブに変更して「解凍」を実行する。
Eclipseの実行
解凍が終わったら、pleiades\2023-12\eclipse フォルダにある eclipse.exe をダブルクリックしてEclipseを起動する。
ワークスペースを選択するダイアログが表示されるので、twitterアプリケーションを作ってあるひとつうえのフォルダーを選択する。
プロジェクトのインポート
「プロジェクトのインポート」をクリックする。
Mavenの中の「既存Mavenプロジェクト」を選択して「次へ」をクリックする。
ルートディレクトリの「参照」をクリックして、twitterアプリケーションのフォルダを指定した状態で「フォルダーの選択」をクリックする。
インポートが完了すると以下の画面になる。
プロジェクトの更新
twitterを右クリックし、メニューから[Maven]-[プロジェクトの更新]を選択する。
プロジェクトの更新のダイアログが表示されるので「実行」をクリックする。
twitterアプリケーションの実行
twitterを右クリックし、メニューから[実行]-[Spring Bootアプリケーション]を選択する。
コンソールにVSCodeと同様のメッセージが表示され、Twitterアプリケーションが起動するので、ブラウザでアクセスして確認する。
学籍番号と名前を記載する
index.html のタイトル「Twitter」の右に学籍番号と名前を追加する。
提出用ファイルの作成
twitterを右クリックし、メニューから[実行]-[Maven install]を選択する。
コンソールに「BUILD SUCCESS」と表示されれば、提出用ファイルができている。
targetフォルダ内に生成された twitter-0.0.1-SNAPSHOT.jar を提出する。
提出用ファイルの動作確認
- コマンドプロンプトを起動する。
- 「cd 」(cd+スペース)と入力後、エクスプローラーからtwitter以下のtargetフォルダをドラッグして、コマンドプロンプトにドロップする。
- コマンドプロンプトで「java -jar twitter-0.0.1-SNAPSHOT.jar」を実行する。
- コマンドプロンプトにSpring Bootのロゴが表示される。
- ブラウザから localhost:8080 にアクセスする。
- 学籍番号と名前が表示されていることを確認する。
- 新規ユーザー登録できるか確認する。
- ツイートや画像登録・変更・削除ができるか確認する。
提出先
提出用フォルダの「システム開発実習」以下の「twitter」フォルダ内に各自の学籍番号のフォルダを作成し、学籍番号フォルダ内に twitter-0.0.1-SNAPSHOT.jar をコピーする。
提出期限
2024年1月10日