SQLの窓

2018年07月12日


HTA + Basp21 + jQuery + twitter-bootstrap(4.1.1) でメール受信ツール

Basp21 は SSL に対応していない(POP3:110番ポートでのアクセスです)ので、運用の範囲内でうまく利用する事が必要です。アプリケーションのテスト用のツールとして使うなどして、実際の重要な文書のやりとりに使うのはおすすめではありません。

このサンプルの趣旨は、HTA でも最新 jQuery + twitter-bootstrap が動作する事の確認です
( ここでは実装していませんが、jQuery UI の Resizable のテストは行いました )

関連する記事

HTA + Basp21 + jQuery + twitter-bootstrap(4.1.1) でメール送信ツール

HTA(HTMLアプリケーション) のコードを html として IE11 でデバッグする方法


▼ 初期画面

画面下部はIFRAME で、ウインドウの大きさを変えてもフィットするようになっています。この実装には CSS の calc 関数を使用しています。

IFRAME 部分には、iframe_in.html を使用していますが、IFRAME に APPLICATION="yes" を指定する事によって、HTA として動作します。
▼ 受信済メールデータ一覧の実行結果
『メール一覧』と同じ結果ですが、『メール一覧』ではパスワードの入力が必要で、実際にインターネットからデータを取得します。

『受信済メールデータ一覧』では、『メール本体を全て受信』でいったんデータを可能な限り(256件)受信し、ディレクトリに保存します。そして、『受信済メールデータ一覧』の実行でディレクトリよりデータを取得して表示します(その際、添付ファイルがあれば分離して保存します)

さらに、データ行をクリックすると、本文のテキストエリアに受信データの本文を表示します
メールサーバーは 『さくらインターネット』を使用しています main.hta( メール送信部分 )
<html>
<head>
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>

	// ウインドウの位置とサイズ
	top.moveTo( 30, 30 );
	top.resizeTo( 800, 800 );

	// エラーメッセージ
	var ErrMessage;

	// 
	var WshShell = new ActiveXObject("WScript.Shell");
	var Basp21 = new ActiveXObject("Basp21");

	$(function(){

		$("#send").on("click", function(){

			pass = $("#pass").val();
			if ( pass.trim() == "" ) {
				alert("パスワードを入力して下さい");
				$("#pass").focus();
				return;
			}
			if ( $("#to").val() == "" ) {
				alert("宛先を入力してください");
				$("#to").focus()
				return;
			}

			ErrMessage = Basp21.SendMail( 
				"user.sakura.ne.jp:587", 
				$("#to").val(), 
				"username@user.sakura.ne.jp" + "\t" + "account" + ":" + pass, 
				$("#subject").val(), 
				$("#body").val(), 
				"" 
			);

			// 成功すると空文字列が返り、失敗するとエラメッセージ			
			if ( ErrMessage != "" ) {
				alert(ErrMessage);
			}
			else {
				alert("メール送信が終了しました。");
			}
		});
		
		$("#taskmgr").on("click", function(){

			WshShell.Run("ms-settings:windowsupdate");

		});

	});

</script>
<style>
html,body {
	height: 100%;
}

body {
	margin: 0;
}

/* ブロックを左右に表示  */
.ttl {
	display: inline-block;
	width: 150px;
	vertical-align: top;
}
.entry {
	display: inline-block;
}
.line {
	margin-bottom: 0;
}

#head {
	padding: 16px;
}

/* IFRAMEコントロール用  */
#head {
	padding: 16px;
	width: 100%;
	height: 360px;
	background-color: #e0e0e0;
}
#extend {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: calc( 100% - 3px );
	height: calc( 100% - 360px - 2px );
	border: solid 2px #c0c0c0;
}

