Monaca アプリで使えるHubDB データ連携用のバックエンドAPI をノーコードで開発

こんにちは！プロダクトスペシャリストの宮本です。

CData API Server と ADO.NET Provider for HubDB を使って、Monaca ハイブリッドアプリ開発プラットフォーム(https://ja.monaca.io/) から HubDB に接続してデータを取得する方法を説明します。

API Server の設定

次のステップに従い、セキュアな REST API サービスを立ち上げます

デプロイ

API Server はサーバー上で稼働します。Windows 版は、製品に組み込まれているスタンドアロンのサーバーかIIS に配置して稼働させることができます。Java 版では、Java servlet コンテナにAPI Server のWAR ファイルを配置します。 デプロイの詳細は製品ヘルプを参照してください。API Server を Microsoft Azure、 Amazon EC2、Heroku にデプロイする方法はKB に記事があります。

HubDB への接続

API Server の管理コンソールで［設定］→［接続］から新しい接続を追加してHubDB を追加します。

HubDB のアイコンがデフォルトのAPI Server の接続先にない場合には、API Server がJava 版の場合はJDBC Drivers、API Server がWindows 版の場合はADO.NET Data ProvidersからHubDB ドライバーをAPI Server と同じマシンにインストールして、API Server を再起動します。

HubDB への接続に必要な認証情報を入力します。接続のテストを行い、接続を確認して、設定を保存します。

HubDBデータソースへの接続には、パブリックHubSpotアプリケーションを使用したOAuth認証とプライベートアプリケーショントークンを使用した認証の2つの方法があります。

カスタムOAuthアプリを使用する

すべてのOAuthフローでAuthSchemeを"OAuth"に設定する必要があります。特定の認証ニーズ（デスクトップアプリケーション、Webアプリケーション、ヘッドレスマシン）に必要な接続プロパティについては、ヘルプドキュメントを確認してください。

アプリケーションを登録し、OAuthクライアント認証情報を取得するには、以下の手順を実行してください。

1. HubSpotアプリ開発者アカウントにログインします。
   • アプリ開発者アカウントである必要があります。標準のHubSpotアカウントではパブリックアプリを作成できません。
2. 開発者アカウントのホームページで、アプリタブをクリックします。
3. アプリを作成をクリックします。
4. アプリ情報タブで、ユーザーが接続する際に表示される値を入力し、必要に応じて変更します。これらの値には、パブリックアプリケーション名、アプリケーションロゴ、アプリケーションの説明が含まれます。
5. 認証タブで、「リダイレクトURL」ボックスにコールバックURLを入力します。
   • デスクトップアプリケーションを作成する場合は、http://localhost:33333のようなローカルにアクセス可能なURLに設定します。
   • Webアプリケーションを作成する場合は、ユーザーがアプリケーションを承認した際にリダイレクトされる信頼できるURLに設定します。
6. アプリを作成をクリックします。HubSpotがアプリケーションとそれに関連する認証情報を生成します。
7. 認証タブで、クライアントIDとクライアントシークレットを確認します。これらは後でドライバーを設定する際に使用します。

8. スコープの下で、アプリケーションの意図する機能に必要なスコープを選択します。

   テーブルにアクセスするには、最低限以下のスコープが必要です：

   • hubdb
   • oauth
   • crm.objects.owners.read
9. 変更を保存をクリックします。
10. 統合に必要な機能にアクセスできる本番ポータルにアプリケーションをインストールします。
    • 「インストールURL（OAuth）」の下で、完全なURLをコピーをクリックして、アプリケーションのインストールURLをコピーします。
    • コピーしたリンクをブラウザで開きます。アプリケーションをインストールする標準アカウントを選択します。
    • アプリを接続をクリックします。結果のタブは閉じて構いません。

プライベートアプリを使用する

HubSpotプライベートアプリケーショントークンを使用して接続するには、AuthSchemeプロパティを"PrivateApp"に設定します。

以下の手順に従ってプライベートアプリケーショントークンを生成できます：

1. HubDBアカウントで、メインナビゲーションバーの設定アイコン（歯車）をクリックします。
2. 左サイドバーメニューで、統合 > プライベートアプリに移動します。
3. プライベートアプリを作成をクリックします。
4. 基本情報タブで、アプリケーションの詳細（名前、ロゴ、説明）を設定します。
5. スコープタブで、プライベートアプリケーションがアクセスできるようにしたい各スコープに対して読み取りまたは書き込みを選択します。
6. テーブルにアクセスするには、最低限hubdbとcrm.objects.owners.readが必要です。
7. アプリケーションの設定が完了したら、右上のアプリを作成をクリックします。
8. アプリケーションのアクセストークンに関する情報を確認し、作成を続行をクリックし、その後トークンを表示をクリックします。
9. コピーをクリックして、プライベートアプリケーショントークンをコピーします。

接続するには、PrivateAppTokenを取得したプライベートアプリケーショントークンに設定します。

API Server のユーザー設定

［設定］→［ユーザー］からAPI にアクセスできるユーザーの認証設定を行います。API Server はトークンでの認証を行うことができます。 IP アドレスでAPI へのアクセスを制限することも可能です。デフォルトではローカルマシンからのアクセスのみが許可されています。SSL の設定も可能です。

オンプレミスDB やファイルからのAPI Server 使用（オプション）

オンプレミスRDB やExcel/CSV などのファイルのデータを使用する場合には、API Server のCloug Gateway / SSH ポートフォワーディングが便利です。是非、Cloud Gatway の設定方法 記事を参考にしてください。

Monaca で作成したモバイルアプリでの HubDB データ取得

Monacaではクラウド上にあるIDEが用意されていますので、まずはアカウント作成します。そこからCData API Server のデータをMonaca アプリ使う設定を作成していきます。

1. ブラウザより Monaca のダッシュボードを開き、「新しいプロジェクトを作る」をクリックします。
2. まずはテンプレートの種類は、フレームワークテンプレートを選択します。
3. 今回は JavaScript を選択します。
4. テンプレートは「Onsen UI V2 JS Navigation」を選択します。テンプレの画面構成は、「Push page」ボタンをクリックすると、画面遷移するものとなっています。
5. 任意のプロジェクト名を設定し、「作成」ボタンをクリックします。
6. 作成したプロジェクトを選択した状態で、「クラウドIDEで開く」をクリックします。
7. 検索ボタンがクリックされたら、先ほど作成した API を Ajax で呼び出すようにしています。
   
   API Server で作成したエンドポイントをURL に設定し、ヘッダーにAPI Server のアクセストークンを設定します。
   
8. レスポンスが返ってきた後、処理が成功していればリストにname だけを1データずつ加えています。

デバッグ実行してみる

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

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

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

初期画面→検索→画面遷移まで確認することができました。

このように HubDB 内のデータをMonaca アプリで利用することができるようになります。