UNICAST・ワークショップ

〜業務で使っている技術を大公開〜

触って学ぶWebSocket作って遊ぶRubyOnRails

まずはこちらをご覧下さい

{ tweet-search-stream へのリンク }

イマドキのWebサイトは、「更新」ボタンなんて押させません。

↓非同期通信

こんなことをします。前半...

もうすぐ夜明け！新しい通信方式「WebSocket」について学ぶ

後半...あっという間にWebサービスを作れる！業界標準フレームワーク「RubyOnRails」を体感する

WebSocketってなに？とってもスマートな通信方式です...

- 使うとこんなものができます -・リアルタイムに表示内容が更新されるページ・閲覧者全員にアクションを起こせるページ

掘り下げる前に...

予備知識を確認しておきましょう

そもそもページはどうやって見てるの？ブラウザって？サーバって？

①リクエスト

③画面に反映　　　　　　　②レスポンス

サーバって何だ！下記のような仕事に特化したコンピュータ＋そこで動いているアプリです。

データ置き場だったり、クライアントの呼びかけに答えたり、

大きなラックにびっしり詰まっていてかっこよかったりします。

クライアントって何だ！みなさんがお持ちのPC、またはブラウザの事です。

弁護士に対する相談者⇒クライアント医者に対する患者⇒クライアント(クランケ？)サーバに対する皆さん⇒クライアント

やりとりされるデータリクエストGET /docs/sw/http-header.html HTTP/1.1

Host: www.kanzaki.com

Accept: text/html, text/plain, text/sgml, */*;q=0.01

Accept-Encoding: gzip, compress

Accept-Language: ja,en

If-Modified-Since: Sun, 2 Sep 2001 11:31:06 GMT

User-Agent: Lynx/2.8.2

レスポンスHTTP/1.1 200 OK

Date: Wed, 05 Sep 2001 06:06:19 GMT

Server: Apache/1.3.12

Content-Location: http-header.html.ja

Vary: negotiate,accept-language,accept-charset

TCN: choice

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

＋ページの内容

大事な事がひとつ画像やら音声やらの数だけリクエストを送る

ページを１つ開くのにも、それなりの通信コストがかかっている

予備知識はこれくらいです。WebSocketのお話に移りましょう。

通信方法の違い？いつもの通信

どんな通信方式？WebSocket

いつもの通信は、ここがよくない！

● 接続がいちいち切れてしまう。⇒サーバから自発的にアクションを起こせない⇒サーバで起こっていることを知るには、問い　合わせなければならない。ハズれあり

● 普通の問い合わせ方をすると、ページ全体が更新されてしまう⇒無駄が多い

● サーバは呼びかけた人にしか応答しない⇒つまらん(･ε･)

やりとりされるデータリクエストGET /docs/sw/http-header.html HTTP/1.1

Host: www.kanzaki.com

Accept: text/html, text/plain, text/sgml, */*;q=0.01

Accept-Encoding: gzip, compress

Accept-Language: ja,en

If-Modified-Since: Sun, 2 Sep 2001 11:31:06 GMT

User-Agent: Lynx/2.8.2

レスポンスHTTP/1.1 200 OK

Date: Wed, 05 Sep 2001 06:06:19 GMT

Server: Apache/1.3.12

Content-Location: http-header.html.ja

Vary: negotiate,accept-language,accept-charset

TCN: choice

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

＋ページの内容

でもWebSocketなら...

● 通信開きっぱなし・サーバは閲覧者の居場所がわかる⇒好きなタイミングで通知できる⇒閲覧者は何もしなくていい(通知を待つだけ)・サーバは閲覧者全員の居場所がわかる⇒閲覧者全員にメッセージを送れる・やりとりするのは欲しいデータだけ⇒無駄が少ない

このページはこんな感じで動いています。

サーバ⇒問い合わせに応答。データ置き場にも

何かの役割に特化すると...アプリケーションサーバ⇒色々やるよ！提供したいサービス次第！WebSocketサーバ⇒メッセージをばら撒く事に生涯を捧げる

まろやかなまとめWebSocketなら

● これまで不便だったものを解消します⇒「更新」ボタンが無くなるかも？

● 特性を生かした新しいサービスが生まれます(てます)。⇒データ垂れ流し系アプリ(twitter)⇒スライド進行具合のシンクロ(これ)

少しだけ業界人っぽい話をします。

ブラウザの違い、意識してますか？

「表示がはやーい」で、満足していませんか？

「見る」側と「作る」側では、ブラウザに対する見方が大きく違います

代表的な例をひとつ。

InternetExprolerと、それ以外のブラウザで見比べてみて下さい。

{ 面白法人カヤックHP へのリンク }

ブラウザごとに表示が違ってしまう事が、　　よくあります。

・何かが表示されない・使えない機能がある・レイアウトが崩れたりする(致命的)

でも...Chromeの方が早いし、いやSafariの方が軽いし、

IE使ってる人なんていないんじゃないの？

そんなことはありません。

　　　　　スマホ→

↓PC

（2012年５月）

● ブラウザには違いがある⇒見た目の違い⇒新技術への対応度

● どのブラウザもいい感じにシェアがあるので、無視する訳にもいかない。

● ブラウザの対応を待つか、気合いで実装するか、あきらめるか (-_-)

少し先進的な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 モデル名 中身①:種類 中身②:種類

● 中身の種類は色々ありますstring ⇒短めの文章（名前やパスワード）text⇒長めの文章（商品説明）integer⇒数字（価格）

rails g scaffold item name:string price:integer detail:text image:string

コマンドを入力する前に...サーバ起動中はコマンドを入力できません

一旦サーバを停止させる必要があります

本来コマンドプロンプトで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 %></td> <td><%= item.detail %></td> <td><%= item.image %></td>

item.image の前に image_tag を書きます <td><%= image_tag item.image %></td> ↑スペースはちゃんと空けよう！

ファイルの変更はこれだけです。

にアクセスして、画像にURLを設定しましょう。

　　　　　　　　ここ→

{ localhost:3000/items/new へのリンク}

{ localhost:3000/items へのリンク}

やったね！

RubyOnRailsの醍醐味

● お決まりの操作はコマンドで楽々！

● やりたい事が、直感的にできる！

体感して頂けましたか？

本日はここまで！

お疲れさまでした。