連載
» 2008年08月25日 00時00分 公開

Ruby on RailsのRJSでかんたんAjax開発(前編):かんたんAjax開発をするためのRuby on Railsの基礎知識 (1/4)

[志田裕樹,株式会社アークウェブ]

いまさら聞けないRuby on Railsとは?

 Ruby on Rails(以降、Rails)は、世の中に多数存在する現在のWebアプリケーション開発フレームワークに多大な影響を与えている、先進的で生産性の高いフレームワークです。

 以下をコンセプトとして掲げており、Ruby言語で記述されています。

  • 「同じことを繰り返さない」(DRY:Don't Repeat Yourself)
  • 「設定よりも規約」(CoC:Convention over Configuration)

 ここ数年で、楽天市場、ニフティ、カカクコムなど大手IT企業での採用も進んでおり、注目を集めています。

関連記事:


 今回は連載「パターンとライブラリで作るAjaxおいしいレシピ」の番外編ということで、Railsを使ったAjaxアプリケーションの開発について紹介します。まだRailsを使ったことがない方でも大枠の理解ができるように、以下の2回の記事に分けてお送りします。

  • 前編:Railsそのものの解説(Ruby言語の解説も必要に応じてしています)
  • 後編:Railsが提供するRJSを使用したAjaxの開発の仕方(近日公開予定)

 前編、後編を通して、RJSを利用すれば、ほんの数行のRubyコード(JavaScriptコードではない!)を書くだけで、非常に簡単にアプリケーションをAjax対応できることを解説していきます。

 すでにRailsを使ったことがある方でも、新バージョンの2.1.0を使った解説になりますので、おさらいも兼ねて読んでみてください。

まずは、サンプルを見てみよう

 前置きが長くなりましたが、今回のサンプルを見ていきましょう。このアプリケーションは今回作成するRailsのデモアプリケーションが吐き出す結果を、ページキャッシュでスタティックに保存し、パス情報などを一部修正したものです。

今回のサンプルプログラム(拡大表示はこちらWebブラウザの仕様の変更などによりアプリケーションが動作しなくなる場合もありますが、あらかじめご了承ください。また、サンプルのライセンスはGPL 2となります

 今回は、ECサイトによく見られるカテゴリ情報詳細ページをサンプルにしました。カテゴリ情報詳細ページでは、以下の3つが表示されます。

  • カテゴリ名
  • カテゴリ説明文
  • そのカテゴリ内の商品

 ほかのカテゴリを選ぶと、Ajaxを使って画面遷移をすることなくタブが切り替わり、別のカテゴリの情報が表示されます。切り替え時にカテゴリ名などはAppearエフェクトを使用し、カテゴリ内商品はBlindDownエフェクトを使用します。

 また拡大表示の方は、JavaScriptオフ時でも無理やり画面遷移をさせて、JavaScriptオン時と同等の情報が見られるようにしています。連載「パターンとライブラリで作るAjaxおいしいレシピ」の第6回「Aptana Jaxerで解決するAjaxのSEO対策とは?」で紹介したSWFAddressを使用し、ディープリンクに対応しています。

 このようにRJSを利用すれば、ページ内の多数の個所が更新されるケースでもサーバとの通信を1回だけですませます。また、これを実現するために記述したRubyコードは20行弱です。(今回のサンプルでは多少凝ったことをやっていますので、さらにJavaScriptコードを20行ほど記述しています)。

コラム 「Rubyを使う予定はない」という方へ

そもそも自分の会社はRubyを採用していないので、Rubyを使う予定がない、という方も実際には多いかもしれません。


ですが、最近ではRailsの影響を強く受けたPHP用フレームワーク「CakePHP」や「Symfony」も利用されるケースが非常に増えています。下記はいくつかのPHPフレームワークのGoogle Trendsでの比較です(参考:CakePHP, Symfony, Zend Framework, Ethna, MojaviのGoogle Trendsでの比較)。


このように、RailsはPHPのフレームワークにも強く影響を与えています。また、CakePHPにはRJSと似たような機能を提供する「Cajax」があります(参考:CakeForge: Snippet Library)。また、SymfonyのJavaScriptヘルパーもRailsのAjaxサポートの一部を実現しています。


RailsやRJSを理解していればCakePHP+CajaxやSymfonyの習得もしやすくなりますので、Rubyは使う予定がない、という方もぜひ読んでみてください。


Ajaxのデータ形式3パターンとRJSの関係

 Ajaxには、サーバから受け取るデータ形式に応じて次の3パターンがあるといわれています。

  1. サーバからHTMLコードを受け取る(クライアント側のJavaScriptは、受け取ったHTMLコードをそのままDOMに反映させる)
  2. サーバからXMLやJSONを受け取る(クライアント側のJavaScriptは、データ情報のみを受け取り、自力でHTMLマークアップを構築し、DOMに反映させる。)
  3. サーバからJavaScriptコードを受け取る(クライアント側のJavaScriptは、受け取ったJavaScriptコードをeval()関数で実行する)

 RJSは、上記3のパターンの方式です。Railsは、クライアントに実行させたいJavaScriptをRubyのプログラムで生成します。これによりサーバサイド(Ruby)からクライアントの画面を更新する感覚で実装ができます。

Railsを使ったアプリケーション開発の基本的な手順

 以降ではRails流のアプリケーション開発の仕方を解説していきます。Railsでは、開発手法が細かく規定されており、それに沿うことで開発スピード、保守性、拡張性を高めることができます。このため、開発の仕方を覚えるのは少し大変ですが、以下、順を追って丁寧に説明していきたいと思います。

 また、RailsはLinuxだけでなくWindowsやMac OS X上にも構築が可能です。以下は、Linux上にインストールする場合の手順です(下記リストはインデックスになっています)。

  1. RubyとRailsのインストール
  2. 開発用ディレクトリの作成
  3. scaffoldでひな型ソースコードを自動生成
  4. scaffoldからRailsの組み方を学ぶ
  5. scaffoldで生成されたひな型を修正

RubyとRailsのインストール

 Ruby on Railsのサイトの「Get Started」に沿ってRailsをインストールします。

1. Rubyのインストール(バージョンは1.8.2、1.8.4、1.8.5、1.8.6のいずれか)

 Rubyのオフィシャルサイトのインストールガイドを参考にインストールしてください。

2. RubyGems 1.2.0のインストール

 RailsはRubyのパッケージ管理システム「RubyGems」の形式で配布されているので、RubyGemsをインストールする必要があります(PerlのCPAN、PHPのPearのような仕組みです)。

 RubyGemsがまだインストールされていなければ、「http://rubyforge.org/frs/?group_id=126からrubygems-1.2.0.tgz」をダウンロードして次のようなコマンドを実行します(参考)。

$ tar xzf rubygems-1.2.0.tgz
$ cd rubygems-1.2.0
$ sudo ruby setup.rb

3. Rails 2.1.0のインストール

 RubyGemsを使ってRailsをインストールします。今回のサンプルは執筆時点(2008年8月現在)で最新版となる2.1.0を使用します。

$ sudo gem install rails -v 2.1.0

4. SQLite 3、sqlite3-rubyのインストール

 Rails 2.1.0で作成したアプリケーションは、初期状態ではSQLiteを使って動作します。SQLiteそのもののインストールはこちらを参考にしてください。Rubyからツールsqliteが利用できるように、RubyGemsを使って「sqllite3-ruby」をインストールします。

$ sudo gem install sqlite3-ruby

5. rakeのインストール

 rakeは、GNUのmakeのRuby版といったツールです。「Rakefile」と呼ばれるファイル内にあらかじめタスクを定義しておき、それを実行するための仕組みです。Railsは開発時によく利用する作業をあらかじめrakeタスクとして定義しています。rakeもRubyGemsを使ってインストールします。

$ sudo gem install rake

開発用ディレクトリの作成

 Railsのインストールが完了すると、「rails」コマンドが使えるようになっているはずです。次のようにして、アプリケーションの開発用ディレクトリを作成します。

$ rails rjs_tutorial

 このコマンドを実行すると、rjs_tutorialというディレクトリが作成され、その中に開発に必要なファイル郡が生成されます(railsコマンドの利用方法は「rails -h」で確認できます)。

create
 create app/controllers
 create app/helpers
 create app/models
 
…【略】…

 この開発ディレクトリ内で、ファイルを追加したり修正したりすることでアプリケーションを開発していきます。作成した開発環境の初期状態をまずWebブラウザで表示してみましょう。

$ cd rjs_tutorial
$ script/server

 この「script/server」は、この開発環境のRailsアプリケーションを表示するためのWebサーバを立ち上げるコマンドです。デフォルトでWebサーバは3000番ポートに立ち上がります(「-p」オプションでポート番号は変更可能です。script/serverの利用方法は「./script/server -h」で確認できます)。

 サーバが立ち上がったら、以下のURLを入力し、Webブラウザで確認してみましょう。

http://【Railsをインストールしたマシンのアドレス】:3000
       1|2|3|4 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。