HTML

HTMLでWindowsアプリが作れる！HTAでログアプリを作ってみた

 

HTAアプリケーションとは、ウェブ技術を使ってWindowsデスクトップアプリを作成できる方法です。

ウェブ制作をやったことのある人なら簡単に作れると思います。

このプログラムはオフラインでも使えるし、配布も簡単で、コンパイルも不要です。

とても手軽にアプリケーションが作れます。

今回は、HTAでログアプリを作ってみたのでご紹介します。

 

目次
  1. HTAアプリの作り方
  2. 文字の表示
  3. ウィンドウサイズの指定
  4. ウィンドウを画面中央に表示する
  5. アプリケーションらしくする設定
  6. 簡単なログアプリを作った

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アプリが簡単に作れるのですごく便利です。

いろいろ作れそうです。

ＨＴＡファイルは、ローカルファイルの操作やコマンドの実行もできるようです。

関連記事