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

vaguely

和歌山に戻りました。ふらふらと色々なものに手を出す毎日。

SpringBoot + IntelliJ+ Gradle(とりあえずHTML表示するところまで)

Windows SpringBoot IntelliJ IDEA Typescript

はじめに

IntelliJ IDEA Ultimate Editionのパーソナルアカウント購入しました。
これは先日行われたScala関西 Summit 2016に参加した影響もあったりなかったりします。

それは良いとして。

ここ最近のJava(特にver.8以降)の仕様に触れてみたい、ということもあってSpringBootに入門してみることにしました。
SpringではSpring Tool Suite(STS)というEclipseベースの開発ツールが用意されています。

素直にそれを使えば良いのですが、できればAndroid Studioと操作感を揃えたいと思ったため、IntelliJ(当時はCommunity Edition)を使ってみたらハマったためここに書き残して置くことにします。

Projectを作る

SpringBootのプロジェクトの雛形は、Spring Initializrで作ることができます。
IntelliJのUltimate Editionだと File/New/Project からも同じ機能が利用できるため、そちらから作成してもOKです。

ここでは「Gradle Project」を選択し、SpringBootのバージョンは「1.4.1」としました。
またDependenciesとして「Web」を指定しています。

上記Webサイトで作成した場合はZipファイルのダウンロードが始まるので、適当なところに展開します。

Gradleの編集

プロジェクト直下にあるbuild.gradleを以下のように変更します(SpringLoadedとThymeleafについては後述)。

build.gradle

buildscript {
    ext {
        springBootVersion = '1.4.1.RELEASE'
    }
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
        classpath("org.springframework:springloaded:1.2.5.RELEASE")
    }
}
apply plugin: 'java'
apply plugin: 'spring-boot'

jar {
    baseName = 'springboottest'
    version = '0.0.1-SNAPSHOT'
}
sourceCompatibility = 1.8
targetCompatibility = 1.8

repositories {
    mavenCentral()
}
dependencies {
    compile('org.springframework.boot:spring-boot-starter-thymeleaf')
    compile('org.springframework.boot:spring-boot-starter-web')
    testCompile('org.springframework.boot:spring-boot-starter-test')
}

ビルドの設定

次はGradleとSpringBootのビルド設定です。

右上のメニュー -> EditConfigrations -> Run/Debug Configrationsを開きます。 f:id:mslGt:20161015101358j:plain

Gradle

左上の+ボタンをクリックしてGradleを選択します。

以下のように入力します。 f:id:mslGt:20161015101302j:plain

SpringBoot

左上の+ボタンをクリックしてSpringBootを選択します。

以下のように入力します。 f:id:mslGt:20161015101313j:plain

VM optionsで「-Dserver.port=8099」と指定することで、実行時に「localhost:8080」ではなく「localhost:8099」に変更できます。
他のサーバーが8080ポートを使っている場合などに便利です。

Controllerの追加

特定のURLにアクセスされた場合に指定のページを表示する、ルーティングを行うControllerクラスを追加します。

MainController.java

package jp.masanori;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class MainController {
    @RequestMapping("/home")
    public String mainpage(Model model){
        return "mainpage";
    }
}
  • 「@Controller」を付けることでControllerクラスとして振る舞うことができるようになります。
  • 「@RequestMapping("/home")」によって、「localhost:8099/home」にアクセスしたときにmainpage.htmlが表示されるようになります。

ページを追加する

Thymeleafを使ってHTMLを表示してみます。

build.gradle

~省略~
dependencies {
    compile('org.springframework.boot:spring-boot-starter-thymeleaf')
    compile('org.springframework.boot:spring-boot-starter-web')
    testCompile('org.springframework.boot:spring-boot-starter-test')
}

templates

Controllerで指定したmainpage.htmlを、src/main/resources/templates に追加します。

mainpage.html

< !DOCTYPE html >
< html lang="jp" >
    < head >
        < meta charset="UTF-8" / >
        < title >MainPage< / title >
    < / head >
    < body >
        < div >世界さん、チーッス< / div >
    < / body >
< / html >
  • File -> New -> HTML からHTMLファイルを作成するとmetaタグが閉じていない状態で作成されますが、実行時にエラーになるので忘れずに閉じておきます。
  • 今回は特に何もしていませんが、Controllerクラスから値を渡してページ上に反映させる、ということも可能です。

static

ルーティングやControllerからデータを渡す必要がない場合は、src/main/resources/static に置きます。

staticディレクトリ直下が「localhost:8099」として扱われるため、subpage.htmlを置いた場合、「localhost:8099/subpage.html」にアクセスするとページが表示されます。

また、JavascriptCSSもここに置くようです。

SpringLoaded

SpringBootのPlayボタンを押すとWebブラウザからアクセスできるようになるわけですが、何かコードを変更するたびに再起動するのは面倒なもの。

ということで、SplingLoadedを使ってみることにしました。

build.gradle

buildscript {
    ext {
        springBootVersion = '1.4.1.RELEASE'
    }
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
        classpath("org.springframework:springloaded:1.2.5.RELEASE")
    }
}
~省略~

が、実際に動かしてみても変更が反映されないorz

どうやらIntelliJ上で動作させると、SplingLoadedが効かないようです。

Typescript

AngularJS2.0を使ってみたい、ということでまずはTypescriptを使ってみます。

Node.jsをインストールしておきます。

そのあとFile -> Settings -> Languages & Frameworks -> Typescript -> Common -> Node interpreter にnode.exeをセットします。

src/main/resources/static/js にmainpage.tsを追加します。
で、コードを書いていきます。

は良いのですが、TypescriptはそのままHTMLから呼び出せるわけではなく、Javascriptへのトランスパイルが必要となります。

その方法を調べようとしたところ...

おや?

f:id:mslGt:20161015101414j:plain

ということで、特に何もしなくてもトランスパイルは自動で実行されました。

HTMLから呼び出すには、「js/mainpage.js」を指定すればOKです。

おわりに

とりあえずページを表示することはできました。

IntelliJ IDEAのUltimate Editionではちょっと戸惑ってしまうくらい機能があるため、引き続きその力を借りつつあれこれやってみようかと思います。

参考

Tymeleaf