お客様が developerWorks に初めてサインインすると、プロフィールが作成されます。プロフィールで選択した情報は公開されますが、いつでもその情報を編集できます。お客様の姓名（非表示設定にしていない限り）とディスプレイ・ネームは、投稿するコンテンツと一緒に表示されます。

送信されたすべての情報は安全です。

developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

送信されたすべての情報は安全です。

My developerWorks：

通知：

サイン・アウト

言語を選択する：

JsonML の紹介

JsonML を使って UI 要素を作成、拡張する

Martin Brown, Developer and writer, Consultant

Martin Brown は、プロのライターとして 8 年以上の経験を持ち、さまざまな分野で多数の本と記事を執筆しています。専門分野は、Perl、Python、Java、JavaScript、Basic、Pascal、Modula-2、C、C++、Rebol、Gawk、Shellscript、Windows、Solaris、Linux、BeOS、Mac OS/X など数え切れないほどの開発言語とプラットフォーム、そして Web プログラミング、システム管理、そしてシステム統合にも及びます。彼は ServerWatch.com、LinuxToday.com、IBM developerWorks の定期的なコントリビューターで、Computerworld、The Apple Blog、そして Microsoft の SME (Subject Matter Expert) などのサイトでもお馴染みのブロガーとなっています。連絡先は彼の Web サイト、http://www.mcslp.com です。

概要： JSON (JavaScript Object Notation) の台頭は、Ajax (Asynchronous JavaScript + XML) の台頭と密接に関係しています。JSON は JavaScript オブジェクトに再び変換可能なデータを簡単に送信できるという点では便利ですが、オブジェクトを処理するカスタム・スクリプトが必要になります。この JSON を拡張しているのが、JsonML です。このマークアップ言語では、JSON タイプのマークアップを使って XML データをマッピングすることが可能で、JSON マークアップをベースとした XML や XHTML データの作成、そしてユーザー・インターフェース (UI) 要素の作成、交換を容易に行えるようにします。この記事では、そんな重宝なツールを活用する方法を説明します。

タグを付ける!

日付: 2007年 7月 03日
レベル: 中級
この記事の原文: 英語
アクティビティー： 3372 ビュー
お気軽にご意見・ご感想をお寄せください：

Ajax でのデータ交換

Ajax インターフェースでよくある問題の1 つは、通常、クライアント・ブラウザーとホスト・サーバーとの間で情報を交換する際に、ある種のエンコードと後処理、あるいは構文解析によってデータ・ストリームを JavaScript アプリケーション内で直接使用できるものに変換しなければならないことです。

Ajax 内でこのカプセル化の手段となっているのは XML です。XML は世界的に普及している標準で、十分に理解されてもいますが、問題と制約があります。XML の主な問題は、エンコード・プロセスに手間がかかること、そしてほとんどのブラウザーでは XML レスポンスのデコードにも同じく時間がかかることです。

Ajax アプリケーションではよく、フォームの内容がリクエストのベースとなることがあります。レスポンスは、サーバーによって返された情報を一連の Java オブジェクトで表現したもので、これらの Java オブジェクトを使って情報を表示することができます。この一連のプロセスは、図 1 のようなシーケンスになります。

図 1. 典型的な Ajax プロセス

図 1 のプロセスには、2 つの問題があります。

1 つ目は、XML での作業は一般的にとても複雑であるという問題です。初めから XML を生成するか、それともサーバーからの XML を使用するかに関わらず、このプロセスには時間も手間もかかり、大抵の場合は効率的ではありません。
もう 1 つの問題は、データを表示フォーマットに変換するのが厄介だという点です。この変換をするには、DOM モデルを使って手作業で UI 要素を作成するか、あるいは始めにフォーマット設定済みの XHTML でデータを提供する必要があります。後者の方法では、サーバーが UI 要素を提供しなければなりません (そのこと自体が、実現が難しそうな話です)。そして前者の方法は、できるだけ効率的に作業したいと思っているプロセスにオーバーヘッドを加えるだけに過ぎません。

