4月, 2017 | Teaching Programming

Spring Bootによるウェブアプリ開発: プロジェクトの作成からページの表示まで

プロジェクトの雛形を作成

ブラウザで「http://start.spring.io」にアクセスする。
「Cradle Project」を選択する。
グループIDとして、パッケージ名を入力する。ここでは「ユーザ名.webapp」とする。
アーティファクトIDとしてプロジェクト名を入力する。ここでは「webapp」とする。
利用する依存ライブラリを入力する。名前の一部を入力すると選択肢が現れるのでクリックして選択する。ここでは「Web」と「Thymeleaf」を選択する。
選択されたものが表示されているので「Web」と「Thymeleaf」が選択されていることを確認する。
クリックするとプロジェクトのファイル（ZIPファイル）のダウンロードが始まる。

start.spring.ioでプロジェクト作成

NetBeansでインポート

メニューから[ファイル]→[プロジェクトをインポート]→[ZIPから]を選択し、ダウンロードしたファイル（webapp.zip）を指定してインポートする。

インポート直後の構成

Spring Bootアプリケーションの実行

アプリケーションを実行するためのタスクが定義されているため、それを使う。

プロジェクトを右クリックして、[Task]→[boot]→[bootRun]を選択する。

アプリケーションが立ち上がると、出力ウィンドウの最後に「Started WebappApplication」と表示される。

その1行前に「Tomcat started on port(s): 8080 (http)」と出力されているということは、8080番ポートにアクセスすれば何らかの反応があるはずである。http://localhost:8080/にアクセスしてみよう。

サーバが出力したエラーページ

エラーメッセージが表示されたが、これは、まだコンテンツを返すプログラムを作っていないために表示されるもので、正常な動作である。アプリケーションを終了するには、出力ウィンドウの左側にあるStopボタンをクリックする。

Spring Web MVC frameworkの基礎中の基礎

処理の流れ

これから作るウェブアプリケーションはSpringのWeb MVCフレームワークを利用している。このフレームワークにおける処理の流れを次の図に示す（http://docs.spring.io/spring/docs/current/spring-framework-reference/htmlsingle/#mvc-servletより引用）。

Mvc

フロントコントローラがリクエストを適切なコントローラに渡し、コントローラが出力するデータをビュー（テンプレート）が表示するという仕組み。このうち、自分で作るのは、「コントローラ」と「ビューテンプレート」である。

まずは、単純に「こんにちは」と表示するようにコントローラとテンプレートを作ってみよう。

テンプレートを作る

テンプレートとは雛形のことであり、そこに流し込まれるデータとともに使うことが一般的な使い方であるが、まずはデータの流し込みを想定しないテンプレートを作成してみよう。

まず、テンプレートを格納するディレクトリを作成しよう。Resourcesのtemplatesにlecture03というディレクトリ（パッケージ）を作る。NetBeansのパッケージの表示の仕方によっては、作業が難しい。プロジェクトウィンドウの背景部分を右クリックし、「Javaパッケージの表示方法」を「ツリー」にすると階層構造がわかりやすい。

パッケージをツリーで表示

lecture03を右クリックして新規から「HTMLファイル」を選択する。ファイル名を「hello」と入力する。拡張子は自動でつくので入力しない。作成したら、次のように書き換えよう。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>こんにちは</title>
</head>
<body>
<p>こんにちは</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>こんにちは</title>

</head>

<body>

こんにちは

</body>

</html>

今の所、次の2点が注意する点で、これ以外は普通のHTMLファイルである。

2行目: xmlns属性はXML名前空間の宣言である。テンプレートエンジンであるThymeleafはHTMLへの埋め込みをXMLによって行うことが大きな特徴である。名前宣言によってThymeleafによる操作をthというプレフィックスで行うことができる。
4行目: 単独で使われるタグ（brやhr等）は後ろに/をつける（XMLのルール）。

コントローラを作る

コントローラは、リクエストに対してどのテンプレートを使うか（そしてテンプレートにどのような値を埋め込むか）ということを決定するためのものである。

