かんがるーさんの日記

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

Spring Boot でログイン画面 + 一覧画面 + 登録画面の Webアプリケーションを作る ( その1 )( MySQL のダウンロード、インストール )

概要

Spring Boot でログイン画面、検索/一覧画面、登録画面 ( 入力→確認→完了 ) がある Webアプリケーションを作成してみます。

  • Project 名は ksbysample-webapp-basic とします。
  • 構成要素は、Spring Boot + Spring Web MVC + Thymeleaf + Spring Data JPA + MyBatis3 ( 検索のみ ) + Spring Security です。
  • DB は MySQL 5.6 を PC にインストールして使用します。インストール先はインストーラー任せにします。
  • DB、テーブルは MySQL のサンプルとしてインストールされる world DB を使用します。
  • 実行環境は開発用 ( develop ) と本番用 ( product ) の2種類を想定し、spring.profiles.active に指定された文字列で切り替えられるようにします。また未設定時はエラーになるようにします。
  • getter/setter メソッドの作成を省くために lombok をインストールします。
  • 画面は Twitter Bootstrap を使用して作成します。
  • ログイン画面では Spring Security を使用します。
  • 検索/一覧画面は Spring Data JPA 版、MyBatis-Spring 版の2画面作成します。ページネーションも実装します。
  • 個人的に検索画面では SQLファイルを使いたいので MyBatis-Spring 版を先に実装します。最後に Spring Data JPA 版 ( Specifications を使用する ) も実装してみます。
  • 登録画面は Spring Data JPA版の1種類のみ作成します。Bean Validation による入力チェックも実装してみます。
  • 以下の順序で進めます。
    • MySQL 5.6 のインストール
    • Project の作成
    • develop/product 環境(spring.profiles.activeで指定)で設定ファイルを切り替える&未設定時はエラーにする
    • lombok のインストール
    • HTMLファイルの作成、確認
    • Controller クラスの作成、Thymeleaf テンプレートファイルの作成 ( この時点でひと通り画面遷移が見られるようにします )
    • 検索/一覧画面 ( MyBatis-Spring版 ) の作成、確認
    • ログイン画面の作成、確認 ( ログアウト機能もここで作ります )
    • 登録画面 ( 入力→確認→完了 ) の作成、確認
    • 検索/一覧画面 ( Spring Data JPA版 ) の作成、確認
  • 今回の手順で確認できるのは以下の内容です。
    • MySQL 5.6 のインストール

ソフトウェア一覧

  1. Visual Studio 2013 の Visual C++ 再頒布可能パッケージ
    http://www.microsoft.com/ja-JP/download/details.aspx?id=40784

  2. Download MySQL Community Server
    http://dev.mysql.com/downloads/mysql/

参考にしたサイト

手順

Visual Studio 2013 の Visual C++ 再頒布可能パッケージのダウンロード、インストール

  1. Visual Studio 2013 の Visual C++ 再頒布可能パッケージのページにアクセスします。 http://www.microsoft.com/ja-JP/download/details.aspx?id=40784

  2. ページが表示されたら、画面上部にある「ダウンロード」ボタンをクリックします。

  3. 「ダウンロードするプログラムを選んでください。」の画面が表示されます。vcredist_x64.exe、vcredist_x86.exe をチェックして「次へ」ボタンをクリックします。

  4. vcredist_x64.exe、vcredist_x86.exe がダウンロードされるので PC に保存します。

  5. 保存した vcredist_x64.exe を実行します。

  6. Microsoft Visual C++ 2013 Redistributable (x64)」ダイアログが表示されます。「ライセンス条項および使用条件に同意する」をチェックした後「インストール」ボタンをクリックします。

  7. 「セットアップの進行状況」画面が表示されインストールが開始されます。

  8. インストールが完了すると「セットアップ完了」画面が表示されます。「閉じる」ボタンをクリックします。

  9. vcredist_x86.exe も同様に実行してインストールします。

Visual Studio 2013 の Visual C++ 再頒布可能パッケージをインストールしないと、MySQL のインストール中に「msvcp120.dllが見つからない」旨のエラーメッセージが表示されます。

