LoginSignup
3
2

More than 5 years have passed since last update.

@teruroom(Teru Room)

WSH JScriptで入力ダイアログにIEを使う方法

Last updated at Posted at 2018-09-30

このエントリーでは、WSH(Windows based Script Host)環境のJScriptで入力ダイアログを実現するのにIEを利用する方法を紹介します

入力ダイアログの実現方法

入力ダイアログを表示する方法には、JavaScriptのprompt関数やVBScriptのInputBox関数を利用する方法とここで紹介するIEを利用する方法があります。その他に実現方法があれば、ぜひご教授ください

一般的なJavaScriptの実現方法

prompt関数を利用します。以下のようなコードで実現できます。これは当然ながらHTMLファイルの内のScriptタグ内に実装します。拡張子はhtmlとなります

InputDialog.html
<script language="JavaScript">
  var input = prompt( "Please Input your age ...." );
  alert( input );
</script>

WSH JScriptでの実現方法

VBScriptの助けを借りる方法

一般的には、というか、もっともネット上で紹介されているのがVBScriptのInputBox関数を利用するというものです。この方法ではソースコード内にJavaScriptとVBScriptのScriptタグを実装し、拡張子をwsfとする必要があります。以下のようなコードで実現します

InputDialog.wsf
<script language="JavaScript">
 var yourName = vbInputBox("What's your name?");
 WScript.Echo( yourName );
</script>
<script language="VBScript">
 function vbInputBox( prpmpt )
    vbInputBox = InputBox( prpmpt )
 end function
</script>

IEを利用する方法

ここで私が紹介するのが、VBScriptの助けを借りない方法です。IEを起動し、HTMLコードを流し込んで入力ダイアログを実現する方法です。拡張子をjsとすることで実現することができます

メリット

JavaScriptやVBScriptで用意されている定型の入力ダイアログでなく、HTMLを実装することにより自由にニーズにあった入力ダイアログを実現することができます。以下に実現方法を具体的に説明いたします

入力ダイアログ表示クラス

まず入力ダイアログ表示クラスDialogClassを実装します。ここではIEに流し込むHTMLを実装します

showInputDaialog.js＜入力ダイアログ表示クラスDialogClass＞
function DialogClass(){
  this.IE = null;
  this.createHtml = function( yyyyMM ){
    var html = ( function(){/*
      <html lang="ja">
        <head>
          <style>
            body{ background : #eee;  }
            div#button{ margin-top : 20px; }
            input#yyyyMM{ margin-top : 20px; background: #ffb; }
            input#OK{ margin-left : 10px; background: #efe; }
            input#OK:hover{ background: #bfb; }
            input#Cancel{ margin-left : 10px; background: #fee; }
            input#Cancel:hover{ background: #fbb; }
          </style>
        </head>
        <body>
          <div>年月を入力してください</div>
          <form name="form">
            <input id="yyyyMM" name="yyyyMM" type="text" value="%yyyyMM%" />
            <div id="button">
              <input type="hidden" name="OkCancel" value=-99 />
              <input id="OK" type="button" value="OK" 
                     onClick="document.form.OkCancel.value=1;" />
              <input id="Cancel" type="button" value="キャンセル"
                     onClick="document.form.OkCancel.value=0;" />
            </div>
          </form>
        </body>
      </html>
    */} ).toString().replace( "%yyyyMM%", yyyyMM )
         .split( "\n" ).slice( 1, -1 ).join( "\n" );
    return( html );
  };

  this.showInputDialog = function( yyyyMM ){
    if( this.IE == null ) this.IE = new IEClass();

    with( this.IE ){
      open();
      insertHtml( this.createHtml( yyyyMM ), "対象年月入力", 270, 170 );
    }
  };

  this.clickOKButton = function(){
    with( this.IE.objIE ){
      with( document ){
        while( getElementsByName( "OkCancel" ).item( 0 ).value < 0 ){
          WScript.Sleep( 500 );
        }
        var OkCancel = form.OkCancel.value;
        var inputString = getElementsByName( "yyyyMM" ).item( 0 ).value;
      }
      Quit();

      if( OkCancel == 1 ) return( inputString );
      else if( OkCancel == 0 )  WScript.Quit();
    }
  };
}

