LoginSignup
2
3

More than 1 year has passed since last update.

@fsd_itchyin株式会社船井総合研究所

Spring bootで簡単なWebアプリを作ってみる(プロジェクト作成)

Last updated at Posted at 2023-03-20

こんにちは。船井総研デジタルのいっちーです。

前回の記事では、Docker環境を構築して、疎通確認をするところまで行いました。

今回は、プロジェクトの初期構築を行っていきたいと思います。

Spring Initializrでプロジェクトのスケルトンを作る

Spring Snitializrにアクセスして、プロジェクトの初期設定を入力します。今回は、下記のような入力内容で良いでしょう。

プロジェクト初期化.png

入力項目 入力値 備考
Project Maven -
Language Java -
Spring Boot 3.0.5 (SNAPSHOT) Dependenciesの項でMyBatisを選択する際に「3.1.0(M1)以前のバージョン」を要求されるので、こちらを使います。
Project Metadata Packagingは「War」、Javaは「19」あとはお好みで -
Dependencies 「Lombok」「Thymeleaf」「Spring Web」「MySQL Driver」「MyBatis Framework」の5つを選択 必要に応じて、追加していくかも知れません。

入力が終わったら、「GENERATE」を押下すると、プロジェクトのスケルトンがzipファイルでダウンロードできます。

ダウンロードしたzipファイルを、C:\work\negitter\app配下に展開します。

プロジェクト展開.png

VSCodeからも見てみましょう。

展開確認.png

これで、VSCodeでプロジェクトを作成する準備が整いました。

画面モックアップを追加する

モックアップの追加と調整

src\main\resources\static配下に、要件定義のときに作成した画面のモックアップを格納します。ついでに、良い感じの背景画像、CSS、Javascriptのスケルトンも追加しておきましょう。

image.png

メイン画面
src/main/resources/templates/negitter.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link href="../static/css/negitter.css" rel="stylesheet">
    <link rel="icon" href="../static/img/favicon.ico" />
    <script type="text/javascript" src="../static/js/negitter.js"></script>
    <title>Negitter</title>
</head>

<body style="padding-top: 50px; padding-bottom: 50px;">
    <nav class="navbar navbar-expand-lg navbar-light fixed-top" style=" background: #2ce45a;">
        <div class="container">
            <a class="navbar-brand" href="#"><span>Negitter</span></a>
            <a id="registerNegiBtn" class="btn btn-light" href="#">ねぎを登録</a>
        </div>
    </nav>
    <div class="container">
        <!-- posted message start -->
        <div class="row mt-3">
            <div class="col">
                <h6>○○○○さん</h6>
            </div>
            <div class="col">
                <span class="text-right">投稿日時: 2023年01月01日 00時00分00秒</span>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col">
                ○○ねぎって美味しいね！
            </div>
        </div>
        <hr>
        <!-- posted message end -->
    </div>

    <div class="container">
        <div class="row mt-3 justfy-content-between">
            <div class="col-3 text-start">
                <a class="btn btn-light">前のページへ</a>
            </div>
            <div class="col-3"><!-- nothing --></div>
            <div class="col-3 text-end">
                <a class="btn btn-light">次のページへ</a>
            </div>
        </div>
        <hr>
    </div>

    <form method="POST" action="#">
        <div class="container">
            <p class="alert alert-danger">ねぎでつぶやいてください！</p>
            <div class="row mt-3">
                <div class="col">
                    おなまえ: <input type="text" name="username" class="form-control" placeholder="おなまえ"
                        required="required">
                </div>
            </div>
            <div class="row mt-3">
                <div class="col">
                    メッセージ: <input type="text" name="message" class="form-control" placeholder="メッセージ"
                        required="required"><br>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <button type="submit" class="btn btn-primary btn-block">つぶやく</button>
                </div>
            </div>
        </div>
        </div>
    </form>

    <div class="container fixed-bottom">
        <p style="text-align: center; background: #2ce45a;">&copy; 2023 fsd_itchy </p>
    </div>
