0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

IBM i 開発者向け! VSCode拡張機能 #5

0
Posted at

【初回リリース】IBM i DSPF Screen Designerを公開します ― VSCodeで画面設計・DDS編集・コンパイルまで

🎉 IBM i DSPF Screen Designerを初回リリースを致します

IBM iのディスプレイファイル(DSPF)を、
VSCode上で画面イメージとして確認・編集できる拡張機能です。
画面レイアウトの編集だけでなく、DDS専用ソースエディタ、
保存前の差分確認、IBM i上でのコンパイル、
エラー行へのジャンプまでを一つの開発フローにまとめました。

  • 公開日:2026/08/28
  • 初回リリースバージョン:0.5.106
  • 配布先:https://www.i-o.co.jp/product.html
    ※弊社の製品ページ経由で、お名前とメールアドレスを入力後、
    ダウンロードボタンから取得することが可能です
  • ライセンス:プロプライエタリ(独自)ライセンスとなります。許諾端末(ダウンロードした端末)での利用のみ可。再配布、改変、リバースエンジニアリング、サブライセンスなどは禁止となります。プロプライエタリ(独自)ライセンスですが、禁止事項に抵触しない限りにおいて無料でお使いいただけます
  • 利用マニュアル:ダウンロードサイトからの配布物内に内包

【免責事項】
本機能は完全な動作を保証するものではありません。
作成・変更した内容や書き戻される DDS ソース・出力される Excel などの成果物は、
必ず内容をご確認のうえ 自己責任でご利用ください。
出力内容に不備・不具合等があった場合でも、著作者は一切の責任を負いません。

はじめに

IBM iのDSPF開発では、DDSソースを読みながら頭の中で画面を組み立てたり、
SDAや5250画面で実際の見え方を確認したりする場面が多くあります。

一方、現在のIBM i開発では、RPGやCL、DDSをVSCode上で管理し、
Gitや各種ビルドツールと組み合わせる運用も少しづつですが増えています。

そこで、既存のDDS資産をそのまま活用しながら、
DSPFもVSCode上で扱いやすくするために、IBM i DSPF Screen Designerを開発しました。

この拡張機能が目指しているのは、DDSを別形式へ置き換えることではありません。

既存のDDSを読み込む
        ↓
画面イメージで確認・編集する
        ↓
必要に応じてDDSソースを直接修正する
        ↓
保存前に差分を確認する
        ↓
IBM iでコンパイルする
        ↓
エラーの行・桁を確認して修正する

この一連の作業を、できるだけVSCodeの中で完結させることが目的です。


IBM i DSPF Screen Designerとは

IBM i DSPF Screen Designerは、
IBM iのディスプレイファイルを、
VSCode上で視覚的に表示・編集するための拡張機能です。
※特に、日本語環境での動作を考慮して構築をしております!

主に次の作業ができます。

  • 24行×80桁、27行×132桁の画面イメージ表示
  • DSP、SFL、CTL、WINDOW、GRDレコードの切り替え
  • 複数レコードフォーマットの合成表示
  • テキスト、フィールド、定数、罫線の追加・移動・削除
  • DSPATR、COLOR、EDTCDE、EDTWRD、CHECKなどの属性編集
  • 条件標識を切り替えた表示確認
  • サブファイル関連キーワードの設定
  • REF/REFFLD参照フィールドの解決
  • DDS専用ソースエディタによる直接編集
  • 保存前のDDS差分確認
  • IBM iソースメンバーの参照・書き戻し
  • IBM iでのCRTDSPFとエラー行表示
  • 画面イメージのExcel出力

[IBM i DSPF Screen Designerのメイン画面]image.png
image.png
image.png


初回リリースの目玉機能

1. DSPFを画面イメージとして表示・編集

DDSソースを読み込むと、DSPFを5250画面に近いグリッド上へ描画します。

