概要

Spring Boot でメール送信する Web アプリケーションを作る ( その３ )( Project の作成 ) の続きです。

今回の手順で確認できるのは以下の内容です。
- HTMLファイルの作成、確認

ソフトウェア一覧

AdminLTE Dashboard & Control Panel Template
https://almsaeedstudio.com/

参考にしたサイト

クックパッド開発者ブログ - 新規サービスの管理画面を短期間で見栄え良く実装する
http://techlife.cookpad.com/entry/2015/04/06/155940

手順

はじめに

先日以下の記事を読んで、その中の「Bootstrap Templateを組み込む」に書かれていた AdminLTE Template(無料) を使ってみたいと思いました。今回は AdminLTE Template から Bootstrap 3 をベースにカスタマイズされたファイルをダウンロードして画面を作成してみます。

<a href="http://techlife.cookpad.com/entry/2015/04/06/155940">新規サービスの管理画面を短期間で見栄え良く実装する - クックパッド開発者ブログ</a>techlife.cookpad.com

1.0.x-makehtml ブランチの作成

IntelliJ IDEA で 1.0.x-makehtml ブランチを作成します。

static ディレクトリの作成

src/main/resources の下に static ディレクトリとその下のサブディレクトリ ( css, fonts, js ) を作成します。

AdminLTE Dashboard & Control Panel Template のダウンロード、ファイルの配置

AdminLTE Dashboard & Control Panel Template のホームページにアクセスします。
https://almsaeedstudio.com/
画面右側の画面キャプチャの下にある「DOWNLOAD(~6 Mb)」ボタンをクリックします。
AdminLTE-2.0.4.zip がダウンロードされるので PC に保存します。
AdminLTE-2.0.4.zip を解凍します。
解凍して作成された AdminLTE-2.0.4\bootstrap の下にある css, fonts, js ディレクトリを src/main/resources/static ディレクトリの下にコピーします。
解凍して作成された AdminLTE-2.0.4\dist の下にある css, js ディレクトリ ( img ディレクトリはコピーしません ) を src/main/resources/static ディレクトリの下にコピーします。
AdminLTE-2.0.4\plugins\jQuery の下にある jQuery-2.1.3.min.js を src/main/resources/static/js ディレクトリの下にコピーします。

Font Awesome Icons, Ionicons, html5shiv.js, respond.min.js のダウンロード、ファイルの配置

解凍して作成された AdminLTE-2.0.4 の下の starter.html ( このファイルが AdminLTE を使用する時のテンプレートのようです ) の中を見ると他にも必要なファイルがあるので、それもダウンロードします ( CDN は利用しません )。以下にダウンロード先の URL ( starter.html の中に書かれているものをそのまま使います ) と配置先を記載します。
- Font Awesome Icons ( 後述 )
- Ionicons ( 後述 )
- html5shiv.js
  https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js
  → src/main/resources/static/js/html5shiv.js
- respond.min.js
  https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js
  → src/main/resources/static/js/respond.min.js
Font Awesome Icons のホームページにアクセスします。画面上部の「Download」ボタンをクリックします。
http://fortawesome.github.io/Font-Awesome/
font-awesome-4.3.0.zip がダウンロードされるので PC に保存します。解凍後、以下のファイルを src/main/resources/static の下へコピーします。

css/font-awesome.min.css
fonts/FontAwesome.otf
fonts/fontawesome-webfont.eot
fonts/fontawesome-webfont.svg
fonts/fontawesome-webfont.ttf
fonts/fontawesome-webfont.woff
fonts/fontawesome-webfont.woff2
※fonts ディレクトリの下は全てのファイルをコピーしています。
Ionicons のホームページにアクセスします。画面上部の「Download」ボタンをクリックします。
http://ionicons.com/
ionicons-2.0.1.zip がダウンロードされるので PC に保存します。解凍後、以下のファイルを src/main/resources/static の下へコピーします。

css/ionicons.min.css
fonts/ionicons.eot
fonts/ionicons.svg
fonts/ionicons.ttf
fonts/ionicons.woff
※fonts ディレクトリの下は全てのファイルをコピーしています。
配置後は以下のディレクトリ・ファイル構成になります。

AdminLTE Dashboard & Control Panel Template の表示の確認

AdminLTE Dashboard & Control Panel Template を使用した画面が正常に表示されるか、ダウンロードした AdminLTE-2.0.4.zip の中にある starter.html を使用して確認します。