</body>

</html>
ねぎ登録画面
src/main/resources/templates/register.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link href="../static/css/negitter.css" rel="stylesheet">
    <link rel="icon" href="../static/img/favicon.ico" />
    <script type="text/javascript" src="../static/js/negitter.js"></script>
    <title>Negitter</title>
</head>

<body style="padding-top: 50px; padding-bottom: 50px;">
    <nav class="navbar navbar-expand-lg navbar-light fixed-top" style=" background: #2ce45a;">
        <div class="container">
            <a class="navbar-brand" href="#"><span>Negitter</span></a>
            <a id="backToNegiitsBtn" class="btn btn-light" href="#">戻る</a>
        </div>
    </nav>
    <form method="POST" action="#">
        <div class="container">
            <div class="row mt-3">
                <div class="col">
                    <h3>ねぎを登録する</h3>
                </div>
            </div>
            <p class="alert alert-danger">そのねぎは登録済みです！</p>
            <div class="row mt-3">
                <div class="col">
                    <input type="text" name="neginame" placeholder="○○ねぎ" required maxlength="128" size="110">
                </div>
                <div class="col"></div>
                <div class="col">
                    <button type="submit" class="btn btn-primary btn-block">登録</button>
                </div>
            </div>
        </div>
        </div>
    </form>
    <form method="POST" action="#">
        <div class="container">
            <div class="row mt-3">
                <div class="col">
                    <h3>登録済みねぎ一覧</h3>
                </div>
            </div>
            <div class="row mt-3">
                <table class="table table-light table-striped table-borderd table-condensed">
                    <tr>
                        <th>
                            No
                        </th>
                        <th>
                            名称
                        </th>
                        <th>
                            編集
                        </th>
                    </tr>
                    <!-- negi info start -->
                    <tr>
                        <td>
                            1
                        </td>
                        <td>
                            <input type="text" id="negi" name="negi" required maxlength="128" size="100" value="○○ねぎ">
                        </td>
                        <td>
                            <a class="btn btn-warning">修正</a>
                            <a class="btn btn-secondary">削除</a>
                        </td>
                    </tr>
                    <!-- negi info end -->
                </table>
            </div>
        </div>
    </form>

    <div class="container fixed-bottom">
        <p style="text-align: center; background: #2ce45a;">&copy; 2023 fsd_itchy </p>
    </div>
</body>

</html>
CSS
src/main/resources/static/css/negitter.css
body {
    background: #FFF url(../img/parts/bg.png) fixed ;
};
JS
src/main/resources/static/js/negitter.js
// nothing

まだ何も書いてないので、「nothing」とコメントしています。

モックアップ作成時には繰り返し項目をベタ書きしていましたが、今後はプログラムから繰り返し項目を作ることになるため、ここで削除しておきます。

最初の記事で作ったモックアップからちょこちょこ変えていますが、本来であれば画面設計はモックアップの段階でクライアントの合意を取るため、あとから変えるには再度クライアントとの調整が必要になったり、色々と面倒なことになると思います。
あくまで個人学習のための開発、ということでお読みいただければ幸いです。

モックアップの表示確認

ブラウザでモックアップを表示して、正しく表示されるか確認します。

メイン画面

image.png

ねぎ登録画面

image.png

この素敵な背景画像は、船井総研デジタルの同僚@fsd-jume氏より提供いただきました。@fsd-jume氏は、Microsoft Azureに関する記事を多数執筆しています。氏の記事もどうぞご覧ください。

まとめ

今回の記事では、プロジェクトのスケルトンを作成し、画面のモックアップを追加しました。次回は、このモックアップに画面遷移を組み込んでいこうと思います。

おまけ

Spring Initializr、ずっとSpring Initializerかと思ってましたが、よく見るとInitializrなんですね。気になったのでChatGPT先生に聞いてみました。

initializr.png

…ほんまかいな？

それではまた。

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
3