Download to read offline
UnicastWS vol.1
- 1. UNICAST・ワークショップ 〜業務で使っている技術を大公開〜 触って学ぶWebSocket 作って遊ぶRubyOnRails
- 2.
- 3. イマドキのWebサイトは、 「更新」ボタンなんて押させません。 ↓ 非同期通信
- 4. こんなことをします。 前半... もうすぐ夜明け！ 新しい通信方式「WebSocket」について学ぶ 後半... あっという間にWebサービスを作れる！ 業界標準フレームワーク「RubyOnRails」を 体感する
- 5.
- 6.
- 7.
- 8.
- 9.
- 10. やりとりされるデータ リクエスト レスポンス GET /docs/sw/http-header.html HTTP/1.1 HTTP/1.1 200 OK Host: www.kanzaki.com Date: Wed, 05 Sep 2001 06:06:19 GMT Accept: text/html, text/plain, text/sgml, */*;q=0.01 Server: Apache/1.3.12 Accept-Encoding: gzip, compress Content-Location: http-header.html.ja Accept-Language: ja,en Vary: negotiate,accept-language,accept-charset If-Modified-Since: Sun, 2 Sep 2001 11:31:06 GMT TCN: choice User-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.
- 12.
- 13.
- 14.
- 15. いつもの通信は、ここがよくない！ ● 接続がいちいち切れてしまう。 ⇒サーバから自発的にアクションを起こせない ⇒サーバで起こっていることを知るには、問い 合わせなければならない。ハズれあり ● 普通の問い合わせ方をすると、ページ全体が更 新されてしまう ⇒無駄が多い ● サーバは呼びかけた人にしか応答しない ⇒つまらん(･ε･)
- 16. やりとりされるデータ リクエスト レスポンス GET /docs/sw/http-header.html HTTP/1.1 HTTP/1.1 200 OK Host: www.kanzaki.com Date: Wed, 05 Sep 2001 06:06:19 GMT Accept: text/html, text/plain, text/sgml, */*;q=0.01 Server: Apache/1.3.12 Accept-Encoding: gzip, compress Content-Location: http-header.html.ja Accept-Language: ja,en Vary: negotiate,accept-language,accept-charset If-Modified-Since: Sun, 2 Sep 2001 11:31:06 GMT TCN: choice User-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. でもWebSocketなら... ● 通信開きっぱなし ・サーバは閲覧者の居場所がわかる ⇒好きなタイミングで通知できる ⇒閲覧者は何もしなくていい(通知を待つだけ) ・サーバは閲覧者全員の居場所がわかる ⇒閲覧者全員にメッセージを送れる ・やりとりするのは欲しいデータだけ ⇒無駄が少ない
- 18.
- 19.
- 20. まろやかなまとめ WebSocketなら ● これまで不便だったものを解消します ⇒「更新」ボタンが無くなるかも？ ● 特性を生かした新しいサービスが生まれます (てます)。 ⇒データ垂れ流し系アプリ(twitter) ⇒スライド進行具合のシンクロ(これ)
- 21.
- 22.
- 23. 代表的な例をひとつ。 {面白法人カヤックHP へのリンク } InternetExprolerと、それ以外のブラウザで 見比べてみて下さい。
- 24.
- 25.
- 26. そんなことはありません。 スマホ→ ↓PC （2012年５月）
- 27. ● ブラウザには違いがある ⇒見た目の違い ⇒新技術への対応度 ● どのブラウザもいい感じにシェアがあるので、 無視する訳にもいかない。 ● ブラウザの対応を待つか、 気合いで実装するか、あきらめるか (-_-)
- 28.
- 29.
- 30. まずはインストール 1.リンク先で、 左のボタンをクリック ⇒ダウンロード 2.インストール用ツールを起動 ⇒インストールの設定は特にい じらず、「次へ」ボタンを ぽちぽちしましょう。
- 31.
- 32.
- 33.
- 35.
- 36.
- 37.
- 38.
- 40.
- 41. Railsの良いところ 手を動かしながら、話をしながら 体感してみましょう。
- 42. インストールはお済みですか？ 1.リンク先で、 左のボタンをクリック ⇒ダウンロード 2.インストール用ツールを起動 ⇒インストールの設定は特にい じらず、「次へ」ボタンを ぽちぽちしましょう。
- 43.
- 44.
- 45. では、早速... 次のコマンドを入力してみて下さい rails new myapp cdmyapp rails s 入力が終わりましたら、下のリンクを 開いてみましょう
- 46. 実は既に、あなたのコンピュータにサーバが 建っています 先ほどのコマンドで、こんな事をしていました rails new myapp ⇒アプリを作る cdmyapp ⇒作ったアプリに移動 rails s ⇒サーバ起動
- 47.
- 48.
- 49. まずはモデルから攻めよう コマンドで一発作成する事ができます。 rails g scaffold item name:string price:integer detail:text image:string rails g scaffold モデル名 中身①:種類 中身②:種類 ● 中身の種類は色々あります string ⇒短めの文章（名前やパスワード） text⇒長めの文章（商品説明） integer⇒数字（価格）
- 50.
- 51.
- 52. rails g scaffoldの威力 rails s コマンドでサーバを起動したら こちらをご覧下さい { localhost:3000/items へのリンク} ひとつのコマンドで、ここまでしてくれます ● モデルを作ってくれます ● モデルを「一覧表示、詳細表示、追加、変更、 削除」するページを作ってくれます ● アドレスを入力したら、ちゃんとそのページに 飛べるようにしておいてくれます
- 53. 商品に画像を付けてみましょう 次のファイルをいじります 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> ↑スペースはちゃんと空けよう！
- 54. ファイルの変更は これだけです。 { localhost:3000/items/new へのリンク} {localhost:3000/items へのリンク} にアクセスして、 画像にURLを設定しましょう。 ここ→
- 55.
- 56. RubyOnRailsの醍醐味 ● お決まりの操作はコマンドで楽々！ ● やりたい事が、直感的にできる！ 体感して頂けましたか？
- 57.