API-Bridgeは、IBM i (AS400) の基幹データを様々なクラウドサービスと連携ができる製品となっており、Garoonとの双方向連携が可能です。

Garoonの利用をご検討される場合はコチラからお問い合わせください。

当記事では、API-Bridge（Server）を使用して、IBM i (AS400) の情報をGaroonのポータルに表示する方法をご紹介します。

API-Bridge（Client）を使用して、Garoonにメッセージを通知する方法については、IBM i (AS400)のデータ更新時にGaroonに通知をご参照ください。

【GaroonのポータルにIBM i (AS400) の情報を表示】

実行イメージ

Garoonのポータルを開いた際にIBM i (AS400) で管理する在庫情報を取得して表示します。

API-Bridge（Server）の設定

API認証トークンの作成
管理メニューの「API認証トークン」から作成します。
APIの作成
メニューの「API一覧」から新規にAPIを作成します。
API基本設定
URLとAPI認証トークンの設定を行います。
スキーマの作成
API基本設定画面の「スキーマ」からスキーマを作成します。
※サンプルでは、"GAROON"ライブラリーにある"ZAIWRK"ファイルを使用し、検索条件として「WKSOCD（倉庫コード）」を指定します。
APIパスとパラメータの設定
API基本設定画面の「APIパス」からAPIパスを作成し、GETメソッドを有効にします。
4で作成したスキーマをセットして、パラメータを設定します。

Garoon側の設定

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

プロキシAPIの設定
システム管理（基本システム）＞ API ＞プロキシAPIの設定＞プロキシAPI設定の追加から、プロキシAPIを追加します。

プロキシコード：任意の値を設定します。
※この内容はこの後の手順で利用するのでメモしてください。
URL：API-Bridge（Server）で作成したAPIのURLを設定します。
ヘッダー：「Bearer API-Bridge で発行したAPI認証トークン」を設定します。
※プロキシAPIの詳細については、Garoonのヘルプ（クラウド版、パッケージ版）をご参照ください。
カスタマイズファイルの用意
当記事の下部にある「ibmi-stock.js」と「ibmi-stock.css」をダウンロードします。
HTMLポートレットの作成
システム管理（各アプリケーション）＞ポータル＞ HTMLポートレット＞ HTMLポートレットの追加から、HTMLポートレットを追加します。

ポートレットの内容には下記のHTMLコードを記入します。
```
<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'></span></div>
<table border="1">
 <thead></thead>
 <tbody></tbody>
</table>
</div>
```
「JavaScript / CSSによるカスタマイズ」をクリックします。

ダウンロードした「ibmi-stock.js」と「ibmi-stock.css」をアップロードします。
ポータルへの設置
情報を表示したいポータルに作成したHTMLポートレットを設置します。
設置手順についてはGaroonのヘルプ（クラウド版、パッケージ版）をご参照ください。