Enter!バッチを起動しようと勢いよくキーを叩いたら、それはシフトキーだった。itmammothTweet前々回のAngularJS、前回のEmber.jsときて、ラストはBackbone.jsを試してみたい。作成するリアルタイム掲示板は今までと同じ仕様。2.1.1セットアップいつも通りGemfileから。Assetsのお世話になる。'spring'endBackbone.jsはjqueryに依存しているので、必ず指定すること。installを叩き込む。newを実行し終わったら、application.jsを編集する。underscoreに依存しているので、上記の順で指定する必要がある。require_treeで指定しているbackbonejsディレクトリ、それからapp/assets/javascripts直下にboard_sample.js.coffeeというファイルを作成しておこう(中身は空で構わない)。何か画面を表示しよう。PagesControllerを生成する。home続いて、ルーティングを設定をしてあげる。'pages#home'endさらには、レイアウトapplication.html.erbも。turbolinksとか削除しておかねばならないし。%></body></html>これでhttp://localhost:3000にアクセスすると、殺風景なページが表示されるはずだ。コンソールでBackbone.VERSIONと入力してみよう。バージョン番号が返ってくれば正しくセットアップできている。投稿を表示する最初のステップとして、既存の投稿を画面に表示することから始めよう。兎にも角にもテーブルとモデルがないと始まらない。db:migrate新規に投稿する機能を作成するまでは、データはdb/seeds.rbであつらえることにする。"非暴力\n非服従\n言葉は要らない")もうちょっとカッコいいデータを投入してみるのも自由だ。db:seedで投入とシャレ込もう。APIにてリクエストを送り、JSONで受け取ることになる。ルーティングを設定する。create)endJSONを返すためにPostsControllerを作成する。endendここまででJSONが取得できるようになっているはずなので、http://localhost:3000/postsにアクセスしてみよう。いい感じにJSONが取得できるようになったので、いよいよBackbone.jsで画面に表示できるようにしていこう。app/assets/javascripts/backbonejs/modelsというディレクトリを作成して、その中にpost.js.coffeeというファイルを作成する。'/posts'とりあえず、最低限の記述を施した。Backbone.Modelのextend関数でBackboneモデルを作成することができる。これはレコード1件に相当する。urlRootで指定しているのはRESTリソースのルートパスである点に注意。平たく言えばindexに相当するURLを指定すればよいということ。Backbone.Collectionはこのモデルを複数レコード抱えるコレクションで、modelオプションでモデルを指定する。Posts().fetch()と叩いてみればよい。データが取得できることが分かるだろう。Webrickのログでも、/postsへのリクエストが来ていることが確認できるはずだ。モデルのお次はビューに進もう。backboneとrailsを組み合わせる上で若干の設定が必要なのでまずはそれから。app/assets/javascripts/backbonejs/setting.js.coffeeファイルを作成する。AngularJS・Ember.jsのときと同様にトークンを送信するロジックを仕込んでおこう。投稿を表示するビューhome.htmlを作成していく。}}</div></script>実際に投稿を表示するのはdiv#postsで、その中にレンダリングするのが#post-templateの中身だ。これが投稿1件に相当する。scriptタグで囲んでいるので、このまま開いてもも画面には何も表示されない。Backbone.Viewを作成する必要がある。@えぇ〜、こんなに記述しないといけないのか・・・と思う方もいるだろう。Backboneが提供してくれるのは本当に骨格部分だけというイメージで、データとDOMのバインド→自動反映なんて気の利いたことは一切してくれない。自力で実装する必要がある。手間がかかるなと思うかもしれないが、ある意味漢らしいといえるかも。暗黙的な規約がないという点ではEmber.jsとは対照的で、処理の流れが可視化されている方が安心という方にはこの方がよいのかもしれない。ソースが少し長いので、部分毎にポイントを説明しておく。PostsViewは投稿の一覧を表示するためのビュー。listenToはイベントリスナーを登録する関数で、’add’というイベントが発生した場合にaddNew関数を呼び出すように設定している。PostsView(...)するときにパラメータで渡す予定のPostモデルの配列だ。addNewで投稿1件に相当するPostViewをnewしている。class="post"...</div>というタグでラップしてほしいので、tagNameclassNameでそれぞれ値を指定している。templateには先程のhome.htmlで記述したテンプレートの中身を取得するようにしている。これも自力で書く必要があるのか・・・。それではいよいよ画面を描画してやろうと思うので、board_sample.js.coffeeにコードを記述しよう。posts)Postsコレクションモデルを生成し、fetch()でREST経由でデータを取得している。その後、一覧ビューを表示するためにコレクションを引数にビューをnewしちゃう。体裁をよくしておこう。}}とりあえず、全投稿を表示することができた。ヘルパーを作成する表示されている投稿日時が人類に優しくない書式なので変更しよう。RailsならI18nとロケールで一撃だが、ここではそうはいかない。日付周りの処理を便利にしてくれるmoment.jsを導入する。board_sample日付の書式を変換するのはPostViewがよいだろう。Rubyで変換するほうが楽だといって、サーバ側でやるのはよろしくない。「データをどう見せるのか」はプレゼン側(=ビュー)の仕事なので。@テンプレートに渡す引数を変更した。いうわけでhtmlも変更する必要がある。}}</div></script>やっとこさ、日付表示が人肌に温まった。投稿できるようにするいよいよ新しい投稿をポストできるようにしよう。投稿フォームを作成する。id="post-template">...なんの変哲もないformだ。こいつ対するBackboneビューを実装しよう。@initForm(post)eventsオプションで、submitとかclickのようなDOMイベントに対する関数を割り当てることができる。submit関数内でPostモデルを生成し、save()でDBに保存する。jqueryで自力で値を取ってくる点がBackboneらしさ(?)。@collectionにaddした時点で以前リスナー登録したPostsView#addNewが走るようになっている。投稿フォームの初期化の際に、Postモデルの初期値を使用するようにしているので、Postモデルを修正しよう。'名無しさん'...defaultsオプションでモデルの初期値を設定することができる。モデルの初期化からバリデートまではクライアント側で行い、Rails側では永続化のみを担当させるのがよさげだ。その永続化のためのPostsControllerに保存ロジックを入れてあげよう。endendさあこれで完成と思いきや、先程作成したAddPostViewを生成する処理が必要だということを思い出した。posts)これで新しい投稿ができるはずだ。未読投稿を自動的に取得する画面を開いているだけで自動的に投稿を追記していくように修正しよう。データ取得はポーリング方式で行うので、Postsコレクションに処理を追加することにする。@interval)fetch()を定期的に呼び出すようにしている。@)としているのは、普通にsetTimeoutを呼び出すとトップレベルコンテキストで関数が呼び出されてしまうため。投稿した場合も未読分を取得しておかなければならない。自分が投稿文を書いている間に、他の誰かが投稿しているかもしれないので。いうわけで、AddNewPostを修正する。@initForm(post)@collection.fetch()の結果はPromiseなので、取得が完了してから自分の投稿を保存、追記するようにする。最後に、ポーリングを開始するのはもちろんboard_sample.js.coffeeだ。posts)5秒毎にデータを取得するようにした。ブラウザを2つ開いて互いに投稿してみよう。自動的に投稿が反映されるはずだ。アニメーションさせるアニメーションというほど派手なことはしないが、投稿が追加されたことを知らせる最低限のハイライトを実装しよう。UIを使用するので、Gemfileを修正しよう。'rails-assets-jquery.ui'もちろんapplication.jsも修正する。jqueryより後ろに宣言すること。underscore...アニメーションをさせるのは、投稿ビューを追加するとき。PostsView#addNewが相応しい。500)...ブラウザをリロードして、最終確認しよう。Underscore.jsの知識必須AngularJSやEmber.jsに慣れている人にとっては「Backbone.js何にもしてくれね〜」って思うかもしれないが、その名の通り『背骨』なのでそれはそれで正しいのかもしれない。軽量な骨格を求めているならば、ベストチョイスなのかも。Backbone.jsと試してきたが、個人でWebサービスを作るという観点から見ると、バランス、そして情報量の多さからいって、やはりAngularJSが無難なチョイスだと思った。Ember.jsはちょっと大げさな気がするし、暗黙的な決まりが多いのがちょっと。Backbone.jsはシンプルだし依存関係も少ないので結構気に入ったけど、やはり自分で色々と実装するのが面倒か。返信をキャンセルメールアドレスが公開されることはありません。名前*メール*サイト上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。検索:プロフィールitmammothIT界のマンモスを目指しているフリーエンジニアです。麻婆豆腐/Ruby/Kotlin/麻婆春雨/Python好きです。最近カリフラワーも好きになりました。