</style>
</head>
<body>
<div id="head">

	<p class="ttl">
		宛先
	</p>
	<p class="entry">
		<input
			id="to"
			type="text">

		<span
			class="ml-5">パスワード</span>
		<input
			class="ml-3"
			style="width:120px;"
			id="pass"
			type="password">
	</p>
	<p class="line"></p>

	<p class="ttl">
		件名
	</p>
	<p class="entry">
		<input
			style='width:500px;'
			type="text"
			id="subject">
	</p>
	<p class="line"></p>

	<p class="ttl">
		本文 
	</p>
	<p class="entry">
		<textarea
			style='width:500px;height:150px;'
			id="body"></textarea>
	</p>
	<p class="line"></p>

	<p>
		<input
			id="send"
			class="btn btn-outline-primary"
			type="button"
			value="メール送信">

		<input
			id="taskmgr"
			class="btn btn-info ml-5"
			type="button"
			value="Windows Update">
	</p>

	<h4 class="text-danger"></h4>

</div>

<iframe id="extend" name="extend" APPLICATION="yes" src="iframe_in.html"></iframe>


</body>
</html>


iframe_in.html

Basp21 の RcvMail メソッドが返す配列は、VBArray なので、toArray() メソッドで JavaScript の配列に変換しています。
<html>
<head>
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>

	// 親ウインドウのオブジェクトを使用
	var Basp21 = parent.Basp21;
	var rcv_data;

	// テーブルの行作成用
	var row_data;


	$(function(){

		// *********************************
		// Subject,From,Date の一覧のみ
		// *********************************
		$("#list").on("click", function(){

			// テーブル表示リセット
			$("#tbl .row_data").remove();

			// 親ウインドウの入力チェック
			pass = parent.$("#pass").val();
			if ( pass.trim() == "" ) {
				alert("パスワードを入力して下さい")
				parent.$("#pass").focus();
			return;
			}
			
			// 実行中カーソル
			$("*").css({"cursor": "wait"});
			
			result = Basp21.RcvMail("user.sakura.ne.jp", 
				"username@user.sakura.ne.jp",
				pass,
				"LIST",
				">C:\\temp\\rcvmail")

			// 失敗した場合はエラーメッセージが文字列として戻されます
			if ( typeof result !== "string" ) {
			
				// *********************************
				// result は、VBArray なので、
				// JScript の標準配列に変換
				// *********************************
				rcv_data = result.toArray();

				for( i = rcv_data.length-1; i >= 0; i-- ) {
					headers = rcv_data[i].split("\t")
					
					// IFRAME 内で行を作成して IFRAME 内のテーブルに追加
					row_data = $("<tr></tr>")
						.addClass("row_data")
						.appendTo( "#tbl" );

					// Subject
					$("<td></td>")
						.text(headers[0].substring(9))
						.appendTo( row_data );

					// From
					$("<td></td>")
						.text(headers[1].substring(6))
						.appendTo( row_data );

					// Date
					$("<td></td>")
						.text(headers[2].substring(6))
						.appendTo( row_data );

				}

			}
			else {
				// エラーメッセージ
				alert( result );
			}
			
			// 通常カーソル
			$("*").css({"cursor": "auto"});

		});

		// *********************************
		// メールデータを最大256受信して保存
		// *********************************
		$("#recieve").on("click", function(){

			// 親ウインドウの入力チェック
			pass = parent.$("#pass").val();
			if ( pass.trim() == "" ) {
				alert("パスワードを入力して下さい")
				parent.$("#pass").focus();
				return;
			}

			// 実行中カーソル
			$("*").css({"cursor": "wait"});

			result = Basp21.RcvMail("user.sakura.ne.jp", 
				"username@user.sakura.ne.jp",
				pass,
				"SAVEALL",
				">C:\\temp\\rcvmail")
				
			// 通常カーソル
			$("*").css({"cursor": "auto"});

			// 失敗した場合はエラーメッセージが文字列として戻されます
			// 成功した場合はファイル名の VBArray になります
			if ( typeof result == "string" ) {
				alert( result );
			}
			else {
				alert( "正しくデータを取得しました" )
			}

		});

		// *********************************
		// 受信したデータより一覧を表示
		// *********************************
		$("#datalist").on("click", function(){

			// テーブル表示リセット
			$("#tbl .row_data").remove();

			// 実行中カーソル
			$("*").css({"cursor": "wait"});
			
			// 最新日付順
			result = Basp21.SortMail("C:\\temp\\rcvmail","date:",1)

			if ( typeof result == "string" ) {
				alert( result )
				$("*").css({"cursor": "auto"});
				return;
			}

			// *********************************
			// result は、VBArray なので、
			// JScript の標準配列に変換
			// *********************************
			rcv_data = result.toArray();

			for( i = 0; i < rcv_data.length; i++ ) {
			
				filename = rcv_data[i];
				
				// メールデータ取得
				result = Basp21.ReadMail("C:\\temp\\rcvmail\\" + filename,"subject:from:date:","C:\\temp\\rcvdata")
				if ( typeof result == "string" ) {
					alert( result )
					$("*").css({"cursor": "auto"});
					return;
				}
				
				row_cols = result.toArray();


				// IFRAME 内で行を作成して IFRAME 内のテーブルに追加
				row_data = $("<tr></tr>")
					.addClass("row_data")
					.appendTo( "#tbl" )
					.on("click", function(){
					
						filename = $(this).find("td").eq(0).text();
						// メールデータの本文取得
						result = Basp21.ReadMail("C:\\temp\\rcvmail\\" + filename,"body:","C:\\temp\\rcvdata");
						if ( typeof result == "string" ) {
							alert( result )
							$("*").css({"cursor": "auto"});
							return;
						}
						
						body_data = result.toArray();
						parent.$("#body").val( body_data[0].substring(6));

					})
					;

				// ファイル名(非表示)
				$("<td></td>")
					.text(filename)
					.css({ "display": "none" })
					.appendTo( row_data );

				// Subject
				$("<td></td>")
					.text(row_cols[0].substring(9))
					.appendTo( row_data );

				// From
				$("<td></td>")
					.text(row_cols[1].substring(6))
					.appendTo( row_data );

				// Date
				$("<td></td>")
					.text(row_cols[2].substring(6))
					.appendTo( row_data );

			}

			// 通常カーソル
			$("*").css({"cursor": "auto"});
		});



	});

