ノーコードアプリ開発プラットフォームUnqork でXML を連携利用

ノーコードアプリ開発プラットフォームUnqork と、XML データをCData Connect Server 経由で連携する方法

杉本和也
リードエンジニア
最終更新日：2021-03-10

こんにちは！リードエンジニアの杉本です。

Unqork（www.unqork.com/）は誰でも簡単に作れるクラウドベースのノーコードアプリ開発プラットフォームです。フォーム画面とワークフロー画面を活用して、業務プロセスをノーコードで作成できるのが特徴です。Unqork では、外部サービスをデータソースに使用することが可能です。CData Connect Server は、XML データを使いやすい汎用REST API エンドポイントとして公開し、Unqork でのXML データの連携利用を可能にします。
本記事では、XML データをUnqork でテーブルとしてインポートする方法を説明します。

ホスティングについて

Unqork からCData Connect Server に接続するには、利用するConnect Server インスタンスをネットワーク経由での接続が可能なサーバーにホスティングして、URL での接続を設定する必要があります。CData Connect がローカルでホスティングされており、localhost アドレス（localhost:8080 など）またはローカルネットワークのIP アドレス（192.168.1.x など）からしか接続できない場合、Unqork はCData Connect Server に接続することができません。

クラウドホスティングでの利用をご希望の方は、AWS Marketplace やGCP Marketplace で設定済みのインスタンスを提供しています。

XML の汎用REST API を作成

CData Connect Server は、直観的なPoint-and-click インターフェースでデータソースへの接続およびAPI エンドポイント作成を行います。

Connect Server にログインして、Databases をクリックします。
利用できるデータソースアイコンから"XML" を選択します。
XML に接続するために必要なプロパティを入力します。
データソースを認証するには、データプロバイダーのドキュメント内の「はじめに」セクションをご覧ください。データプロバイダーはXML API を双方向データベーステーブルとしてモデル化し、XML ファイルをread-only ビュー（ローカルファイル、人気のクラウドサービスに格納されたファイル、およびFTP サーバー）としてモデル化します。 HTTP Basic、Digest、NTLM、OAuth、およびFTP を含む主な認証スキームはサポートされています。認証のガイドについては、データプロバイダーのドキュメント内の「はじめに」セクションをご覧ください。

URI と認証値を設定した後で、DataModel を設定することでデータの構造によりよくマッチするようデータの抽象化を調整できます。

DataModel プロパティはデータがどのようにテーブルとして抽象化されるかを制御するプロパティであり、次の基本的な設定を調整します。
- Document（デフォルト）：XML データのトップレベルのドキュメントビューをモデル化します。データプロバイダーは入れ子化した要素をデータの集約値として返します。
- FlattenedDocuments：入れ子化したドキュメントとその親を結合して単一のテーブルに入力します。
- Relational：個別の関連テーブルを階層化されたデータから返します。テーブルは主キーと、親ドキュメントにリンクする外部キーを含みます。
リレーショナルな抽象化の設定についての詳細は、「XML データのモデリング」セクションを参照してください。次の例で使用されているサンプルデータも存在します。このデータには、人名、その人たちが所有する車、車に施されたさまざまなメンテナンスに関する情報が含まれます。
Test Database をクリックします。
Permission -> Add をクリックして、新しいユーザーを追加し、適切な権限を指定します。

これで、XML のREST API が作成でき、Unqork からの連携が可能になりました。

Unqork でXML データに連携して一覧画面を作成

Unqork でXML データを作成する構成

Unqork でXML に連携する一覧表示画面をModule として作成します。Unqork の一覧画面で使用するコンポーネントは次のようになります：

Initializer：画面表示時にPlug-in を実行します。
Plugin：CData Connect Server からデータを取得し、Hidden Component に格納します。
Hidden：Plugin から取得したデータを格納します：
ViewGrid：Hidden Component に格納されたデータを元に、一覧画面を表示します。

XML データのServices Administration への登録

事前準備として、Unqork のPlug-in からCData Connect Server に対して接続ができるようにサービス情報を登録します。右上の「Settings」から「Administration」をクリックし、「Integration」の「Services Administration」を選択します。
Services Administration 画面で、以下の項目を設定してCData Connect Server 経由でXML に接続します。
- Service Title：例）CData Connect Server。任意のサービスタイトルを指定します。
- Service name：例）cdatconnectcloud。任意のサービス名を指定します。
- Service protocol + host：例）https://www.cdatacloud.net/cdatajapan/api.rsc/。CData Connect ServerのREST エンドポイントを指定します。
- Type of authentications：Basic Auth。Basic Auth を選択します。
- Username：例）admin。CData Connect Server で作成したユーザーのID を指定します
- Password：例）password。CData Connect Server で作成したユーザーのPassword を指定します。

Workspace の作成

次に、今回のModule を作成するためのWorkspace を作成します。「＋Create Workspace」をクリックし、任意の名前でWorkspace を作成します。

一覧画面用のModule の作成

それでは一覧画面を作っていきましょう。

「＋Create App」をクリックし、任意の「App Name」と「App Path」を入力します。前述の通り、今回はModule で作成するので「App Type」は「Module」を指定して、Create をクリックします。

一覧画面では、仮想データベースから取得したデータを格納するために「Hidden」Component を配置します。検証時にはデータを正常に取得できているか確認するために、Text Field で作成するのも良いでしょう。任意の「Property ID」と「Canvas Label Text」を指定して保存します。

データ格納用のComponent を作成した後、CData Connect Server にリクエストを行うための「Plug-in」Component を配置します。任意の「Property ID」と「Canvas Label Text」を指定します。今回は「GetCustomers」としました。

Plug-in では取得したデータを格納するためのマッピングを行います。Property ID には、事前に作成したHidden Component の名前を入力し、「Mapping」には value を指定します。

あとは「Data」タブにてCData Connect Server へのリクエスト内容を設定します。「External」を選択し、事前にServices Administration で登録した、CData Connect Server の Service を選択します。

その後、エンドポイントがData Source URL に表示されるので、続けて対象のリソースURL を指定します。合わせてRequest Type で「Get」を指定して保存します（リソースURL はCData Connect の以下の画面から確認できます）。

次に、一覧画面のUI となる「View Grid」を配置しましょう。任意の「Label」と「Property Name」を指定します。今回は「CustomerView」としました。

View Grid では、まずデータ元となる Component との紐付けを「Inputs」にて行います。Plug-in 経由で取得したデータはHidden Component に格納されているので、その Component をここで指定します。その後表示するカラムをDisplay で定義します。「ID」「NAME」「EMAIL」をそれぞれ「id」と「heading」に指定して、保存します。