Project のルート直下に static フォルダを作成します。
解凍して作成された AdminLTE-2.0.4 の下にある starter.html を /static の下へコピーします ( Webアプリケーションの jar ファイルに入れないファイルなので src/main/resources/static の下ではなく /static の下に入れます )。コピー後、リンク先の内容に変更します。
Gradoe projects View から bootRun タスクを実行して Tomcat を起動します。
ブラウザを起動して http://localhost:8080/starter.html にアクセスし、以下の画像の画面が表示されることを確認します。

※この後画面を作成するので、Tomcat は起動したままにします。

ベースとなる html ファイルの作成

最初に今回の Web アプリケーションの画面を作る上でベースとする html ファイルを作成します。

/static の下の starter.html を選択後、コピー＆ペースト ( Ctrl+C, Ctrl+V を押す ) して base.html を作成します。
/static の下の base.html をリンク先の内容に変更します。
ブラウザで http://localhost:8080/base.html にアクセスし、以下の画像の画面が表示されることを確認します。

メール送信画面の作成

/static の下の base.html を選択後、コピー＆ペースト ( Ctrl+C, Ctrl+V を押す ) して mailsend.html を作成します。
/static の下の mailsend.html をリンク先の内容に変更します。
ブラウザで http://localhost:8080/mailsend.html にアクセスし、以下の画像の画面が表示されることを確認します。

送信済メール検索画面の作成

/static の下の base.html を選択後、コピー＆ペースト ( Ctrl+C, Ctrl+V を押す ) して mailsearch.html を作成します。
/static の下の mailsearch.html をリンク先の内容に変更します。
ブラウザで http://localhost:8080/mailsearch.html にアクセスし、以下の画像の画面が表示されることを確認します。
Run View で Ctrl+F2 を押して Tomcat を停止します。

commit、Push、Pull Request、マージ

commit、GitHub へ Push、1.0.x-makehtml -> 1.0.x へ Pull Request、1.0.x でマージ、1.0.x-makehtml ブランチを削除、をします。
- commit 時に Code Analysis のダイアログが表示されますが、css, js ファイルに TODO の文字があるために表示されただけなので、無視して「Commit」ボタンをクリックします。

メモ書き

AdminLTE 便利です！　素で Bootstrap を使うより見栄えの良い画面が作れます。
IntelliJ IDEA で html ファイルをフォーマットすると今ひとつ自分の好みのフォーマットになりません。Java のソースファイルは全然問題ないのですが。
<head> ... </head> の最後に <style></style> で独自CSSを定義する部分を設けて、わざわざ外部ファイルにせずにちょっとした調整をここに書くと便利なのではないかと思うようになってきました。いつも同じ調整しているものは後で CSS ファイルにまとめたいと思います。

ソースコード

starter.html

<html>
  <head>
    <meta charset="UTF-8">
    <title>AdminLTE 2 | Dashboard</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <!-- Bootstrap 3.3.2 -->
    <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome Icons -->
    <link href="/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
          page. However, you can choose any other skin. Make sure you
          apply the skin class to the body tag so the changes take effect.
    -->
    <link href="/css/skins/skin-blue.min.css" rel="stylesheet" type="text/css" />

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="/js/html5shiv.js"></script>
        <script src="/js/respond.min.js"></script>
    <![endif]-->
  </head>

    <!-- jQuery 2.1.3 -->
    <script src="/js/jQuery-2.1.3.min.js"></script>
    <!-- Bootstrap 3.3.2 JS -->
    <script src="/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- AdminLTE App -->
    <script src="/js/app.min.js" type="text/javascript"></script>

css, js ファイルのパスを上記の内容に変更します。

base.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ksbysample-webapp-email</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <!-- Bootstrap 3.3.2 -->
    <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <!-- Font Awesome Icons -->
    <link href="/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <!-- Ionicons -->
    <link href="/css/ionicons.min.css" rel="stylesheet" type="text/css"/>
    <!-- Theme style -->
    <link href="/css/AdminLTE.min.css" rel="stylesheet" type="text/css"/>
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
          page. However, you can choose any other skin. Make sure you
          apply the skin class to the body tag so the changes take effect.
    -->
    <link href="/css/skins/skin-blue.min.css" rel="stylesheet" type="text/css"/>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="/js/html5shiv.js"></script>
    <script src="/js/respond.min.js"></script>
    <![endif]-->
