シーオーリポーツ帳票クリエータ Ver.3のWEB APIをクロスドメインで使用する

パッケージJava製品開発担当の大です。こんにちは。

今回は、帳票クリエータVer.3のWEB APIをクロスドメインで呼び出す方法についてご紹介したいと思います。

jQueryを使用する

帳票クリエータVer.3では、クロスドメインでの呼び出しに対応するためにjsonpを使用しています。

素でjsonpを使用するのは、コールバック関数を用意したり何かと面倒ですが、jQueryを使用する場合は以下のように簡単に書けます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jsonpサンプル</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    function getDocument(conf) {
      jQuery.ajax({
        type: "GET",
        url: "http://server/rdc/getDocument",
        data: {
          "configuration": conf,
          "jobName": "sample_pdf",
          "delete": true,
        },
        dataType: "jsonp", 
        success: function(data, type) {
          window.open("data:application/pdf;base64," + data.DocumentFileDataList[0]);
        }
      });
    }
</script>
  </head>
  <body>
    <button onclick="getDocument('C:/DcHokenSample/HokenSdample.dcx')">保険サンプル</button>
  </body>
</html>

17行目のように、dataTypeパラメータでjsonpを指定してやるだけです。

ボタンを押すと、別ウィンドウにPDFを表示します。

jsonpサンプル

jsonpサンプル(クリックで拡大)

もうちょっと詳しい説明

帳票クリエータのWEB APIでは、呼び出し時のパラメータにcallback="コールバック関数名" が指定されていた場合に、これはjsonp呼び出しであると判断し、レスポンスをjsonpとして返します。

一方、jQueryではdataTypeでjsonpが指定されている場合に、自動でコールバック関数を作成します。そしてcallback="コールバック関数"の形で呼び出します。WEB APIによってはパラメータ名がcallbackでない場合がありますが、そんな場合にはjsonpパラメータでパラメータ名自体を指定できます。また、コールバック関数名も自動で作成されるのが気に入らなければjsonpCallbackパラメータで指定できます。

ちなみに

上記のソースでは、WEB APIのgetDocumentのレスポンスのBASE64文字列をそのまま使用してData URI Schemeとしてwindow.open()に渡しています。FirefoxとChromeでは動作確認できましたが、IEではどうやらData URI Schemeをナビゲーションに使えない制限があるようです(参考)。。。IEではgetDocumentではなくcreateDocumentを使用してPDFファイルを作成し、ファイル名を指定して開いたほうが良さそうです。