DOM モデルは、Web ブラウザーおよび環境の違いによって、DOM の構造とインターフェースがさまざまに異なるということにも影響されます。これではロードする情報の表示にさらに複雑さが増すだけで、この複雑さこそが、まさに遠慮願いたいと思っているものです。

このような問題に対するソリューションはいくつもあります。ソリューションの前半部分はデータの交換形式をを XML 形式から JSON に変更することです。この部分はこの記事が焦点とするところではありませんが、JSON を理解すると、JsonML も理解しやすくなります。JsonML はソリューションの後半部分を提供し、情報の実際の表示を遥かに作成しやすくします。それでは早速、JSON から検討してみましょう。

上に戻る

JSON について

JSON (JavaScript Object Notation) が目的としているのは、JavaScript 標準の情報交換機能を利用して、XML を使用する際の問題、そのコンテンツを解析する際の問題、そしてより使いやすい内部構造に変換する上での問題の大部分を解決することです。

JSON は本質的にはテキスト形式ですが、人間にとってはより読みやすく、ネストされるデータ・オブジェクトをさまざまな言語 (Perl、PHP、Python、Java、Ruby など) で作成する一般的な方法との相性も良く、JavaScript オブジェクト・フォーマット (基本的には単なるネストされたデータ構造) をも、うまく扱います。

一例として、XML ではビジネスのリストをリスト 1 のようにモデル化することができます。

リスト 1. XML アドレス・データ

                
                
<business>
<name>One on Wharf</name>
<address>
    <street>1 Wharf Road</street>
    <town>Grantham</town>
    <county>Lincolnshire</county>
</address>
<phonenumbers>
    <phone>01476 123456</phone>
    <phone>01476 654321</phone>
</phonenumbers>
</business>

上記を JavaScript 内で構文解析するには、DOM モデルを使ってコンポーネントにアクセスしなければなりません。例えば、JavaScript 内でこの構造から電話番号を取得するには、リスト 2 のようなコードを使用します。

リスト 2. XML データを使用する Web アプリケーション

                
                
<html>
<head>
<script type="text/javascript">
var xmlDoc;
function loadXML()
{
// code for IE
if (window.ActiveXObject)
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async=false;
  xmlDoc.load("/json/address.xml");
  getaddress();
  }
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation &&
document.implementation.createDocument)
  {
  xmlDoc=document.implementation.createDocument("","",null);
  xmlDoc.load("/json/address.xml");
  xmlDoc.onload=getaddress;
  }
else
  {
  alert('Your browser cannot handle this script');
  }
}
function getaddress()
{
document.getElementById("business").innerHTML=
xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
document.getElementById("phone").innerHTML=
xmlDoc.getElementsByTagName("phone")[0].childNodes[0].nodeValue;
document.getElementById("fax").innerHTML=
xmlDoc.getElementsByTagName("phone")[1].childNodes[0].nodeValue;
}
</script>
</head>
<body onload="loadXML()">
<h1>Address</h1>
<p><b>Business</b> <span id="business"></span><br />
<b>Phone:</b> <span id="phone"></span><br />
<b>Fax:</b> <span id="fax"></span>
</p>
</body>
</html>

リスト 2 のコードでは、元の XML 文書の要素にアクセスして、1 つのアドレスだけから情報を取得しています。これらの要素のうち、例えばビジネスの名前にアクセスするために使用しているのは、xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue というロジックです。

このコードはかなり見苦しいものです。

同じ情報を JSON で表すと、リスト 3 のようになります。

リスト 3. JSON バージョンのアドレス・データ

                
                
{
    "business" : {
        "name" : "One on Wharf",
        "address" : {
            "street" : "1 Wharf Road",
            "town" : "Grantham",
            "county" : "Lincolnshire",
        },
        "phonenumbers" : [
                          "01476 123456",
                          "01476 654321",
                          ]
                      }
}

構造が大幅に単純化され、読みやすくなっていることに注目してください。JSON で使用するマークアップ・フォーマットは JavaScript で直接評価できるため、eval() でパーサーを使う必要はありません。評価結果はありきたりの JavaScript オブジェクト、var addressbookObj = eval('(' + jsontext + ')'); となります。

