起動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
起動HTML内の，CreateControl()の引数として，カスタマイズするNAME属性(SplashStyle)に指定するVALUE属性値(NoBorder)を追加します。

 
<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>

起動HTML用スクリプトファイル
CreateControl()に追加するNAME属性用(SplashStyle)の引数を追加し，PARAMタグを展開するように修正します。

 
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ブラウザウィンドウ

[図データ]

17.2.2　起動HTMLソースによるブラウザ画面のデザイン例

(1)　起動HTMLによる画面デザインの設定

(a)　Webブラウザのウィンドウサイズ

(b)　Webブラウザのウィンドウ位置

(c)　Webブラウザのクライアント領域の背景色

(d)　XMAP3 ActiveXコントロールをクライアント領域に貼り付ける際の余白サイズ

(e)　XMAP3 ActiveXコントロールの配置方法

(f)　スプラッシュ画面のカスタマイズ

(2)　Webブラウザ起動時に設定する画面デザイン

17.2.2 起動HTMLソースによるブラウザ画面のデザイン例

(1) 起動HTMLによる画面デザインの設定

(a) Webブラウザのウィンドウサイズ

(b) Webブラウザのウィンドウ位置

(c) Webブラウザのクライアント領域の背景色

(d) XMAP3 ActiveXコントロールをクライアント領域に貼り付ける際の余白サイズ

(e) XMAP3 ActiveXコントロールの配置方法

(f) スプラッシュ画面のカスタマイズ

(2) Webブラウザ起動時に設定する画面デザイン

17.2.2　起動HTMLソースによるブラウザ画面のデザイン例

(1)　起動HTMLによる画面デザインの設定

(a)　Webブラウザのウィンドウサイズ

(b)　Webブラウザのウィンドウ位置

(c)　Webブラウザのクライアント領域の背景色

(d)　XMAP3 ActiveXコントロールをクライアント領域に貼り付ける際の余白サイズ

(e)　XMAP3 ActiveXコントロールの配置方法

(f)　スプラッシュ画面のカスタマイズ

(2)　Webブラウザ起動時に設定する画面デザイン