読者です 読者をやめる 読者になる 読者になる

かんがるーさんの日記

最近自分が興味をもったものを調べた時の手順等を書いています。今は Spring Boot をいじっています。

Spring Boot でログイン画面 + 一覧画面 + 登録画面の Webアプリケーションを作る ( その3 )( HTMLファイル作成 )

概要

Spring Boot でログイン画面 + 一覧画面 + 登録画面の Webアプリケーションを作る ( その2 )( Project作成 ) の続きです。

  • 今回の手順で確認できるのは以下の内容です。
    • HTMLファイルの作成、確認
  • 今回から branch を作成して作業します。

ソフトウェア一覧

  1. Bootstrap 3.3.1
    http://getbootstrap.com/

  2. jQuery 1.11.2
    http://jquery.com/

  3. html5shiv 3.7.2
    https://github.com/aFarkas/html5shiv

  4. Respond.js 1.4.2
    https://github.com/scottjehl/Respond

  5. ie10-viewport-bug-workaround.js
    https://github.com/twbs/bootstrap/blob/master/docs/assets/js/ie10-viewport-bug-workaround.js

参考にしたサイト

  1. Bootstrap starter template
    http://getbootstrap.com/examples/starter-template/

  2. Bootstrap 3 Glyphicons
    http://glyphicons.bootstrapcheatsheets.com/

手順

GitHub から最新ファイルのダウンロード

  1. メイン画面のメニューから「VCS」->「Update Project...」を選択します。

  2. 「Update Project」ダイアログが表示されます。何も変更せずに「OK」ボタンをクリックします。

  3. GitHub から最新のファイルがダウンロードされます。今回は GitHub 側で README を作成していますので、画面下部の Version Control View に以下の画像の内容が表示されます。

    f:id:ksby:20150104085737p:plain

GitHub 上で branch を作成する ( 1.0.x )

  1. ブラウザを起動して https://github.com/ksby/ksbysample-webapp-basic にアクセスします。

  2. 画面右上の「branch: master」と表示されているドロップダウンをクリックした後、「Find or create a branch...」の入力フィールドに "1.0.x" と入力して Enter キーを押します。

    f:id:ksby:20150104100842p:plain

  3. 画面上部に「Branch created.」のメッセージが表示され、active な branch が作成した 1.0.x に切り替わります。

f:id:ksby:20150104101004p:plain

IntelliJ IDEA 上で branch を切り替える ( master → 1.0.x )

  1. IntelliJ IDEA のメイン画面のメニューから「VCS」->「VCS Operations Popup...」を選択します。

  2. VCS Operations」メニューが表示されます。「Branches...」を選択します。

  3. 「Git Branches」メニューが表示されます。「origin/master」->「Checkout as new local branch」を選択します。

    f:id:ksby:20150104101918p:plain

  4. 「Checkout Remote Branch」ダイアログが表示されます。"1.0.x" と入力後「OK」ボタンをクリックします。

    f:id:ksby:20150104102144p:plain

  5. 1.0.x の branch に切り替わります。再度 IntelliJ IDEA のメイン画面のメニューから「VCS」->「VCS Operations Popup...」を選択 →「VCS Operations」メニューから「Branches...」を選択して「Git Branches」メニューを表示すると、メニューの一番下に「Current branch: 1.0.x」と表示されていることで確認できます。

    f:id:ksby:20150104102438p:plain

IntelliJ IDEA 上で今回の作業用の branch を作成する ( 1.0.x → 1.0.x-makehtml )

  1. IntelliJ IDEA のメイン画面のメニューから「VCS」->「VCS Operations Popup...」を選択します。

  2. VCS Operations」メニューが表示されます。「Branches...」メニューを選択します。

  3. 「Git Branches」メニューが表示されます。「New Branch」メニューを選択します。

  4. 「Create New Branch」ダイアログが表示されます。"1.0.x-makehtml" を入力して「OK」ボタンをクリックします。

  5. 1.0.x-makehtml の branch に切り替わります。再度 IntelliJ IDEA のメイン画面のメニューから「VCS」->「VCS Operations Popup...」を選択 →「VCS Operations」メニューから「Branches...」を選択して「Git Branches」メニューを表示すると、メニューの一番下に「Current branch: 1.0.x-makehtml」と表示されていることで確認できます。

    f:id:ksby:20150104171438p:plain

