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アプリケーション )の最新記事】
- HTA / ADO / Jscript : Access( .accdb .mdb ) の読み込みと表示
- HTML Application : JavaScript で新しい Excel の Book を作成する
- HTML Application : JavaScript で Windows のいろいろなフォルダを開く
- HTA (または IE11) で フォルダ選択ダイアログからフォルダとファイルの一覧
- HTA (または IE11) で hostname を実行して標準出力からPC名の取得
- HTA : 『x-frame-options: SAMEORIGIN』の設定されていないページの情報を IFRAME 内に表示して jQuery で取り出す / iframe内 参照と .clone(..
- HTA (HTMLアプリケーション) で JavaScript と VBScript を混在させる手法 / GetObject を VBScript 側で使用する
- HTA + Basp21 + jQuery + twitter-bootstrap(4.1.1) でメール送信ツール
