OpenSocialアプリケーションと外部サーバとの連携

mixiアプリで始めるOpenSocial入門（8）

外部サービスの呼び出しサンプル

　それでは、外部サービスの呼び出しを行うサンプルを作成しましょう。

　今回は、株式会社リコーの運営する実験サイト「ricollab」で公開されている、「ricollab 郵便番号検索」サービスを呼び出し、入力された郵便番号に対応する住所を表示します。

郵便番号検索アプリケーション実行画面

　ricollabのWebサービスの仕様は、Webページで公開されています。

　今回は、

http://zip.ricollab.jp/{郵便番号}.json

という形式で呼び出すことのできる、郵便番号リソースを取得するサービスを使用します。このサービスはデフォルトではHTML形式で結果を返しますが、URLの末尾に".json"という文字列を付加することで次のようなJSON形式で結果を取得できます。

ricollabの郵便番号検索サービスのJSON形式での結果例

{
  "zipcode": "1120002",
  "address": {
    "prefecture": "東京都",
    "city": "文京区",
    "town": "小石川"
  },
  "yomi": {
    "prefecture": "トウキョウト",
    "city": "ブンキョウク",
    "town": "コイシカワ"
  }
}

　今回は、address.prefecture,address.city,address.townから都道府県、市町村区名などを取得します。今回作成するアプリはmixiでも公開しています。

　以下の内容をwebservice-sample.xmlという名前でUTF-8形式で保存し、第2回の手順に沿ってアプリを作成します。

郵便番号検索アプリケーションのガジェットXML（webservice-sample.xml）

<?xml version="1.0" encoding="UTF-8"?>
<Module>
	<ModulePrefs title="webservice-sample">
		<Require feature="opensocial-0.8" />
	</ModulePrefs>
	<Content type="html"><![CDATA[
<script type="text/javascript">
function getData() {
  document.getElementById('address').innerHTML = "";
  var url = "http://zip.ricollab.jp/" + document.getElementById("zipcode").value + ".json"; // *1

  // *2：ここから ―――――――――――――――
  var params = {};
  params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.GET;
  params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
  params[gadgets.io.RequestParameters.AUTHORIZATION] = gadgets.io.AuthorizationType.NONE;
  // *2：ここまで ―――――――――――――――
  gadgets.io.makeRequest(url, function(response) { // *3
    var json = response.data; // *4
    var address = json.address.prefecture + json.address.city + json.address.town; // *5
    document.getElementById('address').innerHTML = address; // *6
  }, params);
}
</script>
<input type="text" id="zipcode" size="50">
<button onclick="getData()">郵便番号検索</button><br/>
検索結果：<div id="address"></div>
]]></Content>
</Module>

　 以下、1.～6.はリストの番号と対応するものとします。

1. 外部サービスのURLを作成する。ここでは、zipcodeというIDのテキストボックスに入力された値を含むURLを作成し、末尾に".json"を付加している。
2. makeRequest関数に指定するパラメータを作成する。ここでは、HTTP GETを使い、認証なし、JSON形式でのリクエストを指定している。
3. makeRequest関数でOpenSocialコンテナに対してリクエストを行う。
4. コールバック関数で、引数に渡されたオブジェクトのdataプロパティから、結果のJSONオブジェクトを取得する。
5. JSON形式で格納された、prefecture,city,townというデータを連結する。
6. 結果をaddressというIDのdiv要素に設定する。

　以上の処理により、郵便番号を入力して「郵便番号検索」ボタンを押すことで、ricollabの郵便番号検索サービスをOpenSocialアプリケーションから呼び出し、結果を表示することができます。

　なお、今回のアプリケーションでは、郵便番号検索サービスの処理結果が1件に該当するケースにのみ対応しています。郵便番号を3桁だけ指定して複数の結果が返ってきた場合や、該当する結果が存在しない場合については対応していません。ぜひサービスの処理内容を確認したうえで、改造してみてください。

ソーシャルデータの取り扱いについて

　連載の第5回でもソーシャルデータの取り扱いについて記しましたが、ソーシャルデータを外部サービスに渡す際などには、やはりガイドラインに精通しておく必要があります。詳細は「mixiアプリガイドライン」を参照してください。

まとめ

　今回はOpenSocialコンテナの外に膨大に存在するWebサービスに、OpenSocialアプリケーションがアクセスする方法について考えました。

　Webサービスがブームとなり、複数のサービスを混ぜ合わせるマッシュアップという言葉が生まれてしばらく経ちますが、これまでアクセスすることができなかったソーシャルデータとWebサービスをマッシュアップするならば、これまでに存在しないアプリケーションが生まれるかもしれません。新たな可能性を見いだせるよう、頭をひねってみましょう。

　次回は、OpenSocialアプリケーションの開発の際に役立つ、Apache ShindingというオープンソースのOpenSocialコンテナについて解説します。OpenSocialアプリケーション開発の際のイライラが少し軽減されるかも？ ご期待ください。

参考資料

• mixiアプリガイドライン
• 株式会社リコー ricollab 郵便番号検索サービス 仕様