初心者大歓迎! webアプリを作ってみよう!

初心者大歓迎!

webアプリを作ってみよう!

株式会社ビズリーチ

Copyright © 2015 BizReach Inc. All Right Reserved.

講師紹介

豊田　淳平（とよだ　じゅんぺい）

　　Bizreach新卒一期生。Bizreach事業部所属。

法政大学法学部出身。

成瀬　遥平（なるせ　ようへい）

　 Bizreach新卒一期生。CareerTreck事業部所属。

　　京都大学大学院情報学研究科出身。


Java8 をダウンロード

こちらからダウンロードしてください。

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

※わからなくなった場合はこちらを参考に

http://nanananande.helpfulness.jp/post-2897/





Eclipseをダウンロード

こちらからダウンロードしてください。

https://eclipse.org/downloads/

※Pleiadesの場合

http://mergedoc.sourceforge.jp/64Bit / Full / Edition Javaをダウンロードします。

http://mergedoc.sourceforge.jp/

http://mergedoc.sourceforge.jp/


gitからクローン

1.Window → Show view →　Others

2. Git Repositoriesを選択します。



1.Clone a Git Repositoryを選択します。



1.URIにhttps://github.com/rabichan/spring_boot_sample

2.Githubのアカウントがある方は

　ユーザ名とパスワードを表示

https://github.com/rabichan/spring_boot_sample



1.Directoryにプロジェクトを保存したい

ディレクトリを指定

2.Remote nameはoriginに指定

3.Import all existing projects after clone finishes にチェックを入れる


Projectのインポート

Package Explorer上で右クリック-> import -> Projects from Git -> Existing local repository -> 先ほどgitからクローンしたリポジトリを選択。

後は何も考えずにNext！


Maven Project を作成しましょう

1.Project Exploler上で右クリック

2.New →　Project を選択

3.Maven projectを選択　→　Next4.org.apache.mave.archetypes (quickstart)を選択→Next5.プロジェクトを保存したいディレクトリを選択→Next6.Group ID : jp.co.bizreach Artificate ID: spring-boot-sample7.Finish※今回はgitからクローンし、プロジェクトのインポートをしたため、こちらは

行ってません。


pom.xmlを編集しましょう

1.右のソースをpom.xmlへ　ペースト

※今回はgitからクローンし、

プロジェクトのインポートを

したため、こちらは行ってま

せん。


UpdateProjectします

１.New →　Maven

　　→　Update Project　


SampleApplicationを作成しましょう

1.src/main/javaの下の

jp.co.bizreach.sprong-boot-sampleで右クリック　→　new →　Class 2.名前をSampleApplicationと指定

3.ソースは以下のとおり


SampleControllerを作成しましょう

1.同じくsrc/main/javaの下の

jp.co.bizreach.sprong-boot-sampleで右クリック　→　new →　Class 2.名前をSampleControllerと指定

3.ソースは右のとおり


実行しましょう！

1.プロジェクト上で右クリック

2.Run as →　Java Application3.http://localhost:8080/にアクセス

　　　　　　　　

Hello World

表示されましたか？？


画面に表示するファイルを作成します


2.New　→　Source folder 3.Folder nameを　src/main/resources と指定


thymeleafファイルを作成しましょう

1.source/main/resourcesで右クリック

2.New →　Package →名前をtemplate を作成

3.template上で右クリック　 →　new →ファイル　　　

4.名前をsample.htmlで作成





2.Run as →　Java Application3.http://localhost:8080/sampleにアクセス

それではここからレベルアップです


APIを取得しましょう

1.こちらへアクセスしましょう。

https://apps.twitter.com/

2.Create New Appをクリック。



3. 名前、説明、サイトを指定します。



4. Permissions をクリック

5.Accessを”Read and Write” を選択する。

6. Update Settings



7.各鍵を確認しましょう。


twitter4j.propertiesを編集しましょう

1.twitter4j.properties内に先ほど確認した鍵を該当するを入力しましょう。


Twitter にツィートしましょう

1.同じくsrc/main/javaの下のjp.co.bizreach.sprong-boot-sampleで右クリック　

→　new →　Class 2.名前をTwitterControllerと指定

3.ソースは以下のとおり



4.以下のソースを追加します。



5.source/main/resources下、template上で右クリック

6.名前をmypage.htmlで作成





2.Run as →　Java Application3.http://localhost:8080/mypageにアクセス

4.つぶやいてみましょう！


Twitterにタイムラインを表示しましょう

1.TwitterControllerへ下記ソースを追加します。


Twitterにタイムラインを表示しましょう

2.mypage.htmlにソースを追記します。



テストボックスに入力してつぶやいてみましょう！

成功しましたか？

ご清聴ありがとうございました！

初心者大歓迎! webアプリを作ってみよう!

Engineering