当ブログに掲載しているサンプルは、すべて利用者の自己責任という形でお願いします。
ただし、明らかな不具合がある場合、ご連絡いただければ、訂正記事を出します。
また、こちらのサンプルは、別のサイト等への公開、転載は一切禁止しています。
どうしてもと言う場合は、筆者にあらかじめご連絡ください。
記事そのもののリンクについてはご自由に行っていただいてよいです。

テクてく Lotus 技術者 Slack に参加しよう!

2013年6月23日日曜日

Notes/Domino でREST APIを使ってみよう-後半-

今日は、REST APIの後半の話です。
前半では、Domino データサービスの設定方法や、ブラウザからREST APIを利用した場合の結果についてみてみました。
後半は、Notesアプリケーションにそれを応用してみます。


では、記事に入る前にこちらをクリックしましょう。
にほんブログ村 IT技術ブログへ


Dominoデータサービスを設定したことにより、Notesアプリケーションは、JavaやJavaScriptを使ったアプリケーションから利用することができます。
また、Notes/DominoはJavaやJavaScriptを利用することができます。
ということは、NotesアプリケーションでREST APIを使うことができるということになります。

利用するデータは前半でも紹介した「郵便番号辞書アプリ」です。
これは、すでにDominoデータサービスが利用できるようにしてあります。

このアプリからデータを検索するというサンプルアプリケーションを作成してみましょう。
サンプルアプリケーションの内容は、
「7桁の郵便番号を入力して、[検索]ボタンをクリックすると、郵便番号辞書アプリから該当する住所データを取得して、都道府県名、市区町村名、町域名を画面上のフィールドにセットする」
というものです。
サンプルアプリケーションはXPagesで作成します。

1.フォームを作成する
 下図のようなフォームを作成します。
 フォーム名は「AddressForm」としておきます。
 フィールド名は下図を参照してください。
検索画面用のフォーム

2.XPageを作成する
 XPagesアプリケーションにしたので、画面を作成します。
 「home」(任意です)という名前で作成します。
 データソースを作成して、1.で作成したフォームを割り当てます。
データソースを作成
データソースをXPage画面にバインドします。
データソースをXPage画面に追加

 ちなみに、このような設定でバインドしてあります。
データバインドコントロールの設定


3.検索用のコードを記述する(SSJS)
 さて、画面が出来上がったので、次に検索用のコードを記述します。
 比較のために、REST APIを使わない場合のものを載せます。
 サーバサイドJavaScript(SSJS)のNotesクラスを使った場合ですね。
郵便番号を検索するためのSSJS
var zip7 = getComponent( "zip71" ).getValue();
 で画面上に入力された郵便番号を取得しています。
 あとは、郵便番号辞書アプリの($All)ビューに対して、getDocumentByKey()メソッドで検索をしています。
 取得した結果をデータソースの各アイテムに渡しています。
 このコードは、画面にボタンを配置して、SSJSのスクリプトを実行するという形で設定してあります。


4.検索用のコードを記述する(CSJS)
 今度は、REST APIを使ってのコードです。
 SSJSと同様にボタンを配置します。ボタンのラベルは「REST APIを使った検索」としておきます。
REST APIによる検索ボタン

 REST APIの呼び出しは、今回はクライアントサイドのJavaScriptとして記述します。
// 送信先
var svn = "http://サーバのhost名";
var dbn = "Xpages/ZipCode.nsf";
var endpoint = "/api/data/collections/unid/D76B3FEBE958BECF49257B8C00037E9D";

// 入力した郵便番号
var skey = document.getElementById( "#{id:zip71}" ).value;

// URLを生成
var url = svn + "/" + dbn + endpoint + "?search=FIELD zip7 CONTAINS " + encodeURI(skey);

// XMLHttpRequestを作成
try {
    xmlhttp = new XMLHttpRequest();
} catch (e){
    // XMLHttpRequestの作成に失敗
}

// REST APIのセットと送信
xmlhttp.onreadystatechange = chkResponse;
xmlhttp.open('GET', url, true);
xmlhttp.setRequestHeader ( "Content-Type","text/xml; charset=utf-8" );
xmlhttp.send();

// REST APIのレスポンスの処理(正常時のみ処理する)
function chkResponse() {
if ( xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
     var ret = xmlhttp.responseText;
     var obj = JSON.parse( ret );

     document.getElementById( "#{id:prefectures1}" ).value = obj[0]['Prefectures'];
     document.getElementById( "#{id:cities1}" ).value = obj[0]['Cities'];
     document.getElementById( "#{id:address1}" ).value = obj[0]['Address'];
    }
}
07行目で、画面上に入力した郵便番号を取得しています。
10行目で、REST APIとして渡すhttpのURIを生成しています。

19~23行目でREST APIにリクエストを送信していますが、その準備として、12~17行目でXMLHttpRequestを作成しています。

※HTTP通信なので、非同期通信としています(21行目の命令の3つ目の引数・・・trueとすることで、非同期通信になる)。

リクエストを送信することで、Dominoからその結果がJSON形式で返されます。
どのような形で返ってくるかは、前半の最後に紹介した通りです。

25~34行目で、HTTPのレスポンスに対する処理を行っています。
27行目で、レスポンスの受信及びステータスのチェックを行っています。
受信完了(readyState=4)、ステータスがOK(status=200)であれば、正常なので、
その時に郵便番号のセット処理を行っています。

JSON 形式のデータで返ってきているので(28行目)、それをJavaScriptで取り扱える形式にする必要があります。
それが29行目のJSON.parse()という命令です。
これでJavaScriptのObject変数になります。

31~33行目で、画面上のフィールドにセットしています。
DominoからはJSON形式の配列で返ってくるので、obj[0]としています。2番目の['Prefectures']は、項目名を表しています。

実際のサンプル画面はこちら。
郵便番号検索アプリ

郵便番号を入力して、[REST APIを使った検索]ボタンをクリックすると、画面の「都道府県名」「市区町村名」「町域名」に該当する住所が表示されます。

[保存]をクリックすれば、文書に「都道府県名」「市区町村名」「町域名」も一緒に保存されます。

いかがでしょうか?
これでNotes/DominoのデータをREST API経由で、他のシステムと連携もできますし、
逆に、他のシステムのデータをREST API経由でNotesから利用することもできるようになります。

これでNotes/Dominoの活用の幅が広がることになりますので、ぜひチャレンジしてみてください。


では、また・・・



【PR】ノーツ/ドミノに関するお問い合わせは下記まで【PR】
単純なDBのカスタマイズから他アプリケーションとの連携までご要望にお応えします!

Lotus Notes/Domino カスタマイズとセキュリティ強化 - 株式会社エフ

0 件のコメント: