Download presentation
Presentation is loading. Please wait.
1
RailsによるAjaxの利用 4回生 小野 実
2
お品書き Ajax Ajaxとは RailsでのAjax利用方法 link_to_remote() form_remote_tag()
オブザーバ periodically_call_remote() 視覚効果 置換 コールバック
3
Ajaxとは 例：GoogleSuggest，GoogleMaps，etc. Asynchronous JavaScript and XML
XMLHtmlRequest DHTML(：DynamicHTML) サーバサイドウェブアプリケーション これらを複合した技がAjax 例：GoogleSuggest，GoogleMaps，etc.
4
利用方法 link_to_remote form_remote_tag() オブザーバ periodically_call_remote
視覚効果 置換 コールバック
5
link_to_remote 基本的なAjax呼び出しを行うための構文 3つのパラメータを受け取る
:update => ‘mydiv’, :url => { :action => :say_hello }) %> 3つのパラメータを受け取る リンクの文字列 更新するページ上の要素のid=属性 呼び出すアクションのURLをurl_for()形式で記述したもの
6
補足：url_for()形式 url_for {:controller => example,
:action => periodic, :id => 1}
7
form_remote_tag() form_tag()のAjax版
form_tag()をform_remote_tag()に置き換えるだけでよい <%= form_remote_tag(:update => ‘hoge’, :url {:action => ‘test’})%> <%= text_field_tag :text1 %> <%= submit_tag “送信” %> <%= end_form_tag %>
8
オブザーバ 文字予測に使われる observe：観察する，監視する GoogleSuggest，郵便番号検索が有名
<%= observe_field(:word, :frequency => 0.5, :update => :results, :url => { :action => :search})%>
9
定期的な更新:periodically_call_remote()
Ajaxを介して定期的にサーバを呼び出す <%= periodically_call_remote(:update => ‘list’, :url => {:action => :ps}, :frequency => 2) %>
10
DocumentObjectModel(DOM)操作
$(id) 指定のidのDOM要素を返す．そうでなければその引数を返す． Element.toggle(element,...) 指定の要素が表示されるかどうかを切り替える． Element.show(element,...) 指定された要素が表示されるように保証する． Element.hide(element,...) 指定された表祖が表示されないように保証する． Element.remove(element) 指定された要素を完全にDOMから削除します．
11
視覚効果(１回限りの効果) Effect.Appear(element) Effect.Fade(element)
指定されたようその不透明度を0%~100%まで滑らかに変化かさせる．(滑らかなフェードイン) Effect.Fade(element) Appeearの逆で滑らかにフェードアウトさせる． Effect.Highlight(element) 要素に対してYellowFadeTechniqueを使い，その背景を黄色から白へと滑らかにフェードさせる． Effect.Puff(element)
12
視覚効果(１回限りの効果) Effect.Puff(element) Effect.Squish(element)
煙が徐々に雲状に広がって要素が消えたように見せる． Effect.Squish(element) 滑らかに縮小させることで要素を消す．
13
視覚効果(繰り返し呼び出し可能) Effect.Scale(element,percent)
指定された要素を滑らかに拡大縮小する． Effect.setContentZoom(element,percent) emを単位として使用するテキストや，その他の要素のスケールを設定する，アニメーションによらない手法を提供．
14
置換 Insertion.Top(element,content) Insertion.Bottom(element,content)
要素の開始の直後にHTMLの断片を挿入する． Insertion.Bottom(element,content) 要素の終了の直前にHTMLの断片を挿入する． Insertion.Before(element,content) 要素の開始の前にHTMLフラグメントを挿入する． Insertion.After(element,content) 要素の終了の後にHTMLフラグメントを挿入する．
15
コールバック 目的の作業の前後に「付随して行わせる作業」．
link_to_remote()、form_remote_tag()、 observe_xxxメソッドで利用できる． requestと呼ばれるJavaScript変数にアクセスできる． requestにはXMLHttpRequestオブジェクトが格納されている．
16
コールバック :loading() :loaded() :interactive() :complete()
サーバにデータを送信し始めると呼び出される． :loaded() 全てのデータがサーバに送信され終わると呼び出される． :interactive() データがサーバから戻り始めたことをきっかけに呼び出される． :complete() サーバからの全てのデータを受信し呼び出しが完了すると，呼び出される．
17
コールバック(link_to_remote限定)
:confirm 確認ダイアログを利用する． :condition JavaScriptの式を評価し提供する．リモートリクエストは，式がtrueの場合のみ開始される． :before Ajax呼び出しが行われる直前でJavaScriptの式を評価する． :after Ajax呼び出しが行われる直後にJavaScriptの式を評価する．
Similar presentations
