そもそもWSH/JScriptにUI付けたくてVBScriptのInputBoxやMsgBoxを使おうとしたりしてたわけだが、ボタンのラベルに自由度が無いため「Ａをするなら[はい]、Ｂをするなら[いいえ]、Ｃをするなら「キャンセル」を押してください」とか案内をしたり、複数の項目の入力はひとつの枠にカンマや空白で区切って入力させたり、いろいろ苦しい対応をしてきた。
もう少し自由のあるUIを作りたければHTAだが、自分自身にHTMLでの表現力が足りないこともあって、逆に自由すぎていろいろ不自由だった。動くには動くが、ちょっと目も当てられないダサさいものばかりで。
そこでHTAでjQuery UI使えないかな？と思っていろいろ試してみた結果、ようやく自分のイメージに近いところまで来られたので、メモ代わりにここに残す。
基本的な考え方は以下の通り。
・HTAをいろいろバランスのいいIE9モードで使う。
・jQuery UIでダイアログを出す。
・ダイアログのサイズに合わせてHTAウィンドウをリサイズする。
・BORDER="dialog"を指定してHTAウィンドウをリサイズ操作を禁止する。
・ダイアログのボタンの処理としてやりたいコードを書く。
・ダイアログ終了時にHTA自体をcloseして終わらせる。
これによって「直接ダイアログを出して処理」しているように見える。やっとここまで来られた。この基本形だけでもいろいろ捌けるし、もう少し凝ったフォームも作れる。
で、これがコード。
<!DOCTYPE html>
<html lang="ja">
<!--
ダイアログサンプルHTA
-->
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>HTAdialog</title>
<hta:application id="oHTA"
applicationname="HTAdialog"
border="dialog"
caption="yes"
maximizebutton = "yes"
minimizebutton = "yes"
scroll = "no"
selection = "yes"
showintaskbar = "yes"
singleinstance = "no"
sysmenu = "yes"
windowstate = "normal">
<style type="text/css">
* { margin: 0; padding: 0; }
</style>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body style="background-color: white;" >
<div id="mainArea"></div>
<script type="text/javascript">
// var fso = new ActiveXObject('Scripting.FileSystemObject') ;
// var WshShell = new ActiveXObject('WScript.Shell');
$(function() {
// 入力ダイアログ生成
$('body').append( '<input type="text" id="inputText"/>' );
$("#input").dialog({
width: 400,
position : { my: "left top", at: "left top", of: "#mainArea" },
modal:true, //モーダル表示
draggable:false, //ドラッグ不可
open: function( event, ui ) {
if( oHTA.caption==='no' ) {
window.resizeTo( $(".ui-dialog").width()+9, $('.ui-dialog').height()+11 );
} else {
window.resizeTo( $('.ui-dialog').width()+25, $('.ui-dialog').height()+49 );
}
},
close: function() {
// X の処理
window.close();
},
buttons: { //ボタン
"OK": function() {
// OKの処理
alert('名前:' + $("#name").val() + '\n電話:' + $("#tel").val() );
window.close();
// $(this).dialog("close");
},
"Cancel": function() {
// Cancel の処理
alert('Cancel');
window.close();
// $(this).dialog("close");
}
}
});
});
</script>
<div id="input" title="テストダイアログ">
<table>
<tr>
<td colspan=2>名前と電話番号を入力してください。</td>
</tr>
<tr>
<th>名前</th>
<td><input type="text" id="name" /></td>
</tr>
<tr>
<th>電話</th>
<td><input type="text" id="tel" /></td>
</tr>
</table>
</div>
</body>
</html>
ひとつ問題点としては、CAPTION="no"でタイトルバーを非表示にした方が見てくれは良いのだが、HTAの仕様でこのモードだとウィンドウの移動ができない。今のところ回避方法を見つけられていない。しかたないのでCAPTION="yes"にしている。
タイトルバー表示（CAPTION="yes"）
タイトルバー非表示（CAPTION="no"）
ウィンドウの移動ができなくてもいいなら見た目の良いCAPTION="yes"、やっぱり移動は出来んろいかんだろう、ということなら見た目を犠牲にしてCAPTION="no"、という選択で対応することにする。
今後の課題は以下の通り。
・どんどん使ってみる。
・ダイアログの基本形雛型のバリエーションを増やす。
・CAPTION="yes"でウィンドウの移動に対応させる方法を探す。
ああ。やっとここまで来られた。という感じだ。