画面イメージ上では、次のような操作が可能です。

  • 要素のドラッグ移動
  • 矢印キーによる1桁/1行単位の移動
  • Shift + 矢印による5桁/5行単位の移動
  • テキスト、フィールド、定数の追加
  • 複数要素の選択と一括移動
  • 行、桁、桁数の一括整列
  • Ctrl + Dによる複製
  • Alt + ドラッグによる複製移動
  • Ctrl + CCtrl + Vによるコピー&貼り付け
  • Undo/Redo
  • 罫線やボックスの描画・移動・サイズ変更

複数要素をコピーした場合は相対位置を維持し、
マウスカーソルで指しているセルを左上として貼り付けられます。

別のレコードフォーマットへ同じヘッダーや入力領域を移したい場合にも利用できます。

コピー元レコード
  ├─ 見出し
  ├─ 入力フィールド
  └─ 説明テキスト
          ↓ Ctrl+C
貼り付け先レコード
          ↓ Ctrl+V
相対位置を保って配置

フィールド名が重複する場合は、空いている連番へ自動的に調整されます。

[複数要素を別レコードへコピーする画面]image.png
image.png


2. 画面イメージとDDSソースを行き来できる

ツールバーの📄 ソース🖥 画面で、画面イメージとDDS専用ソースエディタを切り替えられます。

今回、切り替え用のショートカットとしてF7も追加しました。

画面イメージ
    ⇅ F7
DDSソースエディタ

.dspfを右クリックして、最初から専用ソースエディタで開くこともできます。

IBM i DSPF: ソースを開く

通常のVSCodeテキストエディタで開く方法も残しているため、用途に応じて使い分けられます。

開き方 主な用途
デザイナーで開く 画面レイアウトの確認・視覚編集
ソースを開く DDS専用ソースエディタから作業開始
テキストエディターで開く VSCode標準機能や他拡張との連携

VSCode標準テキストエディタで開いた場合も、
アウトライン、パンくず、Ctrl+Shift+Oにファイル定義、
レコード、フィールド、定数が表示されます。


3. 固定形式DDSに特化したソースエディタ

DDS専用ソースエディタは、単に文字を編集するだけの画面ではありません。

固定桁のDDSを扱いやすくするため、次の機能を備えています。

  • 桁ルーラー
  • 既定の上書きモード
  • Insertによる挿入/上書き切り替え
  • 全角文字とSO/SIを考慮した実桁計算
  • TabShift+Tabによる欄単位の移動
  • DDS入力規則のリアルタイム検証
  • キーワード補完
  • 引数ヒント
  • SEU風のF4プロンプト
  • F3による欄ヘルプ
  • 文字列検索
  • 80桁超過時の継続行分割
  • コメントアウト/解除
  • グリッド表示
  • フォントサイズ変更
  • ダークモード

F4プロンプトでは、1行のDDSを欄ごとのフォームへ分解して編集できます。

空行では、レコード、フィールド、文字定数、ファンクションキー、SFL/CTL一式などの雛形を選択できます。

[DDS専用ソースエディタとF4プロンプト]
image.png


4. IBM iでコンパイルし、エラーをソースへ表示

DSPFをIBM i上でコンパイルし、エラーをDDSソースの該当行へ表示できます。

対象は次の両方です。

  • IBM iのソースメンバー
  • PC上のローカル.dspf

コンパイルは、次の場所から実行できます。

  • ソースメンバーアクセスの右クリックメニュー
  • デザイナータブ右上の
  • エクスプローラーの.dspf右クリック
  • コマンドパレット

コンパイル後は、次の形式でエラーを確認できます。

121行目 7-16桁:
CPD7850 オプション標識を使用することはできない。

表示される情報は次のとおりです。

  • 行番号
  • 桁範囲
  • IBM iメッセージID
  • メッセージ本文

検証結果ペインのエラーをクリックすると該当行へ移動し、行番号横のガターにもが表示されます。

