本記事では API-Bridge を用いて IBM i の情報を Garoon のポータルに表示する方法をご案内します。
API-Bridge
は IBM i の基幹データをさまざまなクラウドサービスと連携させられる製品です。
双方向の連携が可能で、IBM i のデータ更新時に Garoon へ通知する記事も公開していますのでぜひ確認してください。
https://cs.omni-s.co.jp/hc/ja/articles/9045763264409（外部サイト）
IBM i（旧称：IBM AS/400）
は IBM Power Systems 上で動作する OS の 1 つです。
堅牢性やパフォーマンスなどが高く評価され、基幹システムとして利用されています。
Garoon と IBM i とで相互にデータ連携できます。
この記事では Garoon ポータルを開くと IBM i で管理する在庫情報を取得して表示します。
IBM i と API-Bridge の設定は 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 ヘルプ（
クラウド版
、
パッケージ版
）を参考にしてください。
カスタマイズファイルの用意
次のコードを「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 ヘルプ（
クラウド版
｜
パッケージ版
）を参考にしてください。
ポータルを開くと次のような画面が表示されていれば完成です。
API-Bridge を利用することで簡単に IBM i のデータを公開できました。
同様に Garoon からの登録／更新も可能です。IBM i をご利用中の方はぜひご検討ください。
API-Bridge の利用を検討される方は
API-Bridge お問い合わせ
からお問い合わせください。
