XPagesDay 2015 RESTの総復習

A-2
REST の総復習
株式会社エフマネージャー
御代政彦（みよまさひこ）

©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
今回のセッションに関するお問い合わせは、↓こちらまで↓
御代政彦（みよまさひこ）
2011年12月からIBM Champion for ICSをやってます
Twitter：@guylocke
Facebook：guylocke34
ブログ：http://guylocke.blogspot.jp
－ 2 －
自己紹介
のおつ検索
株式会社エフ
ef-info@effect-force.co.jp

アジェンダ
 RESTについて
 RESTとは？
 JSON/JSONPとは？
 DominoにおけるREST/JSON
 設定方法のおさらい
 実際のデータを見てみよう
 XPagesアプリを作ってみた！
 JSONPで返してくる場合
 JSONで返してくる場合
 OnTime Open APIを使った場合
 アプリのソースを見てみよう！
 応用を考えよう！
 Bluemixのサービスとの連携
 Notes DBのデータを外部に公開
－ 3 －

－ 4 －
RESTについて

RESTについて
 RESTとは？
 HTTP ベースの軽量なWeb API を提供
 データにはXML やJSON などの形式を利⽤
 HTTP のGET/POST/PUT/DELETE メソッドでCRUD 操作を実現
－ 5 －

RESTについて
 RESTとは？
 HTTP ベースの軽量なWeb API を提供
 データにはXML やJSON などの形式を利⽤
 HTTP のGET/POST/PUT/DELETE メソッドでCRUD 操作を実現
－ 6 －
HTTPで特定のURLにアクセスすると、
JSONのデータが返ってくるよ！
要するに・・・
ということです！

RESTについて
 JSON/JSONPとは？
 JavaScriptにおけるオブジェクトのように記述できる軽量なデータ
フォーマット
 JSONPはJSONを関数呼び出しの形式にしたもの
 クロスドメインでの利⽤をしやすくするため
－ 7 －

RESTについて
 JSON/JSONPとは？
 JavaScriptにおけるオブジェクトのように記述できる軽量なデータ
フォーマット
 JSONPはJSONを関数呼び出しの形式にしたもの
 クロスドメインでの利⽤をしやすくするため
－ 8 －
XPagesで利用するのに適したデータ形式
要するに・・・
ということです！

－ 9 －
Dominoにおける
REST/JSON

DominoにおけるREST/JSON
 設定方法のおさらい
1. Dominoディレクトリのサーバ文書内にある「Domino アクセス
サービス」の「有効なサービス」にサービス名を設定する。
 2015年11月時点で設定可能なのは「Data, TravelerAdmin, Calendar,
Mail, FreeBusy」
2. サーバ文書を保存後、
Dominoサーバコンソールで
tell http refresh
と入力！
－ 10 －

3. Notes DBの「データベースプロパティ」の[詳細]タブ（一番右）
を開く
4. 「IBM Domino データサービスを許可」の
値を「ビューと文書」に変更する
－ 11 －
ODSのバージョンは問わない！

5. Domino Designerでビュープロパティの[詳細]タブ（右か
ら二番目）を開き、「IBM Domino データサービスの操
作を許可」にチェックをつける
6. ビューを保存！
－ 12 －
RESTアクセスを許可していないビューは
「HTTP403」エラーになる

 実際のデータを見てみよう
1. Dominoサーバーで許可されているData Serviceの種類を返す
http://[server-name]/api
2. DominoサーバーのNotes DBの一覧を返す
http://[server-name]/api/data
3. ビューのチェック⽤URL
http://[server-name]/[xxxx.nsf]/api/data/collections/unid/[view-UNID]?page=n
※?page=nは複数ページにまたがる場合に利⽤可能（表示したいページ数を指定する）
4. 文書のチェック⽤URL
http://[server-name]/[xxxx.nsf]/api/data/documents/unid/[document-UNID]
5. 指定したユーザのカレンダーのイベントの一覧を返す
http://[server-name]/[mail-file]/api/calendar/events
－ 13 －

－ 14 －

－ 15 －
XPagesアプリを
作ってみた！

XPagesアプリを作ってみた！
 今回作成したXPagesアプリケーション
1. 「書籍/蔵書検索」アプリケーション
 JSONPの形式で返す
2. 「路線検索」アプリケーション
 JSONの形式で返す
3. 「OnTime Open API」サンプル
 POSTメソッドでアクセスすることでデータを返す
