2018年09月21日JavaScriptでWindowsアプリ(HTA)を作る前回まで、WSHでコマンドラインベースの「Windowsで動くJavaScriptプログラム」を作ってみました。今回は、独自のウインドウを持ちHTMLでGUIを作成できるJavaScriptプログラム(HTA)を試してみたいと思います。No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアですCodeCampとは?(受講生体験記)「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。目次HTAを作ってみるHTAからコマンドラインを実行してみるHTAにコマンドライン引数を渡すHTAは、WHSと同じくWindowsでJavaScript(JScript)ベースのプログラムを実行する仕組みです。WSHはJavaScriptの文を並べた純粋な「スクリプトファイル」の形で作成しましたが、HTAはWeb用のHTMLファイルと同じくHTML+CSS/JavaScriptで作成することになります。HTAの中身は、Webブラウザ(IE)向けHTMLファイルとほとんど同じです。感覚的にはWindowsの独自機能を利用できるWebアプリ、というイメージに近いかもしれません。HTAを作ってみるたとえば、以下のHTMLファイルをtest.htmlなど適当な名前で作成してダブルクリックすると、WebブラウザでWebページとして表示されます。Test</p></body></html>次に、拡張子を「.hta」に変えてダブルクリックしてみましょう。今度は、Webブラウザではなく独自のウインドウが表示されその中にHTMLのレンダリング結果が表示されます。Webブラウザが読み込んで表示するWebページとしてではなく、HTAの実行エンジンで実行されるHTAアプリケーションとして動作したわけです。HTAの実行エンジンはIEベースなので、機能はIEに準じます。通常のHTML/CSS/JavaScriptはもちろん、ActiveXも使うことができます。WebブラウザとしてのIEではActiveXの実行に制限があり、ActiveXの機能を使ったJScriptコードを実行しようとするとユーザーの同意が必要、あるいは実行自体ができないといった場面も多々ありました。HTAではローカル資源(ActiveXなどのプログラムやファイル)へのアクセスがより直接的に行えるようになるため、WSHと同じく事実上「Windowsで動くJavaScriptプログラム」として開発を行うことができます。HTAでは、通常のWebアプリだけでなくWebベースのGUIでローカルのWindowsプログラムやコンポーネント(ActiveX)を利用するGUIツールを作成することもできるわけです。HTAからコマンドラインを実行してみるまずは、Windowsプログラムを呼び出す流れを確認するために、HTAでコマンドラインを実行してみましょう。いっても、処理としてはWSHの時と同じくWScript.Shellオブジェクトを作成し、コマンドラインを渡すだけです。shell.Exec('notepad');}</script></body></html>testボタンをクリックすると、コマンドライン「notepad」が実行され、メモ帳が起動します。コマンドラインは文字列ですので、JavaScriptで作成する引数を追加することも可能です。HTAであれば、フォーム部品をはじめとするHTMLのGUIで設定画面を作成して設定を反映した引数でプログラムを起動する、つまり「プログラムをユーザーが指定した設定で起動するGUIランチャー」を作ることもできるでしょう。実際に、テキスト入力欄を配置して入力内容を引数に渡すHTAを作成してみましょうか。HTAには、テキスト入力欄(input要素、idはtest)を配置して、入力内容をWindowsのfindコマンドに渡すことにします。findコマンドは、検索する文字列と検索パス(ファイルの場所やファイル名)を指定すると指定文字列を含むファイルを列挙するコマンドです。検索文字列に「html」を、検索パスに入力欄の文字列を指定してfindコマンドを呼び出すHTAを作成してみることにします。alert(e.StdOut.ReadAll());}</script></body></html>htaを起動したら、入力欄に「*.hta」など適当なファイル指定文字列を入れてtestボタンをクリックしてみてください。ボタンがクリックされると、入力欄の文字列を元に引数を作成した上でfindコマンドの処理を行い、結果を表示します。HTAファイルには「html」の文字列が含まれるので、実行したhtaファイルが表示されたと思います。コマンドラインの実行には、WSHの時と同じくShellオブジェクトのExec()を使うので、標準出力からコマンドの出力(処理結果)を得ることができます。今回は、とりあえずコマンドの処理結果をalert()でダイアログ表示してみましたが、実際にHTAを開発する際にはHTML要素を活用して見やすい画面にまとめていきたいところですね。年齢の壁を超え、30代未経験から自社開発企業エンジニアへ転職ぜひ今後のキャリア設計の参考にしてみてください!Web系エンジニアを目指すなら当メディアを運営しているCodeCampでは、マンツーマンで現役エンジニアからプログラミングコースを提供しています。このコースの特徴はバックからフロントまでエンジニアとしての基礎スキルを着実に獲得できるプログラミング未経験から転職・フリーランスへ挑戦できる実際にWebサービスを開発するのでポートフォリオとしても使用できる\Webサイト担当者としてのスキルが身に付く/無料カウンセリングはこちらHTAにコマンドライン引数を渡すこれでユーザーからの入力をWindowsのプログラムに渡すことができるようになりました。「他のプログラムから渡された情報」も扱いたい場面もあるかもしれませんね。WSHから文字列を渡してHTAを起動する、といったことができれば、活用の幅も広がりそうです。WSHで簡単な前処理やユーザーの環境の確認を行い、その情報を渡してHTA(GUIによる確認や本処理を行うプログラム)を起動する、といったこともできるでしょう。HTAでは、HTA内にhta:applicationタグを設置することで、コマンドラインの取得やウインドウの表示を変えるといったより「Windowsアプリケーションらしい」機能を追加することができます。applicationタグは、通常のHTML要素と同じ書き方で追加します。コマンドラインの取得などJScriptからアクセスする場合は、idなど「JScriptからアクセスできる識別子」を入れておくのを忘れないようにしましょう。applicationタグにはcommandLineというプロパティがあり、そこにコマンドライン文字列が格納されます。コマンドライン文字列にはhta起動時に渡された引数も格納されているので、他のプログラムから引数を追加してやれば、HTA側でその情報を取得することができるわけです。application要素のcommandLineを読み取るHTAを作ってみましょう。alert(document.getElementById('app').commandLine);}</script></body></html>とりあえず、「app」のidでapplication要素を配置して、ボタンがクリックされたらidからapplication要素を取得するようにしてみました。このHTAをコマンドラインで実行するには、HTAの実行プログラムであるmshtaを呼び出します。mshtaには、URIで実行するHTAを指定できるので、適当な名前で保存したらfile://に続いてファイルの絶対パスを指定してください。test2のような感じでコマンドを実行します。最後に適当な引数を指定してコマンドを実行すると、HTAが表示されたと思います。ボタンをクリックすると、起動時に指定したファイルパスと引数がダイアログで表示されたはずです。引数を含むコマンドラインを取得できたので、実際に渡された引数を利用してみましょう。検索ファイルパス」を受け取るとfindコマンドで検索文字列を含むファイルを検索ファイルパスの中から探して表示するHTAを作成してみました。')でスペース一つを区切りとして分割し、最後の2つを引数とみなします。*.htaといったコマンドラインで実行すると、HTAが起動され渡したコマンド引数(上の例ではhtmlと*.hta)が表示されます。ボタンをクリックすると、test()が実行され実際にfindコマンドの呼び出しを行い処理結果が表示されたはずです。先のHTAのコードを見ると「innerHTML」という古臭いプロパティにアクセスしていますね。実は、HTAはデフォルトだとIE7相当の環境で実行されるため、新しい記述や機能を利用できません。IE7だと、機能面ではcanvasをはじめいわゆる「HTML5」の機能も使えないものが多く、可能性を狭めてしまいますね。Vistaの時代に逆戻りですから......HTA(IE向けページ)では、X-UA-Compatibleで実行モードの設定を行えるので、「IE9」相当にしてみましょう。/>この文をhead内に入れると、IE9相当で動作するようになります。arg2;といった記述が可能になるので、試してみてください。IE10以上にするとapplicationタグが利用できなくなる、という罠があります。実用上はIE9で対応できることが多いでしょうから、HTAはIE9相当で作るのが無難かもしれません。2022年版】社会人でも通いやすいプログラミング教室5選|選び方の基準も解説プログラミング学習プログラミングスクール・サービス塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。Ltd.CodeCampusテクノロジーの「学ぶ・働く」を知るメディアプログラミングWEBデザインテクノロジーアプリ開発ビジネススキルキャリア学習ガイドtwitterLINE。