最終回 Rails + jQuery でAjaxを使ってみよう

最終回 Rails + jQuery でAjaxを使ってみよう

連載最終回は、RailsとjQueryを使って、Ajaxを利用したブラウザとサーバー間のデータ受け渡しについて触れたいと思います。巷では、数年前からAjaxが当たり前の技術として広まっており、読者の皆さんがAjaxに触れる機会はとても多いことでしょう。Rails3.0.xまでは、PrototypeというJavaScriptライブラリが標準でインストールされています。しかし今回は、Prototypeではなく、jQueryを利用してAjaxを実現させます。なお、Rails3.1からは、jQueryが標準となりました。

新規プロジェクトの作成

まずは、今回の記事を進めるにあたり、新しくRailsのプロジェクトを作成しましょう。プロジェクト名は「lesson05」にします。プロジェクトの作成方法については、連載第１回をご参照ください（筆者は第１回と同じく、「rails_article_work」という作業ディレクトリ内にlesson05を作成した）。 プロジェクトの作成が完了したら、lesson05ディレクトリに移動してください。 

$ cd lesson05


jQueryを利用できるようにする

次に、Railsのgenerateを利用して、先ほど作成したプロジェクトがjQueryを利用できるようにします。 まずは、下記のコマンドを実行して、必要なライブラリをインストールします。現時点（2011年12月）での最新版は、1.0.19になります。 

$ gem list jquery-rails

すでにインストールされていた場合は（jquery-rails (1.0.13)などと表示される）、updateを実行する 

$ gem update jquery-rails

インストールされていない場合は、installを実行する 

$ gem install jquery-rails

次に、プロジェクトの中にある「Gemfile」を開いて、下記の内容を追記してください（赤字部分）。 

（省略）
# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'

gem 'sqlite3'
gem 'jquery-rails'

# Use unicorn as the web server
（省略）

最後にgenerateを実行して、jQueryを有効にします。下記のコマンドを実行してください。 

$ rails generate jquery:install
      remove  public/javascripts/prototype.js
      remove  public/javascripts/effects.js
      remove  public/javascripts/dragdrop.js
      remove  public/javascripts/controls.js
     copying  jQuery (1.7.1)
      create  public/javascripts/jquery.js
      create  public/javascripts/jquery.min.js
     copying  jQuery UJS adapter (822920)
      remove  public/javascripts/rails.js
      create  public/javascripts/jquery_ujs.js

generateコマンドを実行することによって、Prototypeが必要とするファイルは削除され、代わりにjQueryが必要とするファイルがインストールされます。



Ajaxを使ったHello worldの作成

それでは、準備が整ったところで、Ajax機能を確認できる簡単なページを作成しましょう。連載第２回で紹介したHello worldをもとに、Ajax機能を実現していきます。まずは、下記のコマンドを入力して、表示に必要な各種ファイルを生成します。 

$ rails generate controller HelloWorld index
      create  app/controllers/hello_world_controller.rb
       route  get "hello_world/inex"
      invoke  erb
      create    app/views/hello_world
      create    app/views/hello_world/inex.html.erb
      invoke  test_unit
      create    test/functional/hello_world_controller_test.rb
      invoke  helper
      create    app/helpers/hello_world_helper.rb
      invoke    test_unit
      create      test/unit/helpers/hello_world_helper_test.rb

genereteが終わったら「config/routes.rb」を開き、下記のコードを追加してください（赤字部分）。 

Lesson05::Application.routes.draw do
  get "hello_world/index"
  post "hello_world/index"
  
  # The priority is based upon order of creation:
  # first created -> highest priority.
（省略）

次に入力項目と、入力された値を表示するためのラベルを追加します。「app/views/hello_world/index.html.erb」を開いて、下記のコードに修正してください（既存のコードはすべて消去）。 

<h1>Greeting</h1>
<% form_tag(url_for(:action => 'index'), :remote => true, :id => "result_form") do %>
  <%= text_field_tag :greeting %>
  <%= submit_tag "Show!" %>
<% end %>
<div id="result"></div>

ファイルを保存したあと、今度は「app/controllers/hello_world_controller.rb」を開いて、下記のコードを追加してください（赤字部分）。 

class HelloWorldController < ApplicationController
  def index
    @greeting = params[:greeting]
    render
  end

end

ファイルを保存したあと、最後に「app/views/hello_world/index.js.erb」を作成して、下記のコードを入力してください。 

$('#result').html("<%= @greeting %>");

このコードでは、「id=”result”」のdivタグに、HelloWorldController#index内で「@greeting」に代入した値を表示させる処理を行なっています。そして、HelloWorldController#indexで「render」を実行することにより、Railsはメソッド名「index」とファイル名が一致する「index.js.erb」を自動的に呼び出します。 ファイルを保存したあと、サーバーを起動して動作を確認してみましょう。 

$ rails server

http://127.0.0.1:3000/hello_world/indexにアクセスしてみてください。図1のように表示されていれば成功です。

図 1 できあがった画面

図 1 できあがった画面