Bootstrap 3.3.1 のダウンロード、ファイルの配置

  1. Bootstrap のトップページにアクセスします。ページ中央にある「Download Bootstrap」ボタンをクリックします。
    http://getbootstrap.com/

  2. Download ページが表示されます。画面左側にある「Download Bootstrap」ボタンをクリックします。bootstrap-3.3.1-dist.zip がダウンロードされるので PC に保存します。
    http://getbootstrap.com/getting-started/#download

  3. Project 内に静的ファイルを配置する場合には /static ディレクトリを作成します。IntelliJ IDEA の Project View で一番上の階層の ksbysample-webapp-basic を選択した後コンテキストメニューを表示し、「New」->「Directory」を選択します。「New Directory」ダイアログが表示されたら static と入力した後「OK」ボタンをクリックします。

  4. Bootstrap のファイルを /static ディレクトリの下へ配置します。まずは bootstrap-3.3.1-dist.zip を解凍します。

  5. 解凍した bootstrap-3.3.1-dist\dist の下にある css, fonts, js の3つのディレクトリをコピーします。

  6. IntelliJ IDEA に戻り、Project View の /static ディレクトリを選択してペーストします。「Copy」ダイアログが表示されますので、「Open copy in editor」のチェックを外した後「OK」ボタンをクリックします。

  7. ファイルがペーストされた後に「Add Files to Git」ダイアログが表示されますので「OK」ボタンをクリックします。

jQuery 1.11.2 のダウンロード、ファイルの配置

  1. jQuery のトップページにアクセスします。ページ右側にある「Download jQuery」ボタンをクリックします。
    http://jquery.com/

  2. Downloading jQuery ページが表示されます。「Download the compressed, production jQuery 1.11.2」リンクをクリックします。jquery-1.11.2.min.js がダウンロードされるので PC に保存します。
    http://jquery.com/download/

  3. jquery-1.11.2.min.js のファイル名を jquery.min.js に変更します。

  4. /static/js の下に jquery.min.js をコピー&ペーストします。ペースト後「Add Files to Git」ダイアログが表示されますので「Yes」ボタンをクリックします。

html5shiv 3.7.2 のダウンロード、ファイルの配置

  1. html5shiv の GitHub のページにアクセスします。ページ内にある「latest zip package」リンクをクリックします。html5shiv-master.zip がダウンロードされるので PC に保存します。
    https://github.com/aFarkas/html5shiv

  2. html5shiv-master.zip を解凍します。

  3. 解凍した html5shiv-master\dist の下にある html5shiv.min.js を /static/js の下にコピー&ペーストします。ペースト後「Add Files to Git」ダイアログが表示されますので「Yes」ボタンをクリックします。

Respond.js 1.4.2 のダウンロード、ファイルの配置

  1. Respond.js の GitHub のページにアクセスします。「dest」ディレクトリのリンクをクリックします。 https://github.com/scottjehl/Respond

  2. dest ディレクトリのページに遷移します。「respond.min.js」ファイルのリンクをクリックします。
    https://github.com/scottjehl/Respond/tree/master/dest

  3. respond.min.js ファイルのページに遷移します。「Raw」ボタン上でコンテキストメニューを表示して respond.min.js というファイル名で保存します。

  4. respond.min.js を /static/js の下にコピー&ペーストします。ペースト後「Add Files to Git」ダイアログが表示されますので「Yes」ボタンをクリックします。

ie10-viewport-bug-workaround.js のダウンロード、ファイルの配置

  1. ie10-viewport-bug-workaround.js の GitHub のページにアクセスします。「Raw」ボタン上でコンテキストメニューを表示して ie10-viewport-bug-workaround.js というファイル名で保存します。
    https://github.com/twbs/bootstrap/blob/master/docs/assets/js/ie10-viewport-bug-workaround.js

  2. ie10-viewport-bug-workaround.js を /static/js の下にコピー&ペーストします。ペースト後「Add Files to Git」ダイアログが表示されますので「Yes」ボタンをクリックします。

  3. ここまでで Project の /static の下のディレクトリ・ファイルは以下の構成になっています。

    f:id:ksby:20150104173213p:plain

Template の作成