実現するためにはまず、入力フィールドとボタンを持った入力ダイアログHTMLを実装し、このHTMLからの戻り値を一定間隔で入手します。具体的には以下の1.から6.の手順となります

1.HTML内　入力フィールド

値を入力してもらうためのtypeプロパティがtextのinputフィールドを実装します

DialogClassクラスcreateHtml()メソッド内
<input id="yyyyMM" name="yyyyMM" type="text" value="%yyyyMM%" />

2.HTML内　hiddenフィールド

nameプロパティがformのformタグ内に、例えば、初期値が-99で、nameプロパティがOkCancelのhiddenフィールドを実装します

DialogClassクラスcreateHtml()メソッド内
<form name="form">
  <input type="hidden" name="OkCancel" value=-99 />
</form>

3.HTML内　buttonのonClickプロパティ

OKボタンとキャンセルボタンがクリックされたときに実行されるonClickプロパティをそれぞれ以下のように実装します

  • OKボタン
    • document.form.OkCancel.value=1;
  • キャンセルボタン
    • document.form.OkCancel.value=0;

これらはそれぞれ、hiddenフィールドのvalueプロパティを変更しています

DialogClassクラスcreateHtml()メソッド内
<input id="OK" type="button" value="OK" 
  onClick="document.form.OkCancel.value=1;" />
<input id="Cancel" type="button" value="キャンセル"
  onClick="document.form.OkCancel.value=0;" />

4. HTMLのIEへの流し込み

新しいIEを起動し、作成したHTMLを流し込みます

DialogClassクラスshowInputDialog()メソッド内
if( this.IE == null ) this.IE = new IEClass();

with( this.IE ){
  open();
  insertHtml( this.createHtml( yyyyMM ), "対象年月入力", 270, 170 );
}

5. 入力値の取得

nameプロパティがOkCancelのhiddenフィールドを一定間隔500msecごとに得て、OKボタンまたはキャンセルボタンが押された場合には、hiddenフィールドの値form.OkCancel.valueと、入力フィールドの値getElementsByName( "yyyyMM" ).item( 0 ).valueを得ます。

DialogClassクラスclickOKButton()メソッド内
while( getElementsByName( "OkCancel" ).item( 0 ).value < 0 ){
   WScript.Sleep( 500 );
}
var OkCancel = form.OkCancel.value;
var inputString = getElementsByName( "yyyyMM" ).item( 0 ).value;

6.入力値の戻し

hiddenフィールドのvalueプロパティでOKボタンが入力されたら、入力フィールドに入力された値を戻します

DialogClassクラスclickOKButton()メソッド内
if( OkCancel == 1 ) return( inputString );

IE操作クラス

次にIE操作クラスIEClassを実装します

IE操作クラスIEClassを入力ダイアログ表示クラスDialogClassでインスタンス化して利用します。このIE操作クラスは、ごく一般的なWSH JScriptやVBAからIEを操作する方法です。ネット上に豊富に実現方法が紹介されていますので、ここでは細かな説明は割愛いたします

showInputDaialog.js＜IE操作クラスIEClass＞
function IEClass(){
  this.objIE = null;
  this.STATUS = { READYSTATE_COMPLETE: 4 }

  this.open = function(){
    if( this.objIE == null ){
      this.objIE = WScript.CreateObject("InternetExplorer.Application");
    }
    this.objIE.Visible = true;
    this.objIE.navigate("about:blank");
    this.wait();
  };

  this.insertHtml = function( html, titleStr, widthSize, heightSize ){
    with( this.objIE ){
      with( document ){
        all( 0 ).innerHTML = html;
        title = titleStr;
      }
      top = 0;  left = 0;
      width = widthSize;  height = heightSize;
      statusBar = false;  addressBar = false;
    }
    this.wait();
  };

  this.wait = function(){
    with( this.objIE ){
      while( busy || readystate != this.STATUS.READYSTATE_COMPLETE ){
        WScript.Sleep( 400 );
      }
    }
  };
}

入力ダイアログHTMLの流し込み

all( 0 ).innerHTMLプロパティに入力ダイアログ表示クラスDialogClassで作成した入力ダイアログ用のHTMLを代入して、IEに流し込みます

IEClassクラスinsertHtml()メソッド内
with( document ){
  all( 0 ).innerHTML = html;
  title = titleStr;
}

利用方法

