apex:remoteObjectsはSpring'14のバージョンでパイロットリリースされたapex:タグです。これを使うとAPI制限を気にせずにJavaScript内からSalesforceのオブジェクトにアクセスすることができます。

remoteObjectsの宣言方法

取引先オブジェクトにアクセスしたい場合は次のように宣言します。これで取引先のName,Id,Phoneの項目に対してアクセスできます。

<apex:remoteObjects >
  <apex:remoteObjectModel name="Account" jsShorthand="Warehouse" fields="Name,Id">
    <apex:remoteObjectField name="Phone" jsShorthand="Phone"/>
  </apex:remoteObjectModel>
</apex:remoteObjects>

上のようにremoteObjectsを使う場合は次の3つのタグを宣言します。

apex:remoteObjects
apex:remoteObjectModel
apex:remoteObjectField

jsShorthandについて

jsShorthandとは本来の名称の代わりに使用できる別名を指定するためのものです。『apex:remoteObjectModel』と『apex:remoteObjectField』に対して用意されています。

★使用例

apex:remoteObjectModel name="Account" jsShorthand="Warehouse"

次のような感じでAccountのremoteObjectModelにアクセスできるようになります。

var wh = new SObjectModel.Warehouse();

『remoteObjectModelのfields』と『remoteObjectField』

この２つは両方ともremoteObjectでアクセスできる項目を指定するためのものです。
例えば次の書き方でどちらもPhoneの項目にアクセスすることができました。

apex

<apex:remoteObjects >
  <apex:remoteObjectModel name="Account" jsShorthand="Warehouse" fields="Name,Id">
    <apex:remoteObjectField name="Phone" jsShorthand="Phone"/>
  </apex:remoteObjectModel>
</apex:remoteObjects>

apex

<apex:remoteObjects >
  <apex:remoteObjectModel name="Account" jsShorthand="Warehouse" fields="Name,Id,Phone" />
</apex:remoteObjects>

remoteObjectFieldを使うとjsShorthandで別名をつけたり、renderedで有効/無効を切り替えたりできるので基本はremoteObjectFieldでコンポーネント化してあげるのがいいと思います。apex:remoteObjectタグの使い方はだいたいこんな感じです。

JavaScript側の処理の例

JavaScript側の処理の例です。

<script>
fetchWarehouses = function(){
  // Create a new Remote Object
  var wh = new SObjectModel.Warehouse();

  // Use the Remote Object to query for 10 warehouse records
  wh.retrieve({
    where: { Id: { eq: id } } }, function(err, records){
      if(err) alert(err.message);
      else {
        var ul = document.getElementById("warehousesList");

      records.forEach(function(record) {
        // Build the text for a warehouse line item
        var whText = record.get("Name");
        whText += " -- ";
        whText += record.get("Phone");

        // Add the line item to the warehouses list
        var li = document.createElement("li");
        li.appendChild(document.createTextNode(whText));
        ul.appendChild(li);
      });
    }
  });
};
</script>

Remote Objectのモデル情報を取得

// Create a new Remote Object
var wh = new SObjectModel.Warehouse();

クエリの実行

wh.retrieve({}, function(err, records){
   // クエリ実行後の処理
}

LIMITの指定

wh.retrieve({ limit: 10 }, function(err, records){
   // クエリ実行後の処理
}

WHEREの指定

wh.retrieve({
  limit : 10,
  where : {
    Name :{
      eq : 'GenePoint'
    }
  }
}, function(err, records){
    // クエリ実行後の処理
}

eqでイコールという意味です。

ループ処理

records.forEach(function(record) {
  // ループ内の処理
}

JavaScript側の処理例はこんな感じです。コードの全体はGistにアップしてあります。今回のコードはRelease Notesのサンプルを元につくってあります。

Gist
https://gist.github.com/tyoshikawa1106/bb05a7c9da5cff5dd5fd

参考

Visualforce Remote Objects—Developer Preview
http://docs.releasenotes.salesforce.com/en-us/api/release-notes/rn_vf_remote_objects.htm

Visualforce Remote Objects
http://www.shivasoft.in/blog/salesforce/visualforce/introduction-to-visualforce-remote-objects/

apex:remoteObjects
http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_remoteObjects.htm

apex:remoteObjectModel
http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_remoteObjectModel.htm

apex:remoteObjectField
http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_remoteObjectField.htm

apex:remoteObjectsの使い方