2023年9月5日

＜シリーズ２　第１回＞株式会社オムニサイエンス社の「API-Bridge」を使ったIBM i とkintoneのAPI連携をやってみた！

# API # IBM i # モダナイズ

投稿者：クラウド事業本部　クラウドサービス部　山﨑

＜シリーズ２　第１回＞　｢IBM i ｣のデータを取得し、｢kintone｣画面に表示してみよう

読者のみなさま、大変お待たせいたしました！
｢IBM i ｣から｢kintone｣のデータを操作するシリーズ１はいかがでしたでしょうか・・・？
本シーズンはシリーズ１の逆、｢kintone｣から｢IBM i ｣のデータをいろいろやってみよう！についてお届けいたします。
私自身、(超)長年RPGの開発メインにやってきた技術者なので、今回の取り組みは相当チャレンジングなものとなりました。
レガシーな言語しか知らない私が、JavaScriptに挑戦したのです。
右も左もわからない状態から、社内外の有識者の方々の多大なご協力を得て、なんとか形になりました。
お世話になった方々にこの場をお借りして厚く御礼申し上げます m(__)m

さて、前置きはこれくらいにして、本題に入りましょう。
まずは今回の完成のイメージです。

IBM i のデータには23件登録されています。

｢kintone｣でデータを表示してみましょう。以下はアプリ｢customer｣の初期画面です。
おや？データが表示されていませんね。これは｢kintone｣側にデータが存在しないことを示しています。

ビュー選択プルダウンメニューから｢カスタマイズビュー｣を選択します。
そうすると・・・

データが一覧表示されました。
中身は、最初にお見せした｢IBM i ｣のデータと同じ23件となっていますね。
これは、｢kintone｣から直接｢IBM i ｣にデータを取りに行き、取得したデータが表示されているのです。

ちなみに、画面にある｢詳細表示｣ボタンをクリックすると、データの詳細が表示される画面に遷移します。

では、実装についてお話していきましょう。
今回は、｢IBM i ｣のデータベースに｢kintone｣から直接アクセスしてデータを取得、画面に表示するというサンプルを
作成しました。
ですので、用意するのは、｢API-Bridgeサーバー｣でのSQL定義、｢kintone｣での、HTML、JavaScriptとなります。
Season1 の場合は、｢IBM i ｣がクライアントとなっていますので、｢API-Bridge｣もクライアントの定義をしました。
今回は、｢IBM i ｣がサーバーになりますので、｢API-Bridge｣もサーバーとしての定義が必要となります。

まず、｢API-Bridgeサーバー｣の定義です。
｢IBM i ｣のデータを全件取得するために以下の通り定義(｢infoall｣というGETメソッドを処理するAPI)を作成しました。

次に、infoallというAPIで実行するSQL(ここでは、sqlcust000)を定義します。
データを取得するデータベースを指定し、SQLのSELECT文を定義します。
今回は、ライブラリ｢NICAPI｣にあるデータベース｢CUSTOMER｣を全件SELECTしています。

これで、｢API-Bridgeサーバー｣の定義は終了です。｢IBM i ｣のデータを取得する準備ができました。
さあ、いよいよ｢kintone｣からこのAPI定義を呼び出し、データを取得・画面表示、という大仕事が始まります。

｢kintone｣から｢IBM i ｣のデータを取得して画面に表示するためには、表示するための画面定義および
処理を司るJavaScriptによるカスタマイズが必要になります。
ここからは、ド素人のなせる業ということで、お見せするソースコードはあくまでもご参考程度に収めてください。
本当は公開するのも烏滸がましいとは思いましたが、これを書かないとブログの意味がありませんので、
恥を忍んで公開いたします。
と、言い訳はこのくらいにします。

では、まず、データの一覧を表示する画面のHTMLは以下となります。

続いて、データ一覧のJavaScriptです。

続いて、詳細表示のため、｢IBM i ｣のデータを得意先コード指定で取得する以下の定義(｢info｣というGETメソッドを処理するAPI)を作成しました。

詳細データ表示なので、得意先コードをパラメータとして受け取るため、パスパラメータを設定します。

次に、infoというAPIで実行するSQL(ここでは、sqlcust001)を定義します。
データを取得するデータベースを指定し、SQLのSELECT文を定義します。
データベース｢CUSTOMER｣からパラメータで指定された得意先コードに該当するデータをSELECTしています。

これで、｢API-Bridgeサーバー｣の定義は終了です。｢IBM i ｣のデータを得意先コード指定で取得する準備ができました。
続いて、データを詳細表示する画面のHTMLは以下となります。

続いて、詳細データ表示のJavaScriptです。

いかがだったでしょうか。
とにかく苦労の連続で漸くここまでたどり着きました。
どこで苦労したかって？そりゃもう最初からです。基本となるソースコードはこの｢API-Bridge｣の開発元である
オムニサイエンス様よりサンプルをいただいてカスタマイズしたのですが、まあ動かないこと・・・もちろん私の
修正の仕方が大いに間違っていたためなのですが、そんなこともわからないまま、社内の有識者の意見をいただき、
とりあえず一覧表示ができるようになりました。

で、次に詳細表示を作ってみたのですが、こちらは一覧の見よう見まねで独力でやってみました。
なので最初は詳細表示もテーブル形式で作成しましたが、やはり見栄えが悪く、フラットな画面に変更を余儀なくされました。
HTMLを一から作るなんて初めての経験で、ネットを探し回って、少しでも参考になりそうなソースをかき集めて
形にしていきました。
で、たどり着いたのがここに示したソースコードになります。

この画面では(今後ご紹介する予定の他の画面でも同じ現象でした)『戻る』ボタンをクリックすると一覧に戻る想定で
作ってましたがどうしても目的の画面に戻らず、相当悩みました。
やり方として、HTMLのでボタンの定義まで行ない、JavaScriptの｢onclick｣を使って動作を定義していたのですが、
これがうまく動かない・・・
いろいろ調べた結果、｢onclick｣が非推奨ということがわかり、ボタンはJavaScript側で作成、動作も｢addEventListener｣で
実装したところうまくいった次第です。
ただ、こんなことはJavaScript使いの皆さまであれば至極当然のことだと思いますので、ここにこれ見よがしに書く内容ではないのかもしれませんが、少しでも私の苦労をわかっていただきたく、書いた次第です。
ということで、やっとこのブログが公開の運びとなったわけです。

というわけで、今回はここまで。
次回は、｢IBM i ｣のデータベースに｢kintone｣から登録するAPIを実証実験した結果を報告します。乞うご期待！
では・・・

※｢IBM i ｣は、IBM株式会社の登録商標です。
　｢APIBridge｣は、株式会社オムニサイエンスの登録商標です。
　｢kintone｣は、株式会社サイボウズの登録商標です。