デザイナーで編集
        ↓
DDSソースを確認
        ↓
CRTDSPF
        ↓
エラー行へ自動移動
        ↓
修正して再コンパイル

MNUDDSもDDSとしてCRTDSPFによる構文チェックが可能です。ただし、メニューオブジェクトを作成するCRTMNUまでは実行しません。

[コンパイルエラーをDDSソースの該当行へ表示]
image.png
image.png


5. IBM iのソースメンバーへ直接アクセス

アクティビティバーのIBM i DSPFビューから、次の階層でソースメンバーを表示できます。

接続
  └─ ライブラリー
       └─ ソースファイル
            └─ メンバー

Code for IBM iに依存せず、次の操作を行えます。

  • メンバーをデザイナーで開く
  • DDS専用ソースエディタで開く
  • VSCode標準テキストエディタで開く
  • メンバーを検索する
  • 新規DSPF/MNUDDSメンバーを作成する
  • PCへダウンロードする
  • IBM iから最新内容を再取得する
  • 同じソースファイル内へメンバーをコピーする
  • メンバー名を変更する
  • メンバーを削除する
  • コンパイルする
  • Ctrl+SでIBM iへ書き戻す

IBM iメンバーは、事故を防ぐため既定では読み取り専用です。

書き戻しを有効にした場合だけ編集可能になり、
保存前にはサーバー側の内容が変わっていないかを確認します。

Code for IBM iを利用している環境では、
設定を有効にするとObject Browserの右クリックから本デザイナーを起動できます。


6. 既存DDSをできるだけ保持する

既存資産を扱ううえで、ソース全体を不用意に再生成しないことを重視しています。

基本方針は次のとおりです。

  • 元のコメントを保持する
  • 順序番号欄を保持する
  • 未編集行を原文のまま保持する
  • 未対応キーワードを含む行も保持する
  • 実際に編集した箇所を中心に更新する
  • 全角文字はSO/SIを考慮して桁計算する
  • 編集しない限り原文を1バイトも変えない

既存DSPFの一部分だけを修正したい場合にも、変更範囲を抑えやすい設計です。


初回公開版に向けた最新機能・変更点

ここからは、公開前の紹介内容・直前の開発版から、
初回リリース版に向けて追加・変更した内容を紹介します。

変更1:db2util依存を廃止し、OS標準のQZDFMDB2へ移行

IBM iへの接続機能でSQLを実行する方法を変更しました。

従来の開発版では、PASEのOSSパッケージであるdb2utilを必要としていました。

初回リリース版では、IBM i OSに標準同梱されているQZDFMDB2(DB2 CLP)を使用します。

これにより、接続機能を利用するために次の作業を行う必要がなくなりました。

yum install db2util
db2utilのパス設定
RPM/yum環境の事前構築

接続機能で必要になる主な前提は、PASEとOpenSSHです。

接続ビューでプロファイルへマウスを乗せると、
次のように実使用しているSQL実行方法を確認できます。

状態: 接続中(qzdfmdb2)

この変更により、IBM i側の導入手順を減らし、初回セットアップを簡略化しました。


変更2:「オブジェクトブラウザー」を「ソースメンバーアクセス」へ変更

機能の目的を分かりやすくするため、名称を変更しました。

旧:オブジェクトブラウザー
新:ソースメンバーアクセス

この機能はIBM iオブジェクト全般を操作するものではなく、
主にソース物理ファイルとソースメンバーを扱います。

名称変更に合わせて、
表示用ライブラリーとREF/REFFLD参照解決用のライブラリーリストを分離しました。

設定 用途
ソースメンバーアクセスに表示するライブラリー ツリーへ表示するライブラリー
ライブラリーリスト(参照解決) REF/REFFLDの探索順、コンパイル時の参照先探索

接続中でも、それぞれのライブラリー設定を単独で変更でき、次の操作から反映されます。


