IBM Rational Host Access Transformation Services V7.5.1 開発ガイド ― 初心者のためのはじめの一歩 ―

第2回 最小限のカスタマイズでHATSを公開する

Comments

コンテンツシリーズ

このコンテンツは全#シリーズのパート#です: IBM Rational Host Access Transformation Services V7.5.1 開発ガイド ― 初心者のためのはじめの一歩 ―

このシリーズの続きに乞うご期待。

このコンテンツはシリーズの一部分です:IBM Rational Host Access Transformation Services V7.5.1 開発ガイド ― 初心者のためのはじめの一歩 ―

このシリーズの続きに乞うご期待。

2. 最小限のカスタマイズでHATSを公開する

HATSはデフォルトのプロジェクトのままでもホスト・アプリケーションをWebに公開することができますが、文字のフォントの大きさなど、表示の微調整が必要な場合があります。ここでは、デフォルトの設定に最小限のカスタマイズを行い、HATSを公開する手順を学習します。

2.1. 表示の調整

2.1.1. フォントの調整

まずフォントの調整をするため、スタイルシート(CSSファイル)の編集を行います。HATSではテンプレートごとに違ったスタイルシートを使用しているため、プロジェクトに適用しているテンプレートで使用しているスタイルシートを調べる必要があります。「HATSプロジェクト」ビューから、「Web コンテンツ」→「テンプレート」を展開し、デフォルトに指定しているテンプレートをダブル・クリックします。

テンプレートのソースから、使用しているスタイルシートを調べます。以下のコードを調べます。この例では「finance.css」ファイルを使用していることが分かります。

<link href="../common/stylesheets/finance.css" rel="stylesheet" type="text/css">

テンプレートによっては複数のスタイルシートを参照している場合があります。以降の手順でカスタマイズするスタイルシートは以下のいずれかになるため、以下のうちどのスタイルシートを参照しているかを調べてください。複数のスタイルシートを参照している場合もあります。

  • blacktheme.css
  • finance.css
  • graytheme.css
  • industry.css
  • monochrometheme.css
  • tantheme.css
  • whitetheme.css

まず、カスタマイズを行うスタイルシートのバックアップ・ファイルを作成します。「HATSプロジェクト」ビューから「Web コンテンツ」→「共通」→「スタイルシート」を展開し、スタイルシートをコピーし、バックアップ用の名前を付けて保存してください。ここでは「finance」をコピーし、「finance_backup」として保存します。続いて、カスタマイズを行うスタイルシートをダブル・クリックして開きます。ここでは「finance」を開きます。

「body」および「td」、「p」、「input」など、フォントの設定を行っている要素を編集します。「finance.css」では、「body{ }」、「td,p,input,select,th{ }」のfont-sizeを以下のように設定します。

font-size : 12pt;

フォント・サイズ変更前
フォント・サイズ変更前
フォント・サイズ変更前
フォント・サイズ変更後
フォント・サイズ変更後
フォント・サイズ変更後

デフォルトのフォント・サイズはやや小さいサイズ設定のため、ここでは少しサイズを大きくしました。必要に応じてフォント・サイズの微調整をさらに行ってください。

2.1.2. 文字表示位置の調整

続いて、文字表示位置の調整をします。文字の表示位置は以下の3パターンから選択できます。

  • 通常:フィールドの境目に従って縦位置を揃える
  • 文字ごと:1文字ごとに縦位置を揃える
  • ワードごと:単語の境目に従って縦位置を揃える

デフォルトの設定は「通常」であり、フィールドの境目に従って縦位置が揃います。しかし、テーブル表示している画面等で列の境目をフィールドで区切っていない場合など、この設定では列がずれてしまう場合があります。

その場合は、「文字ごと」、「ワードごと」の設定を試してください。まず、HATSのプロジェクト設定ファイルを開きます。プロジェクト設定ファイルが開いたら、ファイル下部の「レンダリング」タブを選択します。表示された画面から、「ウィジェット」を展開し、「フィールド」を選択します。表示された画面の「レイアウト」→「位置合わせ」の選択肢から、「文字ごと」を選択します。プロジェクト設定ファイルの変更を保存してください。

2.2. テンプレートのカスタマイズ

HATSのテンプレートをカスタマイズします。テンプレートには常に表示しておく情報を載せます。ここではタイトルとリンクのカスタマイズを行います。まず、プロジェクトで使用しているテンプレートのバックアップ・ファイルを作成します。「HATSプロジェクト」ビューから、「Web コンテンツ」→「テンプレート」を展開し、デフォルトに指定しているテンプレートをコピーし、バックアップ用のファイル名を指定して保存します。ここでは「Finance」をコピーし、「Finance_backup」で保存します。バックアップ・ファイル作成後、「Finance」をダブル・クリックします。

2.2.1. タイトルのカスタマイズ