注: eval() は任意のテキストを実行するために使われることもあるので、できれば使用しないでください。JSON テキストだけを解析する JSON パーサーは数多くあります。

情報が JavaScript 内のオブジェクトになると、標準の JavaScript 表記を使って情報にアクセスできるようになります。オブジェクトへと解析された JSON データ・ソースからは、例えばリスト 4 のように同じ名前と電話番号を取得できます。

リスト 4. オブジェクトへと解析された JSON データ・ソース

                
                
addressbookObj.business.name
addressbookObj.business.phonenumbers[0]
addressbookObj.business.phonenumbers[1]

リスト 4 は遥かに単純化されていて、使いやすく、またアクセスしやすくなっています。リスト 5 に示すように、上記のデータ構造を使用して元の XML のサンプルと同じ情報を提供する完全な 1 ページを作成することができます。

リスト 5. JSON データを使用した Web アプリケーション

                
                
<html>
<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">

function showaddress(req)
{
    var addressbookObj = eval('(' + req.responseText + ')');

    document.getElementById("business").innerHTML = 
       addressbookObj.business.name;
    document.getElementById("phone").innerHTML = 
       addressbookObj.business.phonenumbers[0];
    document.getElementById("fax").innerHTML = 
       addressbookObj.business.phonenumbers[1];
}

function getaddress()
{
   new Ajax.Request('address.json',
                    { method : 'get',
                      onSuccess : showaddress,
                      onFailure: function(){ 
              alert('Something went wrong...') }});
}
</script>
</head>
<body onload="getaddress()">
<h1>Address</h1>
<p><b>Business:</b> <span id="business"></span><br />
<b>Phone:</b> <span id="phone"></span><br />
<b>Fax:</b> <span id="fax"></span>
</p>
</body>
</html>

ここではプロトタイプ・ライブラリーを使って元の JSON ファイルをロードしていますが、JSON ファイルに含まれる情報を構文解析して表示する実際のプロセスはもっと単純なことがわかるはずです。ただし、JSON ファイルからロードした情報を出力に設定するには、やはり DOM を用いる必要があります。

元の JSON に戻ると、JSON は転送されるデータ量が比較的少なくてすみ、大規模な Ajax プロジェクトでは XML のペイロード・オーバーヘッドが相当なものになる可能性があるため、特にコンテンツを実際に処理する際の JavaScript のオーバーヘッドの削減と併せた場合、JSON での転送データの削減はますます顕著になります。

上記のリスト 5 に示したサンプルは、JSON 標準の単純さを説明するための簡単なデモです。実際には、大抵の Ajax アプリケーションで重要な鍵となるのは情報のカスタマイズ表示です。このサンプルでは DOM モデルを使って XML のコンテンツまたは JSON データを HTML ページに組み込みましたが、多くの Ajax アプリケーションでは、より複雑なユーザー・インターフェース要素を作成しなければならない場合が考えられます。

上に戻る

JsonML

JSON マークアップ言語 (JsonML) は、JSON データ交換フォーマットの基本構造を XML の表現に適用し、JSON と同様に単純化したテキスト・ベースのマークアップを使用して XML 形式のデータを交換できるようにします。

XML をそのまま使う代わりに、表記フォーマットで XML データをモデル化するという方法は後進的に聞こえますが、元の XML とは対照的なJSON の構造、そして読みやすさを考えてみてください。JsonML では、これと同じメリットの多くを活用できます。なかでも明らかなメリットは、読みやすさとデータ・サイズです。

JsonML が主に重点を置いているのは、UI 要素を作成するためのツールとしてのその存在です。このようなブラウザー・ベースのユーザー・インターフェースを開発する従来の方法には、以下の 2 つがあります。

サーバーで XHTML を生成し、DOM オブジェクトの innerHTML 属性を使って現在のページに挿入する。
クライアントの DOM インターフェースを使って手作業で DOM 構造を作成する。

