検索
連載

かんたんAjax開発をするためのRuby on Railsの基礎知識：Ruby on RailsのRJSでかんたんAjax開発（前編）（1/4 ページ）

[志田裕樹，株式会社アークウェブ] PC用表示 関連情報
Share
Tweet
LINE
Hatena

いまさら聞けない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のデモアプリケーションが吐き出す結果を、ページキャッシュでスタティックに保存し、パス情報などを一部修正したものです。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　今回は、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

Copyright © ITmedia, Inc. All Rights Reserved.

　　　　　　 | 次のページへ
ページトップに戻る