Garoon開発Tips

GaroonのポータルにIBM i（AS400）の情報を表示しよう

目次

はじめに

固定リンクがコピーされました

本記事ではAPI-Bridgeを用いてIBM iの情報をGaroonのポータルに表示する方法をご案内します。

API-Bridge (External link) はIBM iの基幹データをさまざまなクラウドサービスと連携させられる製品です。
双方向の連携が可能で、IBM iのデータ更新時にGaroonへ通知する記事も公開していますのでぜひ確認してください。
https://cs.omni-s.co.jp/hc/ja/articles/9045763264409（外部サイト） (External link)

IBM i（旧称：IBM AS/400） (External link) はIBM Power Systems上で動作するOSの1つです。
堅牢性やパフォーマンスなどが高く評価され、基幹システムとして利用されています。

できること

固定リンクがコピーされました

GaroonとIBM iとで相互にデータ連携できます。
この記事ではGaroonポータルを開くとIBM iで管理する在庫情報を取得して表示します。

設定

固定リンクがコピーされました

IBM iとAPI-Bridgeの設定はIBM iで管理するデータ構成に依存する部分が多くあります。
ここでは大まかな手順をお伝えするので設定のイメージをつかんでいただければ幸いです。

IBM iの設定

固定リンクがコピーされました

データ構成はこのようになっています。倉庫や商品の情報をGaroonポータルに表示します。

API-Bridgeの設定

固定リンクがコピーされました

GUI操作で簡単に設定できます。
まずはAPI認証トークンを設定します。

次にAPIを作成します。

IBM iから取得するデータを指定します。
今回は「GAROON/ZAIWRK」というファイルを指定して、検索条件として「WKSOCD（倉庫コード）」を指定します。

最後にパスとパラメーターを設定します。

Garoonの設定

固定リンクがコピーされました

API-Bridgeにリクエストするには認証が必要です。
JavaScriptファイルへの記述も可能ですが、そうすると利用者が閲覧できてしまいます。
それを避けるためにプロキシ設定を利用します。

プロキシAPI設定

「システム管理（基本システム）> API > プロキシAPIの設定 > プロキシAPI設定の追加」から、次の画像を参考にプロキシAPIを追加します。

プロキシコードには任意の値を設定します。この内容は以降の手順で利用するのでメモしてください。
URLにはAPI-Bridgeで作成したAPIのURLを設定します。
ヘッダーの値には「Bearer API-Bridgeで発行したAPI認証トークン」を設定します。

プロキシAPIの詳細についてはGaroonヘルプ（ クラウド版 (External link) 、 パッケージ版 (External link) ）を参考にしてください。

カスタマイズファイルの用意

次のコードを「ibmi-stock.js」として保存します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

/**
 * GaroonでIBM iの在庫情報を表示する
 * Copyright (c) 2019 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
(() => {
  'use strict';

  // プロキシAPI設定のプロキシコード
  const proxyCode = 'IBMi';
  // API-Bridgeで作成したAPIのURL
  const baseUrl =
    'https://{your-api-bridge-domain}/dev-api/exec/garoon/v1/zaimst/';

  const items = [
    {label: '商品名', column: 'WKSHNM'},
    {label: '在庫数', column: 'WKZISU'},
    {label: '備考', column: 'WKBIKO'},
  ];

  const button = document.querySelector('#ibmi_stock input[type=\'button\']');

  const thead = document.querySelector('#ibmi_stock table thead');
  const tbody = document.querySelector('#ibmi_stock table tbody');

  const initialize = () => {
    const tr = thead.insertRow();
    for (const item of items) {
      const td = tr.insertCell();
      const text = document.createTextNode(item.label);
      td.appendChild(text);
    }
  };

  const refresh = () => {
    document.querySelector('#ibmi_stock_total').textContent = '';

    for (let i = tbody.rows.length - 1; i >= 0; i--) {
      tbody.deleteRow(i);
    }
  };

  const rewriteTbody = (rows) => {
    for (const row of rows) {
      const tr = tbody.insertRow();
      for (const item of items) {
        const column = item.column;
        const td = tr.insertCell();
        const text = document.createTextNode(row[column]);
        td.appendChild(text);
      }
    }
  };

  const main = () => {
    initialize();

    document
      .querySelectorAll('#ibmi_stock input[name=\'sokno\']')
      .forEach((input) => {
        input.addEventListener('change', refresh);
      });

    button.onclick = async () => {
      const sokno = document.querySelector(
        '#ibmi_stock input[name=\'sokno\']:checked'
      ).value;

      const url = baseUrl + sokno;
      const method = 'GET';
      const headers = {};
      const data = {};
      const res = await garoon.base.proxy.send(
        proxyCode,
        url,
        method,
        headers,
        data
      );
      const json = JSON.parse(res[0]);
      const dataLists = json.result.data;

      rewriteTbody(dataLists);

      const total = dataLists.reduce((acc, cur) => acc + Number(cur.WKZISU), 0);
      document.querySelector('#ibmi_stock_total').textContent = total;
    };
  };

  main();
})();

次のコードを「ibmi-stock.css」として保存します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

#ibmi_stock form > label,#ibmi_stock form > input {
  margin: 8px 16px;
}

#ibmi_stock thead td {
  padding: 8px 16px;
  text-align: center;
}

#ibmi_stock tbody td {
  padding: 4px 4px;
}
HTMLポートレットの作成

まずはHTMLポートレットを作成します。

ポートレットの内容には次のHTMLコードを貼り付けます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<div id="ibmi_stock">
  <div>
  <form>
      <label><input type="radio" name="sokno" value="01" checked>東京倉庫</label>
      <label><input type="radio" name="sokno" value="02">外注倉庫</label>
      <input type="button" value="検索" />
    </form>
  </div>
  <div>総在庫数: <span id='ibmi_stock_total' /></div>
  <table border="1">
    <thead />
    <tbody />
  </table>
</div>

作成できたら「JavaScript / CSSによるカスタマイズ」をクリックします。

先ほど保存した「ibmi-stock.js」と「ibmi-stock.css」を画像のとおりアップロードします。

ポータルへの設置

情報を表示したいポータルに先ほど作成したHTMLポートレットを設置します。

設置手順についてはGaroonヘルプ（ クラウド版 (External link) ｜ パッケージ版 (External link) ）を参考にしてください。

実行

固定リンクがコピーされました

ポータルを開くと次のような画面が表示されていれば完成です。

おわりに

固定リンクがコピーされました

API-Bridgeを利用することで簡単にIBM iのデータを公開できました。
同様にGaroonからの登録／更新も可能です。IBM iをご利用中の方はぜひご検討ください。

API-Bridgeの利用を検討される方は API-Bridgeお問い合わせ (External link) からお問い合わせください。