画面の HTML を作成するための Template を事前に準備します。Template の HTML は Bootstrap starter template のソースファイルを元に作成しています。

  1. Project View 上でコンテキストメニューを表示し、「New」->「Edit File Templates...」を選択します。

  2. 「File and Code Templates」ダイアログが表示されます。画面左上の+アイコンをクリックします。

    f:id:ksby:20150104180458p:plain

  3. Unnamed というテンプレートが作成されます。以下の点を変更し、「OK」ボタンをクリックします。

    • 画面右上の「Name」を Html5(BS3) へ、Extension を html へ変更します。
    • 「Reformat according to style」のチェックを外します。
    • ソースコードの入力フィールドにリンク先の内容を入力します。

    f:id:ksby:20150104181933p:plain

  4. Project View 上でコンテキストメニューを表示すると、「New」から「Html5(BS3)」が選択できるようになります。

    f:id:ksby:20150104182136p:plain

ログイン画面の作成

  1. Project View で /static を選択した後コンテキストメニューを表示し、「New」->「Html5(BS3)」を選択します。「New Html5(BS3)」ダイアログが表示されたら login と入力した後「OK」ボタンをクリックします。login.html が新規作成されてエディタで開かれた後「Add Files to Git」ダイアログが表示されますので「Yes」ボタンをクリックします。

  2. login.html の内容をリンク先の内容に変更します。

  3. 作成した HTML の内容を確認します。Gradle tasks View から bootRun を実行します。

  4. ブラウザで http://localhost:8080/login.html にアクセスします。以下の画像の画面が表示されます。

    f:id:ksby:20150105010116p:plain

検索/一覧画面の作成

  1. Project View で /static を選択した後コンテキストメニューを表示し、「New」->「Html5(BS3)」を選択します。「New Html5(BS3)」ダイアログが表示されたら countrylist と入力した後「OK」ボタンをクリックします。countrylist.html が新規作成されてエディタで開かれた後「Add Files to Git」ダイアログが表示されますので「Yes」ボタンをクリックします。

  2. countrylist.html の内容をリンク先の内容に変更します。

  3. ブラウザで http://localhost:8080/countrylist.html にアクセスします。以下の画像の画面が表示されます。

f:id:ksby:20150107005449p:plain

ソースコード

Html5(BS3) Template

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <title>xxxxxxxx</title>

    <!-- Bootstrap core CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet"/>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="/js/html5shiv.min.js"></script>
    <script src="/js/respond.min.js"></script>
    <![endif]-->

    <!-- Custom styles for this template -->
    <style>
    <!--
    body {
        padding-top: 70px;
    }
    .navbar-brand {
        font-size: 24px;
    }
    .form-group {
        margin-bottom: 5px;
    }
    -->
    </style>
</head>

<body>
    <nav class="navvar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">ナビゲーションボタン</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="navbar-brand">WebApp - Basic</div>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav  navbar-left">
                    <li class="active"><a href="#"><span class="glyphicon glyphicon-search"></span> 検索/一覧</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> 登録</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/logout"><span class="glyphicon glyphicon-log-out"></span> ログアウト</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">

    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="/js/ie10-viewport-bug-workaround.js"></script>

    <script type="text/javascript">
    <!--
    $(document).ready(function() {
        $('#xxxxxxxx').focus();
    });
    -->
    </script>
</body>
</html>

login.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <title>ログイン</title>

    <!-- Bootstrap core CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet"/>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="/js/html5shiv.min.js"></script>
    <script src="/js/respond.min.js"></script>
    <![endif]-->

    <!-- Custom styles for this template -->
    <style>
    <!--
    body {
        padding-top: 70px;
    }
    .navbar-brand {
        font-size: 24px;
    }
    .form-group {
        margin-bottom: 5px;
    }
    -->
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-push-3 col-md-6">
                <div class="form-wrap">
                    <div class="text-center"><h1>WebApp - Basic</h1></div>
                    <br/>
                    <form role="form" action="#" method="post" id="login-form" autocomplete="off">
                        <div class="form-group">
                            <label for="id" class="sr-only">ID</label>
                            <input type="text" name="id" id="id" class="form-control" placeholder="ID を入力して下さい"/>
                        </div>
                        <div class="form-group">
                            <label for="password" class="sr-only">Password</label>
                            <input type="password" name="password" id="password" class="form-control" placeholder="Password を入力して下さい"/>
                        </div>
                        <br/>
                        <button id="btn-login" class="btn btn-primary btn-block">ログイン</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="/js/ie10-viewport-bug-workaround.js"></script>

    <script type="text/javascript">
    <!--
    $(document).ready(function() {
        $('#id').focus();
    });
    -->
    </script>
