Apexアプリケーション開発をはじめよう - 第3章：AJAX Toolkitを使ったアプリケーションの作成

by Shinichi Tomita on 4月 11, 2007 at 05:25 午後

デベロッパーアカウントの作成

もっと深くForce.comプラットフォーム上での開発について知りたくなったときは、すぐにApex Developer Networkから開発者用アカウントを申し込んでください。無料でサインアップできます。

無料サインアップ

サインアップが終了すると、デベロッパー用の管理者アカウントとログインのための仮パスワードが登録したメールアドレスに送信されます。

アカウントが作成されると同時に、そのアカウントによってアクセス可能なSalesforceのインスタンスがそれぞれ割り与えられます。このインスタンス内のデータはすべてプライベートに隔離されており、管理者もしくはその管理者アカウントによって作成されたユーザのみしかアクセスできません。

セールスフォース・ドットコムでは、このSalesforceが割り当てるインスタンスのことを「組織」と呼んでいます。

ネイティブアプリケーションについて

アプリケーションをForce.comプラットフォームで作成し、公開するためには、特別なサーバインフラの構築は必要ありません。望むならばアプリケーション開発から実行および公開まで、Salesforceの中ですべてまかなうことができます。

このような特徴は、オンデマンド型のアプリケーションプラットフォームが持つ可能性の一端を示しています。Force.comプラットフォーム上で開発する開発者は、提供するアプリケーションサービスのために特別なコストを負担する必要がありません。

セールスフォース・ドットコムでは、このようにすべてSalesforceの中で完結できるアプリケーションをネイティブアプリケーションと呼んでいます。

SコントロールとAJAX Toolkitについて

Sコントロールとは、SalesforceがホスティングするHTMLおよびJavaScriptが記述された表示用コンポーネントです。典型的なネイティブアプリケーションでは、アプリケーションが取り扱うデータをSalesforce上にオブジェクトとして定義した後、そのデータを取得・表示するビューを作成するのにこのSコントロールを利用することになります。

Sコントロールに表示するデータを取得するためには、JavaScriptからApex Webサービス APIにアクセスするAJAX Toolkitを利用することになります。AJAX ToolkitはApex WebサービスのSOAPメッセージのやり取りをXMLHttpRequest上に既に実装しているため、開発者はメッセージレイヤーで行われていることについて特別に意識する必要なくApex APIを利用できます。

注意：AJAX Toolkit はSalesforceの外部サイトに置かれているHTMLから利用することは出来ません。
これは、一般的にブラウザ上のXMLHttpRequestでは、HTMLが配置されているサイト以外のドメインに対してリクエストを送信することができないようになっているためです。
Sコントロール内のHTMLはSalesforceのドメイン上でホスティングされるため、同一ドメインで提供されるApex Webサービスに対してJavaScriptからアクセスすることが可能になります。

Sコントロールの作成

Sコントロールを作成するには、WebインターフェースからSalesforceにログインする必要があります。

画面上部の「設定」リンクをクリックし、左側のメニューから「開発＞カスタムSコントロール」を選択します。「新規カスタムSコントロール」ボタンを押してSコントロールを新規に作成します。

31_1

「表示ラベル」欄には表示用に適当な名前、「Sコントロール名」には英数字でSコントロールの名前を、「コンテンツ」テキストエリアには表示するHTMLを貼り付けて保存します。ここでは以下の簡単なHTMLを入力しておくことにします。

<html>
  <head></head>
  <body><h1>Hello, World</h1></body>
</html>

次にこのSコントロールをSalesforceの画面上に表示するために、カスタムWebタブを作成します。タブはユーザがSalesforceにログインした後、画面の上部にタブリストとして表示されることになります。なお、タブの順番やどのタブを表示するかは、アプリケーションごと、あるいはユーザごとにカスタマイズが可能です。

左のメニューにある「開発＞カスタムタブ」を選択し、「Webタブ」から「新規」ボタンをクリックしてください。Webタブ作成のためのウィザードが始まります。

最初にタブの表示レイアウトに関する画面が現れますが、ここではそのまま「次へ」をクリックしてください。

タブの中身に埋め込むコンテンツとして、ここではSコントロールを表示するので、「タブの種類」選択リストから「カスタムSコントロール」を選びます。「タブラベル」および「タブスタイル」は、タブの表示に関するプロパティですので、適当に入力して｢次へ｣ボタンをクリックします。

32_1

先ほど作成したカスタムSコントロールを選択ボックスから選択します。

33

あとはすべて「次へ」をクリックして、最後に「保存」をクリックします。

画面上部のタブリストの右端に作成したWebタブが追加されていれば成功です。クリックして内容を確かめてみましょう。

34

35_1

AJAX Toolkitを使う