</head>
<body class="skin-blue">
<div class="wrapper">

    <!-- Main Header -->
    <header class="main-header">
        <!-- Logo -->
        <a class="logo"><b>ksbysample-email</b></a>

        <!-- Header Navbar -->
        <nav class="navbar navbar-static-top" role="navigation">
            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>
        </nav>
    </header>

    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <!-- Sidebar Menu -->
            <ul class="sidebar-menu">
                <!-- Optionally, you can add icons to the links -->
                <li class="treeview active">
                    <a href="#"><span>メール送信機能</span> <i class="fa fa-angle-left pull-right"></i></a>
                    <ul class="treeview-menu">
                        <li><a href="#"><i class="fa fa-circle-o"></i>メール送信</a></li>
                        <li><a href="#"><i class="fa fa-circle-o"></i>送信済メール検索</a></li>
                    </ul>
                </li>
            </ul>
            <!-- /.sidebar-menu -->
        </section>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                画面名
            </h1>
        </section>

        <!-- Main content -->
        <section class="content">

            <!-- Your Page Content Here -->

        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 2.1.3 -->
<script src="/js/jQuery-2.1.3.min.js"></script>
<!-- Bootstrap 3.3.2 JS -->
<script src="/js/bootstrap.min.js" type="text/javascript"></script>
<!-- AdminLTE App -->
<script src="/js/app.min.js" type="text/javascript"></script>
</body>
</html>

不要な要素の削除、タイトルの変更、メニューの変更をしています。
Ctrl+Alt+L を押して自動フォーマットもしています。

mailsend.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ksbysample-webapp-email</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <!-- Bootstrap 3.3.2 -->
    <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <!-- Font Awesome Icons -->
    <link href="/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <!-- Ionicons -->
    <link href="/css/ionicons.min.css" rel="stylesheet" type="text/css"/>
    <!-- Theme style -->
    <link href="/css/AdminLTE.min.css" rel="stylesheet" type="text/css"/>
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
          page. However, you can choose any other skin. Make sure you
          apply the skin class to the body tag so the changes take effect.
    -->
    <link href="/css/skins/skin-blue.min.css" rel="stylesheet" type="text/css"/>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="/js/html5shiv.js"></script>
    <script src="/js/respond.min.js"></script>
    <![endif]-->
