本記事では、Windows 専用の業務効率化ツールである本ツールの仕様と操作方法について紹介します。
ツールの種別は以下となります。
このツールは、Windows 専用の業務効率化ツールです。HTA の特性により、HTML で画面を構築しつつ、VBScriptを
用いた操作制御が可能になっています。動作環境は以下となります。
ツールは Windows 10 および Windows 11 を前提に作られおり動作検証済みです。画面仕様は以下となります。
・ツールの画面サイズは横幅 954px、高さおよそ 1000px に固定されており、ユーザーはリサイズできず、
最大化もできません。解像度が低い環境では、画面の一部がはみ出す可能性があります。
・起動時には画面が中央に配置されます。画面上部には横並びのタブメニューがあり、「実機環境作業申請書」
「メール作成」「持ち込み資材」の三つのタブを切り替えることで表示内容が変わります。
・タブの切り替えは JavaScript を使わず、HTML の radio ボタンと CSS のみで制御されて
おります操作方法は以下となります。
各タブ内には「実行」ボタンが配置されており、HTA 起動時に VBScript の初期化処理が実行され、そこで各ボタンの
onclick イベントが紐づけられる仕組みになっています。これにより、画面構造と処理ロジックは分離されています。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>作業効率ツール</title>
<HTA:APPLICATION
APPLICATIONNAME="作業効率ツール"
BORDER="thin"
BORDERSTYLE="normal"
CAPTION="yes"
SHOWINTASKBAR="yes"
SINGLEINSTANCE="yes"
SYSMENU="yes"
WINDOWSTATE="normal"
SCROLL="no"
MAXIMIZEBUTTON="no"
MINIMIZEBUTTON="yes"
RESIZE="no"
WIDTH="954"
HEIGHT="1000"
/>
<style>
body {
margin: 0;
font-family: Meiryo, sans-serif;
}
/* 横並びタブメニュー（※触らない） */
.tab-menu {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
white-space: nowrap;
background-color: #f0f0f0;
border-bottom: 2px solid #ccc;
overflow-x: auto;
}
.tab {
display: inline-block;
padding: 12px 25px;
cursor: pointer;
border-right: 1px solid #ccc;
}
.tab:hover {
background-color: #d0e4ff;
}
.content-area {
font-size: 20px;
border: 1px solid #ccc;
height: 920px;
}
/* タブ表示制御（追加） */
.tab-content {
display: none;
}
#tab1:checked ~ .content-area .tab1 {
display: block;
}
#tab2:checked ~ .content-area .tab2 {
display: block;
}
#tab3:checked ~ .content-area .tab3 {
display: block;
}
/* 選択中タブの見た目（任意・処理影響なし） */
#tab1:checked + input + input ~ .tab-menu label[for="tab1"],
#tab2:checked ~ .tab-menu label[for="tab2"],
#tab3:checked ~ .tab-menu label[for="tab3"] {
background-color: #d0e4ff;
}
h2 {
text-align: center;
margin-bottom: 15px;
}
table {
border-collapse: collapse;
width: 905px;
}
th, td {
border: 1px solid #000;
padding: 4px;
}
th {
font-size: 16px; /* ← 好きなサイズに変更 */
font-weight: bold; /* 任意（見出し感を出したい場合） */
}
input[type="text"] {
width: 95%;
height: 25px;
padding-top: 5px;
}
</style>
<script language="VBScript">
Sub window_onload
' ウインドウ外形を強制固定
window.resizeTo 954, 986
Dim w, h
w = document.body.clientWidth
h = document.body.clientHeight
' オプション：画面中央に配置（HTA対応）
Dim screenX, screenY
screenX = (window.screen.Width - 954) / 2
screenY = (window.screen.Height - 1050) / 2
window.moveTo screenX, screenY
' MsgBox "現在の表示サイズ：" & vbCrLf & _
' "横幅: " & w & " px" & vbCrLf & _
' "縦幅: " & h & " px", _
' vbInformation, "サイズ確認"
' ボタン初期化だけ呼ぶ
Call InitTabButtons
End Sub
Sub InitTabButtons
Set document.getElementById("btnTab1").onclick = GetRef("OnTab1")
Set document.getElementById("btnTab2").onclick = GetRef("OnTab2")
Set document.getElementById("btnTab3").onclick = GetRef("OnTab3")
End Sub
Sub OnTab1
MsgBox "tab1", vbInformation, "確認"
End Sub
Sub OnTab2
MsgBox "tab2", vbInformation, "確認"
End Sub
Sub OnTab3
MsgBox "tab3", vbInformation, "確認"
End Sub
</script>
</head>
<body>
<!-- タブ制御用（追加） -->
<input type="radio" name="tabsel" id="tab1" checked hidden>
<input type="radio" name="tabsel" id="tab2" hidden>
<input type="radio" name="tabsel" id="tab3" hidden>
<div class="tab-menu">
<label class="tab" for="tab1">実機環境作業申請書</label>
<label class="tab" for="tab2">メール作成</label>
<label class="tab" for="tab3">持ち込み資材</label>
</div>
<div class="content-area">
<div class="tab-content tab1">
環境変更申請書です
<input type="button" value="実行" id="btnTab1">
</div>
<div class="tab-content tab2">
下書きのメール作成です
<input type="button" value="実行" id="btnTab2">
</div>
<div class="tab-content tab3">
持ち込み資材です
<input type="button" value="実行" id="btnTab3">
</div>
</div>
</body>
</html>