変更3:最近開いたソースメンバーの履歴

ソースメンバーアクセスに、最近開いたメンバーの履歴を追加しました。

  • 新しい順に表示
  • 同じメンバーは重複せず先頭へ移動
  • 既定10件
  • 設定により10~100件
  • 接続プロファイルをまたいで保持
  • 別接続のメンバーを開く際は切り替え確認
  • メンバーのTEXTもツールチップへ表示
  • 履歴の個別削除・全消去

複数のIBM iを扱う場合でも、どの接続のメンバーかを確認しながら開き直せます。

[最近開いたソースメンバーの履歴]image.png


変更4:メンバーのコピーと名前変更

ソースメンバーの右クリックメニューへ、次の操作を追加しました。

メンバーのコピー

メンバーのコピー...

同じソースファイル内へ別名で複製します。

IBM i側ではCPYSRCFを使用し、ソースタイプとTEXTも引き継ぎます。

メンバー名の変更

メンバー名の変更...

IBM i側のRNMMでメンバー名を変更します。

旧名で開いているタブは閉じられ、同名メンバーが存在する場合は処理を中止します。


変更5:再起動後のIBM iメンバーを開き直せるようにした

IBM iメンバーのタブは接続中の仮想リソースとして開くため、
VSCodeの再起動後にそのまま復元することはできません。

初回リリース版では、再起動やウィンドウ再読み込みのあとに、次の確認を表示します。

接続「接続名」へ接続し直して開き直しますか?

「はい」を選ぶと、接続し直して同じメンバーを同じ形式で開き直します。

  • デザイナーで開いていた場合はデザイナー
  • テキストエディタで開いていた場合はテキストエディタ

保存していない変更がVSCode側に残っている場合は、その内容も復元します。

差分の比較元には、IBM iサーバー上の保存済みメンバーを読み直して使用します。


変更6:要素のコピー&貼り付け

画面イメージ上の要素を、Ctrl+CCtrl+Vでコピーできるようにしました。

複数選択にも対応し、別のレコードへ同じレイアウトを移す用途にも利用できます。

貼り付け時には、次の安全確認を行います。

  • 画面範囲内か
  • ウィンドウ内か
  • サブファイル明細範囲内か
  • すべての要素を配置できるか
  • フィールド名が重複しないか

一つでも配置できない要素がある場合は、中途半端に貼り付けず理由を表示します。


変更7:コンパイル時にライブラリーリストを反映

接続プロファイルの「ライブラリーリスト(参照解決)」を、コンパイル時にも利用するようにしました。

コンパイル前に最大8ライブラリーを*LIBLの先頭へ追加します。

これは、DDSのREFREFFLDで参照先ライブラリーを省略している場合に有効です。

     A          R FLD01                    REFFLD(PF01/FLD01)

デザイナー上では参照解決できているのに、
コンパイル時だけ参照先が見つからないという差を減らします。

同名ファイルが複数ライブラリーにある場合は、
DDS側でライブラリーを明示するほうが確実です。


変更8:DDS検証を強化

DDS構造の検証を見直しました。

データ型・桁数の検証

次のようなDDS上の不整合を検証結果へ表示します。

  • A/S/Y/O/J型で桁数がない
  • A型に小数桁が指定されている
  • S/Y型に必要な小数桁がない
  • O/J型の長さが不足している
  • 小数桁が全体桁数を超えている

実機コンパイル前に、構造上の問題を見つけやすくしました。


変更9:F7で画面とソースを切り替え

ツールバーをクリックせず、次のキーで表示を切り替えられます。

F7:画面イメージ ⇔ DDSソースエディタ

ソース本文にカーソルがある場合も利用できます。

ダイアログやF4プロンプトを開いている間は、誤操作を避けるため無効になります。


そのほかの主な機能

MNUDDSへの対応

SDAで作成されるメニューDDSを.mnuddsとして開けます。

