17.2.2 起動HTMLソースによるブラウザ画面のデザイン例
(1) 起動HTMLによる画面デザインの設定
起動HTMLに処理を追加して,Webブラウザのデザインをカスタマイズする例を説明します。例えば,XMAP3 ActiveXコントロールを貼り付ける起動HTMLにJavaScriptで処理を挿入してInternet Explorerのオブジェクトにアクセスし,次のような属性を制御できます。
-
Webブラウザのウィンドウサイズ
-
Webブラウザのウィンドウ位置
-
Webブラウザのクライアント領域の背景色
-
XMAP3 ActiveXコントロールをクライアント領域に貼り付ける際の余白サイズ
-
XMAP3 ActiveXコントロールの配置方法(センタリング/右寄せ/左寄せ)
-
スプラッシュ画面のカスタマイズ
これらを設定するために,起動HTMLにそれぞれ次の処理を追加します。JavaScriptの指定形式については,Microsoft社から公開されているドキュメントを参照してください。
(a) Webブラウザのウィンドウサイズ
-
設定方法
JavaScriptでWindowオブジェクトのresizeToメソッドにアクセスし,XMAP3 TP1/Web連携機能の画面へ移動したとき,自動的にブラウザのサイズを適切な大きさに変更します。ここで設定する値はInternet Explorerのウィンドウサイズの値です。クライアント領域のサイズは,ツールバーの表示/非表示の設定などによって異なります。
-
設定例
(JavaScriptのページロードのイベント処理などで)
window.resizeTo(1152,864);
(b) Webブラウザのウィンドウ位置
-
設定方法
JavaScriptによってWindowオブジェクトのmoveToメソッドにアクセスし,XMAP3 TP1/Web連携機能の画面に移動したとき,自動的にブラウザのサイズをスクリーン上の左上に移動します。
-
設定例
(JavaScriptのページロードのイベント処理などで)
window.moveTo(0,0);
(c) Webブラウザのクライアント領域の背景色
-
設定方法
JavaScriptによってstyleオブジェクトのbackgroundColorプロパティの値を変更し,この値をカスタマイズします。16進数のRGB値の文字列で設定します。
-
設定例
(JavaScriptのページロードのイベント処理などで)
document.body.style.backgroundColor = "#C0C0C0";
(d) XMAP3 ActiveXコントロールをクライアント領域に貼り付ける際の余白サイズ
-
設定方法
JavaScriptによってstyleオブジェクトのmarginプロパティの値を変更し,この値をカスタマイズします。上下左右のそれぞれの余白サイズを指定できますが,HTML上へのXMAP3 ActiveXコントロールの配置方法によって,それぞれの意味が異なります。
まず,上下余白のサイズについては,指定された値がそのままInternet Explorerのクライアント領域での余白サイズとなります。ただし,左右の余白について,XMAP3 ActiveXコントロールをセンタリングして配置している場合は,そちらが優先されます。Internet Explorerのクライアント領域の横サイズがコントロールの横サイズ(マップ定義での画面横サイズ)よりも大きい場合は,自動的にセンタリングされるように余白が追加されます。
-
設定例
(JavaScriptのページロードのイベント処理などで)
document.body.style.margin = "0 0 0 0";
(e) XMAP3 ActiveXコントロールの配置方法
-
設定方法
HTMLにXMAP3 ActiveXコントロールを配置する際に,HTMLのalign属性でセンタリングを設定できます。
-
設定例
<BODY> <DIV ALIGN="center" ID="EXAMPLE_DIV_ID"> このテキストはコントロールによって置き換えられます。 </DIV> : </BODY>
これらのカスタマイズをした起動HTMLの例を次に示します。
<HTML> <HEAD> <TITLE>XMAP3/Web</TITLE> <SCRIPT SRC="x3webfrm.js" LANGUAGE="JScript"></SCRIPT> </HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- function OnDocumentLoading(){ document.body.style.margin="0 0 0 0"; //余白をゼロに設定 document.body.style.backgroundColor="#C0C0C0"; //背景色を設定 window.resizeTo(screen.width,screen.height); //ブラウザサイズを最大化する window.moveTo(0,0); //ブラウザウィンドウを画面左上に移動 } --> </SCRIPT> <BODY> <DIV ALIGN="center" ID="EXAMPLE_DIV_ID"> <!-- //配置をセンタリングにする --> このテキストはコントロールによって置き換えられます。 </DIV> <SCRIPT LANGUAGE="JScript"> CreateControl("EXAMPLE_DIV_ID", "CLSID:C6C19B1F-0B33-4dfb-86CB-5F0942F9C516", "200", "200", "http://hitachi.com/tp1web/dcwcgi.exe/ DC_USR?DC_RPCCALL.group.service.DCNOFLAGS.DCRAP_CON=dmy", "NORMAL") </SCRIPT> <script language="JavaScript"> <!-- function window.onbeforeunload() { if( event.clientY < 0 || event.altKey ) { return; } } //--> </script> </BODY> </HTML> |
(f) スプラッシュ画面のカスタマイズ
-
設定方法
起動HTML用スクリプトファイルにPARAMタグ(NAME属性とVALUE属性)を設定すると,XMAP3 TP1/Web連携機能で表示するスプラッシュ画面をカスタマイズできます。スプラッシュ画面の背景色,枠線の色,および文字列の色を変更したり,スプラッシュ画面の枠線と文字列の表示/非表示を切り替えたりできます。スプラッシュ画面でカスタマイズできる個所を次の図に示します。
図17‒2 スプラッシュ画面でカスタマイズできる個所 スプラッシュ画面をカスタマイズするときに使用するPARAMタグのNAME属性とVALUE属性の設定値について次の表に示します。
表17‒1 PARAMタグのNAME属性とVALUE属性の設定値 タグ名
NAME属性
VALUE属性
説明
<PARAM>
SplashBGColor
スプラッシュ画面の背景色をRGB値で設定します。
- (例)
-
赤を設定する場合
<PARAM NAME="SplashBGColor" VALUE="#FF0000">
-
設定方法は,HTMLのRGB色設定と同じ形式です。
-
設定を省略,または設定した値が間違っている場合,白が仮定されます(RGB値に「#FFFFFF」が仮定されます)。
SplashBorderColor
スプラッシュ画面の枠線の色をRGB値で設定します。
- (例)
-
緑を設定する場合
<PARAM NAME="SplashBorderColor" VALUE="#00FF00">
-
設定方法は,HTMLのRGB色設定と同じ形式です。
-
設定を省略,または設定した値が間違っている場合,黒が仮定されます(RGB値に「#000000」が仮定されます)。
-
NAME属性「SplashStyle」のVALUE属性に「NoBorder」または「Fill」を設定すると,この設定は無視されます。
SplashInfoColor
スプラッシュ画面に表示される文字列の色をRGB値で設定します。
- (例)
-
青を設定する場合
<PARAM NAME="SplashInfoColor" VALUE="#0000FF">
-
設定方法は,HTMLのRGB色設定と同じ形式です。
-
設定を省略,または設定した値が間違っている場合,黒が仮定されます(RGB値に「#000000」が仮定されます)。
-
NAME属性「SplashStyle」のVALUE属性に「NoInformation」または「Fill」を設定すると,この設定は無視されます。
SplashStyle
スプラッシュ画面の表示形態(枠線/文字列の有無)を設定します。
次のどれかを設定します。
-
NoBorder
-
NoInformation
-
Fill
「NoBorder」,「NoInformation」,または「Fill」を設定すると,スプラッシュ画面は,次のようになります。
-
NoBorder:スプラッシュ画面の枠線は表示されないで,文字列だけ表示されます。
-
NoInformation:スプラッシュ画面の文字列は表示されないで,枠線だけ表示されます。
-
Fill:スプラッシュ画面が背景色で塗りつぶされます(文字列と枠線は表示されません)。
設定を省略,または設定した値が間違っている場合,文字列と枠線が表示されます。
-
設定例
スプラッシュ画面の枠線を表示しない場合の設定
<HTML> <HEAD> <TITLE>XMAP3/WEB</TITLE> <SCRIPT SRC="x3webfrm.js" LANGUAGE="JScript"></SCRIPT> </HEAD> <BODY> <DIV ID="EXAMPLE_DIV_ID"> このテキストはコントロールによって置き換えられます。 </DIV> <SCRIPT LANGUAGE="JScript"> CreateControl("EXAMPLE_DIV_ID", "CLSID:C6C19B1F-0B33-4dfb-86CB-5F0942F9C516", "200", "200", "http://・・・", "NORMAL", "NoBorder") </SCRIPT> <script language="JavaScript"> <!-- function window.onbeforeunload() { if( event.clientY < 0 || event.altKey ) { return; } } //--> </script> </BODY> </HTML>
function CreateControl(DivID, CLASSID, WIDTH, HEIGHT, NextURL, SSLCheck, SplashStyle) { var d = document.getElementById(DivID); d.innerHTML = '<OBJECT' + ' CLASSID="' + CLASSID + '"' + ' WIDTH=' + WIDTH + ' HEIGHT=' + HEIGHT + '>' + '<PARAM NAME="NextURL" VALUE="' + NextURL + '">' + '<PARAM NAME="SSLCheck" VALUE="' + SSLCheck + '">' + '<PARAM NAME="SplashStyle" VALUE="' + SplashStyle + '">' + '</OBJECT>'; }
このように,スプラッシュ画面の枠線を表示しないように設定した場合,次の図に示すように枠線とHTMLとの境界線がない文字列だけの画面になります。
図17‒3 スプラッシュ画面の枠線を表示しないWebブラウザウィンドウ
(2) Webブラウザ起動時に設定する画面デザイン
Internet Explorerのオブジェクトを作成する際に,次のような外見のデザインを設定できます。
-
Webブラウザのアドレスバーの有無
-
Webブラウザのメニューバーの有無
-
Webブラウザのスクロールバーの有無
-
Webブラウザのステータスバーの有無
-
Webブラウザのツールバーの有無
これらの項目をカスタマイズするには,XMAP3 TP1/Web連携機能の起動HTMLを表示するInternet Explorerのオブジェクトを作成する際に,次の設定をしてください。JavaScriptの指定形式については,Microsoft社から公開されているドキュメントを参照してください。
-
設定方法
別のページから,XMAP3 TP1/Web連携機能の画面にナビゲートする際に,JavaScriptなどからWindowオブジェクトのopenメソッドを呼び出して新規にInternet Explorerのウィンドウを作成します。
その際,第3引数に,XMAP3 TP1/Web連携機能を動作させるInternet Explorerのデザインを,次に示す組み合わせの文字列で設定します。
directories = yes | no :ディレクトリバーの表示有無 location = yes | no :アドレスバーの表示有無 menubar = yes | no :メニューバーの表示有無 scrollbars = yes | no :スクロールバーの表示有無 status = yes | no :ステータスバーの表示有無 toolbar = yes | no :ツールバーの表示有無 fullscreen = yes | no :シアターモードor 通常モード
-
設定例
JavaScriptなどでのXMAP3 TP1/Web連携機能の画面に移動する際の処理
window.open("起動HTMLのURL","", "toolbar=no, status=no, scrollbars=no, menubar=no, location=no, directories=no");