</script>
<style>
.row_data td {
	cursor: pointer!important;
}

html,body {
	height: 100%;
}

body {
	margin: 0;
}

/* ブロックを左右に表示  */
.ttl {
	display: inline-block;
	width: 150px;
	vertical-align: top;
}
.entry {
	display: inline-block;
}
.line {
	margin-bottom: 0;
}

#head {
	padding: 16px;
}

/* IFRAMEコントロール用  */
#head {
	padding: 16px;
	width: 100%;
	height: 70px;
	background-color: #e0e0e0;
}
#extend {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: calc( 100% - 3px );
	height: calc( 100% - 70px - 2px );
	border: solid 2px #c0c0c0;
}

</style>
</head>
<body>
<div id="head">

	<p>
		<input
			id="list"
			class="btn btn-outline-primary"
			type="button"
			value="メール一覧">

		<input
			id="recieve"
			class="btn btn-outline-primary ml-5"
			type="button"
			value="メール本体を全て受信">

		<input
			id="datalist"
			class="btn btn-outline-primary ml-5"
			type="button"
			value="受信済メールデータ一覧">

	</p>

	<h4 class="text-danger"></h4>

</div>

<table class="table table-hover">
	<tbody id="tbl">
	</tbody>
</table>


</body>
</html>


関連する記事

HTA(HTMLアプリケーション) のコードを html として IE11 でデバッグする方法





【HTA ( HTMLアプリケーション )の最新記事】
posted by lightbox at 2018-07-12 16:18 | HTA ( HTMLアプリケーション ) | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり