Valenceのログイン画面や、Portal画面の左上に表示されるロゴの画像は開発者が自由に変更可能です。変更方法も簡単で、画像を配置してパスをファイルに追記するだけです。
本Tipsでは、Valenceのアイコン画像を変更する方法についてご紹介します。
アイコン画像を変更した場合の画面例
Valence Portalのログイン画面のロゴと、ログイン後Valence Portal左上に表示されるアイコンを独自のアイコンに変更する方法についてご紹介します。
ログイン画面 変更例
ログイン画面のアイコン画像を変更すると例えば、以下のような画面にすることができます。
Portal画面変更例
Portal画面のアイコンはログイン後の左上の画像です。
ValenceのHook.jsについて
Valence Portalの画面表示時には、Valenceにあらかじめ定義されているHook.jsファイルを使用します。
Hook.jsはValence Portalが表示される際に必ず実行されるjsファイルです。
Hook.jsにロジックを追加することで、Valence Portalを自由にカスタマイズできます。
Hook.jsは/valence-X.X/resources/desktop/Hook.jsに配置されています。
※以降valence-X.Xの箇所は利用中のValenceのバージョンに合わせて置き換えてください。
例) /valence-6/resources/desktop/Hook.js
アイコン画像の変更手順
アイコン画像の配置
Valence Portalで表示するアイコンをWEBサーバーに配置します。
ValenceのドキュメントルートはIBMiのIFS上/valence-X.Xになります。
用意したアイコンは、Tipsでは/valence-X.X/resources/images/に配置します。
Tipsでは、ログイン用のアイコンはmigaro_logo.png ,
ログイン後のポータル画面に表示されるアイコンをmigaro.pngとしています。
表示したい画像ファイルをあらかじめ/valence-X.X/resources/images/に配置ください。
Hook.jsの変更
アイコンを変更するには、Hook.jsを編集します。
UTF-8(BOMなし)で編集する必要があるため、UTF-8が扱える任意のテキストエディタ準備してください。
IFS共有コマンドとHook.jsのファイルパス
Hook.jsのパスは、/valence-X.X/resources/desktop/Hook.jsです。
IBMiのIFSルートが共有されている場合は、ネットワークからHook.jsにアクセス可能です。
IFSルートが共有されていない場合、Windowsのエクスプローラからアクセスするために/valence-X.XをIFS共有してください。
IBMiのIFSを共有するにはQZLSADFS APIを利用します。
コマンドの詳細についてはIBMのサイトにてご確認ください。
例えば、/valence-6のディレクトリをIFS共有するには以下のコマンドをエミュレータから実行します。
CALL QSYS/QZLSADFS PARM('valence6' '/valence-6' X'00000010' X'00000000' 'valence-6' X'00000002' X'00000010' X'00000000')
Hook.jsの編集
Hook.jsファイルがネットワーク共有されましたのでエクスプローラからアクセスしてテキストエディタで編集します。
本TipsではVisual Studio Codeを使用しました。
Microsoftのフリーエディターで、デフォルトの文字コードがUTF-8で、JavaScriptファイルを編集する際にも、コードチェックを行ってくれるため便利です。
ログオン画面のアイコンを変更する場合はloginLogoUrlのdefaultにアイコンのパスを設定します。
ログオン画面のアイコン画像変更
loginLogoUrl : {
"default" : "/resources/images/migaro.png",
"dracula" : null,
},ログオン後のポータル画面のアイコンを変更する場合はportalLogoUrlのdefaultにアイコンのパスを設定します。
ポータル画面のアイコン画像変更
/*
Change the image used for the Portal control bar.
Same rules apply as loginLogoUrl above.
*/
portalLogoUrl : {
"default" : "/resources/images/migaro_logo.png",
"dracula" : null,
},終わりに
今回のTipsではアイコン画像を変更する方法についてご紹介しました。
簡単な編集で、アイコン画像を変更できるので是非ご活用ください。