IE11 (Edge) モードで枠なしの HTA Application ページを開きたい

Windows には、HTML ページの拡張子を .hta に変えることで、手軽にウィンドウアプリが実現できる HTA (HTML Applications) という機能がある。内部的には IE を使っているのだが、IE ブラウザとは別の、一つのプロセスウィンドウのように HTML ページが開けるので、簡単なウェブアプリを作って独自ウィンドウぽく開いて使ったりできる。

枠線のないウィンドウを作る

んで、この HTA 用の独自タグがあって、そのタグで複数ウィンドウを許可しないとか、ウィンドウの枠線を一切なくして表示とかいった指定ができる。HTA ファイルの中のどこでもいいので、以下のように書けば、枠線が全くないウィンドウが開く。

<hta:application applicationname="Neo" singleinstance="yes" showintaskbar="no" caption="no" border="none" innerborder="no" navigable="yes">

プロパティの内容は以下のとおり。

プロパティ名 内容
applicationname アプリ名を任意で指定する。singleinstance 使用時に識別に使用する。
singleinstance yes で複数起動をしないようにする。yes・no (既定)。
showintaskbar タスクバーにアプリを表示するか否か。no にしても Alt + Tab で選択可能。yes (既定)・no。
caption ウィンドウのタイトルバーを表示するか否か。yes (既定)・no。
border ウィンドウの枠線の種類を選択できる。thick (既定)・dialog・thin・none。
innerborder ウィンドウの枠線の内側に立体的な枠線を付けるか否か。yes・no (既定)。
navigable リンク先のページを HTA ウィンドウ内に読み込むか、ブラウザを開くか。yes・no (既定・ブラウザを開く)。

その他使えるプロパティは以下を参照。

これでウインドウのタイトルバーもなくなるので、ページ中に閉じるボタンを作るか、Alt + F4 で閉じるかしないといけなくなるが、単色のデスクトップ背景に同化させたりすると、在りし日の「アクティブデスクトップ」のように使うことができる。

Edge モードだと枠線を消せない

ところが、meta 要素による制御パラメータである「X-UA-Compatible」で、HTA を Edge モードで表示しようとすると、枠線を消す指定が無効になってしまう。

<!-- これだと Edge モードで開くが枠線をなくす指定が有効にならない -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<hta:application applicationname="Neo" singleinstance="yes" showintaskbar="no" caption="no" border="none" innerborder="no" navigable="yes">

どうやら Edge モードの HTA ページは枠線を消せないようだ。

Edge モードにしながら枠線のない HTA を開く

せっかくなら Edge モードでページを表示させたいが、枠線も消したい。そういうときは、本体の HTA とは別に、以下のような呼び出し用 HTA を作り、これを呼び出すようにすることで実現できる。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=IE9">
    <hta:application applicationname="HTA Memo" singleinstance="yes" showintaskbar="no" caption="no" border="none" innerborder="no" navigable="yes">
    <title>Execute HTA Memo</title>
    <style>

html,
body {
  overflow:hidden;
  text-align:center;
}

a {
  color:#f0f0f0;
}

    </style>
    <script>

window.onload = function() {
  var width  = 750;
  var height = 200;
  window.resizeTo(width, height);
  window.moveTo((screen.availWidth - width) / 2, (screen.availHeight - height) / 2);
  
  // Always On Top (Using Excel)
  // http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12151482357
  try {
    var excel = new ActiveXObject("Excel.Application");
    var hwnd = excel.ExecuteExcel4Macro("CALL(\"user32\", \"FindWindowA\", \"JCC\", \"HTML Application Host Window Class\", \"" + document.title + "\")");
    excel.ExecuteExcel4Macro("CALL(\"user32\", \"SetWindowPos\", \"JJJJJJJJ\", " + hwnd + ", -1, 0, 0, 0, 0, 3)");
    excel = null;
  }
  catch(e) {
    // Do nothing...
  }
  
  location.href = "Main.hta?mode=noborder";
}
    </script>
  </head>
  <body>
    <p><a href="Main.hta?mode=noborder">Move To HTA Memo</a></p>
  </body>
</html>

Execute.hta が呼び出し用の HTA。IE9 モードで開くことで caption や border の指定が効くようにしている。また、meta 要素ですぐに本体である Main.hta に遷移させている。遷移のさせ方は JavaScript (location.href) でもなんでも OK。

Main.hta が本体となる HTA。meta 要素で Edge モードを指定しておけば十分。ただ、Main.hta を直接呼び出してしまった時のために、applicationname と singleinstance、showintaskbar あたりは Execute.hta と同様のものにしておくと、ウィンドウ枠以外は似たような動きをしてくれると思う。

参考