nkjmkzk.net

powered by Kazuki Nakajima

AngularJSではじめるHTML5開発 – Part2 データベースにアクセスする

Part1の続きです。

今回はForce.comのデータベースからデータを取得します。

まず今回開発する部分をデモでみてみましょう。

デモ

なんだか意味がわからないですね。でも大丈夫です。
それでは実装へ。

オブジェクト(テーブル)を作成する

Force.comではテーブルのことを「オブジェクト」と呼んでいます。オブジェクト作成はスキーマビルダーというGUIツールで猫でもおこなうことができるようになっています。

Developer Editionで左のサイドバーから「スキーマビルダー」をクリックします。

click_schema_builder

スキーマビルダーが起動しました。

次に左のサイドバーから「要素」タブを選択し、「オブジェクト」を右のキャンバスエリアにドラッグ&ドロップします。

drag_obj_to_canvas

新しいオブジェクトの情報を入力するダイアログが表示されます。今回は汎用的な人の情報を入力するための「ゲスト」というオブジェクトを作成してみます。

下記の通りに入力して保存をクリックします。その他の項目はデフォルトで構いません。

  • 表示ラベル => ゲスト *UIに表示されるオブジェクトのラベル
  • オブジェクト名 => guest *プログラムでアクセスするときに指定するオブジェクト名
  • レコード名 => ゲスト名 *最初に自動作成される項目(フィールド)のラベル
  • データ型 => テキスト *最初に自動作成される項目のデータ型

new_obj

Force.comでオブジェクトや項目を作成する際、ほとんどのケースで「ラベル」と「名」をセットで指定します。ラベルはUIに表示される文字列で、名はプログラムからアクセスする際の正式名称になります。

これでオブジェクトが作成されました。

guest_created

ちなみに「ゲスト名」に加えて「最終更新者」「作成者」「所有者」という項目が自動で作成されていることがわかりますが、これらはシステム側でメンテされますので現時点では意識する必要はありません。

さて、オブジェクトはこれで作成は完了です。

RemoteTKをインストールする

先ほど作成したオブジェクトにJavascriptから簡単にアクセスするためのツールキット:RemoteTKがあります。これをインストールしましょう。下記のURLをクリックすると、Develoepr EditionにRemoteTKをインストールすることができます。

https://login.salesforce.com/packaging/installPackage.apexp?p0=04td0000000IgBb

*RemoteTKはForce.com Javascript REST Toolkitに含まれるライブラリです。

「次へ」をクリックします。

install RemoteTK

下記の通りインストールを進めます。

  • ステップ1.パッケージAPIアクセスの承認  => そのまま「次へ」をクリック。
  • ステップ2.セキュリティレベルの選択 => そのまま「次へ」をクリック。
  • ステップ3.パッケージのインストール => 「インストール」をクリック。

インストールが下図のように完了します。

RemoteTK installed

AngularJSからデータベースに問い合わせをおこなう

今のところゲストオブジェクトにはデータが全くはいっていないので2つほどレコードを作成しておきましょう。

開発者コンソールを開きます。

click_dev_console

メニューからDebug > Open Execute Anonymous Windowをクリックします。

open execute anonymous

このExecute Anonymous Windowでは任意のApexコードを実行することができます。ApexコードとはForce.com独自のプログラム言語ですが、Javaに酷似した記法を採用していますのでJavaが読み書きできる人はあまり違和感ないと思います。

いずれにせよ、今は深く知る必要はありません。下記のコードをコピペしてExecuteボタンをクリックしてください。

insert new guest__c(name = 'Naoki Hanzawa');
insert new guest__c(name = 'Shunichi Kurosaki');

execute insert

よっしゃー、データを取得するJavascriptを書いていきましょう。前回作成したVisualforceページ、indexを編集します。

開発者コンソールのメニューからFile > Openをクリックします。

file_open

Pages > indexを選択しOpenボタンをクリックします。

open_index

まず、RemoteTKを読み込みます。

<apex:page showHeader="false" standardStyleSheets="false" applyBodyTag="false" applyHtmlTag="false" docType="html-5.0" >
  
<html ng-app="ngbootcamp">
<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"></script>
  <c:RemoteTK />
  <script>
    var ngbootcamp = angular.module('ngbootcamp', []);
     
    ngbootcamp.controller('guestCtl', function($scope){
      $scope.guestName = 'Kazuki Nakajima';
    });
  </script>
</head>
<body ng-controller="guestCtl">
  <input type="text" ng-model="guestName" />
  <h1>{{guestName}}</h1>
</body>
</html>
  
</apex:page>

<c:RemoteTK />はVisualforceのマークアップで、実質的にはツールキットに含まれるJavascriptライブラリがこの場所に挿入されることになります。これによって以後のコードでライブラリが利用できるようになります。

次にJavascriptでデータベースに問い合わせをおこなうコードを追記します。

