HTAでjQueryとWSHとJSON

世の中めちゃくちゃ便利になってるけども、Windows10が標準の現在でもやはりHTAは便利だと思っている私がいます。

あちこちで業務改善の相談に乗ってると、いちいちOffice起動するのも重たいし、そこら中のフォルダにバッチやスクリプトも置きたくない・・・でも楽したい。そんな時に便利すぎるのです。

# 2019/10/02 追記

HTAのブラウザエンジンが古くてjQueryがうまく動かない問題ですが、以下のmetaタグを入れることでJavascriptを解釈するエンジンの挙動を変化させられるみたいですね！

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

1	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

これで、最新のjQueryもHTA上で動かせるぜ！！

参考：IE互換表示

１．改めてHTAの良さを整理

HTML+CSS/JavaScriptベースで簡単にUI付きのアプリケーションを作れる。
一応、jQueryも使える。
ActiveXでWSHも使える。
コンパイル不要、なのでいつでも機能修正できる。

よく使うちょっとした処理をスクリプト化してHTAに埋め込んでパネル化するのがとっても便利。

WindowsならHTMLで作ったファイルを拡張子『.hta』で保存するだけで使えるのだ。

HTAについて調べる。 - Amazon

普通にローカルファイルで『.html』だと、Webブラウザが起動してしまうわけですが、ローカルリソースを使うとはいえ、Webブラウザにはいろいろセキュリティの制限があるのでActiveXObjectとか使えない訳です。

Google ChromeでActiveXObjectを宣言しても・・・動かない。

IEで使ってみると・・・いちいちこれがでる。

拡張子を『.hta』にするとこれらの制限を気にせずローカルリソースにアクセスできる訳です。

FileSystemObjectの操作も、OSコマンド発行も思いのままです。

２．jQueryを組み込む

あくまで、『一応』jQueryが使えるという話な訳で。

htaのスクリプト実行エンジンはIEベースになっていて、実装ベースとしてはかなりレガシーなものになっています。全然更新されてません。

なので、普段Web開発の先端技術に触れている人が触れようものなら大火傷をすることでしょう。

（ま、そんな人はhtaなんて使わんと思いますが。）

ChromeやFirefox、Edgeなんかでは当たり前に動く機能も動かないなんてことはザラです。

試しに、jQuery v3.4.1へのCDNをリンクしてみても漏れなくエラーで動きません。

おっと、絶望しないで下さい♪

レガシーな実行エンジンには、レガシーなスクリプトを組み合わせればよいのです。

わんすけが確認している限りでは、以下のJavascriptライブラリが使えています。

jQuery v1.7.2
jQuery-ui v1.8.19

これまたレガシーですが、jQuery-uiライブラリを使えばカレンダとかタブとか、いろんなフォームが使えるのでUI作成の自由度が高まりますよ！

jQuery-uiについて勉強する。 - Amazon

３．サンプルひな形コード

ひとまずこれをテキストに入りつけて『.hta』拡張子で保存すればいつでもアプリが作れます！

<html>
	<head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/jquery-ui.min.js"></script>
		<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/themes/redmond/jquery-ui.css">
		<style type="text/css">
                        /* Template... */
                </style>
		
		<HTA:APPLICATION ICON="xxxx.ico" />
		
		<title>ウィンドウタイトル　ひな形</title>
		<meta charset="shift_jis">
		<script type="text/javascript">
			// Template...
		</Script>
	</head>
<body>

</body>
</html>

<html>

<head>

/* Template... */

</style>

<HTA:APPLICATION ICON="xxxx.ico" />

<title>ウィンドウタイトル　ひな形</title>

// Template...

</Script>

</head>

<body>

</body>

</html>

４．よくハマ～るポイント

jQueryのバージョンが古いので、リスナの登録とか『$elm.on('event', func())』記述が使えなかったりします。（『.click(func())』とかで記述します。）

古いリファレンスを掘り出して仕様を確認しながら使いましょう。

そして大切なのは、コレ。

『JSONライブラリが使えない。』

アプリケーションとしていろいろ動かそうと思ったら、やっぱり取得値・設定値とかファイル書き出ししたくなりますよね・・・。

~~スクリプト実行エンジンのJSONオブジェクトは使えないんです。。。~~

※ 必ず使えないという訳ではないようだったので訂正。ベースでロードされているIEのバージョンによって挙動は変わるようです。

obj = JSON.parse(json);

1	obj = JSON.parse(json);

おっと、絶望しないで下さい♪（ぱーと２）

実は、jQueryのライブラリの中にjsonパースする機能が入ってます。（先人たち偉い。）

obj = $.parseJSON(json) ;

1	obj = $.parseJSON(json) ;

これだけの機能が実装できるなら・・・お手軽便利ツールなんでも作れそうですね♪

タグ: jquery, JSON, マクロ, よくあるエラー, 便利ツール

# 2019/10/02 追記

１．改めてHTAの良さを整理

２．jQueryを組み込む

３．サンプルひな形コード

４．よくハマ～るポイント

『JSONライブラリが使えない。』

コメントを残す コメントをキャンセル

Related Post

ログファイルが更新されたら画面に表示するHTAログファイルが更新されたら画面に表示するHTA

コメントを残すコメントをキャンセル