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

かんがるーさんの日記

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

IntelliJ IDEA の起動、簡単な Spring Boot Project の作成&実行 ( その1 )

概要

IntelliJ IDEA で簡単な Spring Boot Project ( Spring Boot + Thymeleaf + Spring Loaded ) を作成してみます。

  • Project は C:\project-springboot の下に作成します。あらかじめこのフォルダを作成しておきます。
  • Project 名は ksbysample-simple とします。
  • Spring Boot は 1.2.0 を使用します。
  • この手順で確認できるのは以下の内容です。
    • Spring Boot による簡単な Web アプリケーションの作成、実行
    • Spring Boot Web アプリケーションの jarファイルの作成、実行
    • テンプレートエンジン Thymeleaf の簡単な使い方

ソフトウェア一覧

参考にしたサイト

  1. Spring Boot Reference Guide
    http://docs.spring.io/spring-boot/docs/1.2.0.RELEASE/reference/htmlsingle/

手順

IntelliJ IDEA の起動、Spring Boot Project の作成

  1. IntelliJ IDEA を起動します。

  2. 「Welcome to IntelliJ IDEA」画面が表示されます。画面中央の「Create New Project」をクリックします。

  3. 「New Project」画面が表示されます。画面左側のリストから「Gradle」を選択します。

  4. 画面右側に Gradle Project の設定画面が表示されます。以下の設定をした後「Next」ボタンをクリックします。

    • 「Create directories for empty content roots automatically」をチェックします。
      ※プロジェクトの src ディレクトリが自動で作成されます。
  5. プロジェクト名とディレクトリを入力する画面が表示されます。以下の値を入力後「Finish」ボタンをクリックします。「Directory Does Not Exist」ダイアログが表示されたら「OK」ボタンをクリックします。

    • 「Project name」に ksbysample-simple と入力します。
    • 「Project location」に C:\project-springboot\ksbysample-simple と入力します。
  6. IntelliJ IDEA のメイン画面が表示されます。起動後「このプログラムの機能のいくつかが Windows ファイアウォールでブロックされています」というメッセージが表示された「Windows セキュリティの重要な警告」ダイアログが表示されますので、ダイアログ内の設定は変更せずに「アクセスを許可する」ボタンをクリックします。

  7. 「Tip of the Day」ダイアログが表示されますので「Close」ボタンをクリックして閉じます。表示が不要な場合には「Show Tips on Startup」のチェックを外してから「Close」ボタンをクリックします。

  8. メイン画面の左下に「Tool Windows Quick Access」というメッセージが表示された吹き出しが表示されますので、吹き出しが指し示すアイコンをクリックして tool windows を表示します。その後、吹き出し内の「Got it!」ボタンをクリックして吹き出しを閉じます。

