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

起動HTMLに処理を追加して，Webブラウザのデザインをカスタマイズする例を説明します。例えば，起動HTMLにJavaScriptで処理を挿入してInternet Explorerのオブジェクトにアクセスし，次のような属性を制御できます。

Webブラウザのウィンドウサイズ
Webブラウザのウィンドウ位置
Webブラウザのクライアント領域の背景色
XMAP3 ActiveXコントロールをクライアント領域に配置する際の余白サイズ
XMAP3 ActiveXコントロールの配置方法（センタリング／右寄せ／左寄せ）
スプラッシュ画面のカスタマイズ

これらを設定するために，起動HTMLにそれぞれ次の処理を追加します。JavaScriptの指定形式については，Microsoft社から公開されているドキュメントを参照してください。

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

設定方法
JavaScriptでWindowオブジェクトのresizeToメソッドにアクセスし，XMAP3 Cosminexus連携機能の画面のページへ移動したとき，自動的にブラウザのサイズを適切な大きさに変更します。ここで設定する値はInternet Explorerのウィンドウサイズの値です。クライアント領域のサイズは，ツールバーの表示／非表示の設定などによって異なります。
設定例
（JavaScriptのページロードのイベント処理などで）
　　window.resizeTo(1152，864);

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

設定方法
JavaScriptによってWindowオブジェクトのmoveToメソッドにアクセスし，XMAP3 Cosminexus連携機能の画面に移動したとき，自動的にブラウザのウィンドウ位置をスクリーン上の適切な位置に移動します。
設定例
（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 for Cosminexus</TITLE>
    <SCRIPT SRC="x3xwbfrm.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:3B3F75DF-235A-463b-86C7-6CD8652CC0E2",
                        "200", 
                        "200",
                        "http://server_url/Script/X3XWBJSC.JS",
                        "http://server_url/servlet/smpcbl.Servlet",
                        "http://server_url/Etc/",
                        "http://server_url/Data/",
                        "1F",
                        "NORMAL")
    </SCRIPT>
 
<script language="JavaScript">
<!--
function window.onbeforeunload() {
   if( event.clientY < 0 || event.altKey ) {
        return;
   }
}
//-->
</script>
  </BODY>
</HTML>

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

設定方法
起動HTML用スクリプトファイルにPARAMタグ（NAME属性とVALUE属性）を設定すると，XMAP3 Cosminexus連携機能で表示するスプラッシュ画面をカスタマイズできます。スプラッシュ画面の背景色，枠線の色，および文字列の色を変更したり，スプラッシュ画面の枠線と文字列の表示／非表示を切り替えたりできます。スプラッシュ画面でカスタマイズできる個所を次の図に示します。

図16-2　スプラッシュ画面でカスタマイズできる個所

[図データ]

スプラッシュ画面をカスタマイズするときに使用するPARAMタグのNAME属性とVALUE属性の設定値を次の表に示します。

表16-3　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 for Cosminexus</TITLE>
<SCRIPT SRC="x3xwbfrm.js" LANGUAGE="JScript"></SCRIPT>
</HEAD>
<BODY>
<DIV ID="EXAMPLE_DIV_ID">
     このテキストはコントロールによって置き換えられます。
</DIV>
<SCRIPT LANGUAGE="JScript">
     CreateControl("EXAMPLE_DIV_ID",
               "CLSID:3B3F75DF-235A-463b-86C7-6CD8652CC0E2",
               "200", 
               "200",
               "http://server_url/xmap3/Script/X3XWBJSC.JS",
               "http://server_url/XmapWebApp/servlet/kaden",
               "http://server_url/xmap3/Etc/",
               "http://server_url/xmap3/Data/",
               "1F",
               "NORMAL",
               "NoBorder")
</SCRIPT>
 
<script language="JavaScript">
<!--
function window.onbeforeunload() {
   if( event.clientY < 0 || event.altKey ) {
        return;
   }
}
//-->
</script>
</BODY>
</HTML>

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

 
function CreateControl(DivID, CLASSID, WIDTH, HEIGHT, ScriptURL, ServletURL, EtcPath, DataPath, DataCode, SSLCheck, SplashStyle)
{
    var d = document.getElementById(DivID);
    d.innerHTML = 
     '<OBJECT' + ' CLASSID="' + CLASSID + '"' + 
     ' WIDTH=' + WIDTH + ' HEIGHT=' + HEIGHT + '>' + 
     '<PARAM NAME="ScriptURL" VALUE="' + ScriptURL + '">' + 
     '<PARAM NAME="ServletURL" VALUE="' + ServletURL + '">' + 
     '<PARAM NAME="EtcPath" VALUE="' + EtcPath + '">' + 
     '<PARAM NAME="DataPath" VALUE="' + DataPath + '">' + 
     '<PARAM NAME="DataCode" VALUE="' + DataCode + '">' + 
     '<PARAM NAME="SSLCheck" VALUE="' + SSLCheck + '">' + 
     '<PARAM NAME="SplashStyle" VALUE="' + SplashStyle + '">' + 
     '</OBJECT>';
}

このように，スプラッシュ画面の枠線を表示しないように設定すると，次の図に示すように枠線とHTMLとの境界線がない文字列だけの画面になります。

図16-3　スプラッシュ画面の枠線を表示しないWebブラウザウィンドウ

[図データ]

Internet Explorerのオブジェクトを作成する際に，次のような外見のデザインを設定できます。

Webブラウザのディレクトリバーの有無
Webブラウザのアドレスバーの有無
Webブラウザのメニューバーの有無
Webブラウザのスクロールバーの有無
Webブラウザのステータスバーの有無
Webブラウザのツールバーの有無
Webブラウザのフルスクリーンモード

これらの項目をカスタマイズするには，XMAP3 Cosminexus連携機能の起動HTMLを表示するInternet Explorerのオブジェクトを作成する際に，次の設定をしてください。カスタマイズできる項目（JavaScriptおよび各オブジェクト）の指定形式については，Microsoft社から公開されているドキュメントを参照してください。

設定方法
別のページから，XMAP3 Cosminexus連携機能の画面にナビゲートする際に，JavaScriptなどからWindowオブジェクトのopenメソッドを呼び出して新規にInternet Explorerのウィンドウを作成します。
その際，第3引数に，XMAP3 Cosminexus連携機能を動作させるInternet Explorerのデザインを，次に示す組み合わせの文字列で設定します。

　
　　directories = yes | no    ：ディレクトリバーの表示有無
　　location = yes | no       ：アドレスバーの表示有無
　　menubar = yes | no        ：メニューバーの表示有無
　　scrollbars = yes | no     ：スクロールバーの表示有無
　　status = yes | no         ：ステータスバーの表示有無
　　toolbar = yes | no        ：ツールバーの表示有無
　　fullscreen = yes | no     ：フルスクリーンモードまたは通常モード

設定例
JavaScriptなどでのXMAP3/Web for Cosminexusのページに移動する際の処理

　
　　window.open("起動HTMLのURL"，""， "toolbar=no， status=no， 
　　scrollbars=no， menubar=no， location=no， directories=no");

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

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

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

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

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

(d)　XMAP3 ActiveXコントロールをクライアント領域に配置する際の余白サイズ

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

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

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

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

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

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

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

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

(d) XMAP3 ActiveXコントロールをクライアント領域に配置する際の余白サイズ

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

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

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

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

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

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

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

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

(d)　XMAP3 ActiveXコントロールをクライアント領域に配置する際の余白サイズ

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

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

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