CDataのRESTドライバーを利用して、freeeのデータをMotionBoardで表示してみた

MotionBoardのサポートをしているウイングアーク１ｓｔ株式会社の杉山です。

今回ご紹介したい内容は、
CDataのRESTドライバーを利用することで、RESTfulAPIを使ったWebシステムから渡されるJSONデータをMotionBoardでデータソースとしてアクセスすることができます。
本記事では、freeeが提供しているfreeeAPIが出力するデータをMotionBoardで表示してみたいと思います。

freee側の設定について

freeeのデータは、freeeAPIから取得します。本記事では無料の開発者向けアカウントを利用しています。

　１．次のURLを参考にアプリを作成します。
　　　　freee API スタートガイド
　　　　https://developer.freee.co.jp/startguide

　２．上記、手順の中で発行されるアプリの次の情報を控えておきます。
　　　　「コールバックURL」
　　　　「Client ID」
　　　　「Client Secret」
　　　　「モバイル・JSアプリ認証用URL」
　　　　　

　３．アプリでアクセス許可できるデータを選択します。
　　　　　

　４．作成したアプリからデータを取得できるか確認します。
　　　アクセストークンを「モバイル・JSアプリ認証用URL」で取得して、curlを利用して、事業所情報を取得します。
　　　　　
　　　アクセストークンを取得したら、次のURLより、curlで実行できるコマンドを生成して、コマンドラインツールで実行を行い結果が返ってくるか確認します。
　　　　Companies事業所
　　　　https://developer.freee.co.jp/reference/accounting/reference#/Companies/get_companies
　　　　
　以上でfreee側の設定は完了です。

MotionBoard側の設定について

CDataのRESTドライバーを利用する際に使用するものが、RSDファイルと言う定義ファイルです。
RSDファイルの役割としては次のようなイメージになります。
　

API Companies事業所のデータを取得するための設定方法

１．freeeに対して、正常にレスポンスが返ってくることを確認します。
　　　　Companies事業所
　　　　https://developer.freee.co.jp/reference/accounting/reference#/Companies/get_companies
　　　　上記の仕様を元にcurlで確認します。
　　　　
　　　　実行内容

curl -X GET "https://api.freee.co.jp/api/1/companies" -H "accept: application/json" -H "Authorization: Bearer 0a29ba0060e83fcfdc1ea5944c045d9b72d025fe50ee3ae6ff94b4892ff96432" -H "X-Api-Version: 2020-06-15"

　　　　レスポンス内容

{"companies":[{"id":10079911,"name":null,"name_kana":null,"display_name":"開発用テスト事業所","role":"admin"},{"id":10081033,"name":null,"name_kana":null,"display_name":"開発用テスト事業所","role":"admin"}]}

　２．上記の内容を元にRSDファイルを作成します。
　　　　RSDファイルにより、任意のパラメーターをリクエスト時に渡すことができ、JSONデータを好きな形式で定義してテーブル化することができます。

<api:script xmlns:api="http://apiscript.com/ns?v1" xmlns:xs="http://www.w3.org/2001/XMLSchema">

  <!-- See Column Definitions to specify column behavior and use XPaths to extract column values from JSON. -->
  <api:info title="json" desc="Generated schema file." xmlns:other="http://apiscript.com/ns?v1">
    <!-- You can modify the name, type, and column size here. -->
    <!-- Responseは指定したカラムの順番で返却されます。 -->
    <attr name="id"             xs:type="integer"    readonly="false"         other:xPath="/companies/id"            />
    <attr name="name"           xs:type="string"     readonly="false"         other:xPath="/companies/name"          />
    <attr name="name_kana"      xs:type="string"     readonly="false"         other:xPath="/companies/name_kana"     />
    <attr name="display_name"   xs:type="string"     readonly="false"         other:xPath="/companies/display_name"  />
    <attr name="role"           xs:type="string"     readonly="false"         other:xPath="/companies/role"          />
  </api:info>

  <api:set attr="JSONPath"           value="$.companies" />
  <api:set attr="DataModel"          value="Document" />

  <api:set attr="Method"             value="GET" />
  <api:set attr="URI"                value="https://api.freee.co.jp/api/1/companies" />
  <api:set attr="ContentType"        value="application/json;charset=UTF-8" />
  <api:set attr="Header:Name#1"      value="Authorization" />
  <api:set attr="Header:Value#1"     value="Bearer 0a29ba0060e83fcfdc1ea5944c045d9b72d025fe50ee3ae6ff94b4892ff96432" />
  <api:set attr="Header:Name#2"      value="X-Api-Version" />
  <api:set attr="Header:Value#2"     value="2020-06-15" />

  <!-- The GET method corresponds to SELECT. Here you can override the default processing of the SELECT statement. The results of processing are pushed to the schema's output. See SELECT Execution for more information. -->
  <api:script method="GET">
    <api:call op="jsonproviderGet">
      <api:push/>
    </api:call>
  </api:script>

