ローコードアプリ開発プラットフォーム DronaHQ で Excel Online と連携するアプリを作成:CData Connect

f:id:sugimomoto:20220211150154p:plain

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

今回はノーコードアプリ開発ツール DronaHQ で Excel Online と連携するアプリを作成する方法を紹介したいと思います。

DronaHQ とは?

DronaHQ はインド・ムンバイが本拠地の Deltecs InfoTech Pvt が提供するローコードアプリ開発プラットフォームです。

www.dronahq.com

f:id:sugimomoto:20220211145512p:plain

DronaHQ は日本ではまだまだ認知されていない感じかなと思いますが、NoCode 界隈で有名な NoCode Ninjaさんも推しているツールの一つです。

note.com

直感的な開発ツールを使いながら、ドラッグ・アンド・ドロップで手軽にアプリを作成し、公開することができるようになっています。

f:id:sugimomoto:20220211145520p:plain

また、MySQLやPostgreSQLといったRDBやREST API、GraphQLといった各種APIをサポートしているのも特徴的ですね。

f:id:sugimomoto:20220211145526p:plain

DronaHQ から Excel Online に接続する際の課題

今回はこのDronaHQで Excel Online、つまりOneDrive for businessやSharePointに配置したExcelファイルにアクセスできるアプリを作成してみます。

前述の通りDronaHQは豊富なコネクターを備えていますが、今の所 OneDrive for businessやSharePointに配置したExcelファイルにアクセスできる機能は提供していません。

そこで今回の記事ではこのボトルネックを「CData Connect」というサービスを仲介することで解消します。

www.cdata.com

f:id:sugimomoto:20210324151454p:plain

CData Connect は、SaaS ベースで提供されるデータハブサービスです。

Salesforce、NetSuite、Dynamics、Marketo、kintone など多様なSaaS にBI、アナリティクス、iPaaS、ノーコード開発プラットフォームからアクセスするための仮想エンドポイントを生成します。

連携方法が異なるSaaS をMySQL、SQL Server、OData の3種類のインターフェースに仮想化することで、データ連携をシンプルに実現します。

"SQL as a Service" といっていいかもしれません。

DronaHQ では接続先のサービスにMySQLが含まれているので、このインターフェースを活用することで、CData Connectが提供するMySQLエンドポイントを介して、Excel Online に接続することができるようになります。

community.dronahq.com

とは言っても、説明だけではイメージできない部分もあると思うので、実際にアプリを作成してみましょう。

シナリオ

今回作成するアプリケーションは Excel Online から取得したデータを表示する一覧画面です。

f:id:sugimomoto:20220211145634p:plain

対象のExcelファイルは以下のようなイメージで、個人の OneDrive for business フォルダに配置されています。

f:id:sugimomoto:20220211145639p:plain

手順

CData Connect の環境準備

まずは CData Connect の環境を準備します。

CData Connect (旧CloudHub) のアカウントを取得します。

CData Connect はSaaS ですので、アカウントを取得したらインストールやホスティングなどなく、ブラウザからログインすることですぐに使用開始です。

早速ブラウザから CData Connect にログインします。「DATABASE」タブから仮想データベースを設定していきます。まずは接続するデータソースのアイコンをクリックします。

f:id:sugimomoto:20220211150613p:plain

データソース接続画面が開くので、データソース毎の認証情報を入力します。Excel Online の場合は個人のOneDrive for business に接続する場合、特に細かな指定はせず「Connect」ボタンをクリックするだけで接続が完了します。

f:id:sugimomoto:20220211145645p:plain

次に「ENDPOINTS」タブで、このデータをどのインターフェースのエンドポイントして公開するかを選択します。デフォルトで、OData、MySQL wire protocol、TDS(SQL Server) wire Protocol がすべて有効になっています。

必要があればアクセスを許可する信頼されたIP アドレスを指定することも可能です。

f:id:sugimomoto:20220211150738p:plain

最後に公開したデータにアクセスできるユーザーとトークンを作成します。「USERS」タブからユーザーを作成するとトークンが生成されます。必要に応じて各データソース毎のPermissionも調整しておきましょう。

f:id:sugimomoto:20220211150712p:plain

これで Excel Online をMySQL エンドポイントとして公開できました。

DronaHQ のアプリを作成

それでは DronaHQ でアプリ作成を進めていきましょう。

DronaHQにログインし、新しくアプリを作成します。

f:id:sugimomoto:20220211145651p:plain

DronaHQでは様々なテンプレートが提供されていますが、とりあえず今回は「Blank App」で作成を進めます。

f:id:sugimomoto:20220211145657p:plain

任意の App name・App Description、Icon を指定して、「CREATE APP」をクリックします。

f:id:sugimomoto:20220211145703p:plain