MySQL 5.6 のダウンロード

  1. MySQL Community Server のダウンロードページにアクセスします。 http://dev.mysql.com/downloads/mysql/

  2. ページの中央にある「Select Platform」で Microsoft Windows が選択されていることを確認した後、その下にある「Windows (x86, 64-bit), MySQL Installer MSI」の download ボタンをクリックします。

  3. 「Download MySQL Installer」ページが表示されます。「Windows (x86, 32-bit), MSI Installer (mysql-installer-community-5.6.22.0.msi)」の download ボタンをクリックします。

  4. 「Begin Your Download - mysql-installer-community-5.6.22.0.msi」ページが表示されます。画面下部の「No thanks, just start my download.」リンクをクリックします。mysql-installer-community-5.6.22.0.msi がダウンロードされるので PC に保存します。

MySQL 5.6 のインストール

  1. mysql-installer-community-5.6.22.0.msi を実行します。

  2. MySQL Installer」ダイアログが表示されます。「I accept the license items」をチェックした後「Next >」ボタンをクリックします。

  3. 「Choosing a Setup Type」画面が表示されます。何も変更せずに「Next >」ボタンをクリックします。

  4. 「Check Requirements」画面が表示されます。何も変更せずに「Next >」ボタンをクリックします。

  5. 「Installation」画面が表示されます。「Execute」ボタンをクリックします。

  6. インストールが開始されます。Status 欄が全て Complete になったら「Next >」ボタンをクリックします。

  7. 「Product Configuration」画面が表示されます。「Next >」ボタンをクリックします。

  8. 「Type and Networking」画面が表示されます。何も変更せずに「Next >」ボタンをクリックします。

  9. 「Account and Roles」画面が表示されます。「MySQL Root Password」及び「Repeat Password」欄にパスワードを入力後「Next >」ボタンをクリックします。

  10. Windows Service」画面が表示されます。以下の値を変更後「Next >」ボタンをクリックします。

    • 「Start the MySQL Server at System Startup」のチェックを外します ( 開発時以外は起動しておきたくないため )
  11. 「Apply Server Configuration」画面が表示されます。「Execute」ボタンをクリックします。画面中央の「Configuration Steps」の全ての項目に緑のチェックが入ったことを確認した後「Finish」ボタンをクリックします。

  12. 再び「Product Configuration」画面が表示されます。「Next >」ボタンをクリックします。

  13. 「Connect To Server」画面が表示されます。画面下部の「Check」ボタンをクリックして Connection succesful. のメッセージが表示されたことを確認した後「Next >」ボタンをクリックします。

  14. 「Apply Server Configuration」画面が表示されます。「Execute」ボタンをクリックします。画面中央の「Configuration Steps」の全ての項目に緑のチェックが入ったことを確認した後「Finish」ボタンをクリックします。

  15. 再び「Product Configuration」画面が表示されます。「Next >」ボタンをクリックします。

  16. 「Installation Complete」画面が表示されます。「Start MySQL Workbench after Setup」のチェックを外した後「Finish」ボタンをクリックします。

MySQL Workbench の起動、world DB の確認

  1. MySQL Workbench を起動します。MySQL Workbench は以下の場所にインストールされています。
    C:\Program Files (x86)\MySQL\MySQL Workbench 6.2 CE\MySQLWorkbench.exe

  2. MySQL Workbench が起動したら「Local instance MySQL」のボタンをクリックします。

    f:id:ksby:20150102231502p:plain

  3. 「Connect to MySQL Server」ダイアログが表示されるので、パスワードを入力後「OK」ボタンをクリックします。

  4. 「Local instance MySQL」タブの画面が表示されます。画面左側の「Navigator」の「SCHEMAS」の右上の矢印のアイコンをクリックします。

    f:id:ksby:20150102232229p:plain

  5. 「Navigator」内に「SCHEMAS」のみ表示されますので、world DB の Tables を展開して city, country, countrylanguage の3テーブルが作成されていることを確認します。

    f:id:ksby:20150102232533p:plain

ソースコード

履歴

2015/01/02
初版発行。