SAPUI5 MVC Apps のSnowflake にリアルタイム連携を実現

こんにちは！ドライバー周りのヘルプドキュメントを担当している古川です。

この記事では、バックエンドデータベースに書き込むことなくSnowflake API の機能を活用するSAPUI5 アプリを作成するために、CData API Server およびADO.NET Provider for Snowflake (または250+ の他のADO.NET Providers) を使用する方法を説明します。API Server は、サーバー上で実行されてSnowflake のOData フィードを生成する軽量のWeb アプリケーションです。OData は、Web を介したリアルタイムデータアクセスの標準であり、SAPUI5 およびOpenUI5 にビルトインのサポートがあります。

CData API Server とは？

CData API Server は、以下のような特徴を持ったAPI 開発ツールです。

• あらゆるデータソースからAPI を生成：SQL Server、MySQL、Oracle、PostgreSQL、DB2 などのRDB、Excel、CSV、Google スプレッドシートなどCData の充実したコネクタライブラリを利用できます。
• 主要なデータ形式に対応：OData、REST、JSON、CSV / TSV など、主要な形式に対応しています。
• 一元管理でAPI を効率運用：単一の管理プラットフォーム上でAPI の更新、停止、共有が可能です。
• ノーコードでシンプルな設定：GUI ベースのインターフェースを使用して、複雑なコーディングなしでAPI を作成・セキュアに公開できます。

詳しくは、こちらの製品資料をご確認ください。

API Server の設定

以下のリンクからAPI Server の無償トライアルをスタートしたら、セキュアなSnowflake OData サービスを作成していきましょう。

デプロイ

API Server は内蔵のJetty サーバー上で動作します。Windows をお使いの場合は、スタンドアロンサーバーとして起動するか、IIS に組み込んで使用することが可能です。また、お使いのJava サーブレットコンテナにAPI Server のWAR ファイルを配置して実行することもできます。具体的なセットアップ方法については、こちらのヘルプドキュメントをご覧ください。

Snowflake への接続

Salesforce Connect からSnowflake のデータを操作するには、まずSnowflake への接続を作成・設定します。

1. API Server にログインして、「Connections」をクリック、さらに「接続を追加」をクリックします。
2. 「接続を追加」をクリックして、データソースがAPI Server に事前にインストールされている場合は、一覧から「Snowflake」を選択します。
3. 事前にインストールされていない場合は、コネクタを追加していきます。コネクタ追加の手順は以下の記事にまとめてありますので、ご確認ください。
   CData コネクタの追加方法はこちら >>
4. それでは、Snowflake への接続設定を行っていきましょう！

5. Snowflake データベースに接続するには、認証に加えて次のプロパティを設定します。

   • Url：自身のSnowflake URL、例えばhttps://orgname-myaccount.snowflakecomputing.com。
     • Legacy URL を使用する場合：https://myaccount.region.snowflakecomputing.com
     • 自身のURL を見つけるには：
       1. Snowflake UI の左下にある自身の名前をクリックします。
       2. Account ID にカーソルを合わせます。
       3. Copy Account URL アイコンをクリックして、アカウントURL をコピーします。
   • Database（オプション）：によって公開されるテーブルとビューを、特定のSnowflake データベースのものに制限します。
   • Schema（オプション）：本製品によって公開されるテーブルとビューを、特定のSnowflake データベーススキーマのものに制限します。

   Snowflake への認証

   本製品は、Snowflake ユーザー認証、フェデレーション認証、およびSSL クライアント認証をサポートしています。認証するには、User とPassword を設定し、AuthScheme プロパティで認証メソッドを選択します。

   キーペア

   ユーザーアカウントに定義されたプライベートキーを使用してセキュアなトークンを作成することにより、キーペア認証を使用して認証できます。この方法で接続するには、AuthScheme をPRIVATEKEY に設定し、次の値を設定します。

   • User：認証に使用するユーザーアカウント。
   • PrivateKey：プライベートキーを含む.pem ファイルへのパスなど、ユーザーに使用されるプライベートキー。
   • PrivateKeyType：プライベートキーを含むキーストアの種類（PEMKEY_FILE、PFXFILE など）。
   • PrivateKeyPassword：指定されたプライベートキーのパスワード。

   その他の認証方法は、ヘルプドキュメントの「Snowflake への認証」セクションを参照してください。

6. 接続情報の入力が完了したら、「保存およびテスト」をクリックします。