これで、アプリ作成の初期状態ができました。

f:id:sugimomoto:20220211145709p:plain

MySQL Connector で CData Connectへの接続を追加

続いてアプリにCData Connectへの接続を追加します。この接続には前述の通りMySQLインターフェースを用いて行います。

まず、「CONNECTORS」の画面に移動し「+Connector」をクリックします。

f:id:sugimomoto:20220211145715p:plain

利用できるコネクターの一覧が表示されるので「MySQL」を選択します。

f:id:sugimomoto:20220211145720p:plain

MySQLへの接続設定画面が立ち上がるので、以下の通りCData Connectへの接続情報を指定します。

プロパティ名 備考
Name 例)CData API Connect 任意の名称を指定します。
Host 例)xxxx.cdatacloud.net 事前に作成したMySQL のエンドポイントを指定します。
Port 3306
Database Name 例)ExcelOnline1 CData Connectで登録したデータソースを指定します。
Username 例)admin CData Connectで登録したユーザーのIDを指定します。
Password 例)YOUR_PASSWORD CData Connectで登録したユーザーのPasswordを指定します。
Connect using SSL TRUE

f:id:sugimomoto:20220211145725p:plain

「Test Connection」をクリックして、接続に成功したら「Save」で保存します。

f:id:sugimomoto:20220211145729p:plain

クエリの追加

DronaHQでのRDB連携は、各種RDBへのクエリつまりSQLを予め登録しておいて呼び出す形で利用します。

そのため、CData Connectへの接続が完了したら、クエリを追加しましょう。

接続完了後、以下のような画面が表示されていると思うので「Add Query」をクリックします。

f:id:sugimomoto:20220211145734p:plain

今回は事前に紹介した Excel Online 「Account」シートのデータを取得してみましょう。

任意のQuery nameと併せて、SQLを「Write Your Query」のところに記述します。入力後、「Test Query」をクリックすることで、正常にデータが取得できているか確認できます。

f:id:sugimomoto:20220211145739p:plain

ちなみに、CData Connectの「Data Explorer」画面でもテーブル一覧やカラムの情報を予め検証することができるので、こちらでも見ておくと良いでしょう。

f:id:sugimomoto:20220211145745p:plain

これで以下のようにクエリが登録できればOKです。

f:id:sugimomoto:20220211145750p:plain

一覧画面の作成

それでは一覧画面を作成していきましょう。今回はTable Gridのパーツを使って、一覧画面を作成してみます。

Screenに戻り、「CONTROLS」タブから「Table Grid」を配置します。

f:id:sugimomoto:20220211145756p:plain

配置すると以下のようにダミーデータが表示されますね。

f:id:sugimomoto:20220211145801p:plain

続いてこの「Table Grid」に先程登録したクエリを紐付けます。BIND DATA設定に移動して「Connectors」から「Select Connector」をクリックします。

f:id:sugimomoto:20220211145806p:plain

事前に登録しておいた「CData Connect」のMySQL接続を選択し

f:id:sugimomoto:20220211145819p:plain

Excel Online のデータを取得するクエリを選択します。

f:id:sugimomoto:20220211145829p:plain

途中環境を指定する箇所がありますが、今回は特に指定せずそのまま進めます。

f:id:sugimomoto:20220211145833p:plain

最後に確認画面が表示されますが、今回はそのままデフォルト状態で進めます。

「Test & Finish」をクリックして進めましょう。

f:id:sugimomoto:20220211145838p:plain

すると以下のようにカラムやデータがリフレッシュされます。

f:id:sugimomoto:20220211145843p:plain

プレビューモードで動作確認

あとはプレビューモードに移動すれば、実際にExcle Online からリアルタイムにデータを取得した画面ができあがっていることを確認できます。

DronaHQ上で手軽にフィルタリングなどもできるので良いですね!

f:id:sugimomoto:20220211145849p:plain

データの書き込みを行いたい場合

今回の記事ではシンプルなデータ取得のみを紹介しましたが、DronaHQ上から書き込みを行うアプリを作成することも可能です。

その場合、クエリにはINSERTやUPDATEなどを登録して利用してください。その際に、Variablesを指定しておくことがポイントです。

f:id:sugimomoto:20220211145856p:plain

あとはText InputのUIコンポーネントやButtonを配置して、そのデータとバインドすることで、手軽に書き込めるアプリが作成できます。

f:id:sugimomoto:20220211145902p:plain

おわりに

今回は Excel Online を接続先のリソースとしましたが、外にも様々なリソースをMySQLインターフェースとして扱うことができます。

www.cdata.com

f:id:sugimomoto:20210324152403p:plain

DronaHQ と併せて、是非色々と活用してみてください。

トライアル・お問い合わせ

関連コンテンツ