簡単な Web アプリケーションの作成、実行

  1. 画面左側の Project View で、以下の階層にある build.gradle をダブルクリックして開きます。

     ksbysample-simple
     └ src
        └ build.gradle

  2. build.gradle をリンク先のその1の内容に変更します。

  3. 画面右側の Tool Window から「Gradle」をクリックして Gradle tasks View を表示します。View 表示後、View の左上にある「Refresh all Gradle projects」アイコンをクリックして、変更した build.gradle の内容を反映します。

    f:id:ksby:20141228051436p:plain

    • 更新にはしばらく時間がかかります。画面右下に進捗状況が表示されますので、進捗状況の表示が消えるまで待ちます。

    f:id:ksby:20141228052310p:plain

    • 更新中、「このプログラムの機能のいくつかが Windows ファイアウォールでブロックされています」というメッセージが表示された「Windows セキュリティの重要な警告」ダイアログが表示されますので、ダイアログ内の設定は変更せずに「アクセスを許可する」ボタンをクリックします。
  4. 画面左側の Project View で、以下の階層にある java を選択した後コンテキストメニューを表示し、「New」->「Package」を選択します。「New Package」ダイアログが表示されたら ksbysample と入力した後「OK」ボタンをクリックします。

     ksbysample-simple
     └ src
        └ main
           └ java

  5. 同じ方法で ksbysample の下に simple という package を作成します。Project View には以下のように表示されます。

     ksbysample-simple
     └ src
        └ main
           └ java
              └ ksbysample.simple

  6. 個人的に package の階層はそのまま表示されている方が好みですので、設定を変更します。Project View の右上に表示されている歯車アイコンをクリックしてメニューを表示し、「Compact Empty Middle Packages」のチェックを外します。

    以下の画像はメニューからチェックを外した後の状態です。

    f:id:ksby:20141228044334p:plain

  7. ksbysample.simle の下に web という package を作成します。

  8. Project View から ksbysample.simple package を選択した後コンテキストメニューを表示し、「New」->「Java Class」を選択します。「Create New Class」ダイアログが表示されたら Application と入力した後「OK」ボタンをクリックします。

  9. 作成した Application.java をダブルクリックして開き、リンク先の内容に変更します。

  10. Project View から ksbysample.simple.web package を選択した後コンテキストメニューを表示し、「New」->「Java Class」を選択します。「Create New Class」ダイアログが表示されたら TestController と入力した後「OK」ボタンをクリックします。

  11. 作成した TestController.java をダブルクリックして開き、リンク先のその1の内容に変更します。

    • Spring Boot のサンプルでは class の method にのみ @RequestMapping が付与されていますが、URLの最初の階層の文字列1つに付き1クラス作成した方が分かりやすそうに思えたので、class に @RequestMapping を付与し、method にはそのURLの下の階層のパスを記載することにしています。

    • class に記載した @RequestMapping の URL に対応する method 名は index にして、何も引数を書かない @RequestMapping を付与しています。

  12. Gradle tasks View を表示し、build タスクをダブルクリックして実行します。

    f:id:ksby:20141228113626p:plain

    問題がなければ画面下部の Run View に BUILD SUCCESSFUL の文字が表示されます。

    f:id:ksby:20141228113843p:plain

  13. Tomcat を起動して作成した Webアプリケーションの動作を確認します。Gradle tasks View で bootRun タスクをダブルクリックして実行します。Run View に Spring Boot Webアプリケーションのログが出力され、正常に起動すれば最後に Started Application のログが出力されます。

    2014-12-28 11:42:19.511  INFO 8072 --- [           main] ksbysample.simple.Application            : Started Application in 5.526 seconds (JVM running for 6.324)

  14. ブラウザを起動し、http://localhost:8080/test にアクセスします。以下の画像と同じ内容が表示されます。

    f:id:ksby:20141228114727p:plain

  15. Run View で Stop ボタンをクリックして Tomcat を停止します。Tomcat が停止すると Run View 上に「既存の接続はリモート ホストに強制的に切断されました。」という文字列が表示されます。

    f:id:ksby:20141228115446p:plain

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

    f:id:ksby:20141228124056p:plain

jar ファイルの作成、実行

  1. jar ファイルは Gradle の build タスクを実行した時に以下のパスに作成されています。

    • C:\project-springboot\ksbysample-simple\build\libs
    • ksbysample-simple-0.0.1-SNAPSHOT.jar
      • jar ファイル名は build.gradle の jar タスクの設定を元に、baseName + "-" + version + ".jar" になります。
  2. IntelliJ IDEA の Terminal から jar ファイルを実行します。まずは画面下部の Tool Window から「Terminal」をクリックして Terminal View を表示します。

    f:id:ksby:20141228122844p:plain

  3. Terminal View で java -jar build\libs\ksbysample-simple-0.0.1-SNAPSHOT.jar を実行します。jar ファイル内に組み込まれた Embedded Tomcat が起動し、Spring Boot Webアプリケーションのログが Terminal View 上に出力されます。正常に起動すれば最後に Started Application のログが出力されます。

  4. ブラウザを起動し、http://localhost:8080/test にアクセスします。以下の画像と同じ内容が表示されます。

    f:id:ksby:20141228114727p:plain

  5. Terminal View で Ctrl+C を入力し、Tomcat を停止します。

