このところの仕事は、入社してから今までなかったほどの忙しさです。仕事が終わったと思ったら、次の仕事がどこからともなく舞い込んできます。しかも、人が少ないせいで、やってる仕事のプロジェクトはほぼ一人でやっている感じがします(たまに、上司にお願いや相談や報告をするぐらい)。
そんな中、既存のウェブサイトに似たローカルアプリを作る必要がありました。しかも、ローカルにファイルを保存したりデータベースを読み書きしたりする必要があるとわかり、いろいろ悩んだすえ、HTAを使うことにしました。
参考：HTAを利用したウインドウ付きアプリケーション – マンガで分かる JavaScriptプログラミング講座
標準だと、HTAはIE7モードで起動してしまいますが、canvasを使うこともあり、metaタグでIE10モードとしました。Ajaxを使いたかったのですが、IE11からローカルだとAjaxを利用できないと分かり、IE10モードにしました。よくよく考えると、ActiveXObjectが利用できるので、最終的にはそんなことする必要なかったんですが……。
参考：VBScript + HTA（HTML Application）で Canvas を使う方法 – CX’s VBScript Diary – VBScript グループ
参考：IE11のActiveXObjectはfunctionとして存在しているが!!window.ActiveXObjectがfalse – イム日記
だけど、ここで問題が発覚。なんと、aタグでリンクをつけて同じ階層のファイルに移動しようとすると、IEが開いてしまうではないですか！！ いろいろ調べてみると、HTA:APPLICATIONタグでNAVIGABLE属性を”yes”にすると同じウィンドウで開くということが分かりました(なぜデフォルトが”no”なのか不思議でなりません)。なので、設定してみたのですが、なんとIE10からこのHTA:APPLICATIONタグによる設定はなくなったとのこと。
参考：IE10 の HTA 問題 – ※ただの日記ブログです※
なので、IE9モードにしたのですが、CSSでグラデーションの指定が効きませんでした。IE9には対応していないようです。まあ、正直そこはそんなに問題ないのですが、それでもやっぱりIE10モードで使いたいなと思って試行錯誤していると簡単に解決しました。
やり方としては、リダイレクト用のhtaを用意して、下記のように記述するだけ。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0;URL=ie10-hta.hta">
<HTA:APPLICATION
NAVIGABLE="yes"
/>
</head>
</html>
ここでは、”ie10-hta.hta”が実際に利用するアプリです。拡張子はhtaではなく、htmlでも問題ありません。自分は拡張子htmlで作成して、開発時にはIEで開いて確認しました。IEだと、F12 開発者ツールを使ってデバッグできるためです。
ところで、今回作成したアプリは、タッチでの動作でも対応するようにしていたのですが、ここで問題が発覚しました。なんと、HTAのほうではポインター イベントがありませんでした。例えば、scriptタグ内に『alert(window.navigator.msPointerEnabled);』と記述すると、IEで開いた場合には、『true』となるのにたいし、HTAで開くと『false』となりました。仕方なく、mousedownやmousemoveで対応したのですが、なぜかタッチした時ではなく、離した時にmousedownイベントが発生してしまうという……。どうすりゃいいんだ……。
コメント