【XPages】 xe:jsonRpcService の使い方と考察
xe:jsonRpcServiceってなにやつ?
今回はExtension Libraryに搭載されている xe:jsonRpcServiceに関して日本語で解説がほとんど見当たらなかったのでブログに書いてみます。
xe:jsonRpcServiceはDomino Designerの右コントロールの「データアクセス」 →「リモートサービス」をXPagesにドラッグしてやることで作成することが出来るコントロールです。
とても軽量、シンプルな通信プロトコル JSON-RPC
でも使い道がいまいちよく分からないDomino技術者の方も多いと思います。そしてよく分かっていない内の1人だった自分が今回、jsonRpcServiceについて調べてみました。
まず、jsonRpcServiceはRPCの名が入っている通り、クライアントとサーバー間でリモート処理を実行したりするんだろう、と推測できます(RPC=リモートプロシージャコールの略)。
そしてJSON-RPCはそれ自体が新しい規格であり、そのデータの受け渡しにJSONを利用したプロトコル(現行バージョンは2.0)ということです。
実際にはJSON-RPCでは以下の様なデータがやり取りされます。
1 2 | --> { "jsonrpc" : "2.0" , "method" : "subtract" , "params" : [42, 23], "id" : 1} <-- { "jsonrpc" : "2.0" , "result" : 19, "id" : 1} |
とてもシンプルで軽量なプロトコルというのも納得ですね。
XPagesのjsonRpcServiceコントロールも同様に、できる限り軽量な構成になるようにデザインされており、クライアント・サーバー間で呼び出されたデータのみを送信し、返信されたデータのみを受信するといった軽量な処理が行えるコントロール、ということです。
ただ正直なところ、XPagesには部分更新イベントという便利な機能があるので、結果だけを見ると同等な実装が出来てしまうと思います。ではなぜjsonRpcServiceが必要になるのか?恐らくリモート処理がとても軽量に作られているということが一番の特徴だと思います。
例えば、株価の値を刻一刻と自動更新するようなアプリケーションを作りたいといった場合、XPagesの部分更新イベントを一分おきに発生させるというのはちょっと大掛かりな気がするのでもっと軽量な処理で実装したい、といったケースで役に立つのではないでしょうか。
実際に使ってみた
jsonRpcService を使ったとってもシンプルなサンプルはこんな感じです。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <? xml version = "1.0" encoding = "UTF-8" ?> < xe:jsonRpcService id = "jsonRpcService1" serviceName = "service" > < xe:this.methods > < xe:remoteMethod name = "getUserName" > < xe:this.script > <![CDATA[return @UserName();]]> </ xe:this.script > </ xe:remoteMethod > </ xe:this.methods > </ xe:jsonRpcService > < xp:br ></ xp:br > < xp:button value = "リモート処理" id = "button1" > < xp:eventHandler event = "onclick" submit = "false" > < xp:this.script > <![CDATA[var deferred = service.getUserName(); deferred.addCallback( function(result) { alert(result); } );]]> </ xp:this.script > </ xp:eventHandler > </ xp:button > </ xp:view > |
6~10行目でJSON-RPCの関数を定義しています。ここではgetUserName()。処理内容はサーバーサイドJavascriptで記述できます。
そして13行目にボタンを配置してonclickイベントでクライアントJavascriptを書いていますが、service.getUserName();とすることでJSON-RPCのリモート関数を呼び出しを行っています。
このようにxe:jsonRpcServiceでリモート関数を定義すると自動でクライアントJavascipt関数が用意されているというところが肝ですね。
上記のサンプルでは関数の引数は使っていませんが、もちろん引数を持たせることも可能です。
引数を持たせて足し算の計算をさせたサンプルがこちらです。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <? xml version = "1.0" encoding = "UTF-8" ?> < xe:jsonRpcService id = "jsonRpcService1" serviceName = "service" > < xe:this.methods > < xe:remoteMethod name = "add" script = "return arg1 + arg2" > < xe:this.arguments > < xe:remoteMethodArg name = "arg1" ></ xe:remoteMethodArg > < xe:remoteMethodArg name = "arg2" ></ xe:remoteMethodArg > </ xe:this.arguments > </ xe:remoteMethod > </ xe:this.methods > </ xe:jsonRpcService > < xp:br ></ xp:br > < xp:button value = "足し算" id = "button1" > < xp:eventHandler event = "onclick" submit = "false" > < xp:this.script > <![CDATA[var deferred = service.add(24,32); deferred.addCallback( function(result) { alert(result); } );]]> </ xp:this.script > </ xp:eventHandler > </ xp:button > </ xp:view > |
ハイライトしている7,9,10,18行目を見て頂くとわかると思います。
どれだけ軽量なの?
それでは、実際にjsonRpcServiceがどれほど軽量か上記のコードをFirefox Firebugを使って確認してみます。
上記のXPagesをFirefoxで読込み、Firebugを起動、「Net」のタブを開いておきます。そして「足し算」ボタンを押した時に追加される通信データを確認します。
以下の画像がその時のFirebugの表示結果です。
おぉ、データサイズわずか44バイト!! 軽っ!
実際にどのようなデータがやりとりされたのかもFirebugで確認してみます。
まずはPostデータ
1 | { "params" :[24,32], "method" : "add" , "id" :1} |
ふむふむ、「”jsonrpc”: “2.0”」 というようなプロトコル情報も省略されており本当に必要な情報のみがPostされています。
つぎにResponseデータ。
1 | { "result" :56, "id" :1 } |
やはり必要な結果のみがResponseデータとして返ってきています。
ちなみに同等の処理をXPages 部分更新で行いましたが、Postデータ、Responseデータ共にこれほど軽量な処理をさせることは出来ませんでした。また、XPagesの部分更新では”計算結果フィールド”のみを部分更新させるといった場合でも<span>タグ付きで値が返ってきたりと、クライアント側でのデータ再加工を行いたいというような場合、値だけを返すjsonRpcServiceのほうがプログラミングが楽になりそうです。
jsonRpcServiceを利用する時の注意点
以下のサンプルコードをみてください。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <? xml version = "1.0" encoding = "UTF-8" ?> < xp:this.data > < xp:dominoDocument var = "document1" formName = "Test" ></ xp:dominoDocument > </ xp:this.data > < xe:jsonRpcService id = "jsonRpcService1" serviceName = "service" > < xe:this.methods > < xe:remoteMethod name = "saveDoc" > < xe:this.script > <![CDATA[print(">> " + getComponent("inputText1").getValue()); document1.save(); return true;]]> </ xe:this.script > </ xe:remoteMethod > </ xe:this.methods > </ xe:jsonRpcService > < xp:br ></ xp:br > < xp:inputText id = "inputText1" defaultValue = "testValue" value = "#{document1.testField}" ></ xp:inputText > < xp:br ></ xp:br > < xp:button value = "Save" id = "button1" > < xp:eventHandler event = "onclick" submit = "false" > < xp:this.script > <![CDATA[var deferred = service.saveDoc(); deferred.addCallback( function(result) { alert(result); } );]]> </ xp:this.script > </ xp:eventHandler > </ xp:button > </ xp:view > |
上記のコードはこちらのStackoverflow で質問と一緒に公開されたコードです。
ハイライトされた9,10,20行目を見て頂くと、このコードの作成者はjsonRpcServiceのリモート関数を使ってXPagesで読み込んでいる文書を保存、返り値にTrueを返す、という処理を行いたいのだろうと推測できます。
ただ、このコードは意図した動きをしません。
今回の記事をここまで呼んで頂いた方々にはすでに察しが付いていると思いますが、jsonRpcSerivceはあくまでJSONによってデータをやり取りしていますので、9行目のgetComponent(“inputText1”).getValue() というのは解決が出来ない情報になってしまいます。
同様にXPages上に存在するdocument1というデータソースも取り扱うことができません。引き渡したいデータがあれば、xe:remoteMethodArg 引数を使って明示的にJSONデータに含めないといけないということです。
このように、jsonRpcServiceはXPagesで読み込んでいるデータソース文書を保存したりする処理には向いていないように思います。(出来ないことはないはずです)
jsonRpcServiceはデータの読み出し専用が得策?
このstackoverflowの回答者も言っていることですが、上記の理由からjsonRpcServiceはデータの読み出し専用として利用することが最良であるかもしれません。
以下、jsonRpcServiceを利用したらいいかもしれないシチュエーションとして
- 会社の株価を定期的に自動更新するようなプログラム
- 新しいユーザーを登録する際にすでに同じユーザー名、Emailがないかどうかを問い合わせるプログラム
- サーバーからのレスポンスデータをクライアントサイドJavascriptで操作、加工したい場合
などに適していると思われます。
いかがでしたでしょうか?
jsonRpcSerivceの特徴を把握してXPages開発の選択肢の1つとして覚えておいてもらえればと思います。
ktatsuki
ケートリック株式会社 CEO & CTOをしています。
Notes/Dominoの開発を得意としますが、 C++ / Java / PHP / Javascript などの言語を使ってWEBアプリ、iPhone / Android アプリ開発などをしたりします。
XPagesの仕事をしているとテンションが通常の1.25倍ぐらい高くなります。
I am owner of KTrick Co., Ltd. and Notes/Domino developer. HCL Ambassador (IBM Champion for 2015 - current). I am interested in web application development and preferred languages are Notes/Domino, C++ / Java / PHP / Javascript.