Successfully reported this slideshow.
Your SlideShare is downloading. ×

Spring Bootでチャットツールを作りながらWebの仕組みを理解しよう!

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Spring Bootでチャットツールを作りながらWebの仕組みを理解しよう!

  1. 1. Spring Bootで チャットツールを作りながら Webの仕組みを理解しよう! Java女子部 presents 2016.5.21 #jjug_ccc #ccc_m3
  2. 2. 本日のメンバー #jjug_ccc #ccc_m3
  3. 3. ■ちか Java歴7年くらい。 金融系のSIer ■ゆう 最近Javaを始めたばかりの 初心者。 エンジニア歴は2年ちょい。 講師講師 #jjug_ccc #ccc_m3
  4. 4. ■えりこ WebアプリケーションSE エンジニア8年生。 ■あや ラーメン二郎が好きな エンジニア2年生。 チューター #jjug_ccc #ccc_m3
  5. 5. ■とぅん Java暦半年ぐらいのエンジニ ア4年生。品質管理とか やってます。 ■よこな JJUG司会兼チューター。 エンジニア4年生。 チューター #jjug_ccc #ccc_m3
  6. 6. ワークショップの概要説明 #jjug_ccc #ccc_m3
  7. 7. チャットツールの制作を通じて Webの仕組みを理解する! 今回の目標本日の目標 #jjug_ccc #ccc_m3
  8. 8. ・基礎的な概念説明 (Webの仕組み、Spring Bootについて) ・ハンズオン導入・WebSocketについて ・ハンズオン ・まとめ 全体の流れ #jjug_ccc #ccc_m3
  9. 9. Webの仕組みについて #jjug_ccc #ccc_m3
  10. 10. 情報をやりとりする通信網のこと。 この通信網によって 世界中とやりとり することができる。 そもそもインターネットとは? #jjug_ccc #ccc_m3
  11. 11. クライアントが情報を要求すると、 サーバから情報が返ってくる。 クライアント サーバ リクエスト レスポンス 通信方法について #jjug_ccc #ccc_m3
  12. 12. Spring Bootについて #jjug_ccc #ccc_m3
  13. 13. Java Spring Java JavaEE Ruby Rails Python Django 言語を扱いやすく パッケージングしたもの = フレームワーク Springって何? #jjug_ccc #ccc_m3
  14. 14. Spring BootJava Spring Java JavaEE Ruby Rails Python Django フレームワーク(コンポーネントの集合)を さらに使いやすくしたフレームワーク じゃあ、Spring Bootって何? #jjug_ccc #ccc_m3
  15. 15. ・アノテーション ・DIコンテナ ・AOP   アノテーションでクラス・メソッド・変数に目印を つけてフレームワークに解釈させる ⇒ 設定ファイルの代わりになる class Chat @RestController Spring Bootの特徴 #jjug_ccc #ccc_m3 class Chat
  16. 16. アノテーション名 記載場所 説明 @SpringBootAppli cation Mainクラス パッケージ内のクラスと設定を自 動的に読み込む @RestController クラス WebAPI用のコントローラー @Configuration クラス 設定クラス ソースコードでSpringの設定を実 装できる @RequestMapping クラス メソッド URLに紐づけて、アクセスできるよ うに設定する @Autowired メソッド フィールド 実装クラスを自動的にインジェク ションする(DIする) 基本のアノテーション(Spring) #jjug_ccc #ccc_m3
  17. 17. ハンズオン 1章 -文字列を返すWebアプリケーションを 作ってみよう!-
  18. 18. リポジトリ https://github.com/java-women/ChatToolForBeginners/ プロジェクト  chat-exercise  ハンズオン作業用  chat-tutorial  完成形 環境構築手順  https://git.io/vro1X 事前準備 1章
  19. 19. ブラウザ アマゾンのリクエストページ これから作るもの 1章 ①リクエストを送信 ③レスポンスを受信 ②リクエストを受け取り ごにょごにょ処理する 商品の詳細ページ
  20. 20. ブラウザ http://localhost:8080/javajo Hello World! これから作るもの 1章 ①リクエストを送信 ③レスポンスを受信 ②リクエストを受け取り ごにょごにょ処理する ここを 作るよ
  21. 21. @SpringBootApplication public class App { public static void main(String[] args) { SpringApplication.run(App.class, args); } } javajo > App.java 1章 Spring Bootの起動クラスを確認する
  22. 22. HelloControllerクラスにもアノテーションを 付与します。 @RestController public class HelloController {   } 1章javajo.controller > HelloController.java 1章
  23. 23. ・helloメソッドを作成します。 ・helloメソッドにアノテーションを付与します。 String hello() { return "Hello World!"; } @RequestMapping(value = "/javajo") String hello() { return "Hello World!"; } javajo.controller > HelloController.java 1章
  24. 24. アプリケーションを起動して、 http://localhost:8080/javajo/ にアクセスしてみよう! 1章javajo.controller > HelloController.java 1章 Eclipse IntelliJApp.javaを 右クリック>run maven>bootrun 起動方法
  25. 25. 下記画面が表示されれば、成功! 1章Hello World動作確認 1章
  26. 26. ブラウザ サーバ @RestController public class HelloController { @RequestMapping(value = "/javajo") String hello() { return "Hello World!"; } } http://localhost:8080 /javajo Hello World! 解説 1章
  27. 27. WebSocketについて #jjug_ccc #ccc_m3
  28. 28. WebSocket 聞いたことある人?
  29. 29. サーバ・クライアント間で接続が確立された ら、双方向通信(サーバからもクライアントから もデータの送信)が行える技術仕様 WebSocketとは? #jjug_ccc #ccc_m3
  30. 30. WebSocket(双方向通信) Client A #jjug_ccc #ccc_m3
  31. 31. WebSocket(双方向通信) Client A #jjug_ccc #ccc_m3 こんにちは
  32. 32. WebSocket(双方向通信) Client A #jjug_ccc #ccc_m3 こんにちは ClientB
  33. 33. WebSocket(双方向通信) Client A #jjug_ccc #ccc_m3 こんにちは ClientB こんばんはこんばんは こんばんは
  34. 34. WebSocket(双方向通信) Client A #jjug_ccc #ccc_m3 こんにちは ClientB こんばんはこんばんは こんばんは ※1度接続が確立されればデータがリアルタイム で送受信可能! ※同じサーバに接続しているユーザはデータを共 有する
  35. 35. ハンズオン2章 -チャットを作ってみよう!- #jjug_ccc #ccc_m3
  36. 36. チャットツールの作成内容 2章 ①WebSocketへの接続要求 ⑥WebSocketコネクション切断 ④メッセージ送信 ⑤メッセージ受信 ②WebSocketコネクション確立 ③メッセージ受信時の挙動設定
  37. 37. チャットツールの作成内容 2章 Controller @MessageMapping("/message") @SendTo(value= "/topic/messages") MessageBroker /message /app/message ChatForm @EnableWebSocketMessageBroker /topic/messages
  38. 38. <dependencies> ・・・・・省略・・・・・ <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket </artifactId> </dependency> ・・・・・省略・・・・・ </dependencies> 2章pom.xml の内容を確認する 2章
  39. 39. <dependencies> ・・・・・省略・・・・・ <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket </artifactId> </dependency> ・・・・・省略・・・・・ </dependencies> pom.xml の内容を確認する pom.xml 35行目あたり WebSocketを利用 するのに必要!! 2章
  40. 40. javajo.form > ChatForm.java 2章 public class ChatForm { ・・・・・省略・・・・・ }
  41. 41. public class ChatForm { private String name; private String message; ・・・・・省略・・・・・ } javajo.form > ChatForm.java 2章 クライアントから 受け取った値を格納する フィールドを作成
  42. 42. public class ChatForm { ・・・・・省略・・・・・ /** public String getName() { return name; } ・・・・・省略・・・・・ public void setMessage(String message) { this.message = message; } **/ } javajo.form > ChatForm.java 2章 フィールドにアクセスする getter/setterを作成します
  43. 43. public class ChatForm { ・・・・・省略・・・・・ /** public String getName() { return name; } ・・・・・省略・・・・・ public void setMessage(String message) { this.message = message; } **/ } javajo.form > ChatForm.java 2章 すでに実装済みなので、 コメントアウトを外す だけでOK
  44. 44. public class ChatForm { ・・・・・省略・・・・・ public String getName() { return name; } ・・・・・省略・・・・・ public void setMessage(String message) { this.message = message; } } javajo.form > ChatForm.java 2章 すでに実装済みなので、 コメントアウトを外す だけでOK
  45. 45. チャットツールの作成内容 2章 ①WebSocketへの接続要求 ⑥WebSocketコネクション切断 ④メッセージ送信 ⑤メッセージ受信 ②WebSocketコネクション確立 ③メッセージ受信時の挙動設定
  46. 46. public class StompConfig { } javajo.config > StompConfig.java 2章 クライアントからの メッセージを処理する クラスを作成します
  47. 47. public class StompConfig extends AbstractWebSocketMessageBrokerConfigurer { } javajo.config > StompConfig.java 2章 メッセージを処理する 抽象クラスを継承
  48. 48. @Configuration public class StompConfig extends AbstractWebSocketMessageBrokerConfigurer { } javajo.config > StompConfig.java 2章 設定ファイルを表す アノテーションを付与
  49. 49. @Configuration @EnableWebSocketMessageBroke public class StompConfig extends AbstractWebSocketMessageBrokerConfigurer { } javajo.config > StompConfig.java 2章 WebSocketを扱うのに 必要なアノテーションを 付与
  50. 50. public class StompConfig extends AbstractWebSocketMessageBrokerConfigurer { @Override public void registerStompEndpoints (StompEndpointRegistry registry) { registry.addEndpoint("endpoint"); } } javajo.config > StompConfig.java 2章 エンドポイントの 登録メソッドを作成
  51. 51. チャットツールの作成内容 2章 ChatController @MessageMapping("/message") @SendTo(value= "/topic/messages") MessageBroker /message /app/message @EnableWebSocketMessageBroker /topic/messages ここを 作るよ ChatForm
  52. 52. public class StompConfig extends AbstractWebSocketMessageBrokerConfigurer { ・・・・・省略(registerStompEndpointsの直後)・・・・・ @Override public void configureMessageBroker(MessageBrokerRegistry registry) { registry.setApplicationDestinationPrefixes("/app"); registry.enableSimpleBroker("/topic"); } } javajo.config > StompConfig.java 2章 メッセージブローカーの 設定メソッドを作成
  53. 53. チャットツールの作成内容 2章 ①WebSocketへの接続要求 ⑥WebSocketコネクション切断 ④メッセージ送信 ⑤メッセージ受信 ②WebSocketコネクション確立 ③メッセージ受信時の挙動設定ここを 作るよ
  54. 54. チャットツールの作成内容 2章 ChatController @MessageMapping("/message") @SendTo(value= "/topic/messages") MessageBroker /message /app/message ChatForm @EnableWebSocketMessageBroker /topic/messages ここを 作るよ
  55. 55. public class ChatController { ChatForm greet(ChatForm chatForm) { return chatForm; } } javajo.controller > ChatController.java 2章 チャットのコントロー ラークラスを作成します
  56. 56. @RestController public class ChatController { ChatForm greet(ChatForm chatForm) { return chatForm; } } javajo.controller > ChatController.java 2章 コントローラーの アノテーションを付与
  57. 57. @RestController public class ChatController { @MessageMapping(value = "/message" ) ChatForm greet(ChatForm chatForm) { return chatForm; } } javajo.controller > ChatController.java 2章 メッセージを受け付ける MessageMappingを付与
  58. 58. @RestController public class ChatController { @MessageMapping(value = "/message" ) @SendTo(value = "/topic/messages") ChatForm greet(ChatForm chatForm) { return chatForm; } } javajo.controller > ChatController.java 2章 処理結果を送信する宛先 SendToを付与
  59. 59. チャットツールの作成内容 2章 ①WebSocketへの接続要求 ⑥WebSocketコネクション切断 ④メッセージ送信 ⑤メッセージ受信 ②WebSocketコネクション確立 ③メッセージ受信時の挙動設定 ここだよ
  60. 60. チャットツールの作成内容 2章 ここだよ
  61. 61. クライアント側(Stomp.js) 2章 resources/static/js/Stomp.js 提供されているライブラリを使用 詳しくは、 http://jmesnil.net/stomp-websocket/doc/ クライアント側のメッセージ制御は JavaScriptライブラリを利用する
  62. 62. クライアント側(javajo.js) 2章 ChatStomp.prototype.connect = function () { var socket = new WebSocket('ws://' + location.host + '/endpoint'); ・・・・・省略・・・・・ }; 23行目
  63. 63. public class StompConfig extends AbstractWebSocketMessageBrokerConfigurer { @Override public void registerStompEndpoints (StompEndpointRegistry registry) { registry.addEndpoint("endpoint"); } } javajo.config > StompConfig.java 2章 エンドポイントの 登録メソッドを作成
  64. 64. チャットツールの作成内容 2章 ①WebSocketへの接続要求 ⑥WebSocketコネクション切断 ④メッセージ送信 ⑤メッセージ受信 ②WebSocketコネクション確立 ③メッセージ受信時の挙動設定 ここだよ
  65. 65. チャットツールの作成内容 2章 ここだよ
  66. 66. クライアント側(javajo.js) 2章 ChatStomp.prototype.onConnected = function (frame) { console.log('Connected: ' + frame); this.stompClient.subscribe('/topic/messages',this. onSubscribeGreeting.bind(this));  this.setConnected(true); }; 34行目
  67. 67. public class StompConfig extends AbstractWebSocketMessageBrokerConfigurer { ・・・・・省略(registerStompEndpointsの直後)・・・・・ @Override public void configureMessageBroker(MessageBrokerRegistry registry) { registry.setApplicationDestinationPrefixes("/app"); registry.enableSimpleBroker("/topic"); } } javajo.config > StompConfig.java 2章 メッセージブローカーの 設定メソッドを作成
  68. 68. チャットツールの作成内容 2章 ①WebSocketへの接続要求 ⑥WebSocketコネクション切断 ④メッセージ送信 ⑤メッセージ受信 ②WebSocketコネクション確立 ③メッセージ受信時の挙動設定ここだよ
  69. 69. チャットツールの作成内容 2章 ここだよ
  70. 70. クライアント側(javajo.js) 2章 ChatStomp.prototype.sendName = function () { ・・・・・省略・・・・・ this.stompClient.send("/app/message", {},    JSON.stringify(json_message)); }; 73行目
  71. 71. public class StompConfig extends AbstractWebSocketMessageBrokerConfigurer { ・・・・・省略(registerStompEndpointsの直後)・・・・・ @Override public void configureMessageBroker(MessageBrokerRegistry registry) { registry.setApplicationDestinationPrefixes("/app"); registry.enableSimpleBroker("/topic"); } } javajo.config > StompConfig.java 2章 メッセージブローカーの 設定メソッドを作成
  72. 72. @RestController public class ChatController { @MessageMapping(value = "/message" ) ChatForm greet(ChatForm chatForm) { return chatForm; } } javajo.controller >ChatController.java 2章 メッセージを受け付ける MessageMappingを付与
  73. 73. チャットツールの作成内容 2章 ChatController @MessageMapping("/message") @SendTo(value= "/topic/messages") MessageBroker /message /app/message @EnableWebSocketMessageBroker /topic/messages ChatForm
  74. 74. チャットツールの作成内容 2章 ①WebSocketへの接続要求 ⑥WebSocketコネクション切断 ④メッセージ送信 ⑤メッセージ受信 ②WebSocketコネクション確立 ③メッセージ受信時の挙動設定 ここだよ
  75. 75. チャットツールの作成内容 2章 ここだよ
  76. 76. クライアント側(javajo.js) 2章 ChatStomp.prototype.disconnect = function () { if (this.stompClient) { this.stompClient.disconnect(); this.stompClient = null; } this.setConnected(false); }; 88行〜94行目
  77. 77. ハンズオンはここまで! 実際に動かしてみよう! #jjug_ccc #ccc_m3
  78. 78. 1. chat-exerciseのプロジェクトを実行! 2. http://localhost:8080/chat にアクセス! ローカルで動かしてみようローカルで動かしてみよう 3. ユーザ名を入力してConnectボタンクリック!   4.メッセージを入力してSendボタン をクリック! #jjug_ccc #ccc_m3
  79. 79. まとめ #jjug_ccc #ccc_m3
  80. 80. ・「Hello World」を出力するアプリケーションを Spring Bootで作りました ・チャットを作りながらWebSocketについて学 びました まとめ #jjug_ccc #ccc_m3
  81. 81. お疲れ様でした ありがとうございました 【講師】 ゆう・ちか 【チューター】 えりこ・あや・とぅん・よこな #jjug_ccc #ccc_m3

×