Migaro. 技術Tips

                       

ミガロ. 製品の技術情報
IBMiの活用に役立つ情報を掲載!


SmartPad4iアプリをCobos4iアプリに変換(第1回)

Cobos4iはSmartPad4iの後継製品です。JC/400やSmartPad4iと同様にフロントエンドをHTMLやJavaScript、CSSで開発、バックエンドではRPG/COBOLを使用してWebアプリケーションを開発できるツールです。
TipsではSmartPad4iアプリをCobos4iアプリにマイグレーションする手順を紹介します。

Cobos4iへのマイグレーション

Cobos4iのマイグレーションは大きく分類すると以下の手順となります。

  • プロジェクト(*.jdp)のマイグレーション
  • IDEへソースコードの取り込み
  • HTMLのパス置き換え

本Tipsではプロジェクト(*.jdp)のマイグレーションについて説明します。

SmartPad4iプロジェクトをCobos4iプロジェクトに変換

SmartPad4i Designer

SmartPad4iではSmartPad4i DesignerというツールでHTMLの要素にRPGと連携させるための属性を設定します。
SmartPad4i Designerで作成した定義がプロジェクトファイルとなります。
Cobos4iは統合開発環境(Eclipse)のプラグインとして導入され、Eclipseのプロジェクトとしてプロジェクトが管理されます。

SmartPad4i DesignerをCobos4iのプロジェクトに変換

そのため、SmartPad4iのプロジェクトファイルを取り込みCobos4iのプロジェクトに変換する必要があります。
Cobos4iではHTMLを指定の位置に配置後、プロジェクトファイルのパスを変更するだけで取り込みが可能です。

HTMLの配置

プロジェクトファイルを読み込む前にCobos4i開発環境のサーバー上にHTMLファイルを配置します。
SmartPad4iのアプリで[DocumentRoot]/smartpad4i/html/SP4IHOME のディレクトリにHTMLを配置している場合

C:\SystemObjects\Cobos4i\Tomcat\webapps\cobos4i\html\SP4IHOME\
にコピーします。

iniファイルは[DocumentRoot]/smartpad4i/infos/SP4IHOME のディレクトリに配置している場合

C:\SystemObjects\Cobos4i\Tomcat\webapps\cobos4i\infos\SP4IHOME\
にコピーしてください。

プロジェクトファイルのパス変更

SmartPad4iのプロジェクトファイル(*.jdp)をコピー後、テキストエディタで編集します。
BaseセクションのパスをHTMLを配置した
C:\SystemObjects\Cobos4i\Tomcat\webapps\cobos4i\html\SP4IHOME\
に変更します。以上で準備が完了です。

Cobos4iのImport Designer Project

SmartPad4iプロジェクトファイルをCobos4iプロジェクトに取り込み

Eclipseを起動してCobos4i Explorerを「右クリック」して表示されるメニューから「Import」を選択します。
次に、Importのダイアログが表示されるので、「Import Designer Project」を選択して「Next」ボタンをクリックしてください。
「Cobos4i Project Import Wizard」ではプロジェクトファイルのパスを指定して、プロジェクト名を設定後「Finish」ボタンをクリックすることでプロジェクトを取り込むことができます。

接続設定の変更

取り込み後、Cobos4iの接続設定画面が開くためPort Numberを19004から30014に変更します。
 ※Cobos4iではCO406J/CO406JTCPサブシステムではなくCO424/CO424TCPサブシステムに変更となり、アプリケーションサーバーとIBMiの接続ポート番号が19004から30014に変更されました。

「配布」タブの「Synchronize local program sources after deployment」のチェックを解除後、右下にある「Apply and Close」ボタンで確定します。

プロジェクトのマイグレーション完了

SP4IHOMEプロジェクトとしてCobos4iに取り込まれます。
取り込んだプロジェクトのHTMLをCobos4i Designerで実行すると SmartPad4i Designerで設定したプロジェクトの定義が取り込まれていることがわかります。

プロジェクトファイルのマイグレーションは以上で完了となります。