CData Software Blog

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

CData APIServer 経由でSQLServer のデータをMonacaのアプリで扱う

こんにちは、CData Software Japan の宮本です。

今回は、モバイルアプリ開発プラットーフォームのMonaca で Onsen UI というUIフレームワークと CData APIServer を組み合わせて、SQLServer のデータを取得するアプリの作成方法をご紹介します。

Monaca とは

HTML5Javascript だけでアプリ開発ができるプラットフォームとなっており、使いたいプラグインなども簡単に取り込むことができるため、アプリ作成の敷居を非常に下げてくれます。 ja.monaca.io

また、各端末に依存しているカメラなどの制御は、Cordova というフレームワークで担っており、開発者は JavaScript から Cordova の API を使うことで制御することが可能になっています。※今回は使いません。

cordova.apache.org

なので、JavaScript が出来る人であればすぐにアプリ開発ができるようです。

Onsen UI とは

Cordova などに基づいた HTML5 ハイブリッドモバイルアプリ開発用のオープンソースUIフレームワークおよびコンポーネントです。
Monaca を使うと、Onsen UIが最初から使えるようにセットされているので、セットアップ不要で開発を始めることができます。
ja.onsen.io

APIServer とは

データベースや SaaS から REST API をノーコードで作成できるアプリケーションになります。ローカルのデータベースでさえ、すぐにAPIを作成することができます。詳しくは以下の記事を参照願います。

www.cdatablog.jp

構成

f:id:sennanvolar44:20200217175407p:plain CData APIServer で作成した SQLServerAPI を、Monaca 上のモバイルアプリから呼び出してデータを取得するような構成になります。SQLServer にはLeadデータが入っており、そのデータをMonaca 上のアプリで表示するといった内容です。

完成イメージ
f:id:sennanvolar44:20200217171157p:plain

実際の動き
https://cdatajbuilds.s3-ap-northeast-1.amazonaws.com/CDataBlog/monacaApp.gif

必要なもの

  • Monacaのアカウント(無料で作成できます)
  • SQLServer (他のDBなどに置き換えても大丈夫です)
  • CData APIServer
    30日間無料でお試しいただける評価版を以下リンクよりダウンロードできます。

API Server: データベースから簡単にREST API を開発・運用

実施手順

SQLServerには以下のテーブル、データが格納されています。この内容をもとに進めていきます。

Leadテーブル

create table [dbo].[Lead] (
  Id nvarchar(18) not null  , IsDeleted bit  , MasterRecordId nvarchar(18) , LastName nvarchar(80), FirstName nvarchar(40) , Salutation nvarchar(40) , Name nvarchar(121) , Title nvarchar(128), Company nvarchar(255) , Street nvarchar(255)  , City nvarchar(40) , State nvarchar(80), PostalCode nvarchar(20)  , Country nvarchar(80) , Latitude float(53) , Longitude float(53) , GeocodeAccuracy nvarchar(40), Phone nvarchar(40) , MobilePhone nvarchar(40) , Fax nvarchar(40) ,Email nvarchar(80), Website nvarchar(255), PhotoUrl nvarchar(255), Description nvarchar(max), LeadSource nvarchar(40), Status nvarchar(40), Industry nvarchar(40) , Rating nvarchar(40) , AnnualRevenue float(53) , NumberOfEmployees int , OwnerId nvarchar(18) , IsConverted bit , ConvertedDate date, ConvertedAccountId nvarchar(18) , ConvertedContactId nvarchar(18) , ConvertedOpportunityId nvarchar(18), IsUnreadByOwner bit , CreatedDate datetime , CreatedById nvarchar(18), LastModifiedDate datetime, LastModifiedById nvarchar(18) , SystemModstamp datetime , LastActivityDate date , LastViewedDate datetime, LastReferencedDate datetime, Jigsaw nvarchar(20) , JigsawContactId nvarchar(20) , CleanStatus nvarchar(40) , CompanyDunsNumber nvarchar(9) , DandbCompanyId nvarchar(18) , EmailBouncedReason nvarchar(255), EmailBouncedDate datetime, SICCode__c nvarchar(15), ProductInterest__c nvarchar(255), Primary__c nvarchar(255), CurrentGenerators__c nvarchar(100), NumberofLocations__c float(53), 
primary key (Id));

データ f:id:sennanvolar44:20200217111845p:plain

APIServer の設定

API Server のインストール、基本的な使い方は先ほどご紹介した、「APIServer とは」の章にあるリンク先の記事よりご確認ください。

では、SQL Server から REST API を作成していきます。
APIServer の「設定」→「接続」→「SQL Server」の順にクリックします。 f:id:sennanvolar44:20200217123045p:plain

各入力箇所に今回使用する SQLServer の情報を入力し、右下の「接続のテスト」を押して接続の確認を行ってください。OKであればそのまま「変更を保存」をクリックして保存します。
f:id:sennanvolar44:20200217133137p:plain

