先生と生徒の会話形式で理解しよう

生徒

「先生、銀行や古いオフィスで見かける『黒い背景に緑の文字』だけの画面を、普通のWebサイトみたいに綺麗にすることはできるんですか？」

先生

「はい、できますよ！それを『画面のWeb化』と呼びます。専門用語ではCICS（シックス）などのオンライン画面をモダナイゼーションすると言いますね。」

生徒

「あの独特な画面をどうやってWebブラウザで動かすのか、仕組みが気になります！」

先生

「中身の計算ルールは変えずに、見た目だけを最新にする魔法のような技術があるんです。その基本ポイントを一緒に見ていきましょう！」

1. そもそも「画面のWeb化」とは？

昔のプログラミングの世界、特にCOBOL（コボル）が使われている大型コンピュータ（メインフレーム）では、CICS（シックス）という仕組みを使って画面を表示していました。これは、マウスを使わずにキーボードの「Fキー（ファンクションキー）」や「Enterキー」だけで操作する、文字だけの画面です。

画面のWeb化（ウェブか）とは、この古い操作画面を、Google ChromeやMicrosoft Edgeといった、私たちが普段使っているWebブラウザで見られるように作り変えることを指します。パソコンを触ったことがない方への例えとして、「古い和式トイレを、中身の配管は変えずに便器だけ最新の洋式ウォシュレットに取り替える」ようなイメージです。外側（見た目）は使いやすくなりますが、裏側（流れる仕組み）は信頼のある古い仕組みをそのまま活かしているのです。

2. なぜCICS画面をWeb化する必要があるのか？

理由はいくつかありますが、最も大きな理由は「使いやすさの向上（ユーザー体験）」と「人材の確保」です。

直感的な操作： 文字だけの画面は覚えるのが大変ですが、Web化すればマウスでクリックしたり、スマホの画面を指で触って操作したりできるようになります。
若手技術者への対応： 最近の若手社員は、黒い画面の操作方法を知りません。Web画面であれば、マニュアルがなくても操作しやすくなります。
リモートワークへの対応： 専用の特殊な機械が必要だった画面をWeb化すれば、自宅のパソコンからも仕事ができるようになります。

3. 画面Web化の仕組み（エミュレーションと再構築）

Web化には大きく分けて二つの方法があります。

① ターミナル・エミュレータ方式（見た目そのまま）

これは、Webブラウザの中に「昔の画面をそのまま映し出す」方法です。見た目はあまり変わりませんが、特別なソフトを入れなくてもブラウザさえあればどこでも動くようになります。

② リフェーシング方式（見た目を一新）

プログラムのデータだけを取り出し、Web用に設計された綺麗なデザインに当てはめる方法です。入力欄をボタンにしたり、カレンダーから日付を選べるようにしたりと、劇的に使いやすくなります。

4. 画面Web化の基本：BMSマップの理解

COBOLで画面を作るとき、BMS（Business Management System）マップという設計図を使います。これは「何行目の何文字目に名前の入力欄を置く」といった座標を決めるものです。

Web化する際は、この「座標の情報」をHTML（エイチティーエムエル）というWeb専用の言葉に変換します。


* CICS画面の定義のイメージ（BMSマップの一部）
       PRINT  MAP  POS=(05,10),ATTRB=(NUM,BRT),LENGTH=5
       NAME   MAP  POS=(07,10),ATTRB=(ALPHA),LENGTH=20

上のコードは、「5行目10文字目に数字の入力欄、7行目10文字目に名前の入力欄を置く」という意味です。 Web化ツールを使うと、これを自動的に以下のようなWebの言葉に翻訳してくれます。


<label>価格：</label><input type="number" style="top:50px; left:100px;">
<br>
<label>名前：</label><input type="text" style="top:70px; left:100px;">

5. Web化における「画面遷移」の壁

Web化する際に最も注意が必要なのが、画面遷移（がめんせんい）、つまり画面の切り替わり方です。

昔の画面は「一つの画面を丸ごと送り、反応が返るまで待つ」という一方通行な動きでした。対して、最近のWebサイトは「ボタンを押さなくても一部だけデータが変わる」といった滑らかな動きが得意です。

この違いを無視して無理やりWeb化すると、操作が遅く感じたり、途中でエラーが出たりすることがあります。「古いプログラムの癖」を理解して、Webでもスムーズに動くように調整するのがプロの技です。

6. 知っておきたい重要用語

難しい言葉が出てきましたが、ここで整理しましょう。

単語	読み方	初心者向けの意味
Mainframe	メインフレーム	銀行などで使われる超巨大なコンピュータ本体のこと。
CICS	シックス	画面からの入力を受け取って、プログラムを動かすための監督役。
Middleware	ミドルウェア	「古い画面」と「Web」の間に入って、言葉を通訳してくれる中間管理職。
UI / UX	ユーアイ / ユーエックス	見た目の綺麗さや、使い心地の良さのこと。