前述したように、このような手法は少々面倒です。特に、フォーマットの設定が何度も繰り返されることからプロセスが混同しやすい大規模なデータ・セットでは、なおさら手間がかかります。それに加え、ブラウザーに依存した DOM 実装を処理しなければならないという問題も残っています。

JsonML が解決しようとしているのは、まさしくこの問題です。JsonML は JSON マークアップの単純さをターゲット・フォーマットである DOM に融合させ、同じメリットをもたらします。つまり、JavaScript クライアントが簡単にロードおよび構文解析できるソースです (使用している DOM 実装を心配する必要はありません)。また、すべてのものを JsonML文書で記述できるため、データとマークアップの両方が 1 つのファイルに効率的に組み込まれることになります。出力の作成に DOM は必要ないため、複雑な解析プロセスで UI 要素を生成する必要もありません。

図 1 をもう一度見てみると、Ajax インターフェースを介して復元した情報を表示する一般的な手法では、データをリクエストし、XML を構文解析し、XML をブラウザーに必要な DOM 構造に変換してからやっと出力を表示することになります。

JsonML を使えば、DOM の段階と JavaScript の段階を 1 つの段階にまとめて、XML 全体を一気に XHTML に置き換えることができます。

上に戻る

JsonML マークアップ

JsonML のサンプルを検討する前に、JsonML の構造を検討しておくとためになります。リスト 6 に、JsonML の構造の正式なフォーマットを示します。

リスト 6. JsonML マークアップ・フォーマット

                
                
element
    = '[' tag-name ',' attributes ',' element-list ']'
    | '[' tag-name ',' attributes ']'
    | '[' tag-name ',' element-list ']'
    | '[' tag-name ']'
    | json-string
    ;
tag-name
    = json-string
    ;
attributes
    = '{' attribute-list '}'
    | '{' '}'
    ;
attribute-list
    = attribute ',' attribute-list
    | attribute
    ;
attribute
    = attribute-name ':' attribute-value
    ;
attribute-name
    = json-string
    ;
attribute-value
    = json-string
    ;
element-list
    = element ',' element-list
    | element
    ;

これは一見複雑なように見えますが、基本構造は極めて理解しやすいものです。

第一に、すべての要素はテキストであることが必須なので、[ "ul" ] のような番号が付かないリスト要素を作成することができます。

大括弧は、要素を論理的にグループ化します。要素に属性を追加するには、中括弧をグループ内のリストに含まれる次の要素として使用します。例えば、スタイルを変更して黒丸をなくすには、[ "ul", { style : "list-style-type:none"} ] を使うことになります。

もちろんリストに項目がなければ、まるで役に立たちません。項目は、リストの子要素として追加します (リスト 7 を参照)。

リスト 7. 子を持つリスト

                
                
[ "ul", { style : "list-style-type:none"}, 
    [ "li",
      "First item"],
    [ "li",
      "Second item"],
    [ "li",
      "Third item"],
    ];

項目の属性はオプションなので、リスト 7 に示した個々のリスト項目の場合のように省略可能です。

上に戻る

JsonML から XHTML への構文解析

上記に記載したサンプルは JSON なので、JavaScript アプリケーション内にそのまま定義することができます。コンテンツを実際に XHTML として表示されるオブジェクトへと構文解析するには、JsonML Web サイトから JsonML ライブラリーを入手する必要があります。JSON オブジェクトを JsonML から XHTML に構文解析するときに使用するのは、parseJsonML() メソッドです。構文解析された JsonML にはすぐに、ページに追加可能な UI 要素としてアクセスできるようになります。

リスト 8 は完全な Web ページの例です。表示されたリンクをクリックするたびに、このページは黒丸付きリストを事前定義されたコンテナーに追加します。

リスト 8. JsonML テンプレートを表示する Web アプリケーション

                
                
<html>
<head>
<script type="text/javascript" src="JsonML.js"></script>
<script type="text/javascript">

var listblock = [ "ul",
                  [ "li",
                    "First item"],
                  [ "li",
                    "Second item"],
                  [ "li",
                    "Third item"],
                  ];

