タブメニューのウィンドウ③(コードの独立)

本記事では、Windows 専用の業務効率化ツールである本ツールの仕様と操作方法について紹介します。
ツールの種別は以下となります。

このツールは、Windows 専用の業務効率化ツールです。HTA の特性により、HTML で画面を構築しつつ、VBScriptを
用いた操作制御が可能になっています。

動作環境は以下となります。

ツールは Windows 10 および Windows 11 を前提に作られおり動作検証済みです。

画面仕様は以下となります。

・ツールの画面サイズは横幅 954px、高さおよそ 1000px に固定されており、ユーザーはリサイズできず、
最大化もできません。解像度が低い環境では、画面の一部がはみ出す可能性があります。
・起動時には画面が中央に配置されます。画面上部には横並びのタブメニューがあり、「実機環境作業申請書」
「メール作成」「持ち込み資材」の三つのタブを切り替えることで表示内容が変わります。
・タブの切り替えは JavaScript を使わず、HTML の radio ボタンと CSS のみで制御されて
おります。
・メンテナンスの軽減できるようようにCSSとVBScriptと分割いたしました

操作方法は以下となります。

各タブ内には「実行」ボタンが配置されており、HTA 起動時に VBScript の初期化処理が実行され、そこで各ボタンの
onclick イベントが紐づけられる仕組みになっています。これにより、画面構造と処理ロジックは分離されています。

【tool.hta】
<!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"
		/>

                <link rel="stylesheet" type="text/css" href="./tool_design.css">

		<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


			    	' ボタン初期化（GetRef用）
			    	InitTabButtons
			End Sub

			'========================================================
			' タブボタン初期化
			'========================================================
			Sub InitTabButtons
			    Set document.getElementById("btnTab1").onclick = GetRef("RunTab1")
			    Set document.getElementById("btnTab2").onclick = GetRef("RunTab2")
			    Set document.getElementById("btnTab3").onclick = GetRef("RunTab3")
			End Sub
			
			'========================================================
			' タブごとの処理
			'========================================================
			Sub RunTab1
			    RunExternalVBS "tab1"
			End Sub
			
			Sub RunTab2
			    RunExternalVBS "tab2"
			End Sub
			
			Sub RunTab3
			    RunExternalVBS "tab3"
			End Sub
			
			'========================================================
			' 外部 VBS を安全に呼び出す
			'========================================================
			Sub RunExternalVBS(tabName)
			    Dim shell, fso, vbsPath
			
			    Set shell = CreateObject("WScript.Shell")
			    Set fso   = CreateObject("Scripting.FileSystemObject")
			
			    ' HTA の実ファイル位置から VBS のパスを取得
			    vbsPath = fso.BuildPath(fso.GetParentFolderName(document.location.pathname), "tool_script.vbs")
			
			    ' Chr(34) で確実に引用符を付ける（最重要）
			    Dim cmd
			    cmd = "wscript.exe " & Chr(34) & vbsPath & Chr(34) _
			        & " " & Chr(34) & CStr(tabName) & Chr(34)
			
			    shell.Run cmd, 1, True
			
			    Set shell = Nothing
			    Set fso   = Nothing
			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">
		<div style="width:924px; height:943px; solid #000; overflow-x:hidden; overflow-y:auto; padding-left: 15px;">

			<h2 style="width:905px; background: #80ffbf; ">
				実機環境作業手続き申請書
			</h2>

			<!-- ===== 説明１ ===== -->
			<b style="font-size: 15px;">１．以下のフォルダ名のパスとファイル名と作業実施日をご記入ください。</b>
			<br><br>

			<table style="margin-left:4px;">
				<tr>
				    <th width="45%">フォルダ名</th>
				    <th width="25%">参照元ファイル名</th>
				    <th width="30%">出力先ファイル名</th>
				</tr>
				<tr>
				    <td><input type="text" id="basePath"></td>
				    <td><input type="text" id="srcPath"></td>
				    <td><input type="text" id="outPath"></td>
				</tr>
			</table>

			<br><br>

			<!-- ===== 説明２ ===== -->
			<b style="font-size: 15px;">２．作業申請日と作業実施日担当者名をご記入して[データ出力]をクリックして下さい</b>
			<br><br>

			<table style="margin-left:3px;">
				<tr>
				    <th width="25%">作業申請日</th>
				    <th width="25%">作業実施日</th>
				    <th width="30%">作業担当者</th>
				    <th width="20%">申請書作成</th>
				</tr>
				<tr>
				    <td><input type="text" id="setDateStr"></td>
				    <td><input type="text" id="workStartDate"></td>
				    <td><input type="text" id="shinseiUser"></td>
				    <td style="text-align:center;">
				        <input type="button" value="データ出力" id="btnTab1" onclick="btnTab1()" style="width:95%; height:35px;">
				    </td>
				</tr>
			</table>

			<br><br>

			<!-- ===== 実行結果 ===== -->
			<b style="font-size: 15px;">＜実行結果＞</b>
			<br>
			<div style="width:905px; height:384px; border:1px solid #000; overflow-x:hidden; overflow-y:auto; margin-top:-1px; margin-left:-1px;">
				<table id="resultTable" style="margin-left:0px;">

					<tr>
					    <th style="width:20%;">作業申請日</th>
					    <th style="width:20%;">作業実施日</th>
					    <th style="width:30%;">サーバーID</th>
					    <th style="width:30%;">サーバー名</th>
					</tr>

				</table>
			</div>
		</div>
			</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>

【tool_design.css】
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;
}

【tool_script.vbs】
Option Explicit

' コマンドライン引数を受け取る
Dim args, tabName
Set args = WScript.Arguments

If args.Count > 0 Then
    tabName = CStr(args(0))   ' 文字列として安全に受け取る
Else
    tabName = "undefined"
End If

' タブごとの処理
Select Case LCase(Trim(tabName))
    Case "tab1"
        MsgBox "外部VBSで Tab1 処理を実行しました", vbInformation, "VBS処理"

    Case "tab2"
        MsgBox "外部VBSで Tab2 処理を実行しました", vbInformation, "VBS処理"

    Case "tab3"
        MsgBox "外部VBSで Tab3 処理を実行しました", vbInformation, "VBS処理"

    Case Else
        MsgBox "不明なタブ: " & tabName, vbExclamation, "VBS処理"
End Select

ソースコードはこちらをご確認ください+