小川 誠氏
ティアンドトラスト株式会社
代表取締役会長 CEO CIO CTO
「画面をWeb化したい」を手軽に実現？
IBM iの仕事をしていると、「この画面をWeb化したい」という話が必ず出てくる。5250の文字ベースの画面ではなく、ブラウザやスマホなどでIBM iのデータ処理を行いたいという要望は多い。
世の中にはさまざまなWeb化ツールがあるので、それを利用しているユーザーも多いことと思う。しかし、ツールを導入する前に、「Web化するとどんな画面ができるのか」をまず試してみたいと思っている人も多いのではないだろうか。
IBM Bob（以下、Bob）を使えば、このようなことも実現できる。今回はその流れを見ていきたい。
まず周知のように、IBM iの画面はDDS（Data Description Specifications）で定義されており、この定義を基に表示装置ファイルが作成され、5250グリーンスクリーンとして以下のように表示される。
IBM iに慣れた開発者にとっては自然な世界だが、5250端末を触ったことがない社内の若手や、プロジェクトに加わったばかりの外部メンバー、あるいはシステム刷新を検討している経営層には馴染みがなく、場合によっては古い画面というイメージを持たれるかもしれない。
この画面をWeb化してほしいという要望が出てくるのは自然な流れだが、ではどうやってDDSや5250の画面イメージからWeb画面のイメージを作ればよいのだろうか。プロジェクトを進めるために経営層にプレゼンするにはまずイメージ（モックアップ）が必要になるが、Web画面のHTML等を手書きで作成するのはかなりの時間とテクニックが必要になる。
現在の多くのIBM i環境では、こうしたDDSファイルが数百・数千と蓄積されている。これが「現行画面の財産」であると同時に、「他者には伝わりにくいブラックボックス」にもなっている。
この問題をBobは解決してくれるのだろうか。DDSを渡したらどう処理してくれるのか。今回はここを検証してみたいと思う。
IBM BobにDDSを渡してみた
サンプルで使用するのは、IBM iユーザーにはおなじみのサブファイルを使ったエントリー画面だ。DDSでコメントを含めて72行で記述されている。今回はこのDDSのみをBobに渡してWeb画面のモックを作成してもらった。
Bobの構成はIBM iのソース・ファイルをローカルにダウンロードしただけで、AGENTS.mdなどは一切定義していない。使用したプロンプトは以下の通り。
今回はPlanモードを使用した。最初に、実現したい画面のスタイル等を聞いてきたので、今回は「Material-UI風のモダンなデザイン」を選択した。
次に、DDSソースの読み取り許可を求めてきたので承認する。
計画を立ててくれたのでこの通りに実行してもらう。
作成されるファイルと生成するHTMLの特徴を提示してくれたので、今回はそれを受け入れて進めてもらう。
ここでCodeモードに切り替わり、最初にHTMLのモックアップが作成された。
続いて技術文書を作成するにあたり、保存するディレクトリの作成を求めてきたので承認する。すると、ディレクトリの作成後にそのディレクトリ内に画面定義書、実装ガイド、README.mdをそれぞれ作成し、最後に一覧を表示してタスクは完了した。
作成されたファイルは以下の通り。
・pri04r-mockup.html：モックアップ
・README.md：今回の作業のまとめ文書（395行）
・docs/screen-specification.md：DDSソースの詳細仕様書（378行）
・docs/implementation-guide.md：モックアップの実装ガイド（692行）
ちなみに、コンテキスト使用量は34k/200kで、Bobコインは0.75を消費した。
作成されたHTMLモックアップ
作成されたモックアップは、そのままブラウザで開くことができる。
いかがだろうか。AIにDDSコードを渡せば、ここまでWeb画面を具現化してくれるのだ。しかもドキュメントも、それぞれ必要なことをまとめてくれている。
特にモックアップの実装ガイド（docs/implementation-guide.md）は、使用した技術スタック（使用したUIフレームワークなど）やコンポーネント構造、どのように実装したかなど細かにまとめられており、それを読むだけでもかなり勉強になった。
生成結果の感想・驚き・学び
正直、ここまで精度が高いものが生成されるとは思っていなかった。
最も驚いたのは、Bobが渡したDDSの内容と構造を正しく把握していた点だ。フィールドの入出力属性を識別し、サブファイルの繰り返し構造を理解し、ヘッダー・明細・集計という画面の論理ブロックを読み取ってHTMLに落とし込んでいた。5250イメージをそのまま再現したのではなく、「この画面が何を表示し、何を入力させるものか」を理解したうえで再構成していた。
Bobの内部にある大規模言語モデルは、世界中の技術ドキュメントやサンプルコードを学習している。おそらくIBMのDDSマニュアルやIBM i関連のサンプルも学習対象に含まれているのだろう。「知らないはずの仕様を知っている」、これがAI開発支援ツールの本質的な強みだと改めて感じた。
今回のモックアップ作成の裏話を含めて、筆者の素直な感想を最後にまとめておきたい。
［使える場面］
システム刷新の提案
現行画面のHTMLモックを作り、「現在はこのような画面です」と説明する資料にする
要件定義の壁打ち
DDSを渡して「このフィールドの業務上の意味は何か」「似た画面を1つにまとめられるか」とBobに聞く
レガシー資産の棚卸し
蓄積されたDDSを順番に渡し、「この画面は何をする画面か」をBobに推定させる
［使うべきでない場面］
あくまでもモックアップ
生成されるのはあくまでビジュアルのモックアップであり、入力値の検証ロジック・画面遷移・サブファイルの動的処理といったビジネスロジックがすべて再現されているわけではない。「これをそのままシステム開発のベースに使える」とは思わないほうがいい。
常に同じ結果が得られるわけではない
もう1つ、今回とまったく同じプロンプトを渡したからと言って、同様の結果が常に得られるわけではない、ということは理解しておいてほしい。筆者もこの記事をまとめるにあたり、プロンプトを何度も変えながら実行を繰り返した。どのモードを使うのがよいのか、技術文書も作成してもらうにはどうすればよいのか。いろいろと試さないとわからないことがある。そして、何度も繰り返すことで、当たり前だがBobコインも消費されていく。
Bobコインもそれなりに消費される
Bobの使い始めは、この試行錯誤で使用するBobコインがかなり多くなると思う。しかし、何をするにしても学習コストはかかるものだ。導入の際はこのコストも見積もったうえで、いろいろと試してほしい。
Bobを「コード生成ツール」として使う人は多いと思う。しかし今回の体験で感じたのは、「意外なところで役に立つ」という発見の積み重ねが、日常的に使い続けるモチベーションになるということだ。
皆さんもBobを使い始めると「こんなこともできるのか」ということを、ということを日々実感するだろうし、「これはできないのかも」ということを日々使う中で理解することで、Bobが単なるツールではなく、本当の意味でのパートナーになっていくと思う。
今回紹介したDDSからHTMLモックへの変換は、開発者と利用者の間の重要な「コミュニケーションの道具」となると思う。IBM iの資産をわかりやすく見せる手段が数分で手に入るのであれば、試さない理由はない。
まず自分の手元にあるDDSを、Bobに渡してみてほしい。
［i Magazine 2026 Summer掲載］
