Ajax

通常Webアプリケーションではページ単位で画面が遷移します。これに対しＡｊａｘ（Asynchronous javaScript+XML）はページの一部分を書き換えることで、元の画面を保持しながら進めることができます。
前半は通常の方法でプログラムを、後半はAjaxを利用した方法でプログラムを作成します。

１．通常のプログラムの作成

(1) プロジェクトproj002の生成
　　・NetBeansで［新規プロジェクト］を選択します。

　　[ステップ１]プロジェクトを選択
　　　カテゴリ(C): Ruby
　　　プロジェクト(P): Ruby on Rails アプリケーション

　　[ステップ２]名前と場所
　　　プロジェクト名(N): proj002
　　　プロジェクトの場所(l): D:\Rails_Projects
　　　プロジェクトフォルダ(D): D:\Rails_Projects\proj002
　　　Rubyプラットフォーム(P): Ruby 1.8.7-p72
　　　サーバー(S): WEBrick

　　[ステップ３]データベース構成
　　　データベースアダプタ(P): mysql
　　　データベース名(D): proj002_development
　　　ユーザー名(M): root
　　　パスワード(W): *******

　　[ステップ４]Railsのインストール
　　　Railsのバージョン: 2.2.2

　　・proj002が生成されます。

(2) 日本語環境の設定
　　・/config/environment.rbの編集
　　・/app/controllers/application.rbの編集

(3) データベースの作成
　　今回はデータベースは使用しませんが、Railsでは必須です。

(4)コントローラとビューの生成
　　・NetBeansで［生成］を選択します。
　　　ジェネレータ(G): controller
　　　名前(N): sankaku
　　　ビュー(V):index hantei

(5) 入力画面プログラムの作成
　　/app/views/sankaku/index.html.erbを編集します。

/app/views/sankaku/index.html.erb




<h1>三角形は成立するかしないか</h1>




<% form_tag :action=>"hantei" do -%>

　値Ａ：<%= text_field :sankaku, :a %>

　値Ｂ：<%= text_field :sankaku, :b %>

　値Ｃ：<%= text_field :sankaku, :c %>

　<%= submit_tag "判定" %>

<% end -%>

(6) 判定プログラムの作成
　　/app/controllers/sankaku_controller.rbを編集します。

/app/controllers/sankaku_controller.rb


class SankakuController < ApplicationController

  def index

  end



  def hantei

    x=params[:sankaku][:a].to_i

    y=params[:sankaku][:b].to_i

    z=params[:sankaku][:c].to_i

    fg="ON"

    fg="off" if x+y<=z

    fg="off" if x+z<=y

    fg="off" if z+y<=x

    @kekka="#{x},#{y},#{z}であれば三角形ができる" if fg=="ON"

    @kekka="#{x},#{y},#{z}では三角形はできない" if fg=="off"

  end

end

(7) 判定結果表示プログラムの作成
　　/app/views/sankaku/hantei.html.erbを編集します。

/app/views/sankaku/hantei.html.erb




<h2>判定結果</h2>

<%= "#{@kekka}" %>

(8) 実行
WEBrickを立ち上げて
ブラウザよりhttp://127.0.0.1:3000/sankaku/を入力して動作を確認してください。
（入力画面）
    

（結果表示画面）
    

２．Ajaxの利用
　　通常Webアプリケーションではページ単位で画面が遷移します。
　　これに対しＡｊａｘ（Asynchronous javaScript+XML）はページの一部分を書き換えることで、
　　元の画面を保持しながら進めることができます。

(1) 入力画面プログラムの編集
　　Ajaxの機能はJavascriptで実現しています。まずJavascriptを埋め込みましょう。
　　今回は特定のフィールドを監視し、そのフィールドが更新された場合Ajaxを利用して
　　サーバとデータの送受信を行います。
　　これらを実装するため/app/views/sankaku/index.html.erbを編集します。

/app/views/sankaku/index.html.erb


<html>

　<head>

　　<meta http-equiv="Content-type" content="text/html; charset=utf-8" />




　　<%= javascript_include_tag "prototype" %>




　　<title>Sankaku</title>

　</head>

　<body>

　　<h1>三角形は成立するかしないか</h1>




　　<div id="param">

　　　値Ａ：<%= text_field_tag :a %>

　　　値Ｂ：<%= text_field_tag :b %>

　　　値Ｃ：<%= text_field_tag :c %>

　　</div>




　　<br/>

<%= observe_field :c,:update => "kekka", :position => "top",

　　:url => {:action => "hantei"}, :frequency => 0.5, :submit => "param" %>




　　<div id="kekka"></div>




　</body>

</html>

　　ここでobserve_fieldを説明します。
　　このobserve_field はrailsのRJSテンプレートという機能を使っています。
　　RJSテンプレートとは、javascriptを書かなくても簡単にかける機能でパラメータ指定でＯＫです。
　　　　:c ／ このフィールドを監視する
　　　　:update=>"kekka" ／ この場所を更新する
　　　　:position=>"top" ／ updateで指定した要素のどこに表示するか
　　　　　　　　　　　　　　指定せず: 要素に上書き
　　　　　　　　　　　　　　"top"： 　先頭
　　　　　　　　　　　　　　"bottom"：最後
　　　　　　　　　　　　　　"before"：要素の直前
　　　　　　　　　　　　　　"after"： 要素の直後
　　　　:url=>{:action=>"hantei"} ／ どのメソッドを呼び出すか指定する
　　　　:frequency=>0.5 ／ 監視間隔を指定する
　　　　:submit=>"param" ／ データを送信するフォームまたは子要素を持つ親のidを指定する

(2) 判定プログラムの作成
　　app/controllers/sankaku_controller.rbを編集します。
　　このプログラムの最後で制御をパーシャルプログラムに制御を移します。

/app/controllers/sankaku_controller.rb


class SankakuController < ApplicationController

  def index

  end

  

  def hantei

    x=params[:a].to_i

    y=params[:b].to_i

    z=params[:c].to_i

    fg="ON"

    fg="off" if x+y<=z

    fg="off" if x+z<=y

    fg="off" if z+y<=x

    @kekka="#{x},#{y},#{z}であれば三角形ができる" if fg=="ON"

    @kekka="#{x},#{y},#{z}では三角形はできない" if fg=="off"

    render :partial => "kekka"

  end

  

end

(3) 結果表示プログラム
　　_kekka.html.erbを作成します。
　　ここで_kekka.html.erbはパーシャルerbと呼ばれ、
　　部分的に更新を行うプログラムのときの約束事で先頭に”_”を付けます。

/app/views/sankaku/_kekka.html.erb




<%= "#{@kekka}" %><br/>

(4) 動作確認
　　プログラムを実行して動作を確認します。