<apex:page showHeader="false" standardStyleSheets="false" applyBodyTag="false" applyHtmlTag="false" docType="html-5.0" >

<html ng-app="ngbootcamp">
<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"></script>
  <c:RemoteTK />
  <script>
  var ngbootcamp = angular.module("ngbootcamp", []);

  ngbootcamp.controller("guestCtl", function($scope){
    var force = new remotetk.Client();
    var soql = "select Id, Name from guest__c";
    force.query(
      soql,
      function(result){
        $scope.guests = result.records;
        $scope.$apply();
      },
      function(result){
        console.log(result);
      }
    );
  });
  </script>
</head>
<body ng-controller="guestCtl">
</body>
</html>

</apex:page>

 
ひとつずつみていきましょう。
 

var force = new remotetk.Client();

RemoteTKライブラリのインスタンスを初期化してforceにセットしています。
 

var soql = "select Id, Name from guest__c";

これはデータベースに問い合わせするクエリです。Force.comデータベースではSQL構文に類似の「SOQL」という構文を用います。
とはいってもこのような基本的な問い合わせはSQLとまったく同じです。

問い合わせ対象オブジェクトにguest__cを指定しています。Part1でゲストオブジェクトを作成した際、「guest」というオブジェクト名を設定しました。気になるのは語尾についている「__c」ですよね。

これは開発者が作ったオブジェクトに自動的に付与される接尾辞です。Force.comにはシステムに元々存在するオブジェクトがあり、これらは標準オブジェクトと呼ばれます。逆に、開発者が作成したオブジェクトはカスタムオブジェクトと呼ばれ、オブジェクト名の語尾に「__c」が自動的に追加されます。

なお、これはオブジェクトに限らず、項目(フィールド)についても同様です。今現在ゲストオブジェクトに存在している項目はすべてシステムが自動生成したものなので「__c」は付いていませんが、これ以後に開発者が項目を追加したらその項目には「__c」が付加されます。*ちなみに項目に指定しているIdはすべてのレコードに対して自動的に生成される一意な識別子です。
 

    force.query(
      soql,
      function(result){
        $scope.guests = result.records;
        $scope.$apply();
      },
      function(result){
        console.log(result);
      }
    );

RemoteTKライブラリに備わっているメソッド、query()を実行しています。これは任意のSOQLクエリを発行するためのメソッドです。

第一引数はクエリです。先にセットしておいたsoqlを渡しています。

第二引数はquery()が成功したときのコールバック関数です。
resultにはクエリの結果はセットされて返ってきます。この結果の詳細はconsole.log()などでみてみるとわかりますが、result.recordsにレコードのリストがセットされています。それを$scope.guestsに保存し、AngularJSフレームワークで利用できるようにしています。

次に実行されている$scope.$apply()は、Ajaxリクエスト等で取得したデータをAngularJSのデータモデルに反映するために必要な処理です。少し難しいですね。
現時点では、RemoteTKでデータを取得したら$scope.$apply()を呼ぶ、と覚えておけばよいと思います。

第三引数はquery()が失敗したときのコールバック関数です。
エラー情報がresultに入っているので単純にそれをconsole.logで吐き出しています。
最後に、取得したデータをHTML上に表示します。
 

<apex:page showHeader="false" standardStyleSheets="false" applyBodyTag="false" applyHtmlTag="false" docType="html-5.0" >
 
<html ng-app="ngbootcamp">
<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"></script>
  <c:RemoteTK />
  <script>
  var ngbootcamp = angular.module('ngbootcamp', []);
  
  ngbootcamp.controller('guestCtl', function($scope){
    var force = new remotetk.Client();
    var soql = "select Id, Name from guest__c";
    force.query(
      soql,
      function(result){
        $scope.guests = result.records;
        $scope.$apply();
      },
      function(result){
        console.log(result);
      }
    );
  });
  </script>
</head>
<body ng-controller="guestCtl">
  <div ng-repeat="guest in guests">
    {{guest.Name}}
  </div>
</body>
</html>
 
</apex:page>

ng-repeat、きましたね。
これはng-*という属性の中でも特に利用頻度が高いものの一つになると思います。
guestsはデータベースから取得したゲストレコードのリストを参照しています。それがひとつずつguestに代入されてループ処理されます。
この内部ではguestが参照できるので、guest.Nameといった形でオブジェクトの項目を参照しているわけです。

右上のプレビューボタンをクリックして動作を確認してみましょう。

guests displayed

先に作成したレコード2つが表示されていればOKです。

まだまだ原始的ですが、Javascriptからデータベースに問い合わせをおこない、結果をAngularJSで表示させるという基本的な処理をマスターすることができました。

次回は多くのサイトで採用されているUIフレームワークであるBootstrapを適用してこの退屈なデモアプリをよりHTML5っぽくしていきたいと思います。

 

関連情報

without comments

Written by 中嶋 一樹

2月 7th, 2014 at 2:15 pm

Leave a Reply