具体的には@Controllerアノテーションをつけたクラスで、リクエストに対応してメソッドを定義する。メソッドの返り値としてテンプレートを指定する。

package net.teachingprogramming.webapp;

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

import java.time.LocalTime;

/**
 * 第3回で使うコントローラ
 */
@Controller
@RequestMapping("/lecture03")
public class Lecture03Controller {

    @RequestMapping("/hello")
    public String hello() {
        return "lecture03/hello"; // テンプレートのファイル名を返す
    }

    @RequestMapping("/dice")
    public String dice(ModelMap modelMap) {
        int pips = (int)Math.floor(Math.random()*6) + 1;
        modelMap.addAttribute("pips", pips);
        return "lecture03/dice";
    }

    @RequestMapping("/greeting")
    public String greeting(ModelMap modelMap) {
        LocalTime localTime = LocalTime.now();
        int hour = localTime.getHour();
        String message;
        if (4 <= hour && hour < 11) {
            message = "おはよう";
        } else if (11 <= hour && hour < 16){
            message = "こんにちは";
        } else {
            message = "こんばんは";
        }
        modelMap.addAttribute("message", message);
        return "lecture03/greeting";
    }

}

package net.teachingprogramming.webapp;

import org.springframework.stereotype.Controller;

import org.springframework.ui.ModelMap;

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

import java.time.LocalTime;

/**

* 第3回で使うコントローラ

@Controller

@RequestMapping("/lecture03")

public class Lecture03Controller {

@RequestMapping("/hello")

public String hello() {

return "lecture03/hello"; // テンプレートのファイル名を返す

}

@RequestMapping("/dice")

public String dice(ModelMap modelMap) {

int pips = (int)Math.floor(Math.random()*6) + 1;

modelMap.addAttribute("pips", pips);

return "lecture03/dice";

}

@RequestMapping("/greeting")

public String greeting(ModelMap modelMap) {

LocalTime localTime = LocalTime.now();

int hour = localTime.getHour();

String message;

if (4 <= hour && hour < 11) {

message = "おはよう";

} else if (11 <= hour && hour < 16){

message = "こんにちは";

} else {

message = "こんばんは";

}

modelMap.addAttribute("message", message);

return "lecture03/greeting";

}

12行目: コントローラを表すアノテーション
13行目: このコントローラが、「/lecture03」のURLを担当することを表す。
16〜19行目: /hello（つまりhttp://localhost:8080/lecture03/hello）に対応するメソッド
- 16行目: /helloに対応すること表す
- 17行目: 戻り値の型はStringにする。メソッド名はなんでも良い。
- 18行目: テンプレートのルート（resources/templates）から利用するテンプレートの相対パス（拡張子は除く）

20行目以降は次節以降で解説する。

動作を確認

http://localhost:8080/lecture03/helloにブラウザでアクセスしよう。

テンプレートに値を渡す

メソッドにModelMap型の引数を加える。
そのaddAttributeメソッドで名前と値を登録する。
テンプレートでth:text属性を使う。

例1: サイコロ

アクセスするたびに表示される数が変化する。乱数については教科書P.108を参照。

package net.teachingprogramming.webapp;

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

import java.time.LocalTime;

/**
 * 第3回で使うコントローラ
 */
@Controller
@RequestMapping("/lecture03")
public class Lecture03Controller {

    @RequestMapping("/hello")
    public String hello() {
        return "lecture03/hello"; // テンプレートのファイル名を返す
    }

    @RequestMapping("/dice")
    public String dice(ModelMap modelMap) {
        int pips = (int)Math.floor(Math.random()*6) + 1;
        modelMap.addAttribute("pips", pips);
        return "lecture03/dice";
    }

    @RequestMapping("/greeting")
    public String greeting(ModelMap modelMap) {
        LocalTime localTime = LocalTime.now();
        int hour = localTime.getHour();
        String message;
        if (4 <= hour && hour < 11) {
            message = "おはよう";
        } else if (11 <= hour && hour < 16){
            message = "こんにちは";
        } else {
            message = "こんばんは";
        }
        modelMap.addAttribute("message", message);
        return "lecture03/greeting";
    }

}