ローカルとIBM i上の両方で、新規MNUDDSを作成できます。

新規作成時には、メニューとして成立するために必要な骨組みを自動生成します。

  • DSPSIZ
  • CHGINPDFT
  • INDARA
  • PRINT
  • メニュー用レコード
  • 見出し
  • 選択肢1~10
  • CMDPROMPT

MNUDDSをCRTDSPFで構文確認することもできます。


サブファイル関連の設定

次のようなサブファイル関連キーワードをプロパティから扱えます。

SFLPAG
SFLSIZ
SFLLIN
SFLRCDNBR
SFLDSP
SFLDSPCTL
SFLINZ
SFLCLR
SFLDLT
SFLEND
SFLDROP
SFLFOLD
SFLMSGRCD
SFLNXTCHG
SFLMSGKEY
SFLPGMQ

SFLとCTLの紐づけ、SFLSIZSFLPAGの大小関係、
併用できないキーワードなども検証します。


標識による表示確認

標識ペインで標識をON/OFFし、画面の見え方を確認できます。

標識へマウスを乗せると、その標識を使用している要素が枠で強調されます。

切り替え直後は、実際に見た目が変わった要素が一瞬光るため、変化箇所を確認しやすくなっています。

標識の切り替えはプレビュー専用で、DDSソース自体は変更しません。


REF/REFFLDの解決

参照フィールドの桁数、データ型、小数桁などを、次の方法で解決できます。

  1. 参照先PFのDDSファイルを選択する
  2. IBM iへSSH接続してSQLサービスから取得する

IBM i接続時は、多段のREFFLD参照も追跡します。

編集コードEDTCDEがSQLカタログにない場合は、
コンパイル元のDDSソースを確認して補完します。


罫線とウィンドウ

GRDRCDの次のキーワードを読み込み、画面上で編集できます。

GRDATR
GRDBOX
GRDLIN
GRDCLR

罫線やボックスはドラッグで描画でき、複数のLINEを選択して位置や桁数を揃えられます。

WINDOW、WDWBORDER、WDWTITLE、*DFT*NOMSGLINなどにも対応しています。


保存前の差分確認

DDSを書き戻す前に、変更前と変更後を行単位で比較できます。

開いている対象 比較元
ローカル.dspf ディスクに保存済みの内容
IBM iメンバー サーバー上の現在の内容

差分行からDDSソースの該当箇所へ直接ジャンプすることもできます。

差分を確認
    ↓
変更行を右クリック
    ↓
該当ソース箇所に移動する

Excel出力

表示中の画面イメージをExcelへ出力できます。

  • テキストとフィールドの配置
  • 表示属性
  • 罫線
  • ウィンドウ
  • 合成表示の重ね順

画面仕様の確認資料やレビュー資料として利用できます。


動作要件

ローカルファイルだけを扱う場合

次の機能は、VSCodeだけで利用できます。

  • .dspfの表示
  • 画面編集
  • DDSソース編集
  • 差分確認
  • Excel出力

IBM iへの接続は不要です。

IBM i接続機能を利用する場合

区分 要件
VSCode 1.84.0以降
IBM i 7.3以降を推奨
PASE 5770-SS1 オプション33
OpenSSH 5733-SC1
SSHサーバー STRTCPSVR SERVER(*SSHD)で起動
SQL OS標準のQZDFMDB2
接続ユーザーCCSID 65535以外
権限 参照は*USE、書き戻しは*CHANGE相当

接続前提は、次のコマンドで確認できます。

IBM i DSPF: 接続テスト

インストール

ダウンロードしたVSIXをインストールします。

GUIから

  1. VSCodeの拡張機能ビューを開く
  2. 右上のを開く
  3. 「VSIXからのインストール…」を選ぶ
  4. 配布されたファイルを選ぶ
  5. VSCodeのウィンドウを再読み込みする

コマンドから