早速、表示された画面に文字を入力して、「Show!」ボタンを押してみてください。画面遷移することなく、入力項目の下に入力値が表示されたと思います。

図 2 Ajaxを実行したところ

図 2 Ajaxを実行したところ


いかがでしょうか？うまく表示されましたか？たったこれだけの手順で、Ajax機能を実現することがお分かりいただけたかと思います。画面表示に関する操作は、「app/views/hello_world/index.js.erb」に記述したJavaScriptによって変更することが可能なので、いろいろ試してみてください。

Scaffoldで作成した画面のAjax化

連載第３回を参考に、Scaffold機能で作成した画面をAjax化してみましょう。ここでは、usersテーブルに作成する項目をuser_idとuser_nameのみとしました。 

$ rails generate scaffold user user_id:string user_name:string

rakeコマンドを使って、テーブルを作成しておきましょう。 

$ rake db:migrate

では準備が整ったところで、新規登録画面をAjax化してみます。「app/views/users/_form.html.erb」を開いて、下記の通りに修正してください（赤字部分）。 

<%= form_for(@user<span style="color:red;">, :remote=>true</span>) do |f| %>
  <% if @user.errors.any? %>
    <div id="error_explanation">
（省略）

ファイルを保存したあと、「app/views/users/new.html.erb」を開いて、下記の通りに修正してください（赤字部分）。これは、登録結果の表示用に使用します。 

<h1>New user</h1>
<span style="color:red;"><div id="result"></div></span>
<%= render 'form' %>

<%= link_to 'Back', users_path %>

ファイルを保存したあと、「app/controllers/users_controller.rb」を開いて、下記の通りに修正してください（赤字部分）。 

def show
  @user = User.find(params[:id])

  #respond_to do |format|
  #  format.html # show.html.erb
  #  format.xml  { render :xml => @user }
  #end
  render
end

最後に「app/views/users/show.js.erb」を作成して、下記のコードを入力してください。 

$('#result').html("User was successfully created. User: <%= @user.user_id %>, User name: <%= @user.user_name %>");

ファイルを保存したあと、http://127.0.0.1:3000/users/にアクセスし、New Userリンクをクリックして新規登録画面を表示してみてください。

図 3 新規登録画面

図 3 新規登録画面


なにか好きな値を入力して、Create Userボタンを押してみましょう。

図 4 新規登録した結果

図 4 新規登録した結果


うまく実行できましたか？画面遷移することなく、処理が実行されたかと思います。試しにBackリンクをクリックして一覧画面に戻ると、先ほど新規登録画面で作成したユーザーが表示されます。
ここでは新規登録画面だけAjax化してみましたが、編集画面や一覧画面もAjax化できますので、興味のある方は挑戦してみてください。



おまけ：Herokuでアプリを公開してみよう

さて、連載第1回で「sudo gem install heroku」というコマンドを実行しました。ここまで「heroku」については全く触れませんでした。herokuとは一体なんなのでしょう？

herokuは、正式には「Heroku」（http://www.heroku.com/）と記述します。Herokuは、PaaS（Platform as a Serviceの略）と呼ばれるインターネットサービスの利用形態の1つです。PaaSは、アプリケーションをWeb上に公開するプラットフォームを、インターネットサービスとして提供する仕組みです。アカウントを登録すれば、自分で作成したRailsのアプリケーションを、Web上に公開することができます。試しに、今回の連載で作成したアプリケーションを、Herokuに公開してみましょう。

ここからは、アカウント登録が済んでいることを前提に、話を進めさせて頂きます（アカウントの登録が済んでいない方は、トップページの「Sign Up」ボタンをクリックして新規登録画面に進み、画面の支持にしたがって登録を済ませてください）。

なお、アプリケーションのデプロイに「Git」が必要になりますので、別途インストールしておいてください（Gitについては、http://code.google.com/p/msysgit/（Windows向け、英文）または、http://help.github.com/mac-set-up-git/（Mac OSX向け、英文）などをご参照ください）。

Mac OSXの手順

ここではMac OSXでのアプリケーション公開手順を説明します。はじめに、アカウント登録したときのメールアドレスとパスワードを、自分のマシンに登録しておきましょう。下記のコマンドを実行してください。 

$ sudo heroku keys:add
Found the following SSH public keys:
1) github_rsa.pub
2) id_rsa.pub
Which would you like to use with your Heroku account? 2
Uploading ssh public key /Users/xxxxx/.ssh/id_rsa.pub

次に、今回の連載で作成したアプリケーションのディレクトリに移動します。そしてアプリケーションをGitにコミットします。 

$ cd lesson05
$ git init
Initialized empty Git repository in /Users/xxxxx/Documents/rails_article_work/heroku-world/.git/
$ git add .
$ git commit -m "initial commit."
（※ -mオプションはコミットコメントを表します）

Heroku上にアプリケーションを作成して、先ほどGitにコミットしたアプリケーションをリリースします。 

