2021年07月21日

HTAファイルとは？サンプルアプリを動かすまで紹介！

HTAファイルとは？サンプルアプリを動かすまで紹介！

Windowsでアプリケーションを作成したい場合に、HTMLの知識があれば「HTAファイル」を作成してアプリケーションを作成できますよ。この記事では、HTAファイルとはどういったファイルなのか？またHTAで作成したサンプルアプリを動かすまでをご紹介しています。


目次[非表示]

  1. HTAファイルとは？
  2. HTAファイルを作って動かしてみよう

HTAファイルとは？

Windowsのパソコンを使用していて、簡易的なアプリケーションを作成したいと思ったことはありませんか？HTMLの知識があれば、「HTAファイル」を作成することで簡易アプリケーションを作成することができますよ。

HTAとは、「HtmlApplication・HTMLアプリケーション」の略称です。DHTML（dynamic HTML・ダイナミックHTML）という静的なHTMLの内容をCSSとJavaScriptなどの言語を用いて動的に変換するウェブ技術のことで、つまりWindows用のアプリケーションを作成する記述というわけです。HTMLを使ってWebサイトを作成するのと同じような形でアプリケーションを作成することができるので、アプリケーション開発の入門としても最適です。この記事では、HTAファイルの作り方について説明していきます。

HTAファイルを作って動かしてみよう

それでは、HTAファイルを作って動かしてみましょう。HTAファイルの練習用コードとして下記のコードを用意したので、すべてコピーしてください。

    
<HTA:APPLICATION
　APPLICATIONNAME="menu"
　BORDER="thin"
　BORDERSTYLE="normal"
　CAPTION="yes"
　CONTEXTMENU="no"
　ICON="Hicon.ico"
　ID="Yes"
　INNERBORDER="no"
　MAXIMIZEBUTTON="no"
　MINIMIZEBUTTON="yes"
　NAVIGABLE="no"
　SCROLL="no"
　SCROLLFLAT="yes"
　SELECTION="no"
　SHOWINTASKBAR="no"
　SINGLEINSTANCE="yes"
　SYSMENU="yes"
　VERSION="0.1″
　WINDOWSTATE="normal
/>
<html>
　<head>
<title>HTAメニュー</title>
　<script type="text/javascript">
　　　window.moveTo(24,24);
　　　window.resizeTo(240,240);
　</script>
<style type="text/css">
body{
　margin:0px;
　padding:0px;
}
div{
　height:41px;
　background-image:url("green.png");
　color:#FFF;
　font-family:Meiryo UI;
　font-size:18px;
　margin:0px;
　padding:0px:
　padding-left:40px;
　text-align:center;
　line-height: 40px;
}
a {
　　text-decoration: none;
　}
　　　a:link { color: #ffffff; }
　　　a:visited { color: #ffffff; }
　　　a:hover { color: #00ff00; }
　　　a:active { color: #00ff00; }
　　</style>
　</head>
<body>
　　<div><a href="http://google.com">google</a></div>
　　<div><a href="https://aprico-media.com/">Aprico</a></div>
　</body>
</html>
ファイルメニュー→「名前を付けて保存」をクリック
コピーが完了したら、メモ帳などのテキストアプリを起動して貼り付けます。ファイルメニューを開いて、「名前を付けて保存」をクリックしましょう。
ファイルの名前を付けたら末尾に「.hta」と拡張子を入力し保存
「名前を付けて保存」ダイアログボックスが表示されるので、「ファイル名」でファイルの名前を付けたら末尾に「.hta」と拡張子を入力して保存を行いましょう。これでHTAファイルとして保存されますよ。
green.pngとHTAファイルを並べて用意
「background-image:url(“green.png”);」を指定しているので、HTAファイルと同じフォルダ内に「green.png」を用意します。ペイントで適当に正方形に色を塗ったファイルをpng形式のファイルとして保存すればOKです。
作成したHTAファイルの起動画面
起動するとこのような形になります。「google」と「Aprico」にマウスカーソルを乗せると文字色が変わりますし、クリックすればブラウザでリンク先のページが表示されますよ。

以上がHTAファイルの作成方法となります。簡単にアプリケーションが作成できることがお分かりいただけたのではないでしょうか？HTAにはHTMLやCSS・JavaScriptだけでなくHTA独自のタグを使用して細かくスタイルの指定が可能なので、アプリケーションの作成が簡単なだけでなくHTA独自の奥深さもありますよ。ぜひ色々とHTAファイルを編集して試してみてくださいね。


関連記事

キーワード一覧

「Windows10」トップページへ

Windows10記事ランキング

Windows10新着記事


© 2024 Aprico