function addblock (id,jsonmlblock)
{
    var aselement = listblock.parseJsonML();
    var container = document.getElementById(id);
    container.appendChild(aselement);
}

</script>
</head>
<body>
<a href"#list" onclick="addblock('container', 
 listblock);return false;">Add block</a>
<div id="container"/>
</body>
</html>

図 2 に示す実行中の Web ページは、何度かリンクがクリックされて、黒丸付きリストがページにインポートされた状態になっています。

図 2. 実行中の単純な JsonML サンプル

上記のサンプルを段階的に見ていきましょう。最初のブロックは、リスト項目を表す JsonML です (リスト 9 を参照)。

リスト 9. リスト項目を表す JsonML

                
                
var listblock = [ "ul",
                  [ "li",
                    "First item"],
                  [ "li",
                    "Second item"],
                  [ "li",
                    "Third item"],
                  ];

これは単なる JavaScript オブジェクトです。ユーザーがリンクをクリックすると、addblock() 関数が呼び出されます。ここでのステップは 3 つしかありません。まず、var aselement = jsonmlblock.parseJsonML(); という parseJsonML() メソッドを適用して JavaScript オブジェクトをXHTML へと構文解析します。

次に、var container = document.getElementById(id); で宛先コンテナーを取得します。

そして最後に、生成された XHTML を追加し、container.appendChild(aselement); でコンテナーに付加します。

上に戻る

既存の XHTML または XML から JsonML への構文解析

JsonML を使用するアプリケーションを作成し始める前に、既存の XML 構造または XHTML 構造を JsonML に変換しておきたいという場合があります。そのような場合のために、JsonML サイト (「参考文献」を参照) に XML ソースから JsonML を出力する XSL 変換が用意されています。

これを使用するには、JsonML.xsl 変換をダウンロードし、xsltproc を使って変換を行います。リスト 10 の XML 構造を例にとってみます。

リスト 10. XML 構造

                
                
<table class="maintable">
<tr class="odd">
<th>Situation</th>
<th>Result</th>
</tr>
<tr class="even">
<td><a href="driving.html" title="Driving">Driving</a></td>
<td>Busy</td>
</tr>
...
</table>

リスト 10 を JsonML に変換するには、$ xsltproc JsonML.xsl.xml samp.xml を実行します。

その結果、出力されるのがリスト 11 です。XSL は出力を簡潔にするために改行を削除するので、このリストはフォーマット設定済みであることに注意してください。ただし、実際の出力には改行がストリング要素として残されているのがわかると思います。

リスト 11. 出力結果

                
                
["table",
 {"class":"maintable"},
 "\n",
 ["tr",
  {"class":"odd"},
  "\n",
  ["th",
   "Situation"],
  "\n",
  ["th",
   "Result"],
  "\n"],
 "\n",
 ["tr",
  {"class":"even"},
  "\n",
  ["td",
   ["a",
    {"href":"driving.html",
     "title":"Driving"},
    "Driving"]],
  "\n",
  ["td",
   "Busy"],
  "\n"],
 ]

この手法を使用すれば、どの構造でも XML から JsonML に変換することができます。

上に戻る

既存の DOM 構造から JsonML への構文解析

別の状況として考えられるのは、すでに作成済みの XML または XHTML ブロックを JsonML に変換しなければならないという場合です。このような変換を代わって行ってくれる JavaScript 関数が用意されています。この関数は JsonML の Web サイトから入手することができます。

上に戻る

UI ビルダーとしての JsonML の使用方法

JsonML を UI ビルダーとして使用するには、さまざまな方法があります。簡単な方法の 1 つは、JsonML で、作成したい UI として機能する JavaScript 構造を作成することです。JavaScript 構造を作成したら、1 回のアクションでこの構造を XHTML に変換し、生成された XHTML をページに挿入します。例えば、リスト 12 に示すテーブル・セル用の UI ビルダーでは、黒または白のセルをテーブルの行に追加し、そのテーブルに行を追加して最終的には JsonML ソースとそれに対応する XHTML ソースのテーブルを出力することができます。

