初心者大歓迎! webアプリを作ってみよう!勉強会に参加してSpring Bootさわってきた！！@ビズリーチ

勉強会でビズリーチに行ってきたよ！

オフィス、芝生あるし海あるし、波の音するし、さえずり聞こえるし最高だった。
ちなみに、勉強会の内容は、SpringBootとJavaで、twitterみたいなwebアプリを作ろう！って感じだったよ！

twitter廃人的に、ハッシュタグ欲しかった＞＜

会社説明

勉強会に参加したら、最初の20分は会社説明だった！
ビズリーチ、オライリー本全巻そろってるらしいし、ペアプロ用デスクあるし、たけぞえさん、くぼさんがエンジニアの教育に力入れてるらしいしで、エンジニアとして働く環境として最高っぽい

まずは環境構築！

gitからクローンしてエクリプスで開きましょう！
エクリプス、入ってないので、IntelliJでやった！
gitリポジトリはここ！！

rabichan/spring_boot_sample · GitHub

ここのソースベースで教えてもらったことを書いていく。

初期起動

gitからとってきたPJをひらいて『jp.co.bizreach.spring_boot_sample.SampleApplication.java』をRunする。
ログに『Started SampleApplication』がでたら、http://localhost:8080/にアクセスすれば、

こんな感じでアプリが起動する！簡単！！

jp.co.bizreach.spring_boot_sample.SampleApplication.java

クラスについてるアノテーション

・@SpringBootApplication

SpringBootApplicationですよー。設定とか空気読んでやってくれますよー。

18. Using the @SpringBootApplication annotation

jp.co.bizreach.spring_boot_sample.SampleController.java

クラスについてるアノテーション

・@Controller

これはコントローラーですよ。
SampleApplication.javaに@SpringBootApplicationをつけておくことで、コントローラーとしてSpringBootが呼び出してくれますよー。

・@RequestMapping("")

"" で、urlのルートに関連付けている。
http://localhost:8080/にアクセスすればいい。

@RequestMapping("/test")にすると、http://localhost:8080/testのURLに関連付けされる。

メソッドについてるアノテーション

@RequestMapping("")

クラスと同じでurlに関連付けている。

クラスのアノテーションを@RequestMapping("/test")
メソッドのアノテーションを@RequestMapping("/sample")
にすると、http://localhost:8080/test/sampleにアクセスすればメソッドに書いた処理が動く。

@ResponseBody

レスポンスボディーの内容を返している。
メソッドの返り値を画面に表示させることができる。
return "hello,world";
すると、画面には↓みたいに表示される。

sampleメソッドの内容

引数

メソッドの引数に書いてる↓で、html内で"name"って名前で定義している値をname変数に関連付けられる。
ちなみに、defaultValueでデフォルトの値を"World"にしている。だから、画面の初期表示は↓みたいになってる。

@RequestParam(value = "name", required = false, defaultValue = "World") String name

処理

メソッド内の処理で、↓をして、引数として受け取ったname変数の値と、htmlに定義している"name"って名前の値を関連づけている。

model.addAttribute("name", name);

返り値

返り値に↓を書くと、resourceフォルダの中のsample.htmlにアクセスします、って意味。

return "sample";

sample.html

Thymeleaf: java XML/XHTML/HTML5 template engineっていうテンプレートエンジンをつかうのが、SpringBootではメジャーらしい。

テンプレートエンジンの使い方は、@bufferingsさんが日本語訳してくれてる！！
Tutorial: Using Thymeleaf (ja)

${name}

sample.htmlに↓こんな感じで書いておく。SampleController.javaのsampleメソッドの処理のところで書いていた、『htmlに定義している"name"って名前の値を関連づけている。』の部分。

<p th:text="'こんにちは ' + ${name} + 'さん!'" />

Twitterと関連づいたアプリを作ろう！

APIの取得

Twitter Application Managementで認証キーを取得する。
（ここは前にbotつくったときに取得してたので、スキップした！）

twitter4j.properties

取得した認証キーをtwitter4j.propertiesに貼って、http://localhost:8080/mypageにアクセスすると、
↓みたいな画面が表示される！

つぶやけるようにする

mypage.htmlの23行目の↓を変更する。

<form action="refreshMypage" method="post">

↓

<form action="doTweet"  method="post">

ちなみに、ホットデプロイには対応してなくて、ソースを変更した後はRunしているアプリケーションをとめて、再起動する必要がある。
http://localhost:8080/mypageにアクセスしてテキストボックスにつぶやきたい内容を書いて送信すると、画面からツイートすることができる！

認証機能をつける

twitter4j.propertiesに認証キーをベタ書くっていうのは、webアプリケーションではあまりやらない。
だから、twitter連携された認証機能を実装する。

twitter4j.propertiesの『oauth.accessToken』と『oauth.accessTokenSecret』を削除する。

