早うございます。@srockstyleです。
「酒と泪とRubyとRailsと」のモリさんから以下の指令が届きました。
「今度一緒アプリつくるとき、Backbone.jsとSlimの勉強しといてね☆」
さっそくそれが本日なので朝から急いでやってみました。俺俺ブログシステム構築開始です。
仕様設計
作りたいものはブログシステム。そして作りたいものがきまったら準備をします。とにかく最新の技術をつめこみまくりたいので、
- Rails4.1
- Slim（最近Rails界隈であついテンプレートエンジン）
- Turbolink（いつもはオフだけど今回はonにする）
- Backbone.js（いわゆるJSフレームワーク。将来的にAngularがでてきそうだけどいまはこれ）
これにMariaDBとかやってみたかったんですがMySQLとコンフリクトがおきてあきらめました。では始めます。
参考URL
以下を参考にしました。ありがとうです。
基本準備
まずアプリを作成します。rvmの準備ができたら以下を実行。今回はbackjaxっていう名前にしました。
[ruby]
rails new backjax -d mysql
[/ruby]
次にGemfileの設定。必要なものを追記します。
[ruby]
## JSはbackbone.js
gem “rails-backbone”
## テンプレートエンジンにslim
gem “slim”
[/ruby]
bundle installします。
次にbackboneをインストール。
[ruby]
rails g backbone:install
[/ruby]
/app/asset/javascript以下にbackbone系のファイルが作られます。
とりあえずこれで準備終わり。
scaffold
二つ行う必要あるみたいです。
Rails版。
[ruby]
rails g scaffold Post title:string content:string category_id:integer
rake db:migrate
[/ruby]
backbone版。
[ruby]
rails g backbone:scaffold Post title:string content:string category_id:integer
[/ruby]
これで作成終わり。なんかいろいろつくられましたね。そしたらサーバ起動します。
[ruby]
rails s
[/ruby]
さて、いよいよコードをいじります。
erbをslimに置き換える
拡張子がerbからslimになるので、mvします。
[bash]
% mv index.html.erb index.html.slim
% mv show.html.erb show.html.slim
% mv edit.html.erb edit.html.slim
% mv new.html.erb new.html.slim
% mv _form.html.erb _form.html.slim
% mv application.html.erb application.html.slim
[/bash]
次に中身を置き換えていきます。ざっとかいたのはこんな感じ。
layouts/application.html.slim
[ruby]
doctype html
hml
head
title Backjax
= stylesheet_link_tag “application”, media: “all”, “data-turbolinks-track” => true
= javascript_include_tag “application”, “data-turbolinks-track” => true
= csrf_meta_tags
body
= yield
[/ruby]
つづいてposts/index.html.slim
[ruby]
h1 Listing posts
table
thead
tr
th Title
th Content
th Category
th
th
th
tbody
– @posts.each do |post|
tr
td == post.title
td == post.content
td = post.category_id
td = link_to ‘Show’, post
td = link_to ‘Edit’, edit_post_path(post)
td = link_to ‘Destroy’, post, method: :delete, data: { confirm: ‘Are you sure?’ }
br
== link_to ‘New Post’, new_post_path
[/ruby]
基本的にタグは頭のひとつだけです。開いたら閉じるがHTMLの基本でしたがそれがないです。
ビューのなかに変数を展開したりするときは=がHTMLエスケープなし、==がエスケープなしで展開されます。
もしRubyコードをテンプレートに書きたいときは – からはじめるといけるみたいです。
ほかのテンプレートも同じようにslim化していきます。
Backbone.jsを有効にする
index.html.slimを書き換えます。
[ruby]
div id=”posts”
javascript:
$(function() {
window.router = new Backjax.Routers.PostsRouter({posts: #{@posts.to_json.html_safe}});
Backbone.history = Backbone.history || new Backbone.History({});
Backbone.history.start();
});
[/ruby]
ここで注意なのは、JavaScriptの中にRubyの変数展開したいときは「#{}」で囲む必要があること、あとBackbone.history()が開始されているかどうかで処理を変えるひつようがあることぐらいですかね。
ここまでできるとあとはBackboneがRailsからjsonを読み出してよしなにしてくれるので、いらないテンプレートを削除しちゃいます。
[bash]
% git rm -rf new.html.slim
% git rm -rf edit.html.slim
% git rm -rf _form.html.slim
[/bash]
これでhttp://localhost:3000/にアクセス。
みてみるとRailsのscaffoldの画面ですが動作はすべてBackboneぽいですね。
これはいいや。
まとめ
こういった新技術のキャッチアップもエンジニアの使命なので、これはシリーズ化します。
将来的にMoongiftさんとかに取り上げられるくらいの便利なオープンソース作りたいです。
ソースコードはGithubにあげておきました。今後も更新していくのでお楽しみに！