</head>
<body class="skin-blue">
<div class="wrapper">

    <!-- Main Header -->
    <header class="main-header">
        <!-- Logo -->
        <a class="logo"><b>ksbysample-email</b></a>

        <!-- Header Navbar -->
        <nav class="navbar navbar-static-top" role="navigation">
            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>
        </nav>
    </header>

    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <!-- Sidebar Menu -->
            <ul class="sidebar-menu">
                <!-- Optionally, you can add icons to the links -->
                <li class="treeview active">
                    <a href="#"><span>メール送信機能</span> <i class="fa fa-angle-left pull-right"></i></a>
                    <ul class="treeview-menu">
                        <li><a href="#"><i class="fa fa-circle-o"></i>メール送信</a></li>
                        <li><a href="#"><i class="fa fa-circle-o"></i>送信済メール検索</a></li>
                    </ul>
                </li>
            </ul>
            <!-- /.sidebar-menu -->
        </section>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                メール送信画面
            </h1>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <form id="mailForm" method="post" action="/mailsend/send" class="form-horizontal">
                        <!--<div class="callout callout-danger">-->
                            <!--<p>共通エラーメッセージ表示エリア</p>-->
                        <!--</div>-->
                        <div class="box box-primary">
                            <div class="box-body">
                                <div class="form-group">
                                    <label for="from" class="control-label col-sm-2">From</label>
                                    <div class="col-sm-10">
                                        <div class="row"><div class="col-sm-8"><div class="input-group"><span class="input-group-addon"><i class="fa fa-envelope"></i></span><input type="text" name="from" id="from" class="form-control input-sm" value="" placeholder="Fromアドレスを入力して下さい"/></div></div></div>
                                        <!--<div class="row"><div class="col-sm-10"><p class="form-control-static text-danger"><small>ここにエラーメッセージを表示します</small></p></div></div>-->
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="to" class="control-label col-sm-2">To</label>
                                    <div class="col-sm-10">
                                        <div class="row"><div class="col-sm-8"><div class="input-group"><span class="input-group-addon"><i class="fa fa-envelope"></i></span><input type="text" name="to" id="to" class="form-control input-sm" value="" placeholder="Toアドレスを入力して下さい"/></div></div></div>
                                        <!--<div class="row"><div class="col-sm-10"><p class="form-control-static text-danger"><small>ここにエラーメッセージを表示します</small></p></div></div>-->
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="to" class="control-label col-sm-2">Subject</label>
                                    <div class="col-sm-10">
                                        <div class="row"><div class="col-sm-12"><input type="text" name="subject" id="subject" class="form-control input-sm" value="" placeholder="件名を入力して下さい"/></div></div>
                                        <!--<div class="row"><div class="col-sm-10"><p class="form-control-static text-danger"><small>ここにエラーメッセージを表示します</small></p></div></div>-->
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="name" class="control-label col-sm-2">氏名</label>
                                    <div class="col-sm-10">
                                        <div class="row"><div class="col-sm-8"><input type="text" name="name" id="name" class="form-control input-sm" value="" placeholder="（例）　田中　太郎"/></div></div>
                                        <!--<div class="row"><div class="col-sm-10"><p class="form-control-static text-danger"><small>ここにエラーメッセージを表示します</small></p></div></div>-->
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-sm-2">性別</label>
                                    <div class="col-sm-10">
                                        <div class="row"><div class="col-sm-12">
                                            <div class="radio">
                                                <label><input type="radio" name="sex" value="man"/>男</label>　
                                                <label><input type="radio" name="sex" value="woman"/>女</label>
                                            </div>
                                        </div></div>
                                        <!--<div class="row"><div class="col-sm-10"><p class="form-control-static text-danger"><small>ここにエラーメッセージを表示します</small></p></div></div>-->
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-sm-2">項目</label>
                                    <div class="col-sm-10">
                                        <div class="row"><div class="col-sm-8">
                                            <select name="type" id="type" class="form-control input-sm">
                                                <option>資料請求</option>
                                                <option>商品に関する苦情</option>
                                                <option>その他</option>
                                            </select>
                                        </div></div>
                                        <!--<div class="row"><div class="col-sm-10"><p class="form-control-static text-danger"><small>ここにエラーメッセージを表示します</small></p></div></div>-->
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-sm-2">商品</label>
                                    <div class="col-sm-10">
                                        <div class="row"><div class="col-sm-12">
                                            <div class="checkbox">
                                                <label><input type="checkbox" name="item" value="1"/>商品１</label>　
                                                <label><input type="checkbox" name="item" value="2"/>商品２</label>　
                                                <label><input type="checkbox" name="item" value="3"/>商品３</label>
                                            </div>
                                        </div></div>
                                        <!--<div class="row"><div class="col-sm-10"><p class="form-control-static text-danger"><small>ここにエラーメッセージを表示します</small></p></div></div>-->
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="naiyo" class="control-label col-sm-2">内容</label>
                                    <div class="col-sm-10">
                                        <div class="row"><div class="col-sm-12"><textarea rows="5" name="naiyo" id="naiyo" class="form-control input-sm" placeholder="お問い合わせ内容を入力して下さい"></textarea></div></div>
                                        <!--<div class="row"><div class="col-sm-10"><p class="form-control-static text-danger"><small>ここにエラーメッセージを表示します</small></p></div></div>-->
                                    </div>
                                </div>
                            </div>
                            <div class="box-footer">
                                <div class="text-center">
                                    <button type="button" id="send" value="send" class="btn btn-primary">送信</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 2.1.3 -->
<script src="/js/jQuery-2.1.3.min.js"></script>
<!-- Bootstrap 3.3.2 JS -->
<script src="/js/bootstrap.min.js" type="text/javascript"></script>
<!-- AdminLTE App -->
<script src="/js/app.min.js" type="text/javascript"></script>
</body>
</html>

mailsearch.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ksbysample-webapp-email</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <!-- Bootstrap 3.3.2 -->
    <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <!-- Font Awesome Icons -->
    <link href="/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <!-- Ionicons -->
    <link href="/css/ionicons.min.css" rel="stylesheet" type="text/css"/>
    <!-- Theme style -->
    <link href="/css/AdminLTE.min.css" rel="stylesheet" type="text/css"/>
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
          page. However, you can choose any other skin. Make sure you
          apply the skin class to the body tag so the changes take effect.
    -->
    <link href="/css/skins/skin-blue.min.css" rel="stylesheet" type="text/css"/>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="/js/html5shiv.js"></script>
    <script src="/js/respond.min.js"></script>
    <![endif]-->
    <style>
    <!--
    .form-group {
        margin-bottom: 5px;
    }
    .table {
        margin-top: 10px;
        margin-bottom: 0px;
    }
    .table>tbody>tr>td
    , .table>tbody>tr>th
    , .table>tfoot>tr>td
    , .table>tfoot>tr>th
    , .table>thead>tr>td
    , .table>thead>tr>th {
        padding: 5px;
    }
    -->
    </style>
