UNICAST・ワークショップ〜業務で使っている技術を大公開〜  触って学ぶWebSocket  作って遊ぶRubyOnRails
まずはこちらをご覧下さい{ tweet-search-stream へのリンク }
イマドキのWebサイトは、「更新」ボタンなんて押させません。       ↓     非同期通信
こんなことをします。前半... もうすぐ夜明け! 新しい通信方式「WebSocket」について学ぶ後半... あっという間にWebサービスを作れる! 業界標準フレームワーク「RubyOnRails」を 体感する
WebSocketってなに?とってもスマートな通信方式です...- 使うとこんなものができます -・リアルタイムに表示内容が更新されるページ・閲覧者全員にアクションを起こせるページ
掘り下げる前に...予備知識を確認しておきましょう
そもそもページはどうやって見てるの?ブラウザって?サーバって?①リクエスト③画面に反映       ②レスポンス
サーバって何だ!下記のような仕事に特化したコンピュータ+そこで動いているアプリです。データ置き場だったり、クライアントの呼びかけに答えたり、大きなラックにびっしり詰まっていてかっこよかったりします。
クライアントって何だ!みなさんがお持ちのPC、またはブラウザの事です。弁護士に対する相談者⇒クライアント医者に対する患者⇒クライアント(クランケ?)サーバに対する皆さん⇒クライアント
やりとりされるデータリクエスト                                              レスポンスGET /docs/sw/http-header.html HTTP/1.1             HTTP/...
大事な事がひとつ画像やら音声やらの数だけリクエストを送るページを1つ開くのにも、それなりの通信コストがかかっている
予備知識はこれくらいです。  WebSocketのお話に移りましょう。
通信方法の違い?いつもの通信
どんな通信方式?WebSocket
いつもの通信は、ここがよくない!●    接続がいちいち切れてしまう。    ⇒サーバから自発的にアクションを起こせない    ⇒サーバで起こっていることを知るには、問い     合わせなければならない。ハズれあり●    普通の問い合わせ方を...
やりとりされるデータリクエスト                                              レスポンスGET /docs/sw/http-header.html HTTP/1.1             HTTP/...
でもWebSocketなら...●    通信開きっぱなし    ・サーバは閲覧者の居場所がわかる    ⇒好きなタイミングで通知できる    ⇒閲覧者は何もしなくていい(通知を待つだけ)    ・サーバは閲覧者全員の居場所がわかる    ⇒閲...
このページはこんな感じで動いています。
サーバ⇒問い合わせに応答。データ置き場にも何かの役割に特化すると...アプリケーションサーバ⇒色々やるよ!提供したいサービス次第!WebSocketサーバ⇒メッセージをばら撒く事に生涯を捧げる
まろやかなまとめ    WebSocketなら●    これまで不便だったものを解消します    ⇒「更新」ボタンが無くなるかも?●    特性を生かした新しいサービスが生まれます    (てます)。    ⇒データ垂れ流し系アプリ(twitt...
少しだけ業界人っぽい話をします。
ブラウザの違い、意識してますか?「表示がはやーい」で、満足していませんか?「見る」側と「作る」側では、ブラウザに対する見方が大きく違います
代表的な例をひとつ。  { 面白法人カヤックHP へのリンク }InternetExprolerと、それ以外のブラウザで見比べてみて下さい。
ブラウザごとに表示が違ってしまう事が、  よくあります。・何かが表示されない・使えない機能がある・レイアウトが崩れたりする(致命的)
でも...Chromeの方が早いし、いやSafariの方が軽いし、IE使ってる人なんていないんじゃないの?
そんなことはありません。     スマホ→↓PC               (2012年5月)
●    ブラウザには違いがある    ⇒見た目の違い    ⇒新技術への対応度●    どのブラウザもいい感じにシェアがあるので、    無視する訳にもいかない。●    ブラウザの対応を待つか、    気合いで実装するか、あきらめるか (-...
少し先進的なWebSocketブラウザごとの対応状況は...?IE10と共に来る夜明け!しかし足を引っ張り続ける7,8,9...
おしまい!次はRubyOnRailsのお話です。ひとまず休憩をとりましょう。
まずはインストール  1.リンク先で、   左のボタンをクリック  ⇒ダウンロード  2.インストール用ツールを起動  ⇒インストールの設定は特にい   じらず、「次へ」ボタンを   ぽちぽちしましょう。
RubyOnRailsってなに?MVCアーキテクチャに基づいた Webアプリケーションフレームワーク???
アプリケーション?⇒「アプリ」の相性でおなじみ コンピュータの上で動作して、嬉しいサービ スを提供してくれますWebアプリケーション?⇒「アプリ」がネットの向こう側にあるだけ Webサービスと言い換えてもOK
ウェブサービスには何が必要?簡単なお買い物サイトをイメージすると...
こんなの全部用意しなくちゃならないのか...
Railsに「アプリケーション作成っ!」とお願いすると、こんなものが作られます。
アプリケーションフレームワーク?⇒Webアプリケーションの枠組みを 用意してくれるものWebアプリケーション?⇒ネットの向こう側でコンピュータが 頑張ってくれているサービス
MVCアーキテクチャってなんぞ?M:モデル(データ)V:ビュー(ページの表示内容)C:コントローラ(呼びかけに対して         どんな反応をするか)
MVCアーキテクチャってなんぞ?M:モデル(データ)V:ビュー(ページの表示内容)C:コントローラ(呼びかけに対して         どんな反応をするか)「役割ごとに資源を分別して扱いましょう」 という考え方。
Railsの良いところ手を動かしながら、話をしながら           体感してみましょう。
インストールはお済みですか?    1.リンク先で、     左のボタンをクリック    ⇒ダウンロード    2.インストール用ツールを起動    ⇒インストールの設定は特にい     じらず、「次へ」ボタンを     ぽちぽちしましょう。
「コマンドプロンプト」を使いますRailsの操作にはWindowsであれば「コマンドプロンプト」を使います。
こんな画面が出てくればOKです
では、早速...次のコマンドを入力してみて下さいrails new myappcd myapprails s入力が終わりましたら、下のリンクを開いてみましょう
実は既に、あなたのコンピュータにサーバが 建っています先ほどのコマンドで、こんな事をしていましたrails new myapp⇒アプリを作るcd myapp⇒作ったアプリに移動rails s⇒サーバ起動
rails new コマンドひとつで、枠組みを用意してくれます。
ショッピングサイトを作ってみよう枠組みはRailsが用意してくれました何が必要になりそうですか?
まずはモデルから攻めよう    コマンドで一発作成する事ができます。    rails g scaffold item name:string price:integer detail:text image:string    rails g ...
コマンドを入力する前に...サーバ起動中はコマンドを入力できません一旦サーバを停止させる必要があります本来コマンドプロンプトでCtrl+Cを入力すると停止するはずなんですが、Windowsだと操作が効かない事が多いようです。↓コマンドプロンプト...
scaffoldでモデルを追加したら、次のコマンドを入力して下さいrake db:migrate実際にデータを管理している部品に、モデルの定義が変更されたことを教えてあげます後はうまいこと、彼がなんとかしてくれます
rails g scaffoldの威力    rails s コマンドでサーバを起動したら        こちらをご覧下さい    { localhost:3000/items へのリンク}    ひとつのコマンドで、ここまでしてくれます●  ...
商品に画像を付けてみましょう次のファイルをいじりますUser/ユーザ名/myapp/app/views/items/index.html.erb  <td><%= item.name %></td>  <td><%= item.price %>...
ファイルの変更はこれだけです。{ localhost:3000/items/new へのリンク}{ localhost:3000/items へのリンク}にアクセスして、画像にURLを設定しましょう。        ここ→
やったね!
RubyOnRailsの醍醐味●    お決まりの操作はコマンドで楽々!●    やりたい事が、直感的にできる!              体感して頂けましたか?
本日はここまで! お疲れさまでした。
UnicastWS vol.1
UnicastWS vol.1
Upcoming SlideShare
Loading in...5
×

UnicastWS vol.1

644

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
644
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

UnicastWS vol.1

  1. 1. UNICAST・ワークショップ〜業務で使っている技術を大公開〜 触って学ぶWebSocket 作って遊ぶRubyOnRails
  2. 2. まずはこちらをご覧下さい{ tweet-search-stream へのリンク }
  3. 3. イマドキのWebサイトは、「更新」ボタンなんて押させません。 ↓ 非同期通信
  4. 4. こんなことをします。前半... もうすぐ夜明け! 新しい通信方式「WebSocket」について学ぶ後半... あっという間にWebサービスを作れる! 業界標準フレームワーク「RubyOnRails」を 体感する
  5. 5. WebSocketってなに?とってもスマートな通信方式です...- 使うとこんなものができます -・リアルタイムに表示内容が更新されるページ・閲覧者全員にアクションを起こせるページ
  6. 6. 掘り下げる前に...予備知識を確認しておきましょう
  7. 7. そもそもページはどうやって見てるの?ブラウザって?サーバって?①リクエスト③画面に反映       ②レスポンス
  8. 8. サーバって何だ!下記のような仕事に特化したコンピュータ+そこで動いているアプリです。データ置き場だったり、クライアントの呼びかけに答えたり、大きなラックにびっしり詰まっていてかっこよかったりします。
  9. 9. クライアントって何だ!みなさんがお持ちのPC、またはブラウザの事です。弁護士に対する相談者⇒クライアント医者に対する患者⇒クライアント(クランケ?)サーバに対する皆さん⇒クライアント
  10. 10. やりとりされるデータリクエスト レスポンスGET /docs/sw/http-header.html HTTP/1.1 HTTP/1.1 200 OKHost: www.kanzaki.com Date: Wed, 05 Sep 2001 06:06:19 GMTAccept: text/html, text/plain, text/sgml, */*;q=0.01 Server: Apache/1.3.12Accept-Encoding: gzip, compress Content-Location: http-header.html.jaAccept-Language: ja,en Vary: negotiate,accept-language,accept-charsetIf-Modified-Since: Sun, 2 Sep 2001 11:31:06 GMT TCN: choiceUser-Agent: Lynx/2.8.2 P3P: policyref="/w3c/p3p.xml",CP="NOI DSP COR ADM DEV OUR STP" Last-Modified: Wed, 05 Sep 2001 06:02:09 GMT Connection: close Content-Type: text/html; charset=shift_jis Content-Language: ja +ページの内容
  11. 11. 大事な事がひとつ画像やら音声やらの数だけリクエストを送るページを1つ開くのにも、それなりの通信コストがかかっている
  12. 12. 予備知識はこれくらいです。 WebSocketのお話に移りましょう。
  13. 13. 通信方法の違い?いつもの通信
  14. 14. どんな通信方式?WebSocket
  15. 15. いつもの通信は、ここがよくない!● 接続がいちいち切れてしまう。 ⇒サーバから自発的にアクションを起こせない ⇒サーバで起こっていることを知るには、問い  合わせなければならない。ハズれあり● 普通の問い合わせ方をすると、ページ全体が更 新されてしまう ⇒無駄が多い● サーバは呼びかけた人にしか応答しない ⇒つまらん(・ε・)
  16. 16. やりとりされるデータリクエスト レスポンスGET /docs/sw/http-header.html HTTP/1.1 HTTP/1.1 200 OKHost: www.kanzaki.com Date: Wed, 05 Sep 2001 06:06:19 GMTAccept: text/html, text/plain, text/sgml, */*;q=0.01 Server: Apache/1.3.12Accept-Encoding: gzip, compress Content-Location: http-header.html.jaAccept-Language: ja,en Vary: negotiate,accept-language,accept-charsetIf-Modified-Since: Sun, 2 Sep 2001 11:31:06 GMT TCN: choiceUser-Agent: Lynx/2.8.2 P3P: policyref="/w3c/p3p.xml",CP="NOI DSP COR ADM DEV OUR STP" Last-Modified: Wed, 05 Sep 2001 06:02:09 GMT Connection: close Content-Type: text/html; charset=shift_jis Content-Language: ja +ページの内容
  17. 17. でもWebSocketなら...● 通信開きっぱなし ・サーバは閲覧者の居場所がわかる ⇒好きなタイミングで通知できる ⇒閲覧者は何もしなくていい(通知を待つだけ) ・サーバは閲覧者全員の居場所がわかる ⇒閲覧者全員にメッセージを送れる ・やりとりするのは欲しいデータだけ ⇒無駄が少ない
  18. 18. このページはこんな感じで動いています。
  19. 19. サーバ⇒問い合わせに応答。データ置き場にも何かの役割に特化すると...アプリケーションサーバ⇒色々やるよ!提供したいサービス次第!WebSocketサーバ⇒メッセージをばら撒く事に生涯を捧げる
  20. 20. まろやかなまとめ WebSocketなら● これまで不便だったものを解消します ⇒「更新」ボタンが無くなるかも?● 特性を生かした新しいサービスが生まれます (てます)。 ⇒データ垂れ流し系アプリ(twitter) ⇒スライド進行具合のシンクロ(これ)
  21. 21. 少しだけ業界人っぽい話をします。
  22. 22. ブラウザの違い、意識してますか?「表示がはやーい」で、満足していませんか?「見る」側と「作る」側では、ブラウザに対する見方が大きく違います
  23. 23. 代表的な例をひとつ。 { 面白法人カヤックHP へのリンク }InternetExprolerと、それ以外のブラウザで見比べてみて下さい。
  24. 24. ブラウザごとに表示が違ってしまう事が、  よくあります。・何かが表示されない・使えない機能がある・レイアウトが崩れたりする(致命的)
  25. 25. でも...Chromeの方が早いし、いやSafariの方が軽いし、IE使ってる人なんていないんじゃないの?
  26. 26. そんなことはありません。     スマホ→↓PC (2012年5月)
  27. 27. ● ブラウザには違いがある ⇒見た目の違い ⇒新技術への対応度● どのブラウザもいい感じにシェアがあるので、 無視する訳にもいかない。● ブラウザの対応を待つか、 気合いで実装するか、あきらめるか (-_-)
  28. 28. 少し先進的なWebSocketブラウザごとの対応状況は...?IE10と共に来る夜明け!しかし足を引っ張り続ける7,8,9...
  29. 29. おしまい!次はRubyOnRailsのお話です。ひとまず休憩をとりましょう。
  30. 30. まずはインストール 1.リンク先で、  左のボタンをクリック ⇒ダウンロード 2.インストール用ツールを起動 ⇒インストールの設定は特にい  じらず、「次へ」ボタンを  ぽちぽちしましょう。
  31. 31. RubyOnRailsってなに?MVCアーキテクチャに基づいた Webアプリケーションフレームワーク???
  32. 32. アプリケーション?⇒「アプリ」の相性でおなじみ コンピュータの上で動作して、嬉しいサービ スを提供してくれますWebアプリケーション?⇒「アプリ」がネットの向こう側にあるだけ Webサービスと言い換えてもOK
  33. 33. ウェブサービスには何が必要?簡単なお買い物サイトをイメージすると...
  34. 34. こんなの全部用意しなくちゃならないのか...
  35. 35. Railsに「アプリケーション作成っ!」とお願いすると、こんなものが作られます。
  36. 36. アプリケーションフレームワーク?⇒Webアプリケーションの枠組みを 用意してくれるものWebアプリケーション?⇒ネットの向こう側でコンピュータが 頑張ってくれているサービス
  37. 37. MVCアーキテクチャってなんぞ?M:モデル(データ)V:ビュー(ページの表示内容)C:コントローラ(呼びかけに対して         どんな反応をするか)
  38. 38. MVCアーキテクチャってなんぞ?M:モデル(データ)V:ビュー(ページの表示内容)C:コントローラ(呼びかけに対して         どんな反応をするか)「役割ごとに資源を分別して扱いましょう」 という考え方。
  39. 39. Railsの良いところ手を動かしながら、話をしながら 体感してみましょう。
  40. 40. インストールはお済みですか? 1.リンク先で、  左のボタンをクリック ⇒ダウンロード 2.インストール用ツールを起動 ⇒インストールの設定は特にい  じらず、「次へ」ボタンを  ぽちぽちしましょう。
  41. 41. 「コマンドプロンプト」を使いますRailsの操作にはWindowsであれば「コマンドプロンプト」を使います。
  42. 42. こんな画面が出てくればOKです
  43. 43. では、早速...次のコマンドを入力してみて下さいrails new myappcd myapprails s入力が終わりましたら、下のリンクを開いてみましょう
  44. 44. 実は既に、あなたのコンピュータにサーバが 建っています先ほどのコマンドで、こんな事をしていましたrails new myapp⇒アプリを作るcd myapp⇒作ったアプリに移動rails s⇒サーバ起動
  45. 45. rails new コマンドひとつで、枠組みを用意してくれます。
  46. 46. ショッピングサイトを作ってみよう枠組みはRailsが用意してくれました何が必要になりそうですか?
  47. 47. まずはモデルから攻めよう コマンドで一発作成する事ができます。 rails g scaffold item name:string price:integer detail:text image:string rails g scaffold モデル名 中身①:種類 中身②:種類● 中身の種類は色々あります string ⇒短めの文章(名前やパスワード) text⇒長めの文章(商品説明) integer⇒数字(価格)
  48. 48. コマンドを入力する前に...サーバ起動中はコマンドを入力できません一旦サーバを停止させる必要があります本来コマンドプロンプトでCtrl+Cを入力すると停止するはずなんですが、Windowsだと操作が効かない事が多いようです。↓コマンドプロンプト自体を再起動しましょう。面倒だけど多めにみてね (;´Д`)
  49. 49. scaffoldでモデルを追加したら、次のコマンドを入力して下さいrake db:migrate実際にデータを管理している部品に、モデルの定義が変更されたことを教えてあげます後はうまいこと、彼がなんとかしてくれます
  50. 50. rails g scaffoldの威力 rails s コマンドでサーバを起動したら     こちらをご覧下さい { localhost:3000/items へのリンク} ひとつのコマンドで、ここまでしてくれます● モデルを作ってくれます● モデルを「一覧表示、詳細表示、追加、変更、 削除」するページを作ってくれます● アドレスを入力したら、ちゃんとそのページに 飛べるようにしておいてくれます
  51. 51. 商品に画像を付けてみましょう次のファイルをいじりますUser/ユーザ名/myapp/app/views/items/index.html.erb <td><%= item.name %></td> <td><%= item.price %></td> <td><%= item.detail %></td> <td><%= item.image %></td>item.image の前に image_tag を書きます <td><%= image_tag item.image %></td> ↑スペースはちゃんと空けよう!
  52. 52. ファイルの変更はこれだけです。{ localhost:3000/items/new へのリンク}{ localhost:3000/items へのリンク}にアクセスして、画像にURLを設定しましょう。        ここ→
  53. 53. やったね!
  54. 54. RubyOnRailsの醍醐味● お決まりの操作はコマンドで楽々!● やりたい事が、直感的にできる! 体感して頂けましたか?
  55. 55. 本日はここまで! お疲れさまでした。
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×