Spring Boot でログイン画面 + 一覧画面 + 登録画面の Webアプリケーションを作る ( その３ )( HTMLファイル作成 )
概要
Spring Boot でログイン画面 + 一覧画面 + 登録画面の Webアプリケーションを作る ( その２ )( Project作成 ) の続きです。
- 今回の手順で確認できるのは以下の内容です。
- HTMLファイルの作成、確認
- 今回から branch を作成して作業します。
ソフトウェア一覧
Bootstrap 3.3.1
http://getbootstrap.com/jQuery 1.11.2
http://jquery.com/html5shiv 3.7.2
https://github.com/aFarkas/html5shivRespond.js 1.4.2
https://github.com/scottjehl/Respondie10-viewport-bug-workaround.js
https://github.com/twbs/bootstrap/blob/master/docs/assets/js/ie10-viewport-bug-workaround.js
参考にしたサイト
Bootstrap starter template
http://getbootstrap.com/examples/starter-template/Bootstrap 3 Glyphicons
http://glyphicons.bootstrapcheatsheets.com/
手順
GitHub から最新ファイルのダウンロード
メイン画面のメニューから「VCS」->「Update Project...」を選択します。
「Update Project」ダイアログが表示されます。何も変更せずに「OK」ボタンをクリックします。
GitHub から最新のファイルがダウンロードされます。今回は GitHub 側で README を作成していますので、画面下部の Version Control View に以下の画像の内容が表示されます。
GitHub 上で branch を作成する ( 1.0.x )
ブラウザを起動して https://github.com/ksby/ksbysample-webapp-basic にアクセスします。
画面右上の「branch: master」と表示されているドロップダウンをクリックした後、「Find or create a branch...」の入力フィールドに "1.0.x" と入力して Enter キーを押します。
画面上部に「Branch created.」のメッセージが表示され、active な branch が作成した 1.0.x に切り替わります。
IntelliJ IDEA 上で branch を切り替える ( master → 1.0.x )
IntelliJ IDEA のメイン画面のメニューから「VCS」->「VCS Operations Popup...」を選択します。
「VCS Operations」メニューが表示されます。「Branches...」を選択します。
「Git Branches」メニューが表示されます。「origin/master」->「Checkout as new local branch」を選択します。
「Checkout Remote Branch」ダイアログが表示されます。"1.0.x" と入力後「OK」ボタンをクリックします。
1.0.x の branch に切り替わります。再度 IntelliJ IDEA のメイン画面のメニューから「VCS」->「VCS Operations Popup...」を選択 →「VCS Operations」メニューから「Branches...」を選択して「Git Branches」メニューを表示すると、メニューの一番下に「Current branch: 1.0.x」と表示されていることで確認できます。
IntelliJ IDEA 上で今回の作業用の branch を作成する ( 1.0.x → 1.0.x-makehtml )
IntelliJ IDEA のメイン画面のメニューから「VCS」->「VCS Operations Popup...」を選択します。
「VCS Operations」メニューが表示されます。「Branches...」メニューを選択します。
「Git Branches」メニューが表示されます。「New Branch」メニューを選択します。
「Create New Branch」ダイアログが表示されます。"1.0.x-makehtml" を入力して「OK」ボタンをクリックします。
1.0.x-makehtml の branch に切り替わります。再度 IntelliJ IDEA のメイン画面のメニューから「VCS」->「VCS Operations Popup...」を選択 →「VCS Operations」メニューから「Branches...」を選択して「Git Branches」メニューを表示すると、メニューの一番下に「Current branch: 1.0.x-makehtml」と表示されていることで確認できます。
Bootstrap 3.3.1 のダウンロード、ファイルの配置
Bootstrap のトップページにアクセスします。ページ中央にある「Download Bootstrap」ボタンをクリックします。
http://getbootstrap.com/Download ページが表示されます。画面左側にある「Download Bootstrap」ボタンをクリックします。bootstrap-3.3.1-dist.zip がダウンロードされるので PC に保存します。
http://getbootstrap.com/getting-started/#downloadProject 内に静的ファイルを配置する場合には /static ディレクトリを作成します。IntelliJ IDEA の Project View で一番上の階層の ksbysample-webapp-basic を選択した後コンテキストメニューを表示し、「New」->「Directory」を選択します。「New Directory」ダイアログが表示されたら static と入力した後「OK」ボタンをクリックします。
Bootstrap のファイルを /static ディレクトリの下へ配置します。まずは bootstrap-3.3.1-dist.zip を解凍します。
解凍した bootstrap-3.3.1-dist\dist の下にある css, fonts, js の３つのディレクトリをコピーします。
IntelliJ IDEA に戻り、Project View の /static ディレクトリを選択してペーストします。「Copy」ダイアログが表示されますので、「Open copy in editor」のチェックを外した後「OK」ボタンをクリックします。
ファイルがペーストされた後に「Add Files to Git」ダイアログが表示されますので「OK」ボタンをクリックします。
jQuery 1.11.2 のダウンロード、ファイルの配置
jQuery のトップページにアクセスします。ページ右側にある「Download jQuery」ボタンをクリックします。
http://jquery.com/Downloading jQuery ページが表示されます。「Download the compressed, production jQuery 1.11.2」リンクをクリックします。jquery-1.11.2.min.js がダウンロードされるので PC に保存します。
http://jquery.com/download//static/js の下に jquery.min.js をコピー＆ペーストします。ペースト後「Add Files to Git」ダイアログが表示されますので「Yes」ボタンをクリックします。
html5shiv 3.7.2 のダウンロード、ファイルの配置
html5shiv の GitHub のページにアクセスします。ページ内にある「latest zip package」リンクをクリックします。html5shiv-master.zip がダウンロードされるので PC に保存します。
https://github.com/aFarkas/html5shivhtml5shiv-master.zip を解凍します。
解凍した html5shiv-master\dist の下にある html5shiv.min.js を /static/js の下にコピー＆ペーストします。ペースト後「Add Files to Git」ダイアログが表示されますので「Yes」ボタンをクリックします。
Respond.js 1.4.2 のダウンロード、ファイルの配置
Respond.js の GitHub のページにアクセスします。「dest」ディレクトリのリンクをクリックします。 https://github.com/scottjehl/Respond
dest ディレクトリのページに遷移します。「respond.min.js」ファイルのリンクをクリックします。
https://github.com/scottjehl/Respond/tree/master/destrespond.min.js ファイルのページに遷移します。「Raw」ボタン上でコンテキストメニューを表示して respond.min.js というファイル名で保存します。
respond.min.js を /static/js の下にコピー＆ペーストします。ペースト後「Add Files to Git」ダイアログが表示されますので「Yes」ボタンをクリックします。
ie10-viewport-bug-workaround.js のダウンロード、ファイルの配置
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.jsie10-viewport-bug-workaround.js を /static/js の下にコピー＆ペーストします。ペースト後「Add Files to Git」ダイアログが表示されますので「Yes」ボタンをクリックします。
ここまでで Project の /static の下のディレクトリ・ファイルは以下の構成になっています。
Template の作成
画面の HTML を作成するための Template を事前に準備します。Template の HTML は Bootstrap starter template のソースファイルを元に作成しています。
Project View 上でコンテキストメニューを表示し、「New」->「Edit File Templates...」を選択します。
「File and Code Templates」ダイアログが表示されます。画面左上の＋アイコンをクリックします。
Unnamed というテンプレートが作成されます。以下の点を変更し、「OK」ボタンをクリックします。
- 画面右上の「Name」を Html5(BS3) へ、Extension を html へ変更します。
- 「Reformat according to style」のチェックを外します。
- ソースコードの入力フィールドにリンク先の内容を入力します。
Project View 上でコンテキストメニューを表示すると、「New」から「Html5(BS3)」が選択できるようになります。
ログイン画面の作成
Project View で /static を選択した後コンテキストメニューを表示し、「New」->「Html5(BS3)」を選択します。「New Html5(BS3)」ダイアログが表示されたら login と入力した後「OK」ボタンをクリックします。login.html が新規作成されてエディタで開かれた後「Add Files to Git」ダイアログが表示されますので「Yes」ボタンをクリックします。
login.html の内容をリンク先の内容に変更します。
作成した HTML の内容を確認します。Gradle tasks View から bootRun を実行します。
ブラウザで http://localhost:8080/login.html にアクセスします。以下の画像の画面が表示されます。
検索/一覧画面の作成
Project View で /static を選択した後コンテキストメニューを表示し、「New」->「Html5(BS3)」を選択します。「New Html5(BS3)」ダイアログが表示されたら countrylist と入力した後「OK」ボタンをクリックします。countrylist.html が新規作成されてエディタで開かれた後「Add Files to Git」ダイアログが表示されますので「Yes」ボタンをクリックします。
countrylist.html の内容をリンク先の内容に変更します。
ブラウザで http://localhost:8080/countrylist.html にアクセスします。以下の画像の画面が表示されます。
ソースコード
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="#">«</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="#">»</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="#">«</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="#">»</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
初版発行。
