Mais conteúdo relacionado
Semelhante a XPagesDay 2015 RESTの総復習 (20)
Mais de Masahiko Miyo (14)
XPagesDay 2015 RESTの総復習
- 2. ©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
- 3. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
アジェンダ
RESTについて
RESTとは?
JSON/JSONPとは?
DominoにおけるREST/JSON
設定方法のおさらい
実際のデータを見てみよう
XPagesアプリを作ってみた!
JSONPで返してくる場合
JSONで返してくる場合
OnTime Open APIを使った場合
アプリのソースを見てみよう!
応用を考えよう!
Bluemixのサービスとの連携
Notes DBのデータを外部に公開
- 3 -
- 4. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
- 4 -
RESTについて
- 5. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
RESTについて
RESTとは?
HTTP ベースの軽量なWeb API を提供
データにはXML やJSON などの形式を利⽤
HTTP のGET/POST/PUT/DELETE メソッドでCRUD 操作を実現
- 5 -
- 6. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
RESTについて
RESTとは?
HTTP ベースの軽量なWeb API を提供
データにはXML やJSON などの形式を利⽤
HTTP のGET/POST/PUT/DELETE メソッドでCRUD 操作を実現
- 6 -
HTTPで特定のURLにアクセスすると、
JSONのデータが返ってくるよ!
要するに・・・
ということです!
- 7. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
RESTについて
JSON/JSONPとは?
JavaScriptにおけるオブジェクトのように記述できる軽量なデータ
フォーマット
JSONPはJSONを関数呼び出しの形式にしたもの
クロスドメインでの利⽤をしやすくするため
- 7 -
- 8. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
RESTについて
JSON/JSONPとは?
JavaScriptにおけるオブジェクトのように記述できる軽量なデータ
フォーマット
JSONPはJSONを関数呼び出しの形式にしたもの
クロスドメインでの利⽤をしやすくするため
- 8 -
XPagesで利用するのに適したデータ形式
要するに・・・
ということです!
- 9. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
- 9 -
Dominoにおける
REST/JSON
- 10. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
DominoにおけるREST/JSON
設定方法のおさらい
1. Dominoディレクトリのサーバ文書内にある「Domino アクセス
サービス」の「有効なサービス」にサービス名を設定する。
2015年11月時点で設定可能なのは「Data, TravelerAdmin, Calendar,
Mail, FreeBusy」
2. サーバ文書を保存後、
Dominoサーバコンソールで
tell http refresh
と入力!
- 10 -
- 11. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
DominoにおけるREST/JSON
設定方法のおさらい
3. Notes DBの「データベースプロパティ」の[詳細]タブ(一番右)
を開く
4. 「IBM Domino データサービスを許可」の
値を「ビューと文書」に変更する
- 11 -
ODSのバージョンは問わない!
- 12. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
DominoにおけるREST/JSON
設定方法のおさらい
5. Domino Designerでビュープロパティの[詳細]タブ(右か
ら二番目)を開き、「IBM Domino データサービスの操
作を許可」にチェックをつける
6. ビューを保存!
- 12 -
RESTアクセスを許可していないビューは
「HTTP403」エラーになる
- 13. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
DominoにおけるREST/JSON
実際のデータを見てみよう
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. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
DominoにおけるREST/JSON
- 14 -
- 15. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
- 15 -
XPagesアプリを
作ってみた!
- 16. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
XPagesアプリを作ってみた!
今回作成したXPagesアプリケーション
1. 「書籍/蔵書検索」アプリケーション
JSONPの形式で返す
2. 「路線検索」アプリケーション
JSONの形式で返す
3. 「OnTime Open API」サンプル
POSTメソッドでアクセスすることでデータを返す
- 16 -
1. 2. のアプリケーションは、
Bluemix上に構築してみました!!
http://miyo001.eu-gb.mybluemix.net/
- 17. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
XPagesアプリを作ってみた!
- 17 -
- 18. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
- 18 -
アプリのソースを
見てみよう!
- 19. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
アプリのソースを見てみよう!
アプリケーションの肝
HTTPリクエストの送信
メソッドの種類を確認
リクエストデータの有無を確認
JSONデータを取得する
JSON形式なのかJSONP形式かを確認
JSONデータを処理する
JSON形式なのかJSONP形式かを確認
- 19 -
- 20. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
アプリのソースを見てみよう!
HTTPリクエストの送信
リクエストの種類(メソッド)を確認する
OnTime Open APIの場合、GETメソッドではなく、POSTメソッドで
あることに注意!
HTTPリクエストを送信する際に、リクエスト⽤のJSONデータを生
成しておくこと!
JavaScriptの連想配列として作成したものをJSON.stringfy関数で変
換
- 20 -
- 21. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
アプリのソースを見てみよう!
- 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
- 22. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
アプリのソースを見てみよう!
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
- 23. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
アプリのソースを見てみよう!
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
- 24. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
アプリのソースを見てみよう!
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
- 25. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
アプリのソースを見てみよう!
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. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
- 26 -
応用を考えよう!
- 27. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
応⽤を考えよう!
Bluemixのサービスとの連携
Node-RED + Speech To Text + Twilio + XPages
音声データをテキスト化したものをJSONデータに変換
音声での入力が可能に!
- 27 -
タイトルに「XPages」が
付く書籍を検索してくだ
さい。
XPages書籍名:
書式検索
検索結果:
- 28. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
応⽤を考えよう!
Notes DBのデータを外部に公開
ワークフローDB + JSON
ワークフローの承認済みデータをJSONで提供
静的な連携ではなく、動的な連携が可能に!
マスタDB + JSON
Notes DBで作成したマスタDBを別のWebアプリケーションから参照
可能になる!
- 28 -
- 29. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
- 29 -
[参考資料]
- 30. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
[参考資料]
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 -
- 31. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
[参考資料]
デモで利用した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. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
- 32 -
ご清聴ありがとうございました
REST APIやJSONは
IBM Notes/Dominoに
+αをもたらします!
是非、覚えましょう!!
- 33. ©2015 ef Co., Ltd. All rights Reserved.
f o r c ee f f e c t
免責事項について
本資料は、個人的な見解によるものです。情報の内容につい
ては万全を期しておりますが、その内容を保証するものでは
ありません。
本資料の情報は、使⽤先の責任において使⽤されるべきもの
であることを、あらかじめご了承ください。
執筆者の承諾なしに、コピー、複製、他のメディアに転載す
る事はご遠慮ください。
当資料に記載された製品名または会社名はそれぞれの各社の
商標または登録商標です。
- 33 -