HTA版 マークダウン ビューアの更新
マークダウン記法で書かれたテキストファイルの内容をHTA上でレンダリングするツール。
ファイルオープンの際のエラー処理を追加。
GitHub
https://github.com/mogproject/mogproject/blob/master/script/HtaMarkdownViewer.hta
HtaMarkdownViewer
http://mogproject.blogspot.jp/2012/11/htamarkdownviewer.html
HTA版 マークダウン ビューア
マークダウン記法で書かれたテキストファイルの内容をHTA上で
レンダリングするツールを作成。
コンバートの実装は「showdown.js」をそのまま流用。
HTAにパラメータを渡せばそのファイルを開き、そうでない場合は「ファイルを開く」ダイアログを出している。
最低限の機能しか無いので、印刷などは右クリックかショートカットキーでの
代用が必要。
インターネット接続もソフトのインストールも禁止されている、レガシーなWindows環境向けに。
showdown.js - A JavaScript port of Markdown
https://github.com/coreyti/showdown
JavaScript版 HTAテンプレート
VBScript の部分を JavaScript に書き換え。
http://mogproject.blogspot.jp/2012/04/general-purpose-hta-template.html
div.balloon {
position: relative;
height : 18px;
}
div.balloon .tail1, .tail2 {
position : absolute;
top : 4px;
height : 0px;
width : 0px;
border : 5px solid transparent;
border-left : none;
border-right: 9px solid #333333;
font-size : 0px;
line-height : 0px;
}
div.balloon .tail1 {
border-right-color: #333333;
}
しかし、IE6 では早くもここで問題が発生。div.balloon .tail_ie6 {
border-top : 5px solid pink;
border-bottom: 5px solid pink;
filter : chroma(color=pink);
}
・表示例
div.balloon .body {
position : absolute;
left : 8px;
border : 1px solid #333333;
background-color: #ffffff;
color : #333333;
font-family : "Century Gothic";
font-size : 11px;
}
・表示例
div.balloon .tail2 {
left : 2px;
border-right-color: #ffffff;
}
・表示例
<html>
<head>
<style type="text/css"><!--
div.balloon {
position: relative;
height : 18px;
}
div.balloon .body {
position : absolute;
left : 8px;
border : 1px solid #333333;
background-color: #ffffff;
color : #333333;
font-family : "Century Gothic";
font-size : 11px;
}
div.balloon .tail1, .tail2 {
position : absolute;
top : 4px;
left : 0px;
height : 0px;
width : 0px;
border : 5px solid transparent;
border-left : none;
border-right: 9px solid #333333;
font-size : 0px;
line-height : 0px;
}
div.balloon .tail1 {
border-right-color: #333333;
}
div.balloon .tail2 {
left : 2px;
border-right-color: #ffffff;
}
div.balloon .tail_ie6 {
border-top : 5px solid pink;
border-bottom: 5px solid pink;
filter : chroma(color=pink);
}
--></style>
</head>
<body>
<div class="balloon">
<div class="tail1"></div>
<div class="body"> 0123456789 </div>
<div class="tail2"></div>
</div>
<!-- For IE6
<div class="balloon">
<div class="tail1 tail_ie6"></div>
<div class="body"> 0123456789 </div>
<div class="tail2 tail_ie6"></div>
</div>
-->
</body>
</html>
参考：
HTA版ネットワーク速度計算機
ネットワークの伝送時間を概算で得たい場合、以下の計算式をよく利用する。
bandwidth: 帯域幅(bps)
efficiency: 伝送効率(%)
datasize: データ量(バイト)
timetaken: 所要時間(秒)
この計算を簡単に行えるようにHTAのスクリプトを作成した。
・NetSpeed.hta
<html><!--
'*****************************************************************************
'*
'* NAME : Network Speed Calculator
'*
'* DESCRIPTION : Calculate bandwidth, data size or time taken.
'*
'* VERSION HISTORY:
'* 1.0 2012-06-09 Initial release by mogproject
'*
'*****************************************************************************
--><head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title> </title>
<script language="JavaScript"><!--
resizeWindow(350, 170);
function resizeWindow(width, height) {
width = Math.min(width, screen.width);
height = Math.min(height, screen.height);
window.resizeTo(width, height);
window.moveTo ((screen.width - width) / 2, (screen.height - height) / 2);
}
--></script>
<HTA:APPLICATION
ID ="hta"
APPLICATIONNAME="Network Speed Calculator"
VERSION ="1.0"
ICON =""
BORDER ="normal"
BORDERSTYLE ="normal"
CAPTION ="yes"
INNERBORDER ="yes"
MAXIMIZEBUTTON ="yes"
MINIMIZEBUTTON ="yes"
SHOWINTASKBAR ="yes"
SINGLEINSTANCE ="yes"
SYSMENU ="yes"
WINDOWSTATE ="normal"
SCROLL ="no"
SCROLLFLAT ="yes"
SELECTION ="no"
CONTEXTMENU ="yes"
NAVIGABLE ="no" />
<script language="JavaScript"><!--
function onLoad() {
document.title= hta.applicationName + " v" + hta.version;
txtBandwidth.value = 100;
txtEfficiency.value = 80;
txtDataSize.value = "";
txtTimeTaken.value = "";
checkAvailability();
}
function onKeyPress(evt) {
window.event.returnValue
= (evt.keyCode >= 48 && event.keyCode <= 57) || event.keyCode == 46;
}
function onKeyUp() {
checkAvailability();
}
function checkAvailability() {
var elems = [txtBandwidth, txtDataSize, txtTimeTaken];
for (var i in elems) {
elems[i].style.backgroundColor = "white";
}
btnCalcBandwidth.disabled = ! (txtEfficiency.value.length
&& txtDataSize.value.length && txtTimeTaken.value.length);
btnCalcDataSize.disabled = ! (txtEfficiency.value.length
&& txtBandwidth.value.length && txtTimeTaken.value.length);
btnCalcTimeTaken.disabled = ! (txtEfficiency.value.length
&& txtBandwidth.value.length && txtDataSize.value.length);
}
function updateValue(elem, val) {
elem.value = Math.round(val * 100) / 100;
checkAvailability();
elem.style.backgroundColor = "yellow";
}
function calcBandwidth() {
updateValue(txtBandwidth,
800 * txtDataSize.value * lstUnitDataSize.value
/ (txtTimeTaken.value * lstUnitTimeTaken.value * txtEfficiency.value)
/ lstUnitBandwidth.value);
}
function calcDataSize() {
updateValue(txtDataSize,
txtBandwidth.value * lstUnitBandwidth.value * txtEfficiency.value
* txtTimeTaken.value * lstUnitTimeTaken.value / 800
/ lstUnitDataSize.value);
}
function calcTimeTaken() {
updateValue(txtTimeTaken,
800 * txtDataSize.value * lstUnitDataSize.value
/ (txtBandwidth.value * lstUnitBandwidth.value * txtEfficiency.value)
/ lstUnitTimeTaken.value);
}
--></script>
<style type="text/css"><!--
body {
font-family : Verdana, Arial, Helvetica, Sans-serif;
font-size : 9px;
font-weight : normal;
background-color: #a9a9a9;
color : #000000;
margin : 0px 0px 0px 0px;
}
table {
border-collapse : collapse;
border-spacing : 0px;
border-width : 0px;
border-style : solid;
}
table.main {
width : 320px;
height : 120px;
font-size : 12px;
}
input {
font-family : Verdana, Arial, Helvetica, Sans-serif;
font-weight : normal;
}
input.text {
font-size : 14px;
text-align : right;
width : 6em;
}
input.button {
width : 4em;
}
select {
font-family : Verdana, Arial, Helvetica, Sans-serif;
font-size : 12px;
font-weight : normal;
}
--></style>
</head>
<body onload="onLoad()">
<table width="100%" height="100%"><tr><td align="center">
<table class="main">
<tr>
<td align="right">bandwidth</td>
<td align="right">
<input name="txtBandwidth" type="text" class="text"
onkeypress="window.event.returnValue = onKeyPress(window.event)"
onkeyup="onKeyUp()" onchange="onKeyUp()" />
</td>
<td align="left">
<select name="lstUnitBandwidth">
<option value="1">bps</option>
<option value="1024">Kbps</option>
<option value="1048576" selected="selected">Mbps</option>
<option value="1073741824">Gbps</option>
</select>
</td>
<td align="left">
<input name="btnCalcBandwidth" type="button" class="button" value="calc"
onclick="calcBandwidth()" />
</td>
</tr>
<tr>
<td align="right">efficiency</td>
<td align="right">
<input name="txtEfficiency" type="text" class="text"
onkeypress="onKeyPress(window.event)"
onkeyup="onKeyUp()" onchange="onKeyUp()" />
</td>
<td align="left">%</td>
<td align="left"></td>
</tr>
<tr>
<td align="right">data size</td>
<td align="right">
<input name="txtDataSize" type="text" class="text"
onkeypress="onKeyPress(window.event)"
onkeyup="onKeyUp()" onchange="onKeyUp()" />
</td>
<td align="left">
<select name="lstUnitDataSize">
<option value="1">Byte</option>
<option value="1024">KB</option>
<option value="1048576" selected="selected">MB</option>
<option value="1073741824">GB</option>
<option value="1099511627776">TB</option>
</select>
</td>
<td align="left">
<input name="btnCalcDataSize" type="button" class="button" value="calc""
onclick="calcDataSize()" />
</td>
</tr>
<tr>
<td align="right">time taken</td>
<td align="right">
<input name="txtTimeTaken" type="text" class="text"
onkeypress="onKeyPress(window.event)"
onkeyup="onKeyUp()" onchange="onKeyUp()" />
</td>
<td align="left">
<select name="lstUnitTimeTaken">
<option value="1">seconds</option>
<option value="60" selected="selected">minutes</option>
<option value="3600">hours</option>
<option value="86400">days</option>
</select>
</td>
<td align="left">
<input name="btnCalcTimeTaken" type="button" class="button" value="calc"
onclick="calcTimeTaken()" />
</td>
</tr>
</table>
</body>
</td></tr></table>
</html>
・画面
・使用方法
(1) 必要な帯域幅を算出したい場合
bandwidthの単位, efficiency, data size, time taken を設定し、bandwidth 横の「calc」ボタンを押下。
(2) 時間内に伝送可能なデータ量を算出したい場合
bandwidth, efficiency, data sizeの単位, time taken を設定し、data size 横の「calc」ボタンを押下。
(3) 所要時間を算出したい場合
bandwidth, efficiency, data size, time takenの単位 を設定し、time taken 横の「calc」ボタンを押下。
HTA テンプレート
汎用的なHTA(HTML Application)のテンプレート。
・template.hta
<html><!--
'*****************************************************************************
'*
'* NAME :
'*
'* DESCRIPTION :
'*
'* VERSION HISTORY:
'* 1.0 yyyy-mm-dd Initial release by AUTHOR
'*
'*****************************************************************************
--><head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title> </title>
<script language="VBScript"><!--
'************ Initialize window size ************
resize_window 300, 84
'*****************************************************************************
'* Sub resize_window()
'*
'* Purpose: Resize a window to the specified width and height,
'* and then set its position to center.
'* Input : width - Sets the width of the window, in pixels (Integer)
'* height - Sets the height of the window, in pixels (Integer)
'* Output : None
'*****************************************************************************
Sub resize_window(width, height)
If width > screen.width Then width = screen.width
If height > screen.height Then height = screen.height
window.resizeTo width, height
window.moveTo (screen.width - width) / 2, (screen.height - height) / 2
End Sub
--></script>
<HTA:APPLICATION
ID ="hta"
APPLICATIONNAME="Application"
VERSION ="1.0"
ICON =""
BORDER ="normal"
BORDERSTYLE ="normal"
CAPTION ="yes"
INNERBORDER ="yes"
MAXIMIZEBUTTON ="yes"
MINIMIZEBUTTON ="yes"
SHOWINTASKBAR ="yes"
SINGLEINSTANCE ="yes"
SYSMENU ="yes"
WINDOWSTATE ="normal"
SCROLL ="no"
SCROLLFLAT ="yes"
SELECTION ="no"
CONTEXTMENU ="yes"
NAVIGABLE ="no" />
<script language="VBScript"><!--
'*****************************************************************************
'* Sub Window_OnLoad()
'*
'* Purpose: Initialization tasks.
'* Input : None
'* Output : None
'*****************************************************************************
Sub Window_OnLoad()
document.title = hta.applicationName & " v" & hta.version
End Sub
--></script>
<style type="text/css"><!--
body {
font-family : Verdana, Arial, Helvetica, Sans-serif;
font-size : 14px;
font-weight : normal;
background-color: #ccffcc;
color : #000000;
margin : 0px 0px 0px 0px;
}
table {
border-collapse: collapse;
border-spacing : 0px;
border-width : 0px;
border-style : solid;
}
--></style>
</head>
<body>
<table width="100%">
<tr height="40px">
<td align="center">Hello, World</td>
</tr>
</table>
</body>
</html>
・ウィンドウのリサイズ(window.resizeTo)は hta:application タグの前に記述しないと、起動時に一瞬通常サイズのウィンドウが表示されてしまう。
調べてみると、色々と奥が深い。
・実行結果
JavaScript版 HTAテンプレート
http://mogproject.blogspot.jp/2012/11/hta-template-with-javascript.html
HTA Template Generator
http://gallery.technet.microsoft.com/scriptcenter/HTA-Template-Generator-v1-af7273b1
HTA、他: 自分自身のフルパスを取得する方法
スクリプトファイルの自分自身のパスと、その親ディレクトリを取得する方法の一覧。
実現方法はいずれも一例である。
・HTA (HTML Applications) – VBScript
path = unescape(window.location.pathname)
If window.location.host <> "" Then path = "\\" & window.location.host & path
dir = CreateObject("Scripting.FileSystemObject").GetParentFolderName(path)・VBScript
path = WScript.ScriptFullName
dir = CreateObject("Scripting.FileSystemObject").GetParentFolderName(path)WScript.Echo path & vbCrLf & dir
・Bourne Shell
path=`(cd \`dirname $0\` && pwd)`/`basename $0`
dir=`dirname $path`
echo "${path}\n${dir}"・Perl
use File::Basename;
use File::Spec;
$path = File::Spec->rel2abs(__FILE__);
$dir = dirname $path;
print "$path\n$dir\n";import os
path = os.path.abspath(__file__)
dir = os.path.dirname(path)
print '%s\n%s' % (path, dir)
__file__ にフルパスが入るかは処理系依存の模様。
import sys を行なってから sys.argv[0] を参照する方法でも代替可能。
・Windows バッチファイル ※2012/04/01追記
@echo off
set full_path=%~f0set dir=%~dp0echo %full_path%
echo %dir%