UnicastWS vol.1
- 1. UNICAST?ワークショップ ?業務で使っている技術を大公開? 触って学ぶWebSocket 作って游ぶ搁耻产测翱苍搁补颈濒蝉
- 3. イマドキのWebサイトは、 「更新」ボタンなんて押させません。 ↓ 非同期通信
- 4. こんなことをします。 前半... もうすぐ夜明け！ 新しい通信方式「WebSocket」について学ぶ 後半... あっという間にWebサービスを作れる！ 業界標準フレームワーク「RubyOnRails」を 体感する
- 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 ＋ページの内容
- 13. 通信方法の違い？ いつもの通信
- 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なら... ● 通信開きっぱなし ?サーバは閲覧者の居場所がわかる ?好きなタイミングで通知できる ?閲覧者は何もしなくていい(通知を待つだけ) ?サーバは閲覧者全員の居場所がわかる ?閲覧者全員にメッセージを送れる ?やりとりするのは欲しいデータだけ ?無駄が少ない
- 20. まろやかなまとめ WebSocketなら ● これまで不便だったものを解消します ?「更新」ボタンが無くなるかも？ ● 特性を生かした新しいサービスが生まれます (てます)。 ?データ垂れ流し系アプリ(twitter) ?スライド進行具合のシンクロ(これ)
- 21. 少しだけ业界人っぽい话をします。
- 23. 代表的な例をひとつ。 { 面白法人カヤックHP へのリンク } InternetExprolerと、それ以外のブラウザで 見比べてみて下さい。
- 26. そんなことはありません。 スマホ→ ↓PC （2012年５月）
- 27. ● ブラウザには違いがある ?見た目の違い ?新技術への対応度 ● どのブラウザもいい感じにシェアがあるので、 無視する訳にもいかない。 ● ブラウザの対応を待つか、 気合いで実装するか、あきらめるか (-_-)
- 30. まずはインストール 1.リンク先で、 左のボタンをクリック ?ダウンロード 2.インストール用ツールを起動 ?インストールの設定は特にい じらず、「次へ」ボタンを ぽちぽちしましょう。
- 41. Railsの良いところ 手を動かしながら、話をしながら 体感してみましょう。
- 42. インストールはお済みですか？ 1.リンク先で、 左のボタンをクリック ?ダウンロード 2.インストール用ツールを起動 ?インストールの設定は特にい じらず、「次へ」ボタンを ぽちぽちしましょう。
- 44. こんな画面が出てくれば翱碍です
- 45. では、早速... 次のコマンドを入力してみて下さい rails new myapp cd myapp rails s 入力が終わりましたら、下のリンクを 開いてみましょう
- 46. 実は既に、あなたのコンピュータにサーバが 建っています 先ほどのコマンドで、こんな事をしていました rails new myapp ?アプリを作る cd myapp ?作ったアプリに移動 rails s ?サーバ起動
- 49. まずはモデルから攻めよう コマンドで一発作成する事ができます。 rails g scaffold item name:string price:integer detail:text image:string rails g scaffold モデル名 中身①:種類 中身②:種類 ● 中身の種類は色々あります string ?短めの文章（名前やパスワード） text?長めの文章（商品説明） integer?数字（価格）
- 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の醍醐味 ● お決まりの操作はコマンドで楽々！ ● やりたい事が、直感的にできる！ 体感して頂けましたか？