テンプレートを開いたら、「デザイン」タブを選択します。「デザイン」タブでは「WYSIWYG」(What You See Is What You Get)での編集が可能なため、簡単に編集作業を行えます。「My Company」にカーソルを合わせて左クリックしてください。「My Company」が編集できるようになります。ここでは「日本株式会社」に書き換えます。そのほか、「HATS Page」など任意のタイトルで構いません。

2.2.2. リンクのカスタマイズ

テンプレートにはデフォルトでリンクが設定されています。このままでは意図しないWebサイトへのリンクを公開することになるので、ここでリンクを編集します。テンプレートの「ソース」タブを選択してください。ソースからアンカー・タブ(<a>)を探し、「href」のパラメーターを変更します。リンクとして表示する文字列も変更します。

例: <a href=”http://google.com”>Google</a>

なお、このままでは同一ウィンドウ内でサイトを移動してしまい、HATSが正常に動作しなくなる可能性があります。HATSはホストとのTelnet接続も切断する必要がありますが、HATS以外のWebページからではホストとのTelnet接続を切断できません。そこで、「target」属性を追加し、「_blank」などのパラメーターを設定し、HATSとは別ウィンドウでリンク先のWebページを開くようにします。

例: <a href=”http://google.com” target=”_blank”>Google</a>

「2.2.1. タイトルのカスタマイズ」および「2.2.2 リンクのカスタマイズ」で設定した内容を確かめます。「HATSプロジェクト」ビューからプロジェクト名を右クリックし、「サーバーでデバッグ」を選択し、使用するWASを選択してください。しばらくすると、「第1回 はじめてのHATS」の章の「1.3.2. 起動するWebブラウザーの変更」で指定したWebブラウザーに画面が表示されます。

確認が終わったら、「切断」ボタンを選択し、Webブラウザーを閉じます。同様の手順で、その他のリンクも編集、あるいは削除します。

2.3. その他の設定

その他、HATSを公開する上で必要な設定を行います。

2.3.1. Webブラウザーの戻るボタン無効化

HATSを使用する際、Webブラウザーで表示されているホスト画面と、実際のホスト画面が一致している必要があります。HATSはWebブラウザー上での操作をそのままホスト画面に適用するからです。しかし、Webブラウザー上で「戻る」ボタンを押すなどし、Webブラウザー上の表示履歴を戻ってしまうと、Webブラウザーの画面とホスト画面がずれてしまいます。この状態で入力を行うと、ホスト・アプリケーションを正しく操作できません。これを防ぐための設定を行います。

HATSプロジェクトに使用しているテンプレートを開きます。「ソース」タブを選択します。<head></head>の間にJavaScriptを下記のように記述してください。

    <!-- カスタムJavaScript ここから --> 
    <script type="text/javascript"> 
    history.go(1); 
    </script> 
    <!-- カスタムJavaScript ここまで -->

2.3.2. ホスト接続の自動切断

HATSを使用する際、Webブラウザーを閉じるだけではホスト接続を切断できません。ユーザーは明示的に「切断」ボタンを押すことでホスト接続を切断する必要があります。

しかし、ユーザーに「切断」ボタンを押させる運用は現実的には難しいことが多いです。ついつい「切断」ボタンを押さずに、Webブラウザーの「×」ボタンを押してしまいます。そこで、Webブラウザーの「×」ボタンを押すだけでもホスト接続が切断できるように設定します。

HATSの設定により、Ajaxの仕組みを用いてホスト接続を切断できるようになります。WebブラウザーのJavaScriptからHATSサーバーに対してポーリングを行い、ポーリングが途絶えたときにHATSサーバーはWebブラウザーとの通信が切断したことを検知し、ホスト接続を切断する処理に入ります。この機能はHATS V7.5.1より新しく提供されるようになった機能になります。

HATSのプロジェクト設定ファイルを開きます。「その他」タブを表示し、「自動切断および最新表示」を選択します。設定項目として、「クライアント・プルを使用可能にする(AJAX)」にチェックを入れ、「切断」にチェックを入れます。設定を終えたら、ファイルの更新を保存してください。

自動切断機能を確認するため、HATSを起動してください。ホスト端末も起動していることを確認し、Webブラウザーを「×」ボタンで閉じます。しばらくすると自動切断機能が働き、ホスト端末が自動的に閉じます。デフォルトでは「ポーリング間隔:5.0秒」、「切断を待機する時間:15.0秒」のため、最大20秒後にホスト端末が自動的に閉じます。

2.3.3. 画面の自動更新

ホスト接続自動切断と同じ設定箇所で、画面自動更新の設定も行います。ホストからプッシュ型で画面更新するアプリケーションをお使いの場合は、この設定を行ってください。HATSはHTTPでホスト画面をWeb化しますが、HTTPであるためユーザーが画面更新しない限り、Webブラウザー上のホスト画面は更新されません。そのため、ホストからプッシュ型で画面更新する場合には、HATSの設定でこれに対応する必要があります。

HATSのプロジェクト設定ファイルを開きます。「その他」タブを表示し、「自動切断および最新表示」を選択します。設定項目として、「クライアント・プルを使用可能にする(AJAX)」にチェックを入れ、「最新表示」にチェックを入れます。設定を終えたら、ファイルの更新を保存してください。

2.4. WASへのデプロイ

2.4.1. HATSプロジェクトのエクスポート

WASにデプロイするために、HATSプロジェクトをEARファイルとしてエクスポートします。RADのメニューから「HATS」→「プロジェクトのエクスポート」を選択してください。

「参照」を選択して任意の宛先を設定し、「終了」を選択します。

2.4.2. WASへのデプロイ

※WAS V7.0を前提に手順を説明します。

Webブラウザーを開き、WASの管理コンソールにログインします。

http://servername:9060/ibm/console

左側のメニューから、「アプリケーション」→「新規アプリケーション」を選択し、右側のメニューから、「新規エンタープライズ・アプリケーション」を選択します。

「ローカル・ファイル・システム」にチェックを入れ、「参照」ボタンからエクスポートしたHATSプロジェクトのEARを選択し、「次へ」を選択します。

デフォルトのまま「次へ」を選択します。

デフォルトのまま「次へ」を選択します。

「選択」にチェックを入れ、「クラスターおよびサーバー」から、HATSアプリケーションをデプロイするWebサーバーとアプリケーション・サーバーを選択します。複数選択するときには、Ctrlキーを押しながら選択します。サーバーを選択したら、「適用」を選択し、「次へ」を選択します。

要約を確認し、「終了」を選択します。

インストールが完了したら、「保存」を選択します。

保存が完了したら、HATSアプリケーションを開始します。左側のメニューから、「アプリケーション」→「アプリケーション・タイプ」→「WebSphere エンタープライズ・アプリケーション」を選択します。右側に表示されるアプリケーションから、インストールしたHATSアプリケーションをチェックし、「開始」を選択します。

アプリケーションが正常に開始したことを確認します。アプリケーション状況が「×」から「→」に変わったことを確認してください。

実際にWebブラウザーからアクセスできるかを確認します。アプリケーション・サーバーのポートに直接アクセスできる場合は、9080ポートに直接アクセスします。

http://wasserver:9080/hatsProject/

※wasserver:WASのホスト名、もしくはアドレス

※hatsProject:HATSプロジェクト名

Webサーバー経由でアクセスさせる場合は、80ポートからのアクセスも試してください。

http://wasserver/hatsProject/

9080ポートでHATSが表示されない場合は、9080ポートへのアクセスがブロックされている、HATSアプリケーションが開始されていない、などの原因が考えられます。80ポートでHATSが表示されない場合は、80ポートへのアクセスがブロックされている、Webサーバー・プラグインの伝播ができていない、Webサーバーが始動していない、などの原因が考えられます。

2.4.3. 日本語入力対応

デフォルトの設定のままでは、HATSのWeb画面から日本語(DBCS)を送信するときに文字化けしてしまいます。HATSから日本語を正しく入力するために、WASに設定を追加します。

日本語を入力し送信
日本語を入力し送信
日本語を入力し送信
結果は文字化け
結果は文字化け
結果は文字化け

Webブラウザーを開き、WASの管理コンソールにログインします。

http://servername:9060/ibm/console

左側のメニューから、「サーバー」→「サーバー・タイプ」→「WebSphere Application Server」を選択し、右側からHATSアプリケーションをインストールしたサーバーを選択します。

表示された画面右側の選択項目から、中央あたりにある「Javaおよびプロセス管理」→「プロセス定義」を選択します。

表示された画面右側の選択項目から、「Java仮想マシン」を選択します。

表示された画面の選択項目から、「汎用JVM引数」の値に以下を入力します。すでに何か値が入力されている場合は、その値の後ろに半角スペースを一つ入れて入力してください。この値を間違えるとWASが起動しなくなりますので、入力は慎重に行ってください。

-Dclient.encoding.override=UTF-8

「適用」を選択します。その後、表示された画面で「保存」を選択してください。

保存が完了したら、WASを再起動してください。再起動に失敗する場合は、「汎用JVM引数」に指定した値が誤っている可能性があります。以下のXMLファイルを直接編集し、「汎用JVM引数」(jvm Entries)を訂正し、WASを起動してください。

WASインストール・ルート/pro files/profileName//config/cells/cellName/nodes/ nodeName/ servers/severName/server.xml

WASが再起動したら、WebブラウザーからHATSアプリケーションにアクセスし、日本語の入力をテストしてください。


ダウンロード可能なリソース


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Rational
ArticleID=660415
ArticleTitle=IBM Rational Host Access Transformation Services V7.5.1 開発ガイド ― 初心者のためのはじめの一歩 ―: 第2回 最小限のカスタマイズでHATSを公開する
publish-date=05272011