Webアプリつくってみよう 3日目 / 全5回
こんにちは、Gaji-Labo エンジニアの山崎です。
この記事は Gaji-Labo AdventCalendar 2015 12日目の記事です。
前回はAPIの実装をご紹介しました。
今回はUI側の実装を進めていくのですが、前提としてAPIは未実装という設定です。
URLパラメータ、JSON形式は予め決まっていますのでそれに沿った実装を行います。
Rails + Backbone で動かそう
まずはライブラリなどを gem 経由でインストールしましょう。
今回使用するライブラリは、
- CoffeeScript
- jQuery
- Underscore
- Backbone
の4つです。
Gemfile に以下を追記します。
source 'https://rails-assets.org'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'rails-assets-underscore'
gem 'rails-assets-backbone'
次に、app/assets/javascripts/application.js に以下を追記します。
//= require jquery
//= require underscore
//= require backbone
//= require_tree .
underscore は backbone の前提なので気をつけましょう。
あとは、JSを読み込むだけですね。
app/views/layouts/application.html.erb に以下を追記します。
閉じbodyの上あたりが良いと思います。
<%= javascript_include_tag="" 'application'="" %="">
さあ後はJavaScriptを組み込んでいくだけです。
Viewの実装
本来であればModelも実装してViewと結合ということも考えられるのですが、
今回は大きな処理は無いので（Backboneである必要も無いですが）割愛します。
app/assets/javascripts/postcode.js.coffee に View の処理を記述していきます。
$ ->
view = Backbone.View.extend
el: 'body'
events:
"click .submit": "onSubmit"
onSubmit: ->
postcode = $("#postcode").val()
if postcode.length > 0
$.getJSON "/search/#{postcode}", (data) ->
if data.message
$(".address").html data.message
else
$(".address").html """
#{data.prefecture}
#{data.city}
#{data.address}
"""
new view()
はい、APIが無いので動かないですね（白目）
jquery-mockjaxの出番
jquery-mockjax は jQuery.ajax の振る舞いをモックに差し替えるプラグインです。
登録したURLへのajax通信はすべてmockjaxの方へ流れてきますので検証が楽ちんですね。
まずはインストールします。
Gemfileに以下を追記し、
gem 'rails-assets-jquery-mockjax'
$ bundle insatll
を実行します。
次に、app/assets/javascripts/application.js へ
//= require jquery-mockjax
を追記します。
これでmockjaxを使う準備が整いました。
app/assets/javascripts/mockjax.js.coffee というファイルを作成しましょう。
$.mockjax
url: "/search/*"
response: (settings) ->
postcode = _.last settings.url.split("/")
if /d/.test(postcode)
this.responseText = {
"prefecture": "東京都"
"city": "渋谷区"
"address": "千駄ヶ谷"
}
else
this.responseText = { "message": "not found."}
検索クエリに数字が含まれる場合のみ正常にレスポンスを行い、
文字列のみの場合などはエラーメッセージを返すように設定しました。
この状態で操作してみると、ちゃんとajax通信がモックの方へ来ていることが確認できます。
3日目まとめ
主に jquery-mockjax の記事になってしまいましたが、
便利なプラグインなのでオススメです。
タイムアウトやランタイムエラー時の振る舞いも設定できますので、
APIと連携するUIを実装する場合は是非導入してみてください。
次回はAPIとの結合、仕様変更の対応をご紹介します。
関連リンク