リスト 12. JsonMLベースのテーブル・ビルダー

                
                
<html>
<head>
<script type="text/javascript" src="JsonML.js"></script>
<script type="text/javascript">

var blackcell = [ "td", {"style" : "background-color:black"},"CELL"];
var whitecell = [ "td", {"style" : "background-color:white"},"CELL"];

var currentrow = new Array();
var currenttable = new Array();

function onLoad()
{
    initrow();
    inittable();
}

function initrow()
{
    currentrow = new Array();
    currentrow.push("tr");
}

function inittable()
{
    currenttable = new Array();
    currenttable.push("table");
    currenttable.push({"border" : "1"});
}

function addrow()
{
    currenttable.push(currentrow);
    currentrow = new Array();
    currentrow.push("tr");
    showsource();
}

function addcell(color)
{
    if (color == "black")
        {
            currentrow.push(blackcell);
        }
    else
        {
            currentrow.push(whitecell);
        }
}

function showsource()
{
    var tablelement = currenttable.parseJsonML();
    var container = document.getElementById("viewabletable");
    container.removeChild(container.lastChild);
    container.appendChild(tablelement);

    var srccontainer = document.getElementById("sourceoutput");
    srccontainer.value = currenttable.toSource();

    var domcontainer = document.getElementById("domsourceoutput");
    domcontainer.value = container.innerHTML;
 }

function showtable()
{
    showsource();
    initrow();
    inittable();
}

</script>
</head>
<body onload="onLoad()">
<a href"#addrow" onclick="addrow();return false;">Add Row</a><br/>
<a href"#addbcell" onclick="addcell('black');return false;"
  >Add Black Cell</a><br/>
<a href"#addwcell" onclick="addcell('white');return false;"
  >Add White Cell</a><br/>
<a href"#showtable" onclick="showtable();return false;"
  >Show Table</a><br/>
<a href"#showsource" onclick="showsource();return false;"
  >Show Source</a><br/>

<div id="viewabletable">
</div>
<b>JsonML Source</b>
<textarea rows="20" cols="120" id="sourceoutput"></textarea><br/>
<b>DOM Source</b>
<textarea rows="20" cols="120" id="domsourceoutput"></textarea><br/>

</body>
</html>

このアプリケーションの操作は極めて単純です。Add Black/White Cell ボタンをクリックすると、その度に JsonML フォーマットの正しい情報 (この例では、正しいテキストとフォーマットを持つテーブル・セル) が入力された配列が現在の行を構成する配列に追加されます。行に関連する配列をテーブル全体に関連する配列に追加するには、Add Row をクリックします。いずれの場合も、内部オブジェクトの定義をその JsonML 表記で拡張するだけです。

Show Table をクリックすると、内部 JavaScript 構造が XHTML に構文解析されてテーブルが表示されます。これは、元の JsonML をレンダリング済みフォーマットに変換する parseJsonML() メソッドによって行われます。さらに、JsonML ソースを表示することも (JavaScript オブジェクトで toSource() メソッドを使用)、そして生成された XHTML ソースをダンプして XHTML ソースを表示することもできます。扱うのは内部 JavaScript 構造だけなので、XHTML を最終的な文書に実際に挿入する場合を除き、DOM インターフェースに関与しなくても HTML を作成することができます。

テーブルの作成には静的テキスト要素を使いましたが、テーブル・データを変更してから行に挿入することも可能です。JsonML のテンプレートは単なる JavaScript オブジェクトでしかないので、blackcell[2] = "Some other content"; という単純な割り当てによってコンテンツを更新することができます。

このように至って簡単にテンプレートのコンテンツを更新できるので、複雑な UI 作成プロセスの一部がなくなります。つまり、Ajax 接続によってロードする情報を表示用 XHTML に変換する方法を考えなくてもいいということです。

上に戻る

振る舞いと JsonML 要素とのバインド

