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

Ready to get started?

Learn more or sign up for a free trial:

CData API Server



ハイブリッドアプリ開発プラットフォームMonaca から JSON データに接続するためのバックエンドAPI サーバーをCData API Server で構築

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

※製品について詳しい情報をご希望の方は以下からお進みください。

API Server の設定

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

デプロイ

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

JSON への接続

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

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

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

データソースへの認証については、ヘルプドキュメントの「はじめに」を参照してください。本製品は、JSON API を双方向データベーステーブルとして、JSON ファイルを読み取り専用ビュー(ローカル ファイル、一般的なクラウドサービスに保存されているファイル、FTP サーバー)としてモデル化します。HTTP Basic、Digest、NTLM、OAuth、FTP などの主要な認証スキームがサポートされています。詳細はヘルプドキュメントの「はじめに」を参照してください。

URI を設定して認証値を入力したら、DataModel を設定してデータ表現とデータ構造をより厳密に一致させます。

DataModel プロパティは、データをどのようにテーブルに表現するかを制御するプロパティで、次の基本設定を切り替えます。

  • Document(デフォルト):JSON データのトップレベルのドキュメントビューをモデル化します。本製品 は、ネストされたオブジェクト配列を集約されたJSON オブジェクトとして返します。
  • FlattenedDocuments:ネストされた配列オブジェクトと親オブジェクトを、単一テーブルに暗黙的に結合します。
  • Relational:階層データから個々の関連テーブルを返します。テーブルには、親ドキュメントにリンクする主キーと外部キーが含まれています。

リレーショナル表現の設定についての詳細は、ヘルプドキュメントの「JSON データのモデリング」を参照してください。また、以下の例で使用されているサンプルデータも確認できます。データには人や所有する車、それらの車に行われたさまざまなメンテナンスサービスのエントリが含まれています。

  • 接続を確立後、[設定]→[リソース]の画面でテーブル一覧からREST API として公開するエンティティを選択します。
  • API Server のユーザー設定

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

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

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

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

    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 を起動し、プレビューを押すとすぐにアプリ画面が表示されます。

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

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