</api:script>

　　　　上記状態でもfreeeAPIからデータを取得することができますが、アクセストークンが固定値なので動的に変更できるようにします。
　　　　RSDファイルでダミーカラムを定義して、アクセストークンを入力値によって変えられるようにします。

<api:script xmlns:api="http://apiscript.com/ns?v1" xmlns:xs="http://www.w3.org/2001/XMLSchema">

  <!-- See Column Definitions to specify column behavior and use XPaths to extract column values from JSON. -->
  <api:info title="json" desc="Generated schema file." xmlns:other="http://apiscript.com/ns?v1">
    <!-- You can modify the name, type, and column size here. -->
    <!-- Responseは指定したカラムの順番で返却されます。 -->
    <attr name="id"             xs:type="integer"    readonly="false"         other:xPath="/companies/id"            />
    <attr name="name"           xs:type="string"     readonly="false"         other:xPath="/companies/name"          />
    <attr name="name_kana"      xs:type="string"     readonly="false"         other:xPath="/companies/name_kana"     />
    <attr name="display_name"   xs:type="string"     readonly="false"         other:xPath="/companies/display_name"  />
    <attr name="role"           xs:type="string"     readonly="false"         other:xPath="/companies/role"          />
    <input name="input_Authtoken"   xs:type="string"   required="false" />
　　<!-- ↑↑ダミーカラムを定義↑↑ -->
  </api:info>

  <api:set attr="JSONPath"           value="$.companies" />
  <api:set attr="DataModel"          value="Document" />

  <api:set attr="Method"             value="GET" />
  <api:set attr="URI"                value="https://api.freee.co.jp/api/1/companies" />
  <api:set attr="ContentType"        value="application/json;charset=UTF-8" />
  <api:set attr="Header:Name#1"      value="Authorization" />
  <api:set attr="Header:Value#1"     value="Bearer [_input.input_Authtoken]" />
　　　　　　　　　　　　　　　　　　　　　　　　　　　　<!-- ↑↑ダミーカラムから取得する値を設定する↑↑ -->　
  <api:set attr="Header:Name#2"      value="X-Api-Version" />
  <api:set attr="Header:Value#2"     value="2020-06-15" />

  <!-- The GET method corresponds to SELECT. Here you can override the default processing of the SELECT statement. The results of processing are pushed to the schema's output. See SELECT Execution for more information. -->
  <api:script method="GET">
    <api:call op="jsonproviderGet">
      <api:push/>
    </api:call>
  </api:script>

</api:script>

　３．「2」で作成したRSDファイルをMotionBoardの共有フォルダーに配置します。
　　　　

　４．RESTの外部接続を作成します。
　　　RESTはMotionBoardで先行版のアダプターとし公開しています。RESTをダウンロードして、MotionBoardに組み込みます。
　　　所定の位置に配置してMotionBoardを再起動すると、以下のように外部接続設定にRESTを新規接続先として利用できるようになります。
　　　　MotionBoard Ver. 6.3 CDataアダプターの配布
　　　　https://cs.wingarc.com/ja/system_requirement/000022671
　　　［外部接続］の［新規作成］にて「REST」を選択します。
　　　　
　　　［基本情報］にて［ドライバタイプ］を「REST JSON FULL(JDBC)」を選択、［ファイルパス］に「3」で格納したRSDファイルのフォルダーを指定します。
　　　［接続文字列オプション］に「PseudoColumns="=";」を入力します。
　　　その他の項目は空白（未入力）で［接続確認］、［保存］を行います。
　　　　

　５．ボードからデータを取得できるようにします。
　　　データソース選択で対象のテーブルを選択してもエラーとなりますが、そのまま［OK］をクリックします。
　　　　
　　　［検索設定］にて、ダミーカラムで定義した項目を［検索項目］に指定して、［値］を「${Authtoken_変数}」と入力します。
　　　　
　　　変数「Authtoken_変数」に値を入れるため、ボードに入力アイテムを配置します。
　　　　
　　　アクセルトークンを取得して、上記で作成した入力アイテムに値を入れます。入力後、明細表アイテムをリロードすると値が表示されることを確認します。
　　　　

まとめ

もし、ご利用のシステムがRESTfulAPIを使ったWebシステムでJSONデータを返す仕組みがございましたら
専用のCDataのドライバーが無くともCDataのRESTドライバーを利用することで、MotionBoardでデータを可視化することができます。
MotionBoardの連携であきらめていたシステムとの連携がございましたら、ぜひお問合せください。