$ sudo heroku create [任意のアプリケーション名]
$ git push heroku master
（※ 筆者は「任意のアプリケーション名」をlesson05としました。なお、Heroku全体で同一のアプリケーション名は使用できませんので、エラーがでた場合は（Name is already taken）、別の名称に変更してください）

Herokuのサイトにログインして、「https://api.heroku.com/myapps」を開いてみると、リリースしたアプリケーションが表示されます。

図 5 My Apps画面

図 5 My Apps画面


リリースしたアプリケーションをクリックして次の画面へ遷移したあと、Heroku URLに表示されているURLをクリックしてみてください。いつも見慣れたRailsの画面が表示されれば成功です。



Windowsの手順

ここではWindowsでのアプリケーション公開手順を説明します。おおよその流れはMac OSXと変わりません。なお、下記のURLから「msysGit-fullinstall-1.7.8-preview20111206.exe」をダウンロードしてインストールしてある必要があります。

上記で、Gitを「C:\msysgit\msysgit」にインストールしたことを前提に、説明を続けます。 最初に、C:\msysgit\msysgit\msys.batを実行し、下記のコマンドを実行してSSH認証用の鍵を生成してください。 

$ ssh-keygen -t rsa
Enter file in which to save the key (/c/Documents and Settings/xxxxx/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
（※ 上記は何も入力せずにEnterキーを押し、すべてデフォルトで進めています）
$ heroku keys:add

次に、lesson05ディレクトリに移動して、Gitにコミットします。 

$ cd [作業ディレクトリ]/lesson05
$ git init
Initialized empty Git repository in c:/Documents and Settings/xxxxx/My Documents/rails_article_work/lesson05/.git/
$ git add .
$ git commit -m "initial commit."

Heroku上にアプリケーションを作成して、先ほどGitにコミットしたアプリケーションをリリースします。 

$ heroku create [任意のアプリケーション名]
c:/Ruby187/lib/ruby/gems/1.8/gems/heroku-2.16.1/lib/heroku/command/base.rb:209: warning: already initialized constant BaseWithApp
Creating [任意のアプリケーション名]...
 done, stack is bamboo-mri-1.9.2
http://[任意のアプリケーション名].heroku.com/ | git@heroku.com:lesson05.git
$ git push heroku master
（※ 筆者は「任意のアプリケーション名」をlesson05としました。なお、Heroku全体で同一のアプリケーション名は使用できませんので、エラーがでた場合は（Name is already taken）、別の名称に変更してください）

「http://[任意のアプリケーション名].heroku.com/」を開いてみると、リリースしたアプリケーションが表示されます。



記事で作成したアプリケーションの公開手順

さらに、今回の記事で作成したアプリケーションを動かしてみましょう（アプリケーション名は「lesson05」を前提に進めます）。 まずは「http://lesson05.heroku.com/hello_world/index」を開いてみてください。

図 6 http://lesson05.heroku.com/hello_world/indexを開いたところ

図 6 http://lesson05.heroku.com/hello_world/indexを開いたところ


なにか適当な文字を入力してから、「Show!」ボタンをクリックしてみましょう。

図 7 Show!ボタンをクリックしたところ

図 7 Show!ボタンをクリックしたところ


正しく動作し、画面に入力した文字が表示されます。 続いて「http://lesson05.heroku.com/users/」を表示してみましょう。といいたいところですが、こちらはDBを使っているため、表示する前にmigrateを行う必要があります（migrateしない場合、参照するDBがないためInternal Server Errorになる）。下記のコマンドを実行してください（Windowsは、C:\msysgit\msysgit\msys.batを実行してから、下記のコマンドを実行してください。なお、sudoを付ける必要はありません）。 

$ sudo heroku rake db:migrate

正常にテーブルが作成されたところで、「http://lesson05.heroku.com/users/」を開いてみてください。

図 8 http://lesson05.heroku.com/users/を開いたところ

図 8 http://lesson05.heroku.com/users/を開いたところ


そして、新規登録画面を開いて、実際に動作するか確認してみてください。正しく新規ユーザーが登録できると思います。

さて、作成したアプリケーションを改修してリリースする方法ですが、 

git add .
git commit -m “commit messages.”
Git push heroku master

を実行します。以上で、Herokuでのアプリケーション公開に関する説明は終わりです。



おわりに

連載最終回はいかがだったでしょうか。プロジェクトを作成してから、jQueryを使い始めるまでの工程がとても少なく、また、Ajax機能を実現させるための設定が簡単だったことがお分かりいただけたかと思います。今回の連載を機に、Rails+jQueryでAjaxを利用したWebアプリケーションを作成して、Herokuで公開してみてはいかがでしょうか？思いついたアイデアを素早く実現できることが、Ruby on Railsの魅力だと思います。

さて、今回で「Ruby on Railsで簡単で素早くWebアプリを開発する」の巻は終了です。ご購読いただいた読者の皆さま、そして校正とウェブ化を行っていただいた弊社スタッフに感謝したいと思います。次回以降の連載内容は検討中ですが、皆さまが「おもしろい！」と思えるような情報をご提供できればと思います。それではまた！


最終回 おしまい



※.記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。