</head>
<body class="skin-blue">
<div class="wrapper">

    <!-- Main Header -->
    <header class="main-header">
        <!-- Logo -->
        <a class="logo"><b>ksbysample-email</b></a>

        <!-- Header Navbar -->
        <nav class="navbar navbar-static-top" role="navigation">
            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>
        </nav>
    </header>

    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <!-- Sidebar Menu -->
            <ul class="sidebar-menu">
                <!-- Optionally, you can add icons to the links -->
                <li class="treeview active">
                    <a href="#"><span>メール送信機能</span> <i class="fa fa-angle-left pull-right"></i></a>
                    <ul class="treeview-menu">
                        <li><a href="#"><i class="fa fa-circle-o"></i>メール送信</a></li>
                        <li><a href="#"><i class="fa fa-circle-o"></i>送信済メール検索</a></li>
                    </ul>
                </li>
            </ul>
            <!-- /.sidebar-menu -->
        </section>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                送信済メール検索画面
            </h1>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header with-border bg-purple-gradient">
                            <div class="row">
                                <div class="col-xs-12">
                                    <form id="mailForm" method="post" action="/mailsend/send" class="form-horizontal">
                                        <div class="form-group">
                                            <label for="to" class="control-label col-sm-2">To</label>
                                            <div class="col-sm-10">
                                                <div class="row"><div class="col-sm-8"><div class="input-group"><span class="input-group-addon"><i class="fa fa-envelope"></i></span><input type="text" name="to" id="to" class="form-control input-sm" value="" placeholder=""/></div></div></div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="to" class="control-label col-sm-2">Subject</label>
                                            <div class="col-sm-10">
                                                <div class="row"><div class="col-sm-12"><input type="text" name="subject" id="subject" class="form-control input-sm" value="" placeholder=""/></div></div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="name" class="control-label col-sm-2">氏名</label>
                                            <div class="col-sm-10">
                                                <div class="row"><div class="col-sm-8"><input type="text" name="name" id="name" class="form-control input-sm" value="" placeholder=""/></div></div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="control-label col-sm-2">項目</label>
                                            <div class="col-sm-10">
                                                <div class="row"><div class="col-sm-12">
                                                    <div class="checkbox">
                                                        <label><input type="checkbox" name="type" value="1"/>資料請求</label>　
                                                        <label><input type="checkbox" name="type" value="2"/>商品に関する苦情</label>　
                                                        <label><input type="checkbox" name="type" value="3"/>その他</label>
                                                    </div>
                                                </div></div>
                                            </div>
                                        </div>
                                        <div class="text-center">
                                            <button type="button" id="search" value="search" class="btn btn-primary bg-gray">検索</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="box-body">
                            <div id="maillist_wrapper" class="dataTables_wrapper form-inline" role="grid">
                                <table id="maillist" class="table table-bordered table-hover dataTable" aria-describedby="maillist_info">
                                    <thead class="bg-purple">
                                        <tr role="row">
                                            <th role="columnheader" tabindex="0" aria-controls="maillist" rowspan="1" colspan="1">To</th>
                                            <th role="columnheader" tabindex="0" aria-controls="maillist" rowspan="1" colspan="1">Subject</th>
                                            <th role="columnheader" tabindex="0" aria-controls="maillist" rowspan="1" colspan="1">氏名</th>
                                            <th role="columnheader" tabindex="0" aria-controls="maillist" rowspan="1" colspan="1">項目</th>
                                        </tr>
                                    </thead>
                                    <tbody role="alert" aria-live="polite" aria-relevant="all">
                                        <tr>
                                            <td>test@sample.com</td>
                                            <td>件名１</td>
                                            <td>田中　太郎</td>
                                            <td>資料請求</td>
                                        </tr>
                                        <tr>
                                            <td>test2@sample.com</td>
                                            <td>件名２</td>
                                            <td>鈴木　花子</td>
                                            <td>商品に関する苦情</td>
                                        </tr>
                                        <tr>
                                            <td>test3@sample.com</td>
                                            <td>件名３</td>
                                            <td>木村　二郎</td>
                                            <td>その他</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="row">
                                    <div class="col-xs-12">
                                        <div class="dataTables_paginate paging_bootstrap">
                                            <ul class="pagination">
                                                <li class="prev disabled"><a href="#">← Previous</a></li>
                                                <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>
                                                <li class="next"><a href="#">Next → </a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 2.1.3 -->
<script src="/js/jQuery-2.1.3.min.js"></script>
<!-- Bootstrap 3.3.2 JS -->
<script src="/js/bootstrap.min.js" type="text/javascript"></script>
<!-- AdminLTE App -->
<script src="/js/app.min.js" type="text/javascript"></script>
</body>
</html>

履歴

2015/04/15
初版発行。

かんがるーさんの日記

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

Spring Boot でメール送信する Web アプリケーションを作る ( その４ )( HTMLファイルの作成、確認 )

概要