HTAアプリケーションとは、ウェブ技術を使ってWindowsデスクトップアプリを作成できる方法です。
ウェブ制作をやったことのある人なら簡単に作れると思います。
このプログラムはオフラインでも使えるし、配布も簡単で、コンパイルも不要です。
とても手軽にアプリケーションが作れます。
今回は、HTAでログアプリを作ってみたのでご紹介します。
HTAアプリの作り方
HTAアプリを作るには、デスクトップで新しいテキストファイルを作り、拡張子を.htaに変更するだけです。すると、アプリのようなアイコンが自動的に表示されます。
作成したアプリは、そのファイルをダブルクリックするだけで実行できます。アプリを実行すると、独自のウィンドウが表示されます。
文字の表示
文字を表示するには、HTMLで記述します。h1タグなどを使って、簡単に文字を表示できます。
<h1>Hello World!</h1>
ウィンドウサイズの指定
アプリのウィンドウサイズを指定することもできます。
これは、JavaScriptでウィンドウの幅と高さを指定します。
<script>
window.resizeTo(320, 240);
</script>
<h1>Hello World!</h1>
ウィンドウを画面中央に表示する
また、JavaScriptでウィンドウを画面中央に表示させることもできます。
<script>
var width = 640;
var height = 480;
window.resizeTo(width, height);
window.moveTo((window.screen.width - width) / 2, (window.screen.height - height) / 2);
</script>
<h1>Hello World!</h1>
アプリケーションらしくする設定
『HTA』ファイルには、『HTA:APPLICATION』タグを設定できます。
このタグに各種設定が書けます。これだけでアプリケーションらしい見た目に整えることができます。
<head>
<HTA:APPLICATION
ID="MyApp"
APPLICATIONNAME="testApp"
BORDER="dialog"
ICON="/graphics/creature.ico"
SINGLEINSTANCE="yes"
CONTEXTMENU="no"
>
</head>
以下、設定できる値の中で、よく使うもの。
| ID | アプリのID |
|---|---|
| APPLICATIONNAME | タイトルバーに表示するアプリ名 |
| BORDER | ウィンドウの見た目 |
| ICON | アプリアイコン画像 |
| SINGLEINSTANCE | 複数起動の可否。yesの時はapplicationNameが必要 |
| CONTEXTMENU | 右クリックメニューの表示 |
| MAXIMIZEBUTTON | 最大化ボタンの表示 |
| MINIMIZEBUTTON | 最小化ボタンの表示 |
| SCROLL | スクロールバーの表示 |
| SHOWINTASKBAR | タスクバーへの表示 |
| NAVIGABLE | リンクをウィンドウ内で読みこむか |
以上がHTAアプリケーションの基本的な概要と作成手順です。
簡単なログアプリを作った
簡単なログを残せるアプリです。
インプットフォームで入力欄と登録ボタンを設置しました。
ボタンが押されると入力内容が画面に記録されるアプリです。
削除ボタンも設置しました。
以下プログラム全文です。
<html lang="ja">
<head>
<meta charset="utf-8">
<title>LOG App</title>
<HTA:APPLICATION ID="logapp" APPLICATIONNAME="LogApp" BORDER="dialog" SINGLEINSTANCE="yes" CONTEXTMENU="no">
</head>
<body>
<h1>LOG App</h1>
<form name="Form1">
<label>タイトル: <input type="text" name="title"></label>
<label>本文: <input type="text" name="body"></label>
<button name="Button1" onclick="addRow()">登録</button>
<br><br>
<hr>
<table id="Table1" border="1">
<tr>
<td>時刻</td>
<td>タイトル</td>
<td>本文</td>
<td>削除</td>
</tr>
</table>
</form>
<script lang="JavaScript">
// ウィンドウサイズを指定
var width = 640;
var height = 480;
window.resizeTo(width, height);
window.moveTo((window.screen.width - width) / 2, (window.screen.height - height) / 2);
// カーソルをタイトル入力欄にフォーカスする
document.Form1.title.focus();
// 登録ボタンが押された時の処理（テーブルに行を追加する）
function addRow() {
// 空の場合は何もしない
if (document.Form1.title.value == "" || document.Form1.body.value == "") {
return;
}
var table = document.getElementById("Table1");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
// データをHTMLに追加
cell2.innerHTML = document.Form1.title.value;
// 時刻を追加HH:mm形式
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
cell1.innerHTML = hour + ":" + minute;
cell3.innerHTML = document.Form1.body.value;
cell4.innerHTML = "<button onclick='deleteRow(this)'>削除</button>"; // ここを修正
// テキストボックスを空にする
document.Form1.title.value = "";
document.Form1.body.value = "";
// カーソルをタイトル入力欄にフォーカスする
document.Form1.title.focus();
}
// 削除ボタンが押された時の処理（当該の行を削除する）
function deleteRow(button) {
var row = button.parentNode.parentNode;
var table = row.parentNode;
table.deleteRow(row.rowIndex);
// カーソルをタイトル入力欄にフォーカスする
document.Form1.title.focus();
}
</script>
</body>
</html>
Windowsアプリが簡単に作れるのですごく便利です。
いろいろ作れそうです。
ＨＴＡファイルは、ローカルファイルの操作やコマンドの実行もできるようです。