－ 16 －
1. 2. のアプリケーションは、
Bluemix上に構築してみました！！
http://miyo001.eu-gb.mybluemix.net/

XPagesアプリを作ってみた！
－ 17 －

－ 18 －
アプリのソースを
見てみよう！

アプリのソースを見てみよう！
 アプリケーションの肝
 HTTPリクエストの送信
 メソッドの種類を確認
 リクエストデータの有無を確認
 JSONデータを取得する
 JSON形式なのかJSONP形式かを確認
 JSONデータを処理する
 JSON形式なのかJSONP形式かを確認
－ 19 －

 HTTPリクエストの送信
 リクエストの種類（メソッド）を確認する
 OnTime Open APIの場合、GETメソッドではなく、POSTメソッドで
あることに注意！
 HTTPリクエストを送信する際に、リクエスト⽤のJSONデータを生
成しておくこと！
 JavaScriptの連想配列として作成したものをJSON.stringfy関数で変
換
－ 20 －

－ 21 －
function getToken() {
var url = document.getElementById( "#{id:clientDBPath}" ).innerHTML + "apihttp";
var payload = {
"Main": {
"ApplID": "OnTime Open APIのApplication ID",
"ApplVer": "OnTime Open APIのバージョン番号",
"APIVer": "OnTime Open APIのビルド番号",
"CustomID": "1432733137335",
"Token": "OnTime Open APIのToken情報"
},
"Login": {}
};
strPostdata = JSON.stringify( payload ); // Request JSONとして生成
xmlhttp.onreadystatechange = getLogin; // レスポンスを受け取った時に呼ばれるメソッドを指定
xmlhttp.open( 'POST', url, true );
xmlhttp.setRequestHeader ( "Content-Type", "application/json; charset=utf-8" );
xmlhttp.send( strPostdata ); // リクエストデータ付きでHTTP送信
}
REST送信（OnTime Login）：CSJS

 JSONの取得
 別サイトのデータはそのままでは利⽤できない為、間接的に取得す
ることが必要！
 RESTサービスコントロールを利⽤すると一つのXPage内で取得可能！
– 「customRestService」の「doGet」に記述
－ 22 －
// 【駅情報の検索】駅名で検索可能。駅コードが取得可能。
var siteInfo = "http://api.ekispert.com/v1/json/station";
var apiKey = “発行された認証キー";
var stname = context.getUrlParameter( "inStName" );;
var url:java.net.URL = new java.net.URL( siteInfo + “?key=” + apiKey + “&name=” +
stname ); // ここでURLオブジェクトを生成している
return url.getContent(); // ここでURLのコンテンツ（即ち、JSONデータ）を取得している
JSONの取得（駅名検索）：SSJS

 JSONの処理
 HTTP通信のレスポンスに従って行う
－ 23 －
function method1() {
if ( xmlhttp.readyState == 4 && xmlhttp.status == 200 ) { // HTTPレスポンスを確認してOKなら処理を続ける
var ret = xmlhttp.responseText;
var obj = JSON.parse( ret ).ResultSet; // JSONデータをJavaScriptで扱えるオブジェクトに変換する
var stationcode = document.getElementById( "#{id:stationCode1}" );
stationcode.options.length = 0;
if ( obj.max == 0 ) {
document.getElementById( "#{id:cfErrMsg1}" ).innerHTML = "駅名は見つかりませんでした。再度入力してください。";
} else if ( obj.max == 1 ) {
stationcode.options[0] = new Option( obj.Point.Station.Name ); // JSONデータは連想配列に変換されるので、「.」でつないで取得する
stationcode.options[0].text = obj.Point.Station.Name;
stationcode.options[0].value = obj.Point.Station.code;
} else if ( obj.max > 1 ) {
for ( var i=0; i<obj.Point.length; i++ ) {
stationcode.options[i] = new Option( obj.Point[i].Station.Name );
stationcode.options[i].text = obj.Point[i].Station.Name;
stationcode.options[i].value = obj.Point[i].Station.code;
}
}
}
}
JSONの処理（駅名検索）：CSJS

 JSONPの取得
 JSONPはJavaScriptの関数として定義されているので、scriptタグ
