ぼくのかんがえたさいきょうのおせろ【Gradleアプリ編①】

#１．はじめに

　[以前の記事](https://qiita.com/syoukou/items/bb74cd4f71cbfcb581fb)でSpring Bootに初挑戦し、gradleの「Hello World!」レベルまで何とか到達したのですが、その後うっかりEclipseをver.2019-06に更新してしまい、また前のバージョンに戻すのも面倒くさかったため、せっかくなので新しいバージョンでgradleアプリの作成に再挑戦することにしました。

　しかしながら、バージョンが異なるために今までうまくできていたことを失敗してしまうなど、相変わらずの暗中模索っぷりであり、同じことを何も見ずに再現するのは極めて困難と思われるため、今回も備忘録としてアプリ作成までの経緯を遺していきたいと思います。

###１．１　本記事の目標

　GradleによるSpring BootアプリのHello World作成
　（最終目標はオセロアプリの作成）

###１．２　バージョンなど

- Pleiades All in Oneのバージョン: Eclipse 2019-06
- STS(Spring Tool Suite)のバージョン: 4.3.1 (Spring Tools 4)
- Buildshipのバージョン: 3.x

###１．３　参考書籍

　今回から次の書籍を参考にしています。本記事において「[入門書](#１２参考書籍)」とあれば、この書籍を指すものとします。

- 掌田津耶乃（2018）『Spring Boot 2 プログラミング入門』秀和システム

　これは余談ですが、本記事では「[入門書](#１２参考書籍)」という語句すべてに、この節に飛んでくるようページ内リンクを貼ったのですが、書き方のルールが複雑で苦戦してしまいました。ページ内リンクについては[こちらの記事](https://qiita.com/hennin/items/7ee58dd7d7c013a23be7)を参考にしました。

#２．もう一度「Hello World!」まで

###２．１　Pleiades All in Oneのインストール

　Javaの開発を行う上でEclipseは非常に便利だと思うのですが、英語に自信のない私にはこのままだと辛いです。そこで、Eclipseをインストールすると同時に日本語化まで行ってくれるPleiadesを使用することにしました。

　以下、Pleiades All in Oneのインストール手順です。

　Pleiadesのインストールは[こちら](http://mergedoc.osdn.jp/)からできます。「Eclipse 2019-06」と書かれた青いボタンがあるので、クリックします。
　開発対象の言語に合わせてパッケージを選ぶのですが、PCの容量に不安がなければUltimateのFull Editionを選びましょう。ちなみに2.1GBです。回線速度によってはダウンロードに時間がかかるかも知れません。なぜ私は帰省中の新幹線の中でダウンロードをし始めたのか、ｺﾚｶﾞﾜｶﾗﾅｲ

　ダウンロードしたファイルは解凍しなければならないのですが、今回のように2GBもの__大容量ファイルだとソフトウェアによっては正常に解凍できない可能性__があります。私は解凍するために[7-Zip](https://sevenzip.osdn.jp/)を使いました。
　解凍されるとpleiadesという名前のフォルダが作成されるので、それを好きな場所に保存すればOKです（いわゆるインストールは必要ありません）。しかし、私たちが作成したソースコードなどを保存するworkspaceというフォルダがあるのですが、__workspaceフォルダのパスには半角スペースや全角文字を入れると色々不味い__みたいなので、私はpleiadesフォルダをC:\の直下に置くことにしました。
　また、デフォルトではpleiadesフォルダ内にworkspaceフォルダがあるのですが、私はこのworkspaceフォルダもC:\の直下に置きました（pleiadesをアンインストールするとき、うっかりworkspaceにある自分が作成したソースコードを消してしまわないため）。workspaceフォルダをどこに置くかに関しては、パスに半角スペースや全角文字を含まなければ、好みで決めれば良いと思います。
　余談ですが、単にworkspaceという名前だと何のワークスペースなのかが分からないため、私は「eclipse.workspace」という名前にしています。また、Eclipseが起動するとこのワークスペースフォルダが読み込まれるため、沢山のファイルがあるとそれだけ起動に時間がかかってしまいます。そこで私は、「eclipse.workspace」フォルダの下に「eclipse.workspace.myOthello」とか、「eclipse.workspace.paiza.drank」とかの小ワークスペース用フォルダを作成することにしました（ワークスペースの切り替え方法は後述します）。

###２．２　Eclipse起動～Gradleインストール

　pleiadesフォルダの中にeclipseフォルダがあり、その中にeclipse.exeがあるのでダブルクリックすると、Eclipseが起動します。最初にワークスペースを聞かれるので、上記で作成したワークスペース用のフォルダを指定しておきましょう。
　もし、うっかり違うフォルダをワークスペースに指定しても、後から切り替えられるので問題ありません。メニューバーの「ファイル」から「ワークスペースの切り替え」を選べばOKです。

　さて、「[入門書](#１２参考書籍)」の1.2節ではSpring Framework開発環境の準備としてSTS(Spring Tool Suite)のインストール方法が説明されているのですが、説明に用いられている画面のキャプチャーがすべて英語のままで記述されているため、本記事では日本語(pleiadesで日本語化された項目名)で簡単に説明します。

　メニューバーの「ヘルプ」から「Eclipse マーケットプレース」を選びます。すると新しい画面が立ち上がり、「Search」タブが選択されています。さらにその中には検索文字列の入力欄があるので、「sts」とだけ入れてEnterを押すと検索結果が表示されます。検索結果の中に「Spring Tools」という項目がいくつかあるはずです。

　私自身良く分かっていないのですが、色々試行錯誤していたためか、検索結果の中の「Spring Tools 4」の欄内のボタンが「インストール済み」と表示されていたため、特にインストールは必要ありませんでした（既にインストールしていたのかも知れませんし、最新版のEclipseには初めからSpring Tools 4が入っているのかも知れません）。もし「Spring Tools 4」の欄内に「インストール」と書かれたボタンがあるのなら、押してインストールしてください。以前Spring Tools 3をインストールしたときの経験上、込み入った設定は必要なかったはずです。

　次に、「[入門書](#１２参考書籍)」の3.2節でSTSでGradleを利用する方法が説明されているのですが、私が構築しているEclipseとはバージョンが異なるため、同じようにやってもうまくいきません。Google先生に相談した結果、次のように試行錯誤しました。
　メニューバーの「ヘルプ」から「新規ソフトウェアのインストール」を選択します。新しいウィンドウが立ち上がり、作業対象としてサイトのアドレスを入力する必要があるのですが、そのアドレスを以下の手順で取得しました。

1. 「[入門書](#１２参考書籍)」に書かれているBuildshipとかgradleとかdownloadとかのキーワードでググる。
1. 検索結果に[Eclipse Buildship: Eclipse Plug-ins for Gradle](https://projects.eclipse.org/projects/tools.buildship/downloads)というサイトが現れるのでクリックする。
1. 「Download Eclipse Buildship: Eclipse Plug-ins for Gradle」という黄色いボタンがあるので押すと、[GitHubのeclipseのサイト](https://github.com/eclipse/buildship/blob/master/docs/user/Installation.md)に飛ぶ。
1. 下の方に「Update sites for Buildship 3.x」という表があるので、とりあえず最新の2019-03のreleaseのアドレス(https://download.eclipse.org//buildship/updates/e411/releases/3.x )をコピーする。

　つまり、__Google先生はいつもみんなの味方！__

　で、このアドレスを作業対象の所にペーストすると、下の枠内に「Buildship: Gradle 用 Eclipse プラグイン」というリストが表示されるので、チェックを入れてから「次へ」を押します。画面が変わったら、もう一度「次へ」を押します。
　すると、ライセンスの画面になるので、当然「使用条件の条項に同意します」にチェックを入れたら「完了」を押しましょう。しばらくするとEclipseを再起動するよう促されるので、再起動します。これでGradleのインストールは完了です。

###２．３　Springスターター・プロジェクトの作成

　（デフォルトだと）左上にあるパッケージ・エクスプローラーの空白部分で右クリックし、「新規」→「プロジェクト」と選びます。※__Gradleプロジェクトは選ばない__ので注意！
　ウィザードの選択画面が立ち上がるのですが、一覧の下の方に「Spring Boot」があるのでそれを選び、さらに「Spring スターター・プロジェクト」を選びます。

　次の設定画面では、名前やグループなどを決めていくのですが、__型は必ず上記でインストールした「Gradle (Buildship 3.x)」にします__。さらに次の依存関係の画面では、下の方に「Web」があるので、その中のすべての項目にチェックを入れてから「次へ」をクリックします。次の画面で「完了」を押せば、パッケージ・エクスプローラーに作成したプロジェクトが表示されます。

　試しに実行してみます。先程表示されたプロジェクト名の上で右クリックし、「実行」→「Spring Boot アプリケーション」と選んでいくと、コンソールタブ内に以下のようなSpringで始まるメッセージが出力されるはずです。

```console
  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::        (v2.1.7.RELEASE)
```

　貼り付けるとSpringの字が見づらい・・・

###２．４　Hello World!

　まだ表示するページを作成していないため、そちらに着手します。パッケージ・エクスプローラー名で右クリックし、「新規」→「クラス」と選びます。新規Javaクラスの画面が立ち上がるので、名前をMyOthelloControllerとし、コメントの生成は特に必要ないためチェックを外してから、「完了」をクリックします。

　パッケージと中身が空のクラスが置いてあるだけの、シンプルなソースコードが作成されましたので、ここに次のように追加します。

```Java:MyOthelloController.java
package myothello.gradle;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class MyOthelloController {
	@RequestMapping("/")
	public String index() {
		return "Hello my othello world!";
	}
}
```

　ここまでできたら先程と同様に実行し、適当なブラウザでhttp://localhost:8080/ にアクセスすると、indexメソッドが返す文字列"Hello my othello world!"が表示されています。

#３．GradleによるWebページ作成

　「[入門書](#１２参考書籍)」の3.4節を参考にしながら、Webページの作成をしていきます。

###３．１　spring-boot-starter-thymeleafのダウンロード

まず、build.gradleファイルの最後にあるdependenciesを以下のように変更します。バージョン違いのためか「[入門書](#１２参考書籍)」と細かい文言は異なりますが、その辺は空気を読みながら試行錯誤しています。

```Java:build.gradleのdependencies
dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-data-rest'
	implementation 'org.springframework.boot:spring-boot-starter-hateoas'
	implementation 'org.springframework.boot:spring-boot-starter-jersey'
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	implementation 'org.springframework.boot:spring-boot-starter-web-services'
	implementation 'org.springframework.boot:spring-boot-starter-webflux'
	implementation 'com.vaadin:vaadin-spring-boot-starter'
	implementation 'org.springframework.data:spring-data-rest-hal-browser'
	implementation 'org.springframework.session:spring-session-core'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
	testImplementation 'io.projectreactor:reactor-test'
	testImplementation 'org.springframework.restdocs:spring-restdocs-mockmvc'
}
```

　「implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'」という行が新しく追加されています。しかし、このライブラリはまだダウンロードされていないようなので、パッケージ・エクスプローラーのプロジェクト名の上で右クリックし、「Gradle」→「Gradleプロジェクトのリフレッシュ」を選択します。これによりプロジェクトが更新され、spring-boot-starter-thymeleafが組み込まれるようです。~~良くわからん~~

###３．２　コントローラーの修正

　先程"Hello World!"に使用したコントローラーを以下のように修正します。

```Java:MyOthelloController.java
package myothello.gradle;

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

@Controller
public class MyOthelloController {
	@RequestMapping("/")
	public String myothello() {
		return "myothello";
	}
}
```

　先程はRestControllerをimportしていたのが、Controllerに変更されています。

###３．３　テンプレートファイルの作成

　パッケージエクスプローラー内の「src/main/resources」→「templates」フォルダを右クリックし、「新規」→「その他」を選びます。
　ウィザード選択画面が立ち上がるので、「Web」→「HTML ファイル」をクリックし、「次へ」を選びます。
　ファイル名が入力できるので、__先程のメソッド名と同じ名前である__「myothello」を入力してから「次へ」を選びます。
　HTMLテンプレートの選択画面に移りますので、「新規HTMLファイル(5)」を選んでから「完了」をクリックします。これでmyothello.htmlが新規作成されますので、以下のように編集します。

```html:mypthello.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<title>myothello</title>
	<meta http-equiv="Content-Type" content ="text/html; charset=UTF-8" />
	<style>
	h1 { font-size:32pt; font-weight:bold; color:green; }
	body { font-size:24pt; margin:5px 25px; }
	</style>
</head>
<body>
	<h1>ぼくのかんがえたさいきょうのおせろ</h1>
	<p class="msg">Gradleで作成したオセロアプリです</p>
</body>
</html>
```

　実行すると次のような画面になります。まだオセロ盤すらありませんが。

![myothello1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305248/a8ac0845-c202-ff0b-12c9-2ae2b137d0bc.png)

　余談ですが、私はソース・エディタの背景色は黒派であるため、メニューバーの「ヘルプ」→「Eclipse マーケットプレース」で「darkest」と検索し、[Darkest Dark Theme](https://marketplace.eclipse.org/content/darkest-dark-theme-devstyle)というものをインストールしたのですが、私の視力のせいなのか、CSSのプロパティー値の青字が大変見づらくて絶望していました。しかし、「Web」→「CSSファイル」→「エディター」→「構文の色指定」で色を変更することができるので、今はかなり見やすくなりました。~~めっちゃ時間使ったけどな！~~

#４．いったん、終わり

　この続きの作業なのですが、私にはHTMLの知識が悲しいくらいに乏しいため、その勉強を進めながらオセロ画面を実装していきます。とりあえず、最初の難関であったGradleのHello Worldは片付いたかと思うので、後はオセロアプリ完成に向けて突き進むのみです。