jp.co.bizreach.spring_boot_sampleパッケージに『TwitterAuthController』クラスを作る。
スタッフの人がスクリーンに映してくれたソースを写経していった。

ここで出てくる@Autowiredアノテーションは、フィールドをもつクラスをDIコンテナで管理するってこと。

package jp.co.bizreach.spring_boot_sample;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpRequest;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import twitter4j.TwitterException;
import twitter4j.auth.AccessToken;
import twitter4j.auth.OAuthAuthorization;
import twitter4j.auth.RequestToken;
import twitter4j.conf.Configuration;
import twitter4j.conf.ConfigurationContext;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

@Controller
@RequestMapping("")
public class TwitterAuthController {
    @Autowired
    private HttpSession session;

    @Autowired
    private HttpServletRequest request;

    @RequestMapping("requestToken")
    public String requestToken(Model model) throws TwitterException {
        Configuration conf = ConfigurationContext.getInstance();
        OAuthAuthorization oauth = new OAuthAuthorization(conf);
        String callbackURL = "http://localhost:8080/accessToken";
        RequestToken oAuthRequestToken = oauth.getOAuthRequestToken(callbackURL);
        session.setAttribute("requestToken", oAuthRequestToken);
        return "redirect:" + oAuthRequestToken.getAuthenticationURL();
    }

    @RequestMapping("accessToken")
    public String accessToken(Model model) throws TwitterException {
        Configuration conf = ConfigurationContext.getInstance();
        RequestToken requestToken = (RequestToken) session.getAttribute("requestToken");
        AccessToken accessToken = new AccessToken(requestToken.getToken(), requestToken.getTokenSecret());
        OAuthAuthorization oath = new OAuthAuthorization(conf);

        oath.setOAuthAccessToken(accessToken);
        String verifier = request.getParameter("oauth_verifier");
        accessToken = oath.getOAuthAccessToken(verifier);

        session.setAttribute("accessToken", accessToken);

        return "redirect:mypage2";
    }
}

そして、TwitterController.javaを書き換える。
createTwitterメソッドをつくった＋mypageメソッドとdoTweetメソッドの『Twitter twitter = new TwitterFactory().getInstance();』を『Twitter twitter = createTwitter();』にした。
ちなみに、mypage2.htmlはmypage.htmlよりも画面がリッチになってるので、アクセス先URLを"mypage"から"mypage2"に書き換えた。

package jp.co.bizreach.spring_boot_sample;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import twitter4j.*;
import twitter4j.auth.AccessToken;

import javax.servlet.http.HttpSession;

/**
 * @author bizreach.Inc
 */
@Controller
@RequestMapping("")
public class TwitterController {

    @Autowired
    private HttpSession session;

    @RequestMapping("mypage2")
    public String mypage(Model model) throws TwitterException {
        Twitter twitter = createTwitter();
        ResponseList<Status> timeLineList = twitter.getHomeTimeline();
        User user = twitter.verifyCredentials();
        model.addAttribute("user", user);
        model.addAttribute("timelineList", timeLineList);
        model.addAttribute("text", timeLineList.get(0).getText());
        return "mypage2";
    }

    @RequestMapping("doTweet")
    public String doTweet(@RequestParam(value = "tweet", required = true) String name) throws TwitterException {
        Twitter twitter = createTwitter();
        twitter.updateStatus(name);
        return "redirect:/mypage2";
    }

    private Twitter createTwitter() {
        AccessToken accessToken = (AccessToken) session.getAttribute("accessToken");
        TwitterFactory factory = new TwitterFactory();
        return factory.getInstance(accessToken);
    }

}

アプリケーションを再起動したら、TwitterAuthControllerクラスのrequestTokenメソッドで、ツイッター認証をしているから、http://localhost:8080/requestTokenにアクセスする。
と、requestToken→accessToken→mypageって処理が移っていって、最終的にこんな画面が表示される！！

感想

ハンズオンに参加している人数に対してスタッフの人が多く、（私がいた経験者クラスは全体で15人弱くらいだったけど、教えてくれる人が3人いた。）すぐに質問できる環境だった！
し、スタッフの人もみなさんやさしくてよかった！！
実際、それぞれのアノテーションがどういう意味なのか個別で教えてもらってたりしてた。

すすむペースはゆっくりだったけど、そのおかげでこの記事書きつつ進められたのでよかった！！

今回はサンプルアプリを作ってくれていて、基本的にはそれを動かしてみるって感じだったけど、pomファイルの作成のところからやってみたかったかも。

ビズリーチの皆さん、ありがとうございました！！

オフィスめっちゃきれい

ステッカーもらった！！

おまけ

ハンズオン終わって家に帰ったらこれが届いていてほくほくしている

はじめてのSpring Boot―「Spring Framework」で簡単Javaアプリ開発 (I・O BOOKS)