画面・帳票サポートシステム XMAP3 実行ガイド


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

〈この項の構成〉

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

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

これらを設定するために,起動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ブラウザウィンドウ

    [図データ]

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

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

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