</body>
</html>
  • Template から以下の点を変更しています。

    • title を記入しました。
    • <nav>...</nav> は削除しました。
    • <div class="container">...</div> 内にログイン画面の HTML を記入しました。
    • 画面初期表示の focus が #id にセットされるよう Javascript を修正しました。

countrylist.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <title>検索/一覧画面</title>

    <!-- Bootstrap core CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet"/>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="/js/html5shiv.min.js"></script>
    <script src="/js/respond.min.js"></script>
    <![endif]-->

    <!-- Custom styles for this template -->
    <style>
    <!--
    body {
        padding-top: 70px;
    }
    .navbar-brand {
        font-size: 24px;
    }
    .panel-heading {
        padding: 5px 10px;
    }
    .form-group {
        margin-bottom: 5px;
    }
    .pagination {
        margin: 10px 0;
    }
    .panel {
        margin-bottom: 10px;
    }
    .table {
        margin-bottom: 10px;
    }
    -->
    </style>
</head>

<body>
    <nav class="navvar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">ナビゲーションボタン</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="navbar-brand">WebApp - Basic</div>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav  navbar-left">
                    <li class="active"><a href="#"><span class="glyphicon glyphicon-search"></span> 検索/一覧</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> 登録</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/logout"><span class="glyphicon glyphicon-log-out"></span> ログアウト</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="panel-title">検索条件</div>
            </div>
            <div class="panel-body">
                <form method="post" action="#" class="form-horizontal">
                    <div class="form-group">
                        <label for="code" class="control-label col-sm-2">Code</label>
                        <div class="col-sm-2">
                            <input type="text" name="code" id="code" class="form-control input-sm"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name" class="control-label col-sm-2">Name</label>
                        <div class="col-sm-4">
                            <input type="text" name="name" id="name" class="form-control input-sm"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="continent" class="control-label col-sm-2">Continent</label>
                        <div class="col-sm-4">
                            <input type="text" name="continent" id="continent" class="form-control input-sm"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="localName" class="control-label col-sm-2">LocalName</label>
                        <div class="col-sm-6">
                            <input type="text" name="localName" id="localName" class="form-control input-sm"/>
                        </div>
                    </div>
                    <div class="text-center">
                        <button type="submit" value="検索" class="btn btn-primary">検索</button>
                        <button type="reset" value="クリア" class="btn btn-default">クリア</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="text-center">
            <ul class="pagination">
                <li><a href="#">&laquo;</a></li>
            </ul>

            <ul class="pagination">
                <li class="active'">
                    <a href="#">1</a>
                </li>
                <li>
                    <a href="#">2</a>
                </li>
                <li>
                    <a href="#">3</a>
                </li>
                <li>
                    <a href="#">4</a>
                </li>
                <li>
                    <a href="#">5</a>
                </li>
            </ul>

            <ul class="pagination">
                <li><a href="#">&raquo;</a></li>
            </ul>
        </div>

        <table class="table table-condensed table-bordered table-striped">
            <tr class="info">
                <th>Code</th>
                <th>Name</th>
                <th>Continent</th>
                <th>LocalName</th>
            </tr>
            <tr>
                <td>ABW</td>
                <td>Aruba</td>
                <td>North America</td>
                <td>Aruba</td>
            </tr>
        </table>

        <div class="text-center">
            <ul class="pagination">
                <li><a href="#">&laquo;</a></li>
            </ul>

            <ul class="pagination">
                <li class="active'">
                    <a href="#">1</a>
                </li>
                <li>
                    <a href="#">2</a>
                </li>
                <li>
                    <a href="#">3</a>
                </li>
                <li>
                    <a href="#">4</a>
                </li>
                <li>
                    <a href="#">5</a>
                </li>
            </ul>

            <ul class="pagination">
                <li><a href="#">&raquo;</a></li>
            </ul>
        </div>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="/js/ie10-viewport-bug-workaround.js"></script>

    <script type="text/javascript">
    <!--
    $(document).ready(function() {
        $('#code').focus();
    });
    -->
    </script>
</body>
</html>
  • Template から以下の点を変更しています。

    • title を記入しました。
    • <div class="container">...</div> 内に検索/一覧画面の HTML を記入しました。
    • 画面初期表示の focus が #code にセットされるよう Javascript を修正しました。

履歴

2015/01/07
初版発行。