code --install-extension ibmi-dspf-designer-io-<version>.vsix

基本的な利用の流れ

ローカルのDSPFを編集する場合

1. .dspfをVSCodeで開く
2. 「IBM i DSPF: デザイナーで開く」
3. 画面イメージで配置・属性を編集
4. F7でDDSソースを確認
5. 差分を確認
6. Ctrl+Sで保存
7. IBM i接続があればコンパイル
8. 実機画面で確認

IBM iメンバーを直接編集する場合

1. 接続プロファイルを作成
2. ソースメンバーアクセスから接続
3. ライブラリー > ソースファイル > メンバーを開く
4. 読み取り専用で内容を確認
5. 必要な場合だけ書き戻しを有効化
6. 編集・差分確認
7. Ctrl+SでIBM iへ書き戻す
8. コンパイルしてエラーを確認
9. 実機画面で確認

安全に利用するために

本拡張は、すべてのDSPFキーワードや実機動作を完全に再現するものではありません。

初回利用時は、次の手順を推奨します。

  1. まず読み取り専用で既存DSPFを開く
  2. 画面イメージとDDSソースを確認する
  3. 小規模なテストメンバーで編集する
  4. 保存前の差分を確認する
  5. QTEMPまたは開発ライブラリーへコンパイルする
  6. コンパイルリストを確認する
  7. 5250画面で表示と操作を確認する
  8. 問題がないことを確認してから運用範囲を広げる

特に、次の点には注意してください。

  • 未対応キーワードを含むDSPF
  • 複雑なSO/SIを含むDBCS文字列
  • 複数人が同じメンバーを編集する運用
  • 権限やロックが関係するIBM iへの書き戻し
  • プログラム側の出力順に依存するOVERLAY画面
  • MNUDDSの本番メニュー作成

どのような方に使っていただきたいか

  • DDSソースだけでは画面構成を把握しにくい方
  • 既存DSPFの保守を担当している方
  • SDA以外の画面編集方法を試したい方
  • VSCodeでIBM iソースを管理している方
  • DSPFの変更差分をレビューしたい方
  • DDSを学習中で、ソースと画面の関係を確認したい方
  • ローカルファイルとIBM iメンバーの両方を扱いたい方

主要な未対応キーワード

  • PHSBTNFLD等の押しボタン関連キーワード
  • MNUBARCHC等のメニューバー関連キーワード
  • SNGCHCFLD等のラジオボタン関連キーワード(※一部基本的なところは実装済み
  • EDTCDEの5~9のユーザー定義編集コードへの対応

まとめ

IBM i DSPF Screen Designerを、今回初めてリリースします。

初回リリース版では、単なる画面ビューアーではなく、
次の機能を一つのVSCode拡張としてまとめました。

DSPFの画面表示
      +
視覚的なレイアウト編集
      +
固定形式DDSのソース編集
      +
IBM iソースメンバーアクセス
      +
保存前の差分確認
      +
CRTDSPFとエラー行表示

さらに、初回公開に向けて次の点を強化しました。

  • db2util依存を廃止し、OS標準のQZDFMDB2へ移行
  • ソースメンバー履歴
  • メンバーのコピー・名前変更
  • VSCode再起動後のメンバー再オープン
  • 要素のコピー&貼り付け
  • F7による画面/ソース切り替え
  • 補助オブジェクトを作らないコンパイル方式
  • ローカルコンパイル後の作業メンバー自動削除
  • コンパイル時のライブラリーリスト反映
  • DATE定数とデータ型・桁数検証の強化

既存のDDS資産をできるだけ保持しながら、
DSPF開発をVSCode上で見通しよく進められることを目指しています。

初回リリースのため、環境や既存ソースの書き方によっては、
想定していない動作が残っている可能性があります。

利用して気づいた点、対応してほしいキーワード、
改善案などをフィードバックいただけると助かります。


関連リンク


0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?