rails javascript/jqueryの実装 メソッドその2

jbuilder:array! メソッド

JSON形式で配列の形式で返したい場合はarray!を使用します。

jbuilderという拡張子を持つテンプレートでは
JSONという名前のJbuilderオブジェクトが自動的に利用できるようになります。

Jbuilderオブジェクトは、JSON形式に返すための便利なメソッドがたくさん用意されており
jbuilder:array!もその一つです。

app/views/comments/sample.json.jbuilder

json.array! @comments do |comment|
  json.id comment.id
  json.text comment.text
  json.image comment.image
  json.user_id comment.user_id
  json.nickname comment.user.nickname
  json.user_sign_in current_user
end

empty メソッド

指定したDOM要素の子要素のみを削除するメソッドです。
指定したDOM要素自体を削除するremoveメソッドとは異なるので注意してください。

$(".contents.row").empty();

forEach メソッド

forEachは、与えられた関数を配列に含まれる各要素に対して一度ずつ呼び出します。

animateメソッド

animateメソッドは、メソッドを利用したオブジェクト(レシーバ)が持つプロパティなどを
指定した値まで徐々に変化させることができるメソッドです。

横100pxのdiv要素を用意し、200pxまで有効にすると下記のようになります。

$('.yoko').animate({'height' : '200px'});

カスタムデータ属性

カスタムデータ属性とは、HTMLタグの属性の１種です。

カスタムデータ属性を使うときは、属性名を「data-」で始まる名称にします。

jQueryでは、取得したDOMに対しdataというメソッドを利用することで、カスタムデータ属性の値を取得可能です。

htmlの例

<p class="sample">  <!--classが属性にあたります-->

<p class="sample" data-comment=100> <!--data-commentがカスタムデータ属性になります-->

     <script>
       var blog = $("#blog");
 //jQueryでカスタムデータ属性の値を取得
       alert("author : " + blog.data('comment'));
     </script>

WebAPIとは

前提として
APIは、Application Programming Interfaceの略称で
アプリケーション開発者が外部に向けてアプリケーションの機能の一部を公開する仕組みです。

WebAPIは、HTTPやHTTPS通信を通じて利用するAPIのことです。

名前空間(namespace)

名前空間をつけることにより、同様のクラス名で名付けたクラスを作ってもそれらを区別することができます。
controllers/messages_controller.rbと
controllers/api/messages_controller.rbのようにディレクトリで分けるなど

下記だとAip::でapiディレクトリないを指定しています。

controller

class Api::MessagesController < ApplicationController # ::でディレクトリを指定します。
  def index
  end
end

名前空間(namespace) のルーティング

namespace :ディレクトリ名 do ~ end

Rails.application.routes.draw do
  devise_for :users
  root 'groups#index'
  resources :users, only: [:index]

#下記のように指定する
    namespace :api do
      resources :messages, only: :index, defaults: { format: 'json' }
    end
  end
end

setInterval()関数

jQueryに置いて一定時間が経過するごとに処理を実行することができる関数です。

第一引数に動かしたい関数名を、第二引数に動かす間隔をミリ秒単位で渡すことができます。
※引数で渡している7000という数字は、7秒という意味になります。500にすると、0.5秒です。
こちらを小さくしすぎると、更新の際に二重でメッセージが表示されてしまう場合があるため
7000に設定してください。

$(function() {
//途中省略
//$(function(){});の閉じタグの直上(処理の最後)に以下のように追記
  setInterval(reload, 7000);
});