We Ain't Seen Nothin' Yet. : [Rails meets jQuery] jQuery の AJAX(JSONP) を使ってRailsの404ページを和ませる方法

[Rails meets jQuery] jQuery の AJAX(JSONP) を使ってRailsの404ページを和ませる方法

書いた人: noriaki 2007,10月03日(水) 19:00

「今、何をしているの?」でつながるTwitterの500（Internal Server Error）ページには，かわいらしいねこが出現してイライラするユーザを和ませてくれます．

今日は，2行追加するだけで，Railsのデフォルト404(Page Not Found)ページと500ページにねこの和みを提供する方法をご紹介します．これでサービスダウンやページのリンク切れも怖くなくなります（もちろんこれらは無いにこしたことはありません）．

以下では，jQuery 1.2から追加されたJSONPを利用したAJAX機能の使い方と，上記のねこ機能をRailsに追加する方法について説明します．

興味はあるけど今は時間がないという方は，はてなブックマークしたり，del.icuo.usに追加しておくといいんじゃないでしょうか．

jQuery の JSONP を利用した AJAX通信

Bob Ippolito recently proposed “JSONP” as a standard for grabbing JSON from external domains. It’s about a cleaner way to get data objects (and other things) from the external domain.
Ajaxian ? JSONP: JSON With Padding

JSONPとは，簡単に言えば外部ドメインに対してJavaScriptでアクセスする方法です． JavaScriptはドメインを超えて通信を行うことができないため，このような方法が考え出されました．

jQueryでは，バージョン1.2から（現在の最新版は1.2.1）JSONPを利用したAJAX通信を行うことができるようになりました．

使い方は今までのAJAX通信の方法と同じで，以下のようにdataTypeオプションに'jsonp'を指定します．

$.ajax({
  url: 'http://www.yoshimeux.com/pj/PostalJsonp.ashx',
  dataType: 'jsonp',
  data: {PostalCode: '1638001'},
  success: function(data){ alert(data.postalStruct.addr_name); }
});

ちなみに，上記で通信しているWebAPIはJavaScriptで検索できる「郵便番号検索JSONP」です．

AJAX通信時のオプションにdataType: 'jsonp'を指定すると，jQueryが変数"callback=#{successに指定した関数}"をdataオプションに自動的に追加します．このとき，通信先のWebAPIがcallback関数を別の変数名で受け取る場合はdataオプションに直接指定してください．

jQuery の JSONP で Cat on Rails

さて，皆さんお待ちかねのねこの時間です．

Railsアプリケーションをproductionモードで動かすと表示される404ページや500ページは，デフォルトのままでは文字ばかりでちょっと味気ないです．

そこで，上記のjQueryのJSONPを利用したAJAX通信を利用してFlickrから和みねこ画像を探してきて表示するJavaScriptを書いてみました．

ダウンロードと使い方

ダウンロードは以下のリンクを右クリックして保存してください．

cat_on_rails.js

このスクリプトファイルをjquery.jsと共に，#{RAILS_ROOT}/javascripts/などに置き， #{RAILS_ROOT}/public/(404|500).htmlのヘッダ部分に以下の2行を追加するだけでねこが登場します．

<script src="/javascripts/jquery.js" type="text/javascript"></script>
<script src="/javascripts/cat_on_rails.js" type="text/javascript"></script>

ちなみに，1時間ごと（毎時0分）に写真は変わるようになっています．

サンプルページ

導入してみた404ページは以下のリンク（というより「Gigazinize Tools - Image」上の存在しないURLならなんでも）

Rails meets Kittens

ちょっと技術的な解説

cat_on_rails.jsでJSONPを利用したAJAX通信を呼び出している部分は以下のとおりです．

$(function() {
  $.ajax({
    data: {
      // API key はご自身のものを利用してください
      api_key: '4c3c6d6ff60a36824c9d3d8962cadc9e',
      method: 'flickr.photos.search',
      license: '1,2,3,4,5,6',
      sort: 'interestingness-desc',
      privacy_filter: '1',
      extras: 'license,owner_name',
      format: 'json',
      text: 'cute kittens',
      jsoncallback: 'catOnRails'
    },
    dataType: 'jsonp',
    url: 'http://api.flickr.com/services/rest/'
  });
});

上記では，FlickrのWebAPIに対して通信を行っていますが，FlickrのCallback関数の指定パラメータはjsoncallbackという名前なので，dataオプションにCallback関数名を追加しています．

あとは，100行ちょっとのスクリプトなので直接ソースを見てください．