Sコントロールをタブとして表示できることを確認したら、Sコントロール内のHTMLにAJAX Toolkitを使ったJavaScriptコードを実際に記述していきます。

まず以下のコードをSコントロールのコンテンツに記述してみましょう。

（Sコントロールのコンテンツを編集するには、「設定」リンクから「開発＞カスタムSコントロール」をクリックして、先ほど作成したSコントロールを選んで「編集」リンクをクリックします）

<html>
  <head>
    <title>AJAX Toolkit Hello World</title>
    <script type="text/javascript" src="/soap/ajax/9.0/connection.js"></script>
    <script type="text/javascript">
function sayHello() {
  document.body.innerHTML='<h1>Hello, '+sforce.connection.getUserInfo().userFullName+'</h1>';
}
    </script>
  </head>
  <body onload="sayHello()">
  </body>
</html>

保存した後、先ほどのタブを再び参照すると、ログインしたユーザのユーザ名が表示されているのがわかります。

36_1

上記のHTML中では、以下のタグをheadタグ中に含めることで、AJAX Toolkitをロードしています。

<script type="text/javascript" src="/soap/ajax/9.0/connection.js"></script>

このスクリプトの中で、AJAX Toolkitの本体となるsforce という変数名のJavaScriptオブジェクトが定義されます。実際のAPIへのアクセスは、sforce.connection オブジェクトに定義されたメソッドを中心に行います。

サンプルコード

では、実際にApex APIへの呼び出しを行うAJAX Toolkitのサンプルコードを見ていきましょう。

最初にSOQLクエリによってApexデータベース内のレコードを取り出すコードです。query メソッドを利用します。

var result = sforce.connection.query('SELECT Id, Name FROM Account');
var accounts = result.getArray('records');
var html = '<ul>';
for (var i=0; i<accounts.length; i++) {
  html += '<li>'+accounts[i].Id + ', '+accounts[i].Name+'</li>';
}
html += '</ul>';
document.body.innerHTML = html;

次にApexデータベースに対して新規にレコードを追加するコードを見てみましょう。APIではcreate メソッドを利用します。パラメータにはsforce.SObject オブジェクトに項目値をプロパティとして設定したものを渡します。複数同時にレコードを作成することも可能なため、配列として渡す必要があることに注意してください。

var account = new sforce.SObject('Account');
account.Name = '株式会社セールスフォース・ドットコム';
account.BillingState = '東京都';
account.BillingCity = '渋谷区';
account.BillingStreet = '恵比寿１－１９－１９';
var results = sforce.connection.create([ account ]);

更新には update メソッドを利用します。パラメータとして渡す SObject には、更新するレコードのキーとしてId 属性を設定しておく必要があります。

var account = new sforce.SObject('Account');
account.Id = '0015000000GaX8UAAV';
account.NumberOfEmployees = 1000;
var results = sforce.connection.update([ account ]);

deleteIds メソッドは、Apexデータベース上の指定のIdを持つレコードを削除します。パラメータには削除するレコードのId 属性を配列で渡します。

var results = sforce.connection.deleteIds([ '0015000000GaX8TAAV', '0015000000GaX8UAAV' ]);

もともとのApex Webサービス APIでは削除のためのメッセージ名は delete となっているのですが、JavaScriptでは delete は予約語であるため AJAX Toolkitでは deleteIds とされています。

定義されているオブジェクトにどのような項目が含まれるかについても、APIから取得することができます。describeSObject メソッドはオブジェクトの定義情報に関するメタデータを取得するAPIメソッドです。

var result = sforce.connection.describeSObject('Account');
var fields = result.getArray('fields');
var html = '<ul>';
for (var i=0; i<fields.length; i++) {
  html += '<li>'+fields[i].name + ', '+fields[i].label+'</li>';
}
html += '</ul>';
document.body.innerHTML = html;

以上でAJAX Toolkitと主要なAPIメソッドについて説明しました。その他のAPIの詳細については、Ajax Toolkit API 8.0およびApex API 8.0をご参照ください。

すでにお気づきの方もいらっしゃるかもしれませんが、前章で触れた開発者向けの学習用デモアプリケーションは、このAJAX Toolkitを利用して作成されたネイティブアプリケーションの一例です。特に「AJAX Toolkit Shell」は、AJAX Toolkit APIを対話的に操作できるシェルアプリケーションになっています。API習得の際にはぜひご活用ください。

コメント (0) | トラックバック (0)

Filed under:

トラックバック

このページのトラックバックURL： http://www.typepad.jp/t/trackback/7240/6909438

このページへのトラックバック一覧 Apexアプリケーション開発をはじめよう - 第3章：AJAX Toolkitを使ったアプリケーションの作成:

コメントを投稿

コメントは記事の投稿者が承認するまで表示されません。