こんにちは。CData Software Japan リードエンジニアの杉本です。
今日はクラウドベースのワークフローサービスであるコラボフローと CData API Serverを組み合わせた
コラボフローとは？
コラボフローは誰でも簡単に作れるクラウドベースのワークフローサービスです。
https://www.collabo-style.co.jp/
企業内に存在する稟議書や見積書などの業務ワークフローおよび申請フォームをクラウドベースで簡単に作成できるサービスです。
申請フォームを普段利用しているExcel をベースにデザインできるのもポイントですね。
また、コラボフローではサイボウズ製品のkintoneと連携することで、アプリのデータを元に申請フォームの自動入力を行ったり
https://www.collabo-style.co.jp/function/cooperation/
申請フォームにJavaScriptを組み込むことで、外部のREST APIをコールして入力補完や連携を行うことができる機能を提供しています。
今回は後者の機能と組み合わせて、オンプレミスのSQL Serverからマスタデータを参照し、申請フォームの入力を便利にする機能の作り方を解説します。
なお、コラボフローはクラウド版とオンプレミス版がありますが、この記事ではクラウド版を対象としています。
今回やってみたこと
CData では、各種RDBやNoSQLから自動的にREST Ful API を生成することができる、CData API Server という製品を提供しています。
https://www.cdata.com/jp/apiserver/
通常、クラウドサービスからRDB・オンプレミスの基幹システムなどにアクセスしたい場合は、インターフェースとなるAPIをスクラッチで作成する必要がありますが、API Serverを利用することで簡単にRDBに接続できるAPIを自動生成することが可能です。
これにより、既存のRDBや基幹システムのバックエンドをクラウドサービスと組み合わせて処理を実施できるようになります。
また、CData API Server はCloud Gatewayという機能を使って、クラウド上のSSHサーバーを経由してインターネット上にAPIを公開することができます。これにより、オンプレミス上でFirewall を調整したり、DMZに配置するといったことを気にする必要がありません。
今回はSQL Server のサンプルデータベースとして有名なAdventure Worksの製品マスタからAPI Server経由でデータを取得し、コラボフローの見積書を作成支援する機能を作成します。
手順
それでは実際の手順を紹介します。
必要なもの
- コラボフローアカウント
- CData API Server
- SQL Server
- AWS EC2
- Windows マシン
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」を選択し
オンプレミスに構成しておいた、SQL Serverへの接続情報を入力します。入力後、接続テストをクリックして問題なければ設定を保存します。
対象のエンドポイントを追加する
API Server 構成後、今回利用するエンドポイントを新しく追加します。
「設定」→「リソース」タブに移動し「新しいリソースを追加」をクリックします。
前の手順で作成しておいた「SQL Server」のコネクションを選択して、次へ移動し
「Product」テーブルを追加します。
リソース名は「Products」としました。
ユーザーの追加と動作確認
あとは接続の時に利用するユーザーも登録しておきます。生成されたトークンを後で利用するので、控えておきましょう。
構成されたAPIエンドポイントを確認してみます。「API」タブに移動すると、追加したリソースが表示されています。ここでリクエスト方法などを確認できます。
試しにURLをクリックしてみると、以下のようなJSONを取得できました。
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から取得した値で自動補完するようになっています。
なお、コラボフローでの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を作成したら、後はコラボフローにアップするだけです。
コラボフローにログインし「アプリ設定」→「フォーム設定」に移動
フォーム一覧から「12a.見積書・注文書」を選択します。
フォーム編集画面に移動後、「カスタマイズ」タブをクリックし、ファイルをアップロードから作成したJSファイルをアップロードし、保存します。
以上で設定は完了です。
これで以下のようにAPI Server 経由でオンプレミスSQL Server のマスタデータを取得し、自動入力補完する機能がコラボフローの申請フォームに追加できました。
おわりに
このようにAPI ServerでAPIを公開することで、クラウドサービスから既存のRDBなどがとても使いやすくなります。
今回はSQL Server を対象にしましたが、PostgreSQLやMySQL、Oracleといったデータソースにも対応できます。
https://www.cdata.com/jp/apiserver/#databases
また、SalesforceやSharePointなどのクラウドサービスも、部分的にAPI Server経由でAPI公開することができ、通常は複雑なAPIリクエストが必要なクラウドサービスにも手軽にAPIアクセスできるようになります。
ぜひ、いろんなシチュエーションで試してみてください。
関連コンテンツ