@RequestMapping("/dice")

public String dice(ModelMap modelMap) {

int pips = (int)Math.floor(Math.random()*6) + 1;

modelMap.addAttribute("pips", pips);

return "lecture03/dice";

}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>ダイス</title>
</head>
<body>
<p>
    <span th:text="${pips}">サイコロの目</span>
</p>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

サイコロの目

</body>

</html>

例2: 挨拶

現在時刻によって表示されれる挨拶が変化する。時刻の扱いについては、教科書P.257を参照。

package net.teachingprogramming.webapp;

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

import java.time.LocalTime;

/**
 * 第3回で使うコントローラ
 */
@Controller
@RequestMapping("/lecture03")
public class Lecture03Controller {

    @RequestMapping("/hello")
    public String hello() {
        return "lecture03/hello"; // テンプレートのファイル名を返す
    }

    @RequestMapping("/dice")
    public String dice(ModelMap modelMap) {
        int pips = (int)Math.floor(Math.random()*6) + 1;
        modelMap.addAttribute("pips", pips);
        return "lecture03/dice";
    }

    @RequestMapping("/greeting")
    public String greeting(ModelMap modelMap) {
        LocalTime localTime = LocalTime.now();
        int hour = localTime.getHour();
        String message;
        if (4 <= hour && hour < 11) {
            message = "おはよう";
        } else if (11 <= hour && hour < 16){
            message = "こんにちは";
        } else {
            message = "こんばんは";
        }
        modelMap.addAttribute("message", message);
        return "lecture03/greeting";
    }

}

@RequestMapping("/greeting")

public String greeting(ModelMap modelMap) {

LocalTime localTime = LocalTime.now();

int hour = localTime.getHour();

String message;

if (4 <= hour && hour < 11) {

message = "おはよう";

} else if (11 <= hour && hour < 16){

message = "こんにちは";

} else {

message = "こんばんは";

}

modelMap.addAttribute("message", message);

return "lecture03/greeting";

}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>挨拶</title>
</head>
<body>
<p>
    <span th:text="${message}">ここがmessageで置き換わる</span>
</p>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

ここがmessageで置き換わる

</body>

</html>

インスタンス化

クラスは「型の設計図」のこと。
クラス（設計図）からインスタンス（実体）を作ることができる。
インスタンス化: インスタンスを作ること。
インスタンス化はnew演算子を使う。
コンストラクタはインスタンス化の時に使われるメソッド（今後解説する）で、その時に使われる引数を記述する。下の例は引数なし。

インスタンス化

1行でまとめて書くこともできる。

Person person2 = new Person();

1	Person person2 = new Person();

エラーになる例

person3がインスタンス化されていない（注: 厳密には「初期化されていない」）ためコンパイルエラー（コンパイル時にエラーになってコンパイルできない）になる。

Person person3;
System.out.println(person3.age);

1 2	Person person3; System.out.println(person3.age);

コンパイルできる（person4はnullで初期化されている）が、実行時にエラーになる（ランタイムエラー）。person4がインスタンス化されてない（実態がない）のに使おうとしたため。

Person person4 = null;
System.out.println(person4.age);

1 2	Person person4 = null; System.out.println(person4.age);

基本型（プリミティブ型）は？

インスタンス化が必要なのは参照型（クラス型）
newは使わない。
初期化は必要

次はOK。

int a;
a = 1;
System.out.println(a);

int a;

a = 1;

System.out.println(a);

1行で書くのもOK。

int b = 2;
System.out.println(b);

1 2	int b = 2; System.out.println(b);

初期化がないのはNG（コンパイルエラー）。

int c;
System.out.println(c);

1 2	int c; System.out.println(c);

基本型でnullは扱えないのでNG（コンパイルエラー）。

int d = null;
System.out.println(d);

1 2	int d = null; System.out.println(d);

ビルドとは

ソフトウェアのビルド（英: build）は、ソースコードファイルを独立したソフトウェア生成物に変換するコンピュータ上で実行されるプロセス、またはその結果を指す。ビルドにおいて最も重要なのはコンパイルプロセスであり、ソースコードファイルを実行ファイルに変換する。

