Tech-Ezo (Hokkaido PC and Network Users Group)
 Top Page  |  What's Tech-Ezo  |  Next Seminar  |  Seminar Log  |  Seminar Plan  |  Tips  |  life  |  Link  |
Scr.003 ステップアップ WSH - 使えそうなスクリプトを作って見よう
前ページへ   [ステップアップ WSHへ戻る］   次ページへ


■  Level.11   ユーザーインタフェイスをIEにしてみる(準備)
■ ■

　前回のLevel.10aでは、本筋からちょっと脇道にそれまして、コマンドラインのオプション指定で検索フォルダや検索文字列を指定できるようにしました。

　今回からは本筋に戻りまして、今までダイヤログボックスで行っていた入力部分や、検索結果の表示部分の見た目を良くして行きたいと思います。

■ ユーザーインターフェイスはIEで

　Level.10まででは、検索フォルダや検索文字の入力にダイヤログボックス(InputBox)を使い、出力はコマンドライン上やダイヤログボックスを使っていました。この状態でも使い難いわけではありませんが、見た目にちょっと寂しい感じです。そこで、Level.11以降のレベルではこのユーザーインタフェース部分について改善して見ようと思います。

　そんな訳で、オンラインマニュアルを見ながらユーザーインタフェースを良くしてくれるコマンドやオブジェクトを探して見るのですが、無いんですねぇ...これが。

　そこで、ユーザーインタフェースにはIE(InternetExplorer)を使うことにして、HTMLの中からVBScriptを利用して見ることにします。こうすることで、VBのフォームで作成する程ではないにしろ、そこそこ凝ったユーザーインタフェースの作成がお手軽に出来るようになります。

■ まずはHelloWorldをやってみましょう

　まずは、HTMLの中に埋め込まれたVBScriptから Hello World! を表示するスクリプトを書いてみましょう。

■ HTML版Hello World(hello.html) 
001
002
003
004
005
006
007
008
009
010
011
012
013

<script language="VBScript">
<!--
Sub HelloWorld
    Document.Write "Hello World!"
End Sub
-->
</script>

<html>
<body>
<input type="button" name="InputBtn" onmoune="HelloWorld" value="Go!">
</body>
</html>

　さっそく実行して見ます。

■ hello.htmlを実行
→

　Hello.htmlのアイコンをダブルクリックすると、IEが起動され「Go!」と書かれたボタンが1つだけ表示されますので、このボタンをクリックすることで「Hello World!」と表示されます。

　スクリプトの内容ですが、前半部分(1〜7行目)がスクリプト本体で、後半部分(9〜13行目)がユーザーインタフェースとなるHTML文書となっています。

　HTMLについてはここでは趣旨と外れますので簡単に済ませることにしまして...11行目がキモの部分で、ボタンを1つ置きクリックされたら、HelloWorld関数を呼ぶように指定されています。

　スクリプトの方は、HelloWorld関数を記述してあります。内容はいたって簡単で、4行目にDocument.Writeを使ってブラウザの中に「Hello World!」と表示させているだけです。スクリプトの記述方法は、scriptタグで括っているだけで、今まで書いてきた内容と変わりません。

　ただ、今までは画面表示にWScript.Echoを使ってきましたが、ブラウザから呼ぶ場合にはブラウザで表示している文書内に表示することになりますので、Documentオブジェクトを使って操作するところが変わります。

■ テキスト検索スクリプトのユーザーインタフェースを作成してみる

　HelloWorldでブラウザ(IE)からのVBScript起動方法を理解できたと思いますので、次にテキスト検索スクリプトのユーザーインタフェースを作成してみましょう。

　まず必要なアイテムですが...

  • 検索フォルダ
  • 検索文字
  • 検索実行ボタン
  • 検索結果表示領域

　と、いったところでしょうか。とりあえずこれらのアイテムを配置したHTML文書を作成してみます。

■ インタフェース部分の作成(level11b.html) 
001
002
003
004
005
006
007
008
009

<html>
<body>
フォルダ名: <input type=""text"" name=""FolderInput"" value=""C:\script\tips\"">
検索文字: <input type=""text"" name=""srhInput"" value=""フォルダ"">
<input type=""button"" name=""go"" value=""検索"" onclick=""srhStart()"">

<p>ここに検索結果を表示</p>
</body>
</html>

■ level11b.htmlを表示すると...

　ちょっと簡素ですが必要な項目はそろっていますね。使い方は、「フォルダ名」「検索文字」に文字列を入力し、「検索」ボタンをクリックすると、その下に検索結果が表示される...といった具合になります。

　本当は、文字列入力部分と結果表示部分をフレーム分けするとロジック的にはすっきりするのですが、今回はさほど大きなスクリプトではありませんし、作成するファイルが複数になると説明が難しくなりそうですので、1ファイルで作成して行こうと思います。

　さてっ、改めて出来たインタフェースを見てみますと...なんだか寂しい感じですね(汗。このままでも使えますが、今までとあんまり変わった気がしません。そこで、構成要素はそのままにデザイン的にもうちょっと凝ったものにしてみましょう。加えて、拡張子を「.html」から「.hta」に変えて、HTML Applicationにしてみます。

　HTA(HTML Applications)とは...うーん、説明は本家(マイクロソフト)のページをご覧下さい(笑。

　HTAを使ういいところは、WSHのFileSystemObjectなどを使ったときに、HTMLではいちいち「起動していいか?」といった確認のダイヤログボックスが表示されますが、このメッセージが表示されなくなる点と、見た目がブラウザっぽくなくなる点です。しかも、HTMLからHTAへの変換は基本的に必要なく、拡張子を「.html」から「.hta」に変更するだけです。(アイコンがIEロゴマークから、Windowsロゴマークに変わるので、最初「あれ?」って思いますが、ダブルクリックすると普通に起動されます)

　という訳で、テーブルとスタイルシートで多少味付けして見ました。

■ ちょっと見た目を良くしたインタフェース(level11c.hta) 
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
031
032
033
034
035
036
037
038
039
040
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067

<html>
<head>
<title>テキスト検索ツール</title>
<script Language="VBScript">
<!--
Window.ReSizeTo 600, 300
-->
</script>
<style type="text/css">
<!--
body {
    margin: 0px;
    padding: 0px;
}
table.input {
    border-style: none;
    margin: 0px;
    padding: 0px;
    width: 100%;
    background-color: #BBBBBB;
td.toolbar {
	border-top: 2px outset threedhighlight;
	border-bottom: 2px outset threedhighlight;
}
pre {
    margin-top: 5px;
    margin-left: 5px;
	height: 100%;
	width: 100%;
}
-->
</style>
</head>
<body>
<table class="input">
<tr>
<td class="toolbar">
フォルダ名: <input type="text" name="folderInput" value="C:\script\tips\">
検索文字: <input type="text" name="srhInput" value="フォルダ">
<input type="button" name="go" value="検索" onclick="srhStart()">
</td>
</tr>
</table>
<br>
<pre>検索結果</pre>
</body>
</html>

■ level11c.htaを表示すると...

　と、こんな感じになりました。え??、変わった感じがしないって?(汗。まぁ、この辺りは作成者のセンスが問われる部分ですから、こだわりたい方は存分にこだわってみて下さい。

　さて、今回は準備編ということで、インタフェース部分のみ作成しました。次回は、このインタフェースにスクリプトを埋め込んで見たいと思います。



前ページへ   [ステップアップ WSHへ戻る］   次ページへ
-
※全ては自己責任でお願いします。
※当サイトに関するご連絡は tomomo_c@hotmail.com までお願いします。		 最終更新日 2004.7.27