Ruby on RailsのRJSでかんたんAjax開発（前編）
〜パターンとライブラリで作るAjaxおいしいレシピ（出前編）〜

かんたんAjax開発をするための
Ruby on Railsの基礎知識

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

2008/8/25

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

- PR -

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

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

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

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

関連記事：
リンク 楽天が「Ruby on Railsの利用を開始します」
http://www.atmarkit.co.jp/news/200703/15/rakuten.html
リンク タイムラインで管理する情報共有サービス、ニフティがRubyで開発
http://www.atmarkit.co.jp/news/200702/28/nifty.html
リンク カカクコム、Ruby on Railsで国内最大規模のサイト刷新
http://www.itmedia.co.jp/enterprise/articles/0710/22/news061.html

　今回は連載「パターンとライブラリで作る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/4

Index
かんたんAjax開発をするためのRuby on Railsの基礎知識
Page1
いまさら聞けないRuby on Railsとは？
コラム　「Rubyを使う予定はない」という方へ
Railsを使ったアプリケーション開発の基本的な手順
RubyとRailsのインストール
開発用ディレクトリの作成
  Page2
scaffoldでひな型ソースコードを自動生成
  Page3
scaffoldからRailsの組み方を学ぶ
  Page4
scaffoldで生成されたひな型を修正
細かく規定された開発手法で非常に高い生産性

Ruby on RailsのRJSでかんたんAjax開発
　Ruby／Rails関連記事
プログラミングは人生だ
まつもと ゆきひろのコーディング天国　ときにプログラミングはスポーツであり、ときにプログラミングは創造である。楽しいプログラミングは人生をより実りあるものにしてくれる
生産性を向上させるRuby向け統合開発環境カタログ
Ruby on Rails 2.0も強力サポート　生産性が高いと評判のプログラミング言語「Ruby」。統合開発環境を整えることで、さらに効率的なプログラミングが可能になる
かんたんAjax開発をするためのRailsの基礎知識
Ruby on RailsのRJSでかんたんAjax開発（前編）　実はAjaxアプリケーション開発はあなたが思うよりも簡単です。まずはRuby on Railsの基礎知識から学びましょう
Praggerとnetpbmで作る画像→AA変換ツール
Rubyを使って何か面白いものを作ってみよう！　一般的な画像をアスキーアートに変換するツールを作ってみる。さらに出力にバリエーションを持たせてみよう
コードリーディングを始めよう
Railsコードリーディング〜scaffoldのその先へ〜（1）　優れたプログラマはコードを書くのと同じくらい、読みこなす。優れたコードを読むことで自身のスキルも上達するのだ
　　Coding Edgeフォーラムフィード　 2.0／1.0／0.91

TechTargetジャパン

Coding Edge フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH