SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

特集記事

はじめてのWebサービス実装体験

辞書サービスの開発例


ダウンロード サンプルソース (3.7 KB)

多様な結果を求める

 XMLは柔軟なフォーマットですが、場合によってはこれを解析するクライアント側に大きな負担を強いることになります。DOMが実装されていない貧弱なアプリケーション環境や、モバイルのようなメモリが限られている実行環境の場合、複雑なXML処理を要求するWebサービスが利用できない可能性も否定できません。

 Webベースのサービスが提供するデータの種類によってはXMLにこだわる必要はないと思います。少なくとも、単純なデータを提供するサービスの場合はXML以外のデータ形式も積極的にサポートするべきです。例えば、本稿の辞書サービスの結果は、キーに対応する単語しか返していません。この単語を得るためにXMLを使うのは冗長です。場合によっては、プレーンテキストやCSV形式の方が効率的なこともあります。

 筆者の場合、データ加工処理を行うビジネスロジックを起動するURIに対してフォーマットを指定するパラメータを付加する方法を採用します。そうすることで、あるリソースをどのようなデータで取得したいか、クライアント側が要求できるようになります。

サンプル 03 dic.php
<?php
 $key = $_GET['key'];
 $fm = $_GET['fm'];
 $DIC = array(
  "kitty" => "仔猫",
  "kitten" => "仔猫",
  "cat" => "猫",
  "siamese" => "シャム",
  "tortoiseshell" => "三毛",
  "persian" => "ペルシャ"
 );

 if ($fm == 'xml') {;
  header('Content-type: text/xml; charset=UTF-8');
  print <<<EOF
<?xml version="1.0" encoding="UTF-8"?>
<dictionary>
<key>$key</key>
<value>$DIC[$key]</value>
</dictionary>
EOF;
 }
 else if ($fm == 'html') {
  header('Content-type: text/html; charset=UTF-8');
  print <<<EOF
<div>
<span id="key" style="font-weight:bolder">$key</span>:
<span>$DIC[$key]</span>
</div>
EOF;
 }
 else {
  header('Content-type: text/plain; charset=UTF-8');
  print $DIC[$key];
 }
?>

 サンプル 03のdic.phpは、GETメソッドによるHTTPリクエストのfmパラメータから取得した文字列によって、結果となる他のフォーマットを選択します。fmパラメータが「xml」の場合はXMLで、「html」の場合はHTMLで、そうでなければテキストで返します。

 このような実装にすれば、データの加工を行いたいと考えているクライアントはXMLフォーマットでデータを要求し、AjaxベースのWebアプリケーションであればすぐに表示可能なHTMLでデータを要求するといった使い分けが可能になります。他にも、クロスドメインに対応するためにJSON形式のデータを返したり、関係データを扱っている場合であればCSVで返すといった方法も検討できます。

サンプル 03 ajax.html
<html>
 <head> 
  <meta http-equiv="Content-Type" 
        content="text/html; charset=UTF-8" />
  <title>Ajax ベースのクライアント</title>
  <script type="text/javascript">
function GetValue(key) {
 //XMLHttpRequest オブジェクトを取得する
 var req = null;
 if ("XMLHttpRequest" in window)
  req = new XMLHttpRequest();
 else if ("ActiveXObject" in window) {
  try { req = new ActiveXObject("Msxml2.XMLHTTP"); }
   catch (e) {
   try { req = new ActiveXObject("Microsoft.XMLHTTP"); }
   catch (e) {}
  }
 }

 //同期通信でサーバーからデータを取得
 req.open("GET", "dic.php?key=" + key + "&fm=html", false);
 req.send(null);

 return req.responseText;
}
  </script>
 </head>

 <body>
  <h1>キーを入力してください</h1>
  <div>
   <input id="key" type="text" />
   <input type="button" value="送信" onclick="
          var keyInput = document.getElementById('key');
          var resultDiv = document.getElementById('result');
          resultDiv.innerHTML = GetValue(keyInput.value);
   "/>
  </div>
  <div id="result"></div>
 </body>
</html>
HTML 部品を受け取る
HTML 部品を受け取る

 サンプル 03のajax.htmlはdic.phpに対してHTMLフォーマットの結果を要求しています。HTMLの結果であれば、そのまま既存の画面上にあるDIV要素に結果を埋め込むことができるため、XMLの解析を行うよりも簡単です。

 特に、辞書のようなデータ中心のサービスであれば多様な利用環境が考えられます。他のWebサイトに組み込む(スニペットやモジュール)、通常のアプリケーション、アドイン、デスクトップ上のガジェット、モバイルなど、さまざまなクライアント環境に対応するサービスを提供する場合、多様なフォーマットをサポートした方がクライアントの開発が容易になります。

最後に

 本稿で解説に利用したサンプルはWebサービスの動作を説明するための試験的なプログラムであり、実用的なサービスを想定したものではありません。実際にWebサーバで広く公開する場合は、セキュリティやスケーラビリティなどの問題を考慮しなければなりません。

 実践で開発されるサービスは、バックグラウンドにデータベースを抱え、さまざまな種類の要求に応える複雑なビジネスロジックを実装する必要があります。また、クライアントが複雑なデータを処理するのは手間がかかるので、通常はサービス提供者がSDKも合わせて提供します。

 大規模なサービスを提供するのは難しいものですが、自身のWebサイトの機能の一部をサービス化して利用者の利便性を向上させる程度であれば、個人や小規模な組織でも可能です。そうすることで、リソースへのアクセスを容易にするガジェットの開発などに道が開けるでしょう。

この記事は参考になりましたか?

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。
特集記事連載記事一覧

もっと読む

この記事の著者

赤坂 玲音(アカサカ レオン)

平成13年度「全国高校生・専門学校生プログラミングコンテスト 高校生プログラミングの部」にて最優秀賞を受賞。2005 年度~ Microsoft Most Variable Professional Visual Developer - Visual C++。プログラミング入門サイト WisdomSoft の管理人。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/1679 2008/08/26 13:33

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー