CData Software Blog

クラウド連携のCData Software の技術ブログです。

コラボフロークラウドの申請フォームで SQL Server のマスタデータを参照する:CData API Server連携

https://cdatajbuilds.s3-ap-northeast-1.amazonaws.com/CDataBlog/Collaboflow/collaboflow.gif

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

今日はクラウドベースのワークフローサービスであるコラボフローと CData API Serverを組み合わせた

コラボフローとは?

コラボフローは誰でも簡単に作れるクラウドベースのワークフローサービスです。

https://www.collabo-style.co.jp/

f:id:sugimomoto:20200526144630p:plain

企業内に存在する稟議書や見積書などの業務ワークフローおよび申請フォームをクラウドベースで簡単に作成できるサービスです。

申請フォームを普段利用しているExcel をベースにデザインできるのもポイントですね。

f:id:sugimomoto:20200526144637p:plain

また、コラボフローではサイボウズ製品のkintoneと連携することで、アプリのデータを元に申請フォームの自動入力を行ったり

https://www.collabo-style.co.jp/function/cooperation/

f:id:sugimomoto:20200526144643p:plain

申請フォームにJavaScriptを組み込むことで、外部のREST APIをコールして入力補完や連携を行うことができる機能を提供しています。

f:id:sugimomoto:20200526144648p:plain

今回は後者の機能と組み合わせて、オンプレミスのSQL Serverからマスタデータを参照し、申請フォームの入力を便利にする機能の作り方を解説します。

なお、コラボフローはクラウド版とオンプレミス版がありますが、この記事ではクラウド版を対象としています。

今回やってみたこと

CData では、各種RDBやNoSQLから自動的にREST Ful API を生成することができる、CData API Server という製品を提供しています。

https://www.cdata.com/jp/apiserver/

f:id:sugimomoto:20200429134533p:plain

通常、クラウドサービスからRDB・オンプレミスの基幹システムなどにアクセスしたい場合は、インターフェースとなるAPIをスクラッチで作成する必要がありますが、API Serverを利用することで簡単にRDBに接続できるAPIを自動生成することが可能です。

これにより、既存のRDBや基幹システムのバックエンドをクラウドサービスと組み合わせて処理を実施できるようになります。

f:id:sugimomoto:20200526144655p:plain

また、CData API Server はCloud Gatewayという機能を使って、クラウド上のSSHサーバーを経由してインターネット上にAPIを公開することができます。これにより、オンプレミス上でFirewall を調整したり、DMZに配置するといったことを気にする必要がありません。

今回はSQL Server のサンプルデータベースとして有名なAdventure Worksの製品マスタからAPI Server経由でデータを取得し、コラボフローの見積書を作成支援する機能を作成します。

f:id:sugimomoto:20200526144701p:plain

手順

それでは実際の手順を紹介します。

必要なもの

SQL Server は予め対象マシンにインストールしておいてください。

API Server の環境構成

今回はオンプレミスに API Server を配置してコラボフローと連携します。SSH サーバーとしてAWS EC2のインスタンスを使用しました。基本的な環境構築方法は以下の記事を参考にしてみてください。

www.cdatablog.jp

API Server は以下からトライアルがダウンロードできます。

https://www.cdata.com/jp/apiserver/

なお、対象OSはWindowsマシン(Windows 10や Windows Server)としています。

SQL Server の接続を追加する

API Server の環境を構築後、SQL Server への接続を追加します。

「設定」→「接続」から「SQL Server」を選択し

f:id:sugimomoto:20200526144711p:plain

オンプレミスに構成しておいた、SQL Serverへの接続情報を入力します。入力後、接続テストをクリックして問題なければ設定を保存します。

f:id:sugimomoto:20200526144719p:plain

対象のエンドポイントを追加する

API Server 構成後、今回利用するエンドポイントを新しく追加します。

「設定」→「リソース」タブに移動し「新しいリソースを追加」をクリックします。

f:id:sugimomoto:20200526144725p:plain

前の手順で作成しておいた「SQL Server」のコネクションを選択して、次へ移動し

f:id:sugimomoto:20200526144731p:plain

「Product」テーブルを追加します。

f:id:sugimomoto:20200526144736p:plain

リソース名は「Products」としました。

f:id:sugimomoto:20200526144742p:plain

ユーザーの追加と動作確認

あとは接続の時に利用するユーザーも登録しておきます。生成されたトークンを後で利用するので、控えておきましょう。

f:id:sugimomoto:20200526144803p:plain

構成されたAPIエンドポイントを確認してみます。「API」タブに移動すると、追加したリソースが表示されています。ここでリクエスト方法などを確認できます。

f:id:sugimomoto:20200526144809p:plain

試しにURLをクリックしてみると、以下のようなJSONを取得できました。

f:id:sugimomoto:20200526144816p:plain

API Server と連携するための JavaScript の準備

次にコラボフロー上で使用するAPI Server との接続用JavaScriptを準備します。

今回使用した JavaScript のサンプルは以下のGistで公開していますので、参考にしてみてください。

gist.github.com

「CDataAPIServerSetting」のそれぞれのプロパティには構成したSSH ServerのURLとAPI Serverの認証情報をそれぞれ設定してください。

「AutocompleteSetting」はどのフィールドでオートコンプリートを動作させるか? といった設定と、APIのプロパティとのマッピングを行います。

今回はCollaboflowのデフォルトテンプレートで提供されている「12a.見積書・注文書」で利用しますので、

デフォルトでは商品名のフィールドを、ProductテーブルのNameと紐付けて、Autocompleteを行うように構成しています。値が決定されたら、KeyとなるProductIDを元に「型番、標準単価、仕入単価、御提供単価」をそれぞれAPIから取得した値で自動補完するようになっています。

f:id:sugimomoto:20200526145225p:plain

なお、コラボフローでのJavaScript APIの利用方法・書き方については以下のHelpが参考になります。

collaboflow.zendesk.com

サンプルコードの補足

API Server は以下のようなリクエストで部分一致の検索を行うことができるようになっています。このリクエストをコラボフローのJavaScriptから実行し、取得したJSONを候補として表示します。

http://XXXXX/api.rsc/Products?$filter=contains(Name,'XXXXX')&$top=10

API Server で利用できるクエリは以下のHelpを参考にしてみてください。

cdn.cdata.com

コラボフローのJavaScriptからHTTPリクエストを行う場合は「collaboflow.proxy.get()」のメソッドを利用します。

通常JavaScriptをクライアントサイドで実行する場合は、クロスドメインの制約を気にしなければいけませんが、このメソッドを通すことでコラボフローのサーバー側でプロキシされ、柔軟に外部のAPIと連携することが可能になっています。

そのため今回は特に必要ありませんが、API Server ではCORSを許可することもできます。

cdn.cdata.com

API Server からJSONを取得後、対象のフィールドにJQueryUIのAutocompleteを設定しています。

コラボフロー側でJavaScriptを登録

JavaScriptを作成したら、後はコラボフローにアップするだけです。

コラボフローにログインし「アプリ設定」→「フォーム設定」に移動

f:id:sugimomoto:20200526145339p:plain

フォーム一覧から「12a.見積書・注文書」を選択します。

f:id:sugimomoto:20200526145345p:plain

フォーム編集画面に移動後、「カスタマイズ」タブをクリックし、ファイルをアップロードから作成したJSファイルをアップロードし、保存します。

f:id:sugimomoto:20200526145354p:plain

以上で設定は完了です。

これで以下のようにAPI Server 経由でオンプレミスSQL Server のマスタデータを取得し、自動入力補完する機能がコラボフローの申請フォームに追加できました。

https://cdatajbuilds.s3-ap-northeast-1.amazonaws.com/CDataBlog/Collaboflow/collaboflow.gif

おわりに

このようにAPI ServerでAPIを公開することで、クラウドサービスから既存のRDBなどがとても使いやすくなります。

今回はSQL Server を対象にしましたが、PostgreSQLMySQLOracleといったデータソースにも対応できます。

https://www.cdata.com/jp/apiserver/#databases

f:id:sugimomoto:20200429135116p:plain

また、SalesforceSharePointなどのクラウドサービスも、部分的にAPI Server経由でAPI公開することができ、通常は複雑なAPIリクエストが必要なクラウドサービスにも手軽にAPIアクセスできるようになります。

f:id:sugimomoto:20200429135126p:plain

ぜひ、いろんなシチュエーションで試してみてください。