ビルド (ソフトウェア) – Wikipedia

要するに「コードを書いた後に実行できるようするまでにする作業」のこと。これまでは、NetBeansで行ってきた（「ファイルの実行」をクリックすることで、コンパイルが行われ実行された）。

Javaを用いた開発に使われるビルドツール

Ant
Maven
Gradle
etc…

Android用の開発環境であるAndroid StudioではGradleが採用されている。

NetBeansでGradleを使う

プラグイン

Gradle Supportプラグインをインストールすることで、Gradleベースのプロジェクトを作成・管理することができる。

プラグインを確認

インストール済みにあることを確認する。

プロジェクトの作成

Single Gradle Projectを選択。

プロジェクトを選択

プロジェクト名とメインクラス（メインメソッドを作るクラス）を指定する。メインクラスは完全修飾クラス名（パッケージ名を頭につける）で指定する。

プロジェクト名とメインクラス

プロジェクトには、メインクラス（Main.java）とビルドスクリプト（build.gradleとsettings.gradle）が作成される。

プロジェクトの構造

実行する

Main.javaに書き加える。

System.out.println("はじめてのGradle");

1	System.out.println("はじめてのGradle");

プロジェクトを右クリックして、Runをクリック。

runタスクの実行

出力ウィンドウに出力される。

出力ウィンドウ

外部のライブラリを使う

これまで、JDKに含まれるライブラリ（クラス）を使ってきたが、世の中には様々なライブラリが公開されている。ライブラリをプロジェクトに取り込んで使ってみよう。

GradleはMavenのリポジトリ（ライブラリが保管されているサーバ）からライブラリをダウンロードする機能があるので、Mavenのリポジトリから利用するライブラリを探すのが簡単だ。

今回は、HTMLパーサ（HTMLを解釈してあれこれするためのソフト）のJsoupを使ってみよう。MavenのリポジトリのJsoup 1.10.2のページにある、Gradle用の記述をコピーし、build.gradleのdependenciesにペーストする。

Mavenレポジトリからコピー

apply plugin: 'java'

sourceCompatibility = '1.8'
[compileJava, compileTestJava]*.options*.encoding = 'UTF-8'

if (!hasProperty('mainClass')) {
    ext.mainClass = 'd00000.sandbox.Main'
}

repositories {
    mavenCentral()
}

dependencies {
    testCompile group: 'junit', name: 'junit', version: '4.10'

    // https://mvnrepository.com/artifact/org.jsoup/jsoup
    compile group: 'org.jsoup', name: 'jsoup', version: '1.10.2'

}

apply plugin: 'java'

sourceCompatibility = '1.8'

[compileJava, compileTestJava]*.options*.encoding = 'UTF-8'

if (!hasProperty('mainClass')) {

ext.mainClass = 'd00000.sandbox.Main'

}

repositories {

mavenCentral()

}

dependencies {

testCompile group: 'junit', name: 'junit', version: '4.10'

// https://mvnrepository.com/artifact/org.jsoup/jsoup

compile group: 'org.jsoup', name: 'jsoup', version: '1.10.2'

}

プロジェクトを右クリックして、Reload Projectをクリックすると、依存ライブラリがダウンロードされ、プロジェクトに追加される。

Dependenciesに追加される

Jsoupの利用例

ニュースのサイトからニュースのタイトル一覧を取得しよう。

注意: ブラウザで人間が操作するのではなく、機械的にページを取得する行為は一般に「ウェブスクレイピング（Web scraping）」というが、スクレイピングが想定されていない場合が多い（あるいは明示的に禁止されている）。ウェブから情報を取得するときには、まず専用のAPIがあるかどうか確認しよう。またスクレイピングによって情報を取得する場合も、その頻度を調整するなど、迷惑をかけないようにしよう（提供する側の立場としては、そもそもスクレイピングして欲しくない場合が多い）。

package d00000.sandbox;

import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;
import org.jsoup.Connection;
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

public class Main {
    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        // 検索する文字列
        String searchWord = "静岡";