Snowflake データベースに接続するには、認証に加えて次のプロパティを設定します。

• Url：自身のSnowflake URL、例えばhttps://orgname-myaccount.snowflakecomputing.com。
  • Legacy URL を使用する場合：https://myaccount.region.snowflakecomputing.com
  • 自身のURL を見つけるには：
    1. Snowflake UI の左下にある自身の名前をクリックします。
    2. Account ID にカーソルを合わせます。
    3. Copy Account URL アイコンをクリックして、アカウントURL をコピーします。
• Database（オプション）：によって公開されるテーブルとビューを、特定のSnowflake データベースのものに制限します。
• Schema（オプション）：本製品によって公開されるテーブルとビューを、特定のSnowflake データベーススキーマのものに制限します。

Snowflake への認証

本製品は、Snowflake ユーザー認証、フェデレーション認証、およびSSL クライアント認証をサポートしています。認証するには、User とPassword を設定し、AuthScheme プロパティで認証メソッドを選択します。

キーペア

ユーザーアカウントに定義されたプライベートキーを使用してセキュアなトークンを作成することにより、キーペア認証を使用して認証できます。この方法で接続するには、AuthScheme をPRIVATEKEY に設定し、次の値を設定します。

• User：認証に使用するユーザーアカウント。
• PrivateKey：プライベートキーを含む.pem ファイルへのパスなど、ユーザーに使用されるプライベートキー。
• PrivateKeyType：プライベートキーを含むキーストアの種類（PEMKEY_FILE、PFXFILE など）。
• PrivateKeyPassword：指定されたプライベートキーのパスワード。

その他の認証方法は、ヘルプドキュメントの「Snowflake への認証」セクションを参照してください。

API Server のユーザー設定

次に、API Server 経由でSnowflake にアクセスするユーザーを作成します。「Users」ページでユーザーを追加・設定できます。やってみましょう。

1. 「Users」ページで ユーザーを追加をクリックすると、「ユーザーを追加」ポップアップが開きます。
2. 次に、「ロール」、「ユーザー名」、「権限」プロパティを設定し、「ユーザーを追加」をクリックします。
3. その後、ユーザーの認証トークンが生成されます。各ユーザーの認証トークンとその他の情報は「Users」ページで確認できます。

Snowflake 用のAPI エンドポイントの作成

ユーザーを作成したら、Snowflake のデータ用のAPI エンドポイントを作成していきます。

1. まず、「API」ページに移動し、 「 テーブルを追加」をクリックします。
2. アクセスしたい接続を選択し、次へをクリックします。
3. 接続を選択した状態で、各テーブルを選択して確認をクリックすることでエンドポイントを作成します。

OData のエンドポイントを取得

以上でSnowflake への接続を設定してユーザーを作成し、API Server でSnowflake データのAPI を追加しました。これで、OData 形式のSnowflake データをREST API で利用できます。API Server の「API」ページから、API のエンドポイントを表示およびコピーできます。

ビューの作成

この記事では、ユーザーはSAPUI5 テーブルコントロールを介してSnowflake を表示および操作します。テーブルのカラムは、API Server のAPI エンドポイントから取得したメタデータから自動的に検出されます。次のテーブルを別のView.view.xml ファイルで定義します。

<mvc:View
  controllerName="sap.ui.table.sample.OData2.Controller"
  xmlns="sap.ui.table"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:u="sap.ui.unified"
  xmlns:c="sap.ui.core"
  xmlns:m="sap.m">
  <m:Page
    showHeader="false"
    enableScrolling="false"
    class="sapUiContentPadding">
    <m:content>
      <Table
        id="table"
        selectionMode="MultiToggle"
        visibleRowCount="10"
        enableSelectAll="false"
        rows="{/Products}"
        threshold="15"
        enableBusyIndicator="true"
        columns="{
          path: 'meta>/dataServices/schema/[${namespace}===\'CData\']/entityType/[${name}===\'Products\']/property',
          factory: '.columnFactory'
        }">
        <toolbar>
          <m:Toolbar>
            <m:Title text="Snowflake Products"></m:Title>
          </m:Toolbar>
        </toolbar>
        <noData>
          <m:BusyIndicator class="sapUiMediumMargin"/>
        </noData>
      </Table>
    </m:content>
  </m:Page>
</mvc:View>

モデルとコントローラーの作成

