Amrita2のAjax対応

ここんとこずっとプログラムを書いていて、ブログを書く暇がありません。そこで、技術的なネタとして、Amrita2の新機能を少し紹介します。

Amrita2は次のリリースから、「Ajax対応」として、HTMLテンプレートをJavaScriptのオブジェクトに変換する機能をサポートします。

Ajaxという言葉にはいろいろな要素がありますが、UIのかなりの部分をJavaScriptでサポートすることになります。その時に、Amrita2を使えば、UIの見た目をHTMLエディタでデザインできるようになります。

プログラム例がAmrita2を使ったRubyのコードで、生成結果はそのコードを実行することで出力されるHTMLソースです。HTMLソースと言っても、中身は大半がJavaScriptになっていて、ロード後に動的に画面を生成するようになっています。

まだデバッグ用のコードがあってかなり見にくいですが、生成結果のソースを見ていただくと、DOMの関数を使って動的にHTMLを生成しているのがわかると思います。このHTMLを生成する部分のJavaScriptの関数が、Amrita2によって機械的に生成されたものです。Ajaxをやるには、こういうコードを手で書くことが必要になるわけですが、これでは、ソースを見てもHTMLの出来上がりのイメージがつかめません。

しかし、プログラム例の方では、出来上がるページのイメージがHTMLとして含まれています。このHTMLの部分は、別ファイルにすることもできますので、そうすれば、画面をHTMLエディタで作成して、それを変換した関数を組み合わせてJavaScriptのコードでUIを作ることができます。

データを画面のファイルとは別のソースから持ってきて組み合わせることもできます。

こちらでは、データは次のような形式で別ファイルに入っています。

 data = {

   'title': 'Ajax with Amrita 2',

   'body':  'This is a text from the data source ....'

 }

このように、XMLでなくJavaScriptのソースの形式でデータを配信するのを、JSONと言うそうです。

このデモでは、これは静的なテキストデータですが、実際には、このようなデータをアプリケーションがデータベース等から生成することになります。そうすれば、その内容が、JavaScriptのコードによってUIに変換され表示されます。JavaScriptを介することで、同一画面でユーザの操作に対応して変化するUIを作れるわけです。

もちろん、これでAjaxがすぐできるわけではないのですが、JavaScriptで見栄えのする画面を作るに為には、こういうツールのサポートが必要ではないかと思います。最終的には、ひとつのテンプレート(最終的な画面イメージとほぼ同等のもの)を使用して、一部をRubyによってサーバサイドで展開し、残りをこの仕組みを使ってクライアントサイドで生成するようにしたいと思っています。