テンプレートエンジン Thymeleaf の簡単な使い方

  1. Project View から build.gradle をダブルクリックして開き、リンク先のその2の内容に変更します。

  2. Gradle tasks View の「Refresh all Gradle projects」アイコンをクリックして変更した build.gradle の内容を反映します。

  3. Thymeleaf のテンプレートファイルを置く templates ディレクトリを resources ディレクトリの下に作成します。

  4. Project View で、以下の階層にある resources を選択した後コンテキストメニューを表示し、「New」->「Directory」を選択します。「New Directory」ダイアログが表示されたら templates と入力した後「OK」ボタンをクリックします。

  5. 同じ方法で templates ディレクトリの下に test ディレクトリを作成します。Project View には以下のように表示されます。

     ksbysample-simple
     └ src
        └ main
           └ resources
              └ templates
                 └ test

  6. test ディレクトリを選択した後コンテキストメニューを表示し、「New」->「HTML File」を選択します。「HTML File」ダイアログが表示されたら thymeleaf-sample.html と入力した後「OK」ボタンをクリックします。

  7. 作成した thymeleaf-sample.html をダブルクリックして開き、リンク先の修正後の内容に変更します。

  8. ksbysample.web package の下の TestController.java をダブルクリックして開き、index メソッドの下にリンク先のその2のコードを追加します。

  9. Gradle tasks View から build タスクを実行し、BUILD SUCCESSFUL のメッセージが表示されることを確認します。

  10. Gradle tasks View から bootRun タスクを実行して Tomcat を起動します。

  11. ブラウザを起動し、http://localhost:8080/test/thymeleaf-sample にアクセスします。以下の画像と同じ内容が表示されます。

    f:id:ksby:20141228161536p:plain

  12. Ctrl+F2 を押して Tomcat を停止します。

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

    f:id:ksby:20141228162442p:plain

ソースコード

build.gradle

■その1

buildscript {
    repositories {
        jcenter()
    }

    dependencies {
        classpath("org.springframework.boot:spring-boot-gradle-plugin:1.2.0.RELEASE")
        classpath("org.springframework:springloaded:1.2.1.RELEASE")
    }
}

apply plugin: 'java'
apply plugin: 'spring-boot'
apply plugin: 'idea'

jar {
    baseName = 'ksbysample-simple'
    version =  '0.0.1-SNAPSHOT'
}

idea {
    module {
        inheritOutputDirs = false
        outputDir = file("$buildDir/classes/main/")
    }
}

repositories {
    jcenter()
}

dependencies {
    compile("org.springframework.boot:spring-boot-starter-web:1.2.0.RELEASE")
    testCompile("org.springframework.boot:spring-boot-starter-test")
}

■その2

buildscript {
    repositories {
        jcenter()
    }

    dependencies {
        classpath("org.springframework.boot:spring-boot-gradle-plugin:1.2.0.RELEASE")
        classpath("org.springframework:springloaded:1.2.1.RELEASE")
    }
}

apply plugin: 'java'
apply plugin: 'spring-boot'
apply plugin: 'idea'

jar {
    baseName = 'ksbysample-simple'
    version =  '0.0.1-SNAPSHOT'
}

idea {
    module {
        inheritOutputDirs = false
        outputDir = file("$buildDir/classes/main/")
    }
}

repositories {
    jcenter()
}

dependencies {
    compile("org.springframework.boot:spring-boot-starter-web:1.2.0.RELEASE")
    compile("org.springframework.boot:spring-boot-starter-thymeleaf")
    testCompile("org.springframework.boot:spring-boot-starter-test")
}
  • dependencies に spring-boot-starter-thymeleaf の行を追加します。

Application.java

package ksbysample.simple;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Application {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

}

TestController.java

■その1

package ksbysample.simple.web;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping("/test")
public class TestController {

    @RequestMapping
    @ResponseBody
    public String index() {
        return "これは /test のページです。";
    }

}

■その2

    @RequestMapping("/thymeleaf-sample")
    public String thymeleafSample() {
        return "test/thymeleaf-sample";
    }

thymeleaf-sample.html

■ 修正前

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</

■ 修正後

<!DOCTYPE html>
<html>
<head lang="ja">
    <meta charset="UTF-8"/>
    <title></title>
</head>
<body>
これは /test/thymeleaf-sample のページです。
</body>
</html>
  • head タグの lang 属性の値を en → ja へ変更します。
  • <meta charset="UTF-8"> の末尾を > → /> へ変更します。Thymeleaf では終了タグがない要素の場合にこの変更をしないとページにアクセスした時に SAXParseException が発生してページが表示されません。例えば br は <br>は×で、<br/> は○です。
  • body 内に "これは /test/thymeleaf のページです。" の文字列を記入します。

履歴

2014/12/28
初版発行。
2015/01/11
build.gradle の dependencies で spring-boot-starter-parent の記述を削除し、spring-boot-starter-web でバージョン番号を指定するよう変更。