上記のサンプル (リスト 12 ) に記載した内部構造を使用してテーブルを生成する極めて単純なメソッドを使えば、同等の XHMTL も生成することができます。では、出力を特定のスタイルに合わせるように変更したり、あるいは特定のテンプレートを現行のページに適用可能なスタイルと出力ガイドラインに従って変更しなければならないとしたら、どうすればいいでしょう。

JsonML の 1 つの使い方として、ロード時にページにインポートする UI テンプレートを生成することができます (リスト 13 を参照)。

リスト 13. ロード時に UI テンプレートを生成する JsonML

                
                
<script type="text/javascript" src="resultstable.js"></script>
<script type="text/javascript" src="resultline.js"></script>
<script type="text/javascript" src="resultselectionpopup.js"></script>

これで、各オブジェクトをロードして parseJsonML で XHTML に変換し、その結果を出力すれば、ページのさまざまな要素を出力することができます。CSS ではここまでは対処できますが、リスト 13 に示したメカニズムでは、どんなタイプの情報やデータも出力に取り込みようがありません。

従来の Ajax/DOM モデルでは、出力に取り込む情報やデータを決定できます。なぜなら、各要素を個別に解析し、それぞれの要素を適用する場合と場所を選ぶことができるからです。JsonML の解析プロセスとはこれと同じ方法で対話をすることはできませんが、各要素を解析して結果を出力する解析段階にコールバック・バインディングを追加することはできます。

バインディング関数は、JsonML ソースから生成された XHTML タグごとに実行されます。項目は標準 HTML オブジェクトなので、あらゆる比較または判別メソッドを使ってテンプレートの出力を変更できます。

リスト 14 に、JsonML フォーマットの別のテーブルの例を示します。

リスト 14. テーブル用 JsonML テンプレート

                
                
var table = ["table",{ "border" : "1" },
             ["tr",
              ["td",{"class" : "highlight-effect"},"Highlighted row"],
              ],
             ["tr",
              ["td",{"class" : "non-highlight"},"Non-Highlighted row"],
              ],
             ];

このテンプレートが構文解析されると、単純なテーブルが生成されます。目的のフォーマットは CSS クラスを使用して指定することができます。ただし、行の強調表示は常に必要だというわけではなく、テーブルに挿入するデータに重要な情報が含まれている場合だけ、強調表示するようにしたいとします。

このような強調表示を実現するには、highlight-effect クラスで要素を変更し、異なる背景色を設定するバインディング関数を作成します (リスト 15 を参照)。

リスト 15. JsonML テンプレートへのバインディング関数の追加

                
                
function actionbindings(elem) {
    if (elem.className.indexOf("highlight-effect") >= 0) {
        elem.style.backgroundColor = "red";
    }
    return elem;
}

バインディングを適用するには、バインディング関数を parseJsonML() 関数に指定し、var renderedtable = table.parseJsonML(actionbindings); のようにします。

元の JsonML でフォーマット設定されているので、バインディング関数は要素に対してフル・アクセスすることができ、バインディングは tagname、classname、id といったさまざまな属性を基準にフォーマットをチェックして変更することができます。ここで必要となる作業は、要素を変更してからパーサーに返すことだけです。すると、パーサーによって、変更された要素が DOM ツリーに挿入されます。

上に戻る

JsonML と XML

この記事は XHTML 向けのソリューションとしての JsonML の使用方法に重点を置いていますが、XHTML は中心的な XML 標準のサブセットであるため、JsonML はほとんどすべての XML データにも使用できます。

このような融通の良さが役立つのは、JavaScript アプリケーションに静的 XML フラグメントを保存しなければならない一方、このアプリケーションが他のクライアントと情報を交換するときに XML に変換した文書を交換する必要があるといった状況です。

具体的に言うと、JsonML には JavaScript 内の 1 つの構造としてアクセスできるため、XML構造のコンテンツを更新してから XML に変換してサーバーに送信することもわけありません。

リスト 16 の単純な XML 構造を例にとってみます。

リスト 16. 単純な XML 構造

                
                
<name>
<firstname>Martin</firstname>
<lastname>Brown</lastname>
</name>