としてHTMLページの中に埋め込むようにする！
－ 24 －
var siteInfo = "http://api.calil.jp/library";
var apikey = "自分で取得したアプリケーションキー";
var prefId = document.getElementById( "#{id:prefecture1}" ).value;
var cityId = document.getElementById( "#{id:city1}" ).value;
var script = document.createElement( "script" );
script.src = siteInfo + “?appkey=” + apikey + “&pref=” + prefId + “&city=” + cityId +
“&format=json&callback=callback”; // ここでURL文字列を生成している。callback=は関数名
document.head.appendChild(script); // ここでページに追加している
document.head.removeChild(script);
JSONPの取得（図書館IDの検索）：CSJS

 JSONPの処理
 JSONPはJavaScriptの関数として定義されているので、呼び出し側
でコールバック関数として定義する
－ 25 －
function callback(data) { // 関数名はJSONP取得時に決めている。また、引数がJSONデータを表している
var libname1 = document.getElementById( "#{id:libraryName1}" );
libname1.options.length = 0;
var libraries = data[0].formal; // formalという要素にアクセスしているが、配列なのでdata[0].～となる
var systemids = data[0].systemid;
for ( var i=1; i<data.length; i++ ) {
libraries = libraries + "," + data[i].formal;
systemids = systemids + "," + data[i].systemid;
}
var libArray = libraries.split( "," );
var sysidArray = systemids.split( "," );
for ( var i=0; i<libArray.length; i++ ) { // ここで「図書館名」というコンボボックスに選択肢を埋め込んでいる
libname1.options[i] = new Option( libArray[i] );
libname1.options[i].text = libArray[i];
libname1.options[i].value = sysidArray[i];
}
}
JSONPの処理（図書館IDの検索）：CSJS

－ 26 －
応用を考えよう！

応⽤を考えよう！
 Bluemixのサービスとの連携
 Node-RED + Speech To Text + Twilio + XPages
 音声データをテキスト化したものをJSONデータに変換
 音声での入力が可能に！
－ 27 －
タイトルに「XPages」が
付く書籍を検索してくだ
さい。
XPages書籍名：
書式検索
検索結果：

応⽤を考えよう！
 Notes DBのデータを外部に公開
 ワークフローDB + JSON
 ワークフローの承認済みデータをJSONで提供
 静的な連携ではなく、動的な連携が可能に！
 マスタDB + JSON
 Notes DBで作成したマスタDBを別のWebアプリケーションから参照
可能になる！
－ 28 －

－ 29 －
[参考資料]

[参考資料]
 DAS/REST関連のWebサイト
 IBM Domino Access Services 9.0.1
 IBM Notes and Domino Application Development wiki内のサイト（英語）
http://ibm.co/1wGMxzh
 デモで利用したツール
 REST Client
 Firefoxのアドオン。Response Headersの詳細も確認できる。日本語はUnicodeをデ
コード表示してくれるので分かり易い。
http://restclient.net/
 JSON Viewer
 Firefoxのアドオン。JSONドキュメントをブラウザー内で階層化表示してくれる。ダ
ブルバイトもデコードしてくれるので、とても見やすい。
http://jsonview.com/
－ 30 －

[参考資料]
 デモで利用したWeb APIサービス
 楽天Webサービス
 楽天ブックス書籍検索API等、楽天のデータや機能を提供してくれるAPI群
http://webservice.rakuten.co.jp/
 カーリル図書館API
 全国6,000の図書館に簡単アクセスして、リアルタイム蔵書検索を可能にするAPI群
https://calil.jp/doc/api.html
 駅すぱあとWebサービス
 ビジネス向け経路検索のクラウド型API/GUIソリューション
https://ekiworld.net/service/sier/webservice/index.html
 OnTime Group Calendar API Explorer
 OnTime Group Calendar内にあるOnTime Open APIをエミュレートするための
ツール
http://demo.ontimesuite.com/apiexplorer
－ 31 －

－ 32 －
ご清聴ありがとうございました
REST APIやJSONは
IBM Notes/Dominoに
+αをもたらします！
是非、覚えましょう！！

免責事項について
本資料は、個人的な見解によるものです。情報の内容につい
ては万全を期しておりますが、その内容を保証するものでは
ありません。
本資料の情報は、使⽤先の責任において使⽤されるべきもの
であることを、あらかじめご了承ください。
執筆者の承諾なしに、コピー、複製、他のメディアに転載す
る事はご遠慮ください。
当資料に記載された製品名または会社名はそれぞれの各社の
商標または登録商標です。
－ 33 －

XPagesDay 2015 RESTの総復習

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to XPagesDay 2015 RESTの総復習

Similar to XPagesDay 2015 RESTの総復習 (20)

More from Masahiko Miyo

More from Masahiko Miyo (14)

XPagesDay 2015 RESTの総復習