はじめに
SAPUI5アプリケーションから、外部のRESTサービスを呼び出して、結果をSAPUI5に表示するまでの一連の流れを解説します。なお、実際の業務での利用にあたっては、セキュリティ面の考慮は別途行う点がある点に注意して下さい。
本投稿におけるアプリケーション実装上のポイントは、
- JavaScript + JQueryによるOAuth 2.0認証
- サービスプロバイダから取得したJSONデータのSAUUI5コントロールへのマッピング
にあります。今回は上記にフォーカスし、画面フローや、ログインは考慮していないので、ユーザーIDなどはJavaScriptコード中にハードコードしています。
OAuthの認証にあたっては、利用する外部サービス毎に基本的な流れは同じですが、サービスプロバイダ固有の仕様は確認しておく必要があります。また、認証の際のRedirect処理を考慮する必要があります。
サービスプロバイダから取得したJSONデータをSAPUI5にマッピングするにあたって、データ構造をSAPUI5コントロールに適したフォーマットに変換する必要があります。本ブログでは上記2点を中心に解説します。
今回の開発した環境は以下の通りです
- 開発環境 Version: Mars.2 Release (4.5.2) + SAP HANA Cloud Platform Tools for Java 1.62.0
- テスト環境 Java EE 6 Web Profile Server
- Deploy環境 SAP HANA Cloud Platform ()
- 外部APIサービスプロバイダ Fitbit Developer API(https://dev.fitbit.com/jp)
外部APIサービスについて、今回はFitBit(https://www.fitbit.com/)のAPIサービスであるFitbit Developer API(https://dev.fitbit.com/jp)を利用しました。こちらのサイトはAPIについて分かり易いヘルプがあり、認証のシミュレーションも容易にWeb上で実行できるので、開発の際に流れを確認できる点で今回は助かりました。他にGoogle Driveについても試しましたが、サービス利用の基本的な流れは変わりありません。
開発のフローは以下になります。
- 1. Fitbit Developer API(https://dev.fitbit.com/jp)でアプリケーションを登録し、下記を取得します
- OAuth2.0 Client ID
- Client Secret
- 2. Eclipse上でSAPUI5アプリケーションプロジェクトを実装します
- 1. 初期ページのロード時にOAuth認証を行います
- 2. RESTサービスを呼び出し、取得情報をJSONフォーマットで受け取ります
- 3. JSONフォーマットのデータをSAPUI5 Tableコントロールに渡す形式に変換します
- 4. 変換後のJSONフォーマットのデータのSAPUI5コントロールにマッピングします
- 3. SAP HCPにアプリケーションをDeployします
今回使用したのはFitBit Charger HRというデバイスです。FitBit Charger HRで計測されたデータは、私のAndroid Device経由でFitBitのクラウドサーバーにアップロードされます。今回のSAPUI5アプリケーションでは、このクラウドサーバーにアップロードされたデータをREST APIにより取得し、SAPUI5テーブルに表示しています。
アプリケーションの実行結果イメージは下記の通りです。
なお、以下のステップを進めるにあたり、http://go.sap.com/developer/tutorials/hcp-java-eclipse-setup.html
以下のチュートリアルを実施して、Eclipseの開発環境や、Eclipseからアプリケーションを動作させるためのサーバーが設定してあることを前提としております。
FitBitアプリケーションの登録
https://dev.fitbit.com/にログインしてアプリケーションを登録します。アプリケーション多タイプは”Server”を選択し、他の必須項目を埋めてください。
また、”Callback URL”というフィールドについては、本アプリケーションは認証後に呼び出し元のページに戻る想定で作成しているので、アプリケーションのURLを設定しておきます。この設定が適切でないと、認証のプロセスがうまくいきません。私の場合、アプリケーション名を”FioriBit”としたので、Eclipseからローカル環境でテストするために、http://localhost:8080/FioriBit/
というURLにアクセスしてアプリケーションを利用しました。認証後のCallback先を同じURLにしたかったので、この”Callback URL”に
http://localhost:8080/FioriBit/
をセットしました。HCPから呼びだすためには、HCP上にアプリケーションをデプロイしてから、HCP Cockpit上でアプリケーションURLを確認して、その値を入力してください。
登録後のアプリケーションは”MANAGE MY APPS”タブから確認し、”OAuth 2.0 Client ID”, “Client Secret”等の情報を確認します。
FitBit側のAPIを呼ぶだめの準備は以上です。以下で実際にクライアントとなるSAPUI5アプリケーションを開発します。
Eclipseでのプロジェクト作成
今回は、ローカルPC上でテストしながら開発し、アプリケーションをSAP HCPにデプロイする形で進めたので、PCにインストールしたEclipseを利用しました。
アプリケーション作成のためには、最初にEclipseのプロジェクトを作成します。
メニューから、
”File>New>Project…”と選択すると、プロジェクト種別を選択するポップアップ窓が現れるので、
SAPUI5 Application Development>Application Projectと選択し、アプリケーションを作成します。
アプリケーション名を入力し、”Next”ボタンを押して先に進みます。
Development Paradigmは何でもよいのですが、今回は画面定義をXMLで行うので、適当な名前を入力したうえで、XMLを選択し、”Finish”ボタンを押してアプリケーションを作成します。
プロジェクト作成され、ページの動作を定義するJavaScriptファイルであるFioriBit2.controller.jsと、画面構成を定義するFioriBit2.view.xmlファイルが生成されていることが分かります。これらのコントローラーとビューの名前は、Eclipseプロジェクト作成の最後のステップで入力した”Name”の値が反映されます。
プロジェクトの作成は以上となります。以下ではアプリケーションの実装を実際に行います。
OAuth認証処理の実装からFitBitのAPI呼び出し
画面遷移のあり、ある程度の長い時間利用されるアプリケーションを開発する場合は、Access Tokenの取得の際に得られるRefresh Tokenの取得などが必要となりますが、今回は単純化のため、一回切りのAPI呼び出しを想定しているので、下記のステップでAPI呼び出しまでの認証処理を実施しました。
- Step 1. Authorizatoin Codeの取得
- Step 2. Accecss Tokenの取得
- Step 3. APIの呼び出し
Step 1:
Authorizatoin Codeの取得は下記のコードで実施しています。
window.location.href=authHost+ '?' + $.param(codeParams);FitBitのAPIドキュメント(https://dev.fitbit.com/docs/oauth2/)の”WARNING - DO NOT embed the Authorization Page”を読むと、内部的にひそかに呼び出すことは出来ないそうなので、ここはURLをブラウザのアドレスバーに入力するのと同様の動作を狙って上記のように記述して、Authorizatoin Codeを取得しました。
実際に呼び出されるURLは
https://www.fitbit.com/oauth2/authorize?response_type=code&client_id=22942C&redirect_uri=http%3A%2F%...;
といった形になります。
この呼び出しにより、Redirect先のページが下記のように呼び出されるので、
http://localhost:8080/FioriBit/?code=<Authorization Code>
ここからAuthorization Codeを下記のコードにより抽出します。
var regexS = "[\\?&]" + 'code' + "=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( location.href );
var code = results == null ? null : results[1];
本アプリケーションでは、Authorization codeをtokenParams.codeという変数にセットし、次のステップに進んでいます(全体コード参照)
Step 2
Authorization Codeを入手したら、下記の呼び出しによりAccess Tokenを入手します。
$.ajax({
url: tokenHost,
type: "POST",
dataType: "json",
async: false,
contentType: "application/x-www-form-urlencoded",
headers: {
'Authorization': codeParams.authorization
},
data: $.param(tokenParams)
})
Access Tokenは以下のjQueryのajax呼び出しの応答でaccess_tokenという変数に含まれるので、ajax呼び出しが成功した場合に実行される処理の中で、このaccess_tokenを使ってAPIを呼び出します。
Step 3
実際に下記のjQueryのajax呼び出しを通じて、FitBitのAPIを呼び出し、ユーザーデータを取得します。
$.ajax({
url: 'https://api.fitbit.com/1/user/-/profile.json',
type: 'GET',
dataType: "json",
async: false,
headers: {
'Authorization': "Bearer " + data.access_token
}
})
取得データのSAPUI5 Tableへのデータのマッピング
API呼び出しの応答(ここではresponse)にFitBitから取得したJSONデータが含まれています。このデータをSAPUI5のTableコントロールにマッピングできるよう、JSONデータの変換を以下のように実施しました。
var jsonString = '{"rows": [';
$.each(response.user, function(n, val){
jsonString += '{"key": "' + n + '",' + '"value": "' + val + '"},';
})
jsonString = jsonString.substr( 0, jsonString.length-1 ) ;
jsonString += ']}';
var jsonData = JSON.parse(jsonString);
console.log(jsonData);
上記で変換したデータをview側で表示できるようモデルとしてセットします。
var oModel = new sap.ui.model.json.JSONModel(jsonData);
sap.ui.getCore().setModel(oModel);
このようにセットしたデータは”FioriBit2.view.xml”中で以下のようにして、利用します
<Page title="My FitBit Data">
<content>
<Table headerText="MyData" items="{/rows}">
<columns>
<Column>
<header>
<Label text="key" />
</header>
</Column>
<Column>
<header>
<Label text="value" />
</header>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier title="{key}" />
<Text text="{value}" />
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Page>
上記まで完了したらアプリケーションとして実行して、表示することができます。実行するには、プロジェクトの上でマウスを右クリックし、Run As…>1 Run On Serverと進み、実行したいサーバーを指定して、アプリケーションを実行することができます。うまくいけば、ブラウザ上に取得された情報が表示されるでしょう。
まとめ
取得したデータを表示したかったので、今回はSAPUI5という選択をしました。多くのユーザーのデータをHANAに保存して利用する場合は、SAP HANA XSやサーブレットを利用した実装をした方がよいでしょう。
*サンプルのViewファイルとContorllerファイルを添付しました。拡張子の".txt"を取り除いてご使用ください。