たとえば、処理クラスProcessClass内に入力ダイアログ表示クラスDialogClassを仕込んで利用する場合には、以下のように実装します

showInputDaialog.js＜利用方法＞
var process = new ProcessClass();
process.inputYearMonth();
showInputDaialog.js＜処理クラスProcessClass＞
function ProcessClass(){
  this.inputYearMonth = function(){
    var dialog = new DialogClass();
    dialog.showInputDialog( "201808" );
    WScript.Echo( "「" + dialog.clickOKButton() + "」が入力されました");
  };
}

入力ダイアログ

こんな風に表示されます。カスタマイズはHTMLですので自由にできます
InputDailog.PNG

入力ダイアログで入力された値の表示

こんな風に確かに入力された値を受け取っているのがわかります
AafteInputDialg.PNG

全ソースコード

念のため、全ソースコードを示します。showInputDaialog.jsアイコンをWindowsのデスクトップなどに置いておくと、対話型のWindowsアプリケーションとして利用できます

showInputDaialog.js

var process = new ProcessClass();
process.inputYearMonth();

function ProcessClass(){
  this.inputYearMonth = function(){
    var dialog = new DialogClass();
    dialog.showInputDialog( "201808" );
    WScript.Echo( "「" + dialog.clickOKButton() + "」が入力されました");
  };
}

function DialogClass(){
  this.IE = null;
  this.createHtml = function( yyyyMM ){
    var html = ( function(){/*
      <html lang="ja">
        <head>
          <style>
            body{ background : #eee;  }
            div#button{ margin-top : 20px; }
            input#yyyyMM{ margin-top : 20px; background: #ffb; }
            input#OK{ margin-left : 10px; background: #efe; }
            input#OK:hover{ background: #bfb; }
            input#Cancel{ margin-left : 10px; background: #fee; }
            input#Cancel:hover{ background: #fbb; }
          </style>
        </head>
        <body>
          <div>年月を入力してください</div>
          <form name="form">
            <input id="yyyyMM" name="yyyyMM" type="text" value="%yyyyMM%" />
            <div id="button">
              <input type="hidden" name="OkCancel" value=-99 />
              <input id="OK" type="button" value="OK" 
                     onClick="document.form.OkCancel.value=1;" />
              <input id="Cancel" type="button" value="キャンセル""
                     onClick="document.form.OkCancel.value=0;" />
            </div>
          </form>
        </body>
      </html>
    */} ).toString().replace( "%yyyyMM%", yyyyMM )
         .split( "\n" ).slice( 1, -1 ).join( "\n" );
    return( html );
  };

  this.showInputDialog = function( yyyyMM ){
    if( this.IE == null ) this.IE = new IEClass();

    with( this.IE ){
      open();
      insertHtml( this.createHtml( yyyyMM ), "対象年月入力", 270, 170 );
    }
  };

  this.clickOKButton = function(){
    with( this.IE.objIE ){
      with( document ){
        while( getElementsByName( "OkCancel" ).item( 0 ).value < 0 ){
          WScript.Sleep( 500 );
        }
        var OkCancel = form.OkCancel.value;
        var inputString = getElementsByName( "yyyyMM" ).item( 0 ).value;
      }
      Quit();

      if( OkCancel == 1 ) return( inputString );
      else if( OkCancel == 0 )  WScript.Quit();
    }
  };
}

function IEClass(){
  this.objIE = null;
  this.STATUS = { READYSTATE_COMPLETE: 4 }

  this.open = function(){
    if( this.objIE == null ){
      this.objIE = WScript.CreateObject("InternetExplorer.Application");
    }
    this.objIE.Visible = true;
    this.objIE.navigate("about:blank");
    this.wait();
  };

  this.insertHtml = function( html, titleStr, widthSize, heightSize ){
    // WScript.Echo(html);
    with( this.objIE ){
      with( document ){
        all( 0 ).innerHTML = html;
        title = titleStr;
      }
      top = 0;  left = 0;
      width = widthSize;  height = heightSize;
      statusBar = false;  addressBar = false;
    }
    this.wait();
  };

  this.wait = function(){
    with( this.objIE ){
      while( busy || readystate != this.STATUS.READYSTATE_COMPLETE ){
        WScript.Sleep( 400 );
      }
    }
  };
}
3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
2