        // ニュースのURL
        String url = null;
        try {
            url = "ニュースサイトのURL/?p="+ URLEncoder.encode(searchWord, "UTF-8") +"オプション等";
        } catch (UnsupportedEncodingException ex) {
            System.err.println("encodingが不正です。");
            System.exit(1);
        }

        // 取得したページ
        Document document = null;
        try {
            Connection connection = Jsoup.connect(url);
            document = connection.get();
            // 上の2行を1行で書くと
            // document = Jsoup.connect(url).get();
        } catch (IOException ex) {
            System.err.println("ページ取得に失敗しました。");
            System.exit(1);
        }

        // 結果の出力
        Elements titleElements = document.select("h2"); // CSSのセレクタで要素（複数）を取得
        for (Element element : titleElements) { // タイトルの要素を1つ取り出す。　
            System.out.println(element.text()); // 要素のテキストノードを画面に表示する。
        }
    }
}

package d00000.sandbox;

import java.io.IOException;

import java.io.UnsupportedEncodingException;

import java.net.URLEncoder;

import org.jsoup.Connection;

import org.jsoup.Jsoup;

import org.jsoup.nodes.Document;

import org.jsoup.nodes.Element;

import org.jsoup.select.Elements;

public class Main {

/**

* @param args the command line arguments

public static void main(String[] args) {

// 検索する文字列

String searchWord = "静岡";

// ニュースのURL

String url = null;

try {

url = "ニュースサイトのURL/?p="+ URLEncoder.encode(searchWord, "UTF-8") +"オプション等";

} catch (UnsupportedEncodingException ex) {

System.err.println("encodingが不正です。");

System.exit(1);

}

// 取得したページ

Document document = null;

try {

Connection connection = Jsoup.connect(url);

document = connection.get();

// 上の2行を1行で書くと

// document = Jsoup.connect(url).get();

} catch (IOException ex) {

System.err.println("ページ取得に失敗しました。");

System.exit(1);

}

// 結果の出力

Elements titleElements = document.select("h2"); // CSSのセレクタで要素（複数）を取得

for (Element element : titleElements) { // タイトルの要素を1つ取り出す。　

System.out.println(element.text()); // 要素のテキストノードを画面に表示する。

}

例外処理

教科書[P.65]を参照。

ポイント:

例外（exception、エラーのこと）が発生したらcatch節に飛ぶ。
例外の種類
- チェック例外: 必ずtryでチェックしなければならない。
- 非チェック例外: チェックしなくて良い。例えば、0で除算など。

再評価のための復習: クラスの概要

クラスとは

クラスとは型の設計図のこと。注: ここではわかりやすさのため設計図に例えるが、設計図の比喩が適切でない場合もあるので注意すること。「適切でない場合」については今後解説する。
クラスから作られるものをインスタンス（実体）という。
基本的に、1クラス1ファイルで定義する。ファイル名は「クラス名.java」とする。
クラスにはメンバーによって構成される（クラスの中にかけるのはメンバーだけ）。
メンバーの種類にはフィールドとメソッドがある（フィールドとメソッド以外のものはない）。
[慣例] クラス名は大文字ではじめる。
[慣例] フィールド名とメソッド名は小文字ではじめる。

クラスの構造

月: 2017年4月

Spring Bootによるウェブアプリ開発: プロジェクトの作成からページの表示まで

プロジェクトの雛形を作成

NetBeansでインポート

Spring Bootアプリケーションの実行

Spring Web MVC frameworkの基礎中の基礎

処理の流れ

テンプレートを作る

コントローラを作る

動作を確認

テンプレートに値を渡す

例1: サイコロ

例2: 挨拶

再評価のための復習: インスタンス

インスタンス化

エラーになる例

基本型（プリミティブ型）は？

Gradleの利用

ビルドとは

Javaを用いた開発に使われるビルドツール

NetBeansでGradleを使う

プラグイン

プロジェクトの作成

実行する

外部のライブラリを使う

Jsoupの利用例

例外処理

再評価のための復習: クラスの概要

クラスとは