SAPUI5 では、OData クエリを作成する必要はありません。ODataModel インスタンスはアプリケーションのデータアクセスコマンドを処理します。 次に、API Server はクエリをSnowflake API 呼び出しに変換します。

コントローラーはユーザー入力を処理し、ビューを通じてユーザーに情報を表示します。新しいファイルであるController.controller.js でコントローラーを定義します。onInit 関数でモデルをインスタンス化します。API Server へのURL、API Server のOData エンドポイントへのアクセスを許可されたユーザー、そしてユーザーの認証トークンのプレースホルダー値を置き換える必要があります。

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/ui/model/odata/v2/ODataModel",
  "sap/ui/model/json/JSONModel",
  "sap/ui/table/Column",
  "sap/m/Text",
], function(Controller, ODataModel, JSONModel, Column, Text ) {
  "use strict";


  return Controller.extend("sap.ui.table.sample.OData2.Controller", {

    onInit : function () {

      var oView = this.getView();
      var oDataModel = new ODataModel("http://myserver/api.rsc/",{user:"MyUser", password:"MyAuthToken"});

      oDataModel.getMetaModel().loaded().then(function(){
        oView.setModel(oDataModel.getMetaModel(), "meta");
      });
      oView.setModel(oDataModel);

      var oTable = oView.byId("table");
      var oBinding = oTable.getBinding("rows");
      var oBusyIndicator = oTable.getNoData();
      oBinding.attachDataRequested(function(){
      oTable.setNoData(oBusyIndicator);
      });
      oBinding.attachDataReceived(function(){
        oTable.setNoData(null); //use default again ("no data" in case no data is available)
      });
    },

    onExit : function () {
    },

    columnFactory : function(sId, oContext) {
      var oModel = this.getView().getModel();
      var sName = oContext.getProperty("name");
      var sType = oContext.getProperty("type");
      var iLen = oContext.getProperty("maxLength");
      iLen = iLen ? parseInt(iLen, 10) :10;

      return new Column(sId, {
        sortProperty: sName,
        filterProperty: sName,
        width: (iLen > 9 ? (iLen > 50 ?15 :10) :5) + "rem",
        label: new sap.m.Label({text: "{/#Products/" + sName + "/@name}"}),
        hAlign: sType && sType.indexOf("Decimal") >= 0 ?"End" :"Begin",
        template: new Text({text: {path: sName}})
      });
    }

  });

});

アプリケーションロジックの説明

アプリケーションのリソースを含むコンポーネントを作成します。Component.js で以下を定義します。

sap.ui.define([
  'sap/ui/core/UIComponent'
], function(UIComponent) {
  "use strict";

  return UIComponent.extend("sap.ui.table.sample.OData2.Component", {
    metadata : {
      rootView : "sap.ui.table.sample.OData2.View",
      dependencies : {
        libs : [
          "sap.ui.table",
          "sap.ui.unified",
          "sap.m"
        ]
      },

      config : {
        sample : {
          stretch : true,
          files : [
            "View.view.xml",
            "Controller.controller.js"
          ]
        }
      }
    }
  });

});

OpenUI5 をブーストラップして起動

MVC アプリケーションを完了するには、ブートストラップと初期化コードを追加します。これらをindex.html に直接追加します。

<!DOCTYPE HTML>

<html>
<head>
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <meta charset="utf-8">
  <title>Snowflake Products</title>

  <script id="sap-ui-bootstrap"
    src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-libs="sap.m"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-xx-bindingSyntax="complex"
    data-sap-ui-preload="async"
    data-sap-ui-compatVersion="edge"
    data-sap-ui-resourceroots='{"sap.ui.table.sample.OData2": "./", "sap.ui.demo.mock": "mockdata"}'>
  </script>

  <!-- application launch configuration -->
  <script>

      sap.ui.getCore().attachInit(function() {
        new sap.m.App ({
          pages: [
                new sap.m.Page({
                    title: "Snowflake Products",
                    enableScrolling : false,
                  content: [ new sap.ui.core.ComponentContainer({
                  height :"100%", name : "sap.ui.table.sample.OData2"
                })]
            })
          ]
      }).placeAt("content");
    });

  </script>
</head>
  <!-- UI Content -->
<body class="sapUiBody" id="content" role="application">
</body>
</html>

結果のSAPUI5 テーブルコントロールは、リモートSnowflake 内のテーブルへの変更を反映します。これで、現在のSnowflake を参照および検索できます。