Skip to Content

はじめに

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. 1. Fitbit Developer API(https://dev.fitbit.com/jp)でアプリケーションを登録し、下記を取得します
    1. OAuth2.0 Client ID
    2. Client Secret
  2. 2. Eclipse上でSAPUI5アプリケーションプロジェクトを実装します
    1. 1. 初期ページのロード時にOAuth認証を行います
    2. 2. RESTサービスを呼び出し、取得情報をJSONフォーマットで受け取ります
    3. 3. JSONフォーマットのデータをSAPUI5 Tableコントロールに渡す形式に変換します
    4. 4. 変換後のJSONフォーマットのデータのSAPUI5コントロールにマッピングします
  3. 3. SAP HCPにアプリケーションをDeployします

今回使用したのはFitBit Charger HRというデバイスです。FitBit Charger HRで計測されたデータは、私のAndroid Device経由でFitBitのクラウドサーバーにアップロードされます。今回のSAPUI5アプリケーションでは、このクラウドサーバーにアップロードされたデータをREST APIにより取得し、SAPUI5テーブルに表示しています。

アプリケーションの実行結果イメージは下記の通りです。



Result.gif

なお、以下のステップを進めるにあたり、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を確認して、その値を入力してください。


DevFitBit.GIF


登録後のアプリケーションは”MANAGE MY APPS”タブから確認し、”OAuth 2.0 Client ID”, “Client Secret”等の情報を確認します。


DevFitBitApp.GIF


FitBit側のAPIを呼ぶだめの準備は以上です。以下で実際にクライアントとなるSAPUI5アプリケーションを開発します。


Eclipseでのプロジェクト作成

今回は、ローカルPC上でテストしながら開発し、アプリケーションをSAP HCPにデプロイする形で進めたので、PCにインストールしたEclipseを利用しました。

アプリケーション作成のためには、最初にEclipseのプロジェクトを作成します。

  メニューから、

”File>New>Project…”と選択すると、プロジェクト種別を選択するポップアップ窓が現れるので、

SAPUI5 Application Development>Application Projectと選択し、アプリケーションを作成します。


EclipseCreateProject.gif


アプリケーション名を入力し、”Next”ボタンを押して先に進みます。


EclipseCreateProjectType.gif.png

Development Paradigmは何でもよいのですが、今回は画面定義をXMLで行うので、適当な名前を入力したうえで、XMLを選択し、”Finish”ボタンを押してアプリケーションを作成します。


SelectParadigm.gif


プロジェクト作成され、ページの動作を定義するJavaScriptファイルであるFioriBit2.controller.jsと、画面構成を定義するFioriBit2.view.xmlファイルが生成されていることが分かります。これらのコントローラーとビューの名前は、Eclipseプロジェクト作成の最後のステップで入力した”Name”の値が反映されます。


Project.gif


プロジェクトの作成は以上となります。以下ではアプリケーションの実装を実際に行います。


OAuth認証処理の実装からFitBitAPI呼び出し

画面遷移のあり、ある程度の長い時間利用されるアプリケーションを開発する場合は、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);

FitBitAPIドキュメント(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%2Fexample.com%2Ffitb…


といった形になります。

この呼び出しにより、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 codetokenParams.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は以下のjQueryajax呼び出しの応答でaccess_tokenという変数に含まれるので、ajax呼び出しが成功した場合に実行される処理の中で、このaccess_tokenを使ってAPIを呼び出します。

Step 3

実際に下記のjQueryajax呼び出しを通じて、FitBitAPIを呼び出し、ユーザーデータを取得します。

$.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データが含まれています。このデータをSAPUI5Tableコントロールにマッピングできるよう、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”を取り除いてご使用ください。




To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply