Valenceのポータル画面は、Hook.jsをカスタマイズすることによりポータル画面の見た目や機能をカスタマイズすることができます。TipsではHook.jsにJavaScriptを追加して、ポータル画面のアプリタイルへマウスオーバーした際に、ツールチップ表示する方法をご紹介します。
ValenceのHook.jsとは？
Valence Portalが表示される際に実行されるJavaScriptファイルです。
Hook.jsにロジックを追加することで画面をカスタマイズすることができます。
過去のTipsでは、Hook.jsを変更してValence Portalに表示されるアイコンを変更する方法をご紹介しています。
Hook.jsは【IFSパス】/resources/desktop/Hook.jsに配置されています。
【IFSパス】の箇所は利用中のValenceインスタンスに合わせて置き換えてください。
IFSパスの確認方法
確認するには、Valenceの「インスタンス管理」を実行してください。
表示されたインスタンス一覧のタイルで、インスタンスの名前、ポート、IFSパス等が確認できます。
ブラウザからアクセスしているValenceのポート番号から、適用するインスタンス名を特定して「IFSパス」を確認してください。
ポート番号は、アドレスバーのURLでホスト名(IPアドレス)後ろの：（コロン）以降の数値がポート番号になります。
ツールチップ表示例
ツールチップ機能を追加すると、ポータル画面のタイルにマウスカーソルを移動すると、ポータル管理> アプリ の設定画面で設定した、「説明」の項目をツールチップに表示します。
ツールチップ機能の組み込み
ツールチップ機能を追加する、Valenceインスタンスの「IFSパス」をインスタンス管理アプリで確認してから適用ください。
ファイルのダウンロード
ツールチップ機能を追加するサンプルをダウンロードしてください。
ツールチップ機能サンプルダウンロード
Tips202305.zipを展開すると、Tips202305フォルダ内にHook.jsファイルとvalext.zipファイルが出力されます。
Tips202305フォルダをC:\tempに配置してください。
※C:\tempフォルダが存在しない場合は作成ください。
ValenceのIFS領域にアップロード
Windows端末からFTPを使用してIBMiのIFS上にファイルをアップロードします。
コマンドプロンプトを起動
スタートメニュー > Windowsシステムツール > コマンドプロンプト
からコマンドプロンプトを起動してください。
FTPコマンドの実行
FTP [IBMi IP Address]例) FTP 192.168.0.21
※IP Addressが192.168.0.21の場合
ユーザープロファイル / パスワードの入力
ユーザー (IBMi IP Address:(none)):
が表示されますので、ユーザープロファイルを入力後Enterキーを押下ください。
ユーザープロファイルを入力してEnterキーを押下すると
パスワード:
が表示されますので、ユーザープロファイルのパスワードを入力後Enterキーを押下ください。
バイナリモードに変換
ftp > が表示されますので、binを入力してEnterキーを押下ください。
ftp > binネームフォーマット変換
IFS領域にアクセスするため、ネームフォーマット変換コマンドを実行します。
ftp > quote site namefmt 1put コマンドでファイルを送信
putコマンドでvalext.zipを【IFSパス】/resources/ へ転送します。
Hook.jsを【IFSパス】/resources/desktop/へ転送してHook.jsを上書きします。
valext.zipを転送
put C:\temp\Tips202305\valext.zip 【IFSパス】/resources/valext.zip例) IFSパス /valence-6に転送する場合は以下のコマンドになります。
put C:\temp\Tips202305\valext.zip /valence-6/resources/valext.zipHook.jsを転送
put C:\temp\Tips202305\Hook.js 【IFSパス】/resources/desktop/Hook.js例) IFSパス /valence-6に転送する場合は以下のコマンドになります。
put C:\temp\Tips202305\Hook.js /valence-6/resources/desktop/Hook.jsカレントディレクトリの変更
カレントディレクトリを変更します。
cd 【IFSパス】/resources/例) IFSパス /valence-6 の場合は以下のコマンドになります。
cd /valence-6/resources/valext.zipの展開
FTPからリモートコマンドを発行してzipを展開します。
quote rcmd STRQSH CMD('jar -xvf valext.zip')以上でツールチップ機能の追加は完了です。
Valenceにログインしてツールチップが表示されていることをご確認ください。
また、Hook.jsを更新してもキャッシュ読込む場合がありますので、明示的にキャッシュを削除するかキャッシュを読込まないように設定して実行ください。