Apexアプリケーション開発をはじめよう - 第6章：マッシュアップチュートリアル
by Shinichi Tomita on 4月 11, 2007 at 06:26 午後
この章では、Force.comプラットフォームを利用したマッシュアップアプリケーションについて、全くのスクラッチ状態からアプリケーションが完成するまでの道のりをチュートリアル形式でたどっていきます。
目標とするアプリケーション
このチュートリアルで作成するアプリケーションは、Salesforce内に格納されている取引先の住所情報を元に、Google Mapsの提供する地図上に取引先情報をプロットするアプリケーションです。
以下のURLから完成目標となるアプリケーションを参照できます。リンクをクリックした後の画面で「トライアル」ボタンを表示してみてください。
https://www.salesforce.com/jp/appexchange/detail_overview.jsp?id=a0330000002gBgGAAU
なお、このチュートリアルの実行に必要なツールはWebブラウザのみ、開発言語はHTML+JavaScriptのみです。データベースインスタンスやアプリケーションサーバなど、あらかじめ用意しておく必要は全くありません。
取引先デモデータのロード
チュートリアルではSalesforceの中に格納されている取引先データの住所情報を利用してマッシュアップを行うため、あらかじめログイン中の組織の中に取引先情報を含んでいる必要があります。
デベロッパーアカウントのサインアップを行った直後のSalesforce組織にはすでに何件かのデモデータがデータベース内に入っていますが、現在これらは英語圏のデータになっていますので今回のマッシュアップ用には不向きです。そのため、あらためて日本語のデモデータをデータベースにロードしておく必要があります。
以下のリンクは今回のチュートリアル利用するデータをデータベースにロードするためのアプリケーションです。
http://www.salesforce.com/jp/appexchange/detail_overview.jsp?id=a0330000002goJsAAI
インストールボタンをクリックして、指示に従ってインストールを行ってください。AppExchangeアプリケーションインストールの細かい手順はこちらに記載がありますが、今回は特に気にせずにウィザードをそのまま進めていただいもかまいません。これによりデータロード用のアプリケーションがインストールされます。
実際にデータのロードを実行するには、画面右上のアプリケーションメニュープルダウンリストから先ほどインストールした「チュートリアルデータロード用アプリ」を選択します。タブリストの中の「チュートリアルデータロード」タブをクリックすると、以下のような画面が現れます。
画面中の「デモデータを登録」ボタンを押すことで、デモ用の取引先データが現在ログイン中のSalesforceインスタンスにロードされます。ロード完了後「取引先」タブをクリックして実際にレコードが登録されているかどうか確かめてください。
デモデータのデータロード後にはこのアプリケーションは特に必要ありません。必要に応じてアンインストールを行ってください。
Google Maps 表示用Sコントロールの作成
それでは実際のアプリケーションを作成にとりかかります。今回作成するアプリケーションは、Sコントロールを使用してJavaScriptからApex APIにアクセスするネイティブアプリケーションです。詳しくは第3章で説明していますが、まずはHTMLを表示するためのSコントロールを作成することになります。
Salesforceにデベロッパーアカウントでログイン後、画面上部の「設定」リンクをクリックします。左側のメニューから、「開発＞カスタムSコントロール」をクリックします。その後、画面中央の「新規カスタムSコントロール」をクリックし、Sコントロールの作成を開始します。
表示ラベルおよびSコントロール名には以下のように入力してください。
| 表示ラベル： | Google Maps mashup チュートリアル |
| Sコントロール名： | GoogleMapsMashupTutorial |
コンテンツ欄のテキストエリアには、実際に表示するHTMLを記述します。まず Google Maps API のドキュメントを参考に、以下のようなコードを記述しておきます。
<html>
<head>
<script src="http://maps.google.co.jp/maps?file=api&v=2&key=ABQIAAAAYtWO2s_klJQZgGk9oArIARQzGTwzk7K_jsQk84g_OzUaojTBGhRU9ZkPbU9a5w_ZHgbyRGNd34orMg"
type="text/javascript"></script>
<script type="text/javascript">
var map;
/*
* エントリポイント
*/
function init() {
// Google Map 初期化作業
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
map.setCenter(new GLatLng(35.683911, 139.75395), 13); // 東京都千代田区千代田
}
}
</script>
</head>
<body onload="init()" onunload="GUnload()">
<div id="map" style="margin: 10 auto; width: 90%; height: 90%"></div>
</body>
</html>
上記HTML中でGoogle MapsのAPIをロードしているURLの中の key パラメータに指定している値は、あらかじめGoogle Mapsから取得しておいたものに置き換えてください。なお、Keyの取得の際には、WebサイトのURLとして現在利用しているSalesforceインスタンスのURLを指定する必要があることに注意してください（例：https://na3.salesforce.com）。
またこのチュートリアルにおけるGoogle Maps APIを利用したコードはあくまでサンプルであり、Google Maps APIの規約においては企業環境での利用には Google Maps for Enterprise の利用が前提となると思われます。
以上の記述が完了したら、「保存」ボタンをクリックしてください。
次に今作成したSコントロールを表示するためのカスタムWebタブを作成します。
左のメニューにある「開発＞カスタムタブ」を選択し、「Webタブ」セクションから「新規」ボタンをクリックしてください。Webタブ作成のためのウィザードが始まります。ウィザードには以下の値を入力します。
| Webタブのページレイアウト： | ページ幅全体 |
| タブの種類： | カスタムSコントロール |
| タブラベル： | GoogleMapsマッシュアップ（チュートリアル） |
| タブスタイル： | （任意） |
| コンテンツフレームの高さ(ピクセル)： | 600 |
| カスタムSコントロール: | Google Maps mashup チュートリアル[GoogleMapsMashupTutorial] |
入力が終わったらすべて「次へ」をクリックしてください。最後に「保存」をクリックした後、画面上部のタブリストの右端に作成したWebタブが追加されていれば成功です。クリックして地図が表示されることを確かめてみましょう。
位置情報のマッシュアップ
ここまでで、Google Mapsの地図をSalesforceの画面に表示することができたかと思います。ただし、このままではマッシュアップとはまだいえません。以下では、実際にSalesforceからデータを取得して、地図上に重ねあわせ表示することができるようにしていきます。
Google Mapsに取引先情報をプロットしていくためには、取引先の位置情報として緯度・経度の情報が必要になります。緯度・経度の情報はジオコーディングと呼ばれる外部サービスを利用することで住所情報から変換することができますが、このチュートリアルでは取引先オブジェクトにあらかじめカスタムのフィールドを定義しておくことで、変換された情報をレコード内にキャッシュしておけるようにします。
では、取引先（Account）オブジェクトに対して、カスタム項目を作成していきましょう。第５章ではカスタムオブジェクトに対してカスタム項目を作成する手順を学びましたが、これは標準オブジェクトについても同様の操作が行えます。
画面上部の「設定」リンクをクリックして、右側に表示されるメニューから「カスタマイズ＞取引先＞項目」をクリックします。「取引先カスタム項目＆リレーション」セクションの「新規」ボタンをクリックして、新たに項目を作成します。
カスタム項目作成のウィザードが開始されますので、以下の情報を入力します。
| データ型： | 数値 |
| 項目の表示ラベル： | 緯度 |
| 文字数： | 12 |
| 小数点の位置： | 6 |
| 項目名： | Lat |
以上の入力が終わったらすべて「次へ」をクリックしてウィザードを進め、最後に「保存＆新規」ボタンを押します。続いてもう一つのカスタム項目として以下の情報を入力します。
| データ型： | 数値 |
| 項目の表示ラベル： | 経度 |
| 文字数： | 12 |
| 小数点の位置： | 6 |
| 項目名： | Lng |
以上の入力が終わったらすべて「次へ」をクリックしてウィザードを進め、最後に「保存」ボタンを押します。「取引先カスタム項目 & リレーション」セクションに以下の画面のようにカスタム項目が作成されていることを確認してください。
マッシュアップコードの記述
位置情報をキャッシュするカスタム項目を追加定義したら、実際にSalesforceのデータとGoogle Mapsをマッシュアップするコードの記述にとりかかります。
先ほど作成したSコントロールのコンテンツを再び編集します。左側の「開発＞カスタムSコントロール」メニューを選択し、リスト中の「Google Maps mashup チュートリアル」の左端の「編集」リンクをクリックします。その後コンテンツ欄のテキストエリアに表示されているHTMLを編集します。
まず、HTMLのHEAD部分に、AJAX Toolkitをロードするscriptタグを追加します。
<html>
<head>
<script type="text/javascript" src="/soap/ajax/9.0/connection.js"></script> <script src="http://maps.google.co.jp/maps?file=api&v=2&key=ABQIAAAAYtWO2s_klJQZgGk9oArIARQzGTwzk7K_jsQk84g_OzUaojTBGhRU9ZkPbU9a5w_ZHgbyRGNd34orMg" type="text/javascript"></script>
次に、エントリポイントである init() 関数の最後に、以下のコードを追加します。
/*
* エントリポイント
*/
function init() {
// Google Map 初期化作業
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
map.setCenter(new GLatLng(35.683911, 139.75395), 13); // 東京都千代田区千代田
// Apexデータベース内の取引先オブジェクト（Account）を検索 queryAccounts(); } }
これにより、Google Mapsの表示の初期化処理を行った後に queryAccounts() という関数が呼び出されるようになります。
続いて init() 関数の下に queryAccounts() 関数を定義し、ここにApexデータベースからデータを検索する処理を記述します。
/*
* 取引先の情報をApexデータベースから取得
*/
function queryAccounts() {
var soql = "SELECT Id, Name, BillingStreet, BillingCity, "+
" BillingState, BillingPostalCode, BillingCountry, "+
" NumberOfEmployees, AnnualRevenue, "+
" Lat__c, Lng__c "+
" FROM Account "+
" WHERE BillingCountry='日本' "+
" LIMIT 50 ";
// var result = sforce.connection.query(soql);
sforce.connection.query(soql, function(result) {
var accounts = result.getArray('records');
for (var i=0; i<accounts.length; i++) {
getAccountGeopoint(accounts[i]);
}
});
}
ここで少し注意していただきたいのが、AJAX Toolkitを利用したAPIの呼び出し方についてです。第3章のAJAX Toolkitの使い方の説明の中では、以下のような記述でSOQLクエリを実行していたと思います。
var result = sforce.connection.query(soql);
しかし、上記のコードでは以下のようにコールバック関数を利用した呼び出しになっています。
sforce.connection.query(soql, function(result) { ... });
このような違いがあるのは、前者では内部的にXMLHttpRequestを同期的に呼び出しているのに対して、後者は非同期で呼び出しているためです。同期的な呼び出しはコードの記述・閲覧上は大変わかりやすいのですが、呼び出しの処理を行っている間応答待ちの状態に入るため、ユーザの操作入力をブロックしてしまいます。特にレスポンスに時間のかかる処理では、ユーザの操作を長時間ブロックしないようにバックグラウンドで非同期にAPI呼び出しをすることをおすすめします。
次にジオコーディング処理です。getAccountGeopoint()関数を以下のように定義します。
/*
* 取引先の位置情報（緯度・経度）を取得する
*/
function getAccountGeopoint(account) {
if (account.Lat__c && account.Lng__c) {
// 位置情報がキャッシュされていればそのまま地図上へプロット表示
plotAccount(account);
} else {
// Googleのジオコーディングサービスを利用して住所から位置情報を取得
var geocoder = new GClientGeocoder();
var address = account.BillingState+account.BillingCity+account.BillingStreet;
geocoder.getLatLng(address, function(point) {
account.Lat__c = point.lat();
account.Lng__c = point.lng();
sforce.connection.update([ account ], noop); // 位置情報をキャッシュして保存
plotAccount(account);
});
}
/*
* updateの非同期処理完了を受け取るコールバック関数。ここでは何もしない。
*/
function noop() {}
}
ここではジオコーディングにGoogle Maps API のGClientGeocoderを利用しています。同じ住所情報に対して再び問い合わせをしなくても済むように、いったん取得した位置情報は先ほど定義した取引先オブジェクト内のカスタム項目に保存しています。保存の際に用いられている update APIにもクエリの場合と同様に非同期呼び出しの形が用いられていることに注意してください。
住所情報から位置情報が得られたら、あとは地図上にプロットするだけです。この作業はplotAccount()関数で行います。
/*
* 取引先を地図上にプロットする
*/
function plotAccount(account) {
var html = '<a href="/'+account.Id+'" target="_top">'+account.Name+'</a>' +
'<div>住所：'+account.BillingState+account.BillingCity+account.BillingStreet+'</div>' +
'<div>従業員数: '+account.NumberOfEmployees+'</div>' +
'<div>年間売上：￥'+(account.AnnualRevenue/1000000)+'M</div>';
var marker = new GMarker(new GLatLng(account.Lat__c, account.Lng__c));
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
map.addOverlay(marker);
}
以上のコードを追加したら、編集中のSコントロールを保存します。
再び画面上のタブリスト中にある「GoogleMapsマッシュアップ（チュートリアル）」タブをクリックします。今度はマーカーアイコンが地図上に並べられているのがわかると思います。
アイコンをクリックすると取引先の情報が表示されます。
リンクをクリックすると、Salesforceの取引先詳細ページに飛ぶことができます。
以上でマッシュアップアプリケーションのチュートリアルは終了ですが、開発者のみなさんはこれを元にさらなる自分独自のアプリケーションを作成してみてください。例えばSOQLの検索条件などを工夫したり、あるいはその他の外部Webサービスと組み合わせたりすることで、さらに興味深いアプリケーションになるかもしれません。
このような動的に変化するデータベースアプリケーションを作成するのに費やしたコードの量は、HTMLとJavaScriptをすべて含めても100行以下です。さらにこのアプリケーションはサーバ環境を自分で保守する必要もなく、共有することですぐに他の人に使ってもらうこともできるのです。次の章ではみなさんが作成したアプリケーションを共有する方法について説明する予定です。
トラックバック
このページのトラックバックURL： http://www.typepad.jp/t/trackback/7240/6909533
このページへのトラックバック一覧 Apexアプリケーション開発をはじめよう - 第6章：マッシュアップチュートリアル:
All rights reserved Various trademarks held by their respective owners.
General Enquiries: 415-901-7000 | Fax: 415-901-7040 | Sales: 1-800-no-software