JsonML では、上記の構造はリスト 17 のように作成されます。

リスト 17. 単純な JsonML 構造

                
                
["name", 
  ["firstname", "Martin"],
  ["lastname", "Brown"],
]

これで、リスト 18 のように JavaScript オブジェクトとして詳細を更新できます。

リスト 18. JavaScript での更新

                
                
address[1][1] = "Sharon";

次に parseJsonML() を使用して、リスト 19 に示すようにこのオブジェクトの XML バージョンを生成します。

>リスト 19. parseJsonML による XML バージョンのオブジェクト生成

                
                
<name>
<firstname>Sharon</firstname>
<lastname>Brown</lastname>
</name>

以上のプロセスは、DOM パーサーを使って XML 構造を生成したり、テキスト操作 (誤用やエラーが起こりやすい) を使用したりするよりも遥かに単純です。いずれの場合も基本テンプレートは小さく、即時にアクセスできます。

上に戻る

まとめ

Ajax アプリケーションに取り組む際には、効率的にデータを交換し、そのデータをアプリケーションで表示できるフォーマットにする方法を含め、多くの問題が伴います。当然のことながら、Ajax アプリケーションでの情報は動的であることから、その情報をフォーマット設定するためには XHTML を作成します。XHTML を手作業で作成するのには時間がかかり、DOM インターフェースはブラウザーの実装によって異なるため DOM モデルの使用にも問題がはらんでいます。

JSON をベースに構築されている JsonML では、JavaScript 表記を使ってユーザー・インターフェース要素をモデル化することができます。そのため、XHTML や DOM ベースの要素を直接生成する場合よりも簡単に要素を作成して簡単にデータを設定できるようになります。さらに遥かに優れた互換性ももたらすため、JavaScript 構造を XHTML に変換する際に、DOM インターフェースやその違いを心配する必要がありません。

この記事では、JSON および JsonML 標準の基本、そしてこれらの標準を更新するのがどれほど簡単かを紹介しました。また、数々のサンプルを用いて JsonML でUI 要素を作成する方法を例示し、XHTML の出力方法を拡張および強化して、解析段階で JsonML コンテンツを処理して拡張する方法についても説明しました。

参考文献

学ぶために

JSON ホームページ: JSON および JSON プロセスを支援する JavaScripts についての詳細を調べてください。
JsonML ホームページ: JsonML の操作に必要な情報、サンプル、そして JavaScript 関数が記載されています。
「Ajax をマスターする、第 10 回: JSON を使用したデータ転送」(Brett McLaughlin 著、developerWorks、2007年3月): JSON によるデータ交換、そして Ajax アプリケーションでこのデータ交換を使用する方法について学んでください。
「JSON を使ったキャッシング」(Bakul L. Patel 著、developerWorks、2006年10月): JSON をデータ・キャッシングおよび検証ソリューションとして使用し、クライアント側で検証メタデータをキャッシュする方法を学んでください。
「XML から JSON を生成し、Ajax で使う」(Jack D. Herrington 著、2006年9月): XSLT V2 を使用して XML データを JSON に変換する際に、XML/JSON の対話性をデータ駆動型 Web アプリケーションに組み込んでください。
XML Technical library: 広範な技術に関する記事とヒント、チュートリアル、標準、そして IBM レッドブックについては、developerWorks XML ゾーンを参照してください。
developerWorks technical events and webcasts: これらのセッションで最新情報を入手してください。
テクノロジーのブックストアで、この技術やその他の技術に関する本を探してください。

製品や技術を入手するために

IBM トライアル・ソフトウェア: トライアル・ソフトウェアで、次の開発プロジェクトを構築してください。

議論するために

developerWorks XML ゾーン: XML ゾーンの編集者である Linda Meyer に、XML ゾーンのコンテンツに関するご意見をお寄せください。
XML ゾーンのディスカッション・フォーラム: XML を中心としたフォーラムに参加してください。
developerWorks blogs: developerWorks blogsから developerWorks コミュニティーに加わってください。

著者について

閉じる [x]

不正使用の報告のヘルプ