次に、どのテーブルを REST API として公開するか設定します。「設定」→「リソース」→「リソースを追加」の順にクリックします。
f:id:sennanvolar44:20200217133556p:plain

接続情報の選択では SQLServer を、リソース選択ではSQLServer にある Lead テーブルを選択します。

任意のリソース名を設定後、右下の保存ボタンをクリックすると、REST API の完成です。

f:id:sennanvolar44:20200217134420p:plain

画面上部にある「API」をクリックすると以下のような画面が表示され、Lead テーブルの GET メソッドから DELETE まで API が表示されます。 f:id:sennanvolar44:20200217135517p:plain

あとは、APIServer へのアクセスできるユーザとIPアドレスを設定します。

まずは接続可能なユーザを作成していきます。以下のキャプチャの順でクリックし、ユーザを作成していきます。
f:id:sennanvolar44:20200220114707p:plain

ユーザ名を「User or Group」に入力します。また CRUD の制限もかけずにします。下のキャプチャのように全てにチャックを入れた後、「Save Changes」ボタンをクリックします。
f:id:sennanvolar44:20200126174130p:plain

以下のように Authtoken が発行されたユーザが作成されます。あとで Authtoken を使いますのでどこかに保持しときます。
f:id:sennanvolar44:20200126180412p:plain

次に、接続可能な IPアドレス の制御行っていきますので、「Server」タブをクリックします。
f:id:sennanvolar44:20200126180845p:plain

一番下にスクロールすると、接続できる IPアドレスの設定箇所があります。「Add」ボタンをクリック後、全て許可の アスタリスク(*) を登録します。(IPアドレスの指定がある場合はここで設定してください)
f:id:sennanvolar44:20200126181043p:plain

ここまでが、APIServer を使った SQLServerREST API 公開手順でした。これよりMonacaでアプリを作成していきます。

Monaca の設定

Monacaではクラウド上にあるIDEが用意されていますので、まずはアカウント作成後、そのままブラウザより Monacaダッシュボードを開き、「新しいプロジェクトを作る」をクリックします。
f:id:sennanvolar44:20200217144807p:plain

まずはテンプレートの種類は、フレームワークテンプレートを選択します。
f:id:sennanvolar44:20200217145348p:plain

今回は JavaScript を選択します。 f:id:sennanvolar44:20200217150550p:plain

テンプレートは「Onsen UI V2 JS Navigation」を選択します。テンプレの画面構成は、「Push page」ボタンをクリックすると、画面遷移するものとなっています。
f:id:sennanvolar44:20200217150913p:plain

任意のプロジェクト名を設定し、「作成」ボタンをクリックします。
f:id:sennanvolar44:20200217151324p:plain

作成したプロジェクトを選択した状態で、「クラウドIDEで開く」をクリックします。
f:id:sennanvolar44:20200217152118p:plain

画面遷移するものをテンプレートで選択しているので、右側のプレビューに画面遷移するアプリが表示されています。
f:id:sennanvolar44:20200217154815p:plain

APIServer からデータを取得する処理

検索ボタンがクリックされたら、先ほど作成した APIAjax で呼び出すようにしています。

f:id:sennanvolar44:20200217160153p:plain

レスポンスが返ってきた後、処理が成功していればリストにname だけを1データずつ加えています。
f:id:sennanvolar44:20200217160453p:plain 失敗した場合は、アラートを表示するようにしました。

ちなみに、今回の内容は以下の記事を参考に作成しました。 press.monaca.io

プロジェクト一式は 以下よりダウンロードできます。とはいえ、手を加えたのはindex.htmlだけですが。 github.com

デバッグ

Monacaデバッグを行う際は、Monacaデバッガーアプリを実機にインストールすることで、MonacaクラウドIDE と実機で動かしているMonacaデバッガーアプリが連動するようです。そのため、いちいちコードを修正してからのビルドが不要になるため、素早く検証を行うことができます。

また、Monaca Localkit を使うことで、ローカルの開発環境でも利用することができます。今回はこのLocalkit を使って vscode 上でコードを修正し、アプリ内容を確認していきました。

f:id:sennanvolar44:20200217170600p:plain

動作確認

Monaca Localkit を起動し、プレビューを押すとすぐにアプリ画面が表示されます。
f:id:sennanvolar44:20200217171559p:plain

初期画面→検索→画面遷移まで確認することができました。
f:id:sennanvolar44:20200217172110p:plain

おわりに

Monaca を使って簡単にSQLServer にあるデータを使ったアプリを作成することができました。今回ご紹介した CData APIServer はSQLSever 以外にも多数のデータベースや SaaS にも対応していますので、利用したいデータベース・SaaS があるかは以下のリンクよりご確認いただけます。 https://www.cdata.com/jp/apiserver/#databases

ちなみに APIServer クラウド環境で構成したい場合は、AWS AMIでクラウドホスティングAPI Server で簡単に構成できます。以下の記事で詳しく紹介しております。
www.cdatablog.jp

APIServer は30日間無料で評価版を使うことができますので、是非お試しください。