はじめに
SF作家のNeal Stephensonが『In the beginning was the command line（太初にコマンドラインありき）』と書いているように、コマンドラインがすべての始まりでした。Webとグラフィカルユーザーインターフェイス（GUI）が登場するまで、コンピュータのオペレータは粗末なコマンドラインを使ってコンピュータを操作していました。時代遅れになったとはいえ、コマンドラインは今でも主要な最新のオペレーティングシステムで使われています。DOSシェルは初期バージョンのWindowsの中で無事に生き延び、その末裔であるコマンドプロンプトが最新バージョンのWindowsにも搭載されています。由緒あるUnixシェルは、Mac OSXを含めて、GNU/Linuxやその他のUnix系OSで生き続けています。
本稿ではJavaScriptを使ってブラウザにコマンドラインを実装する方法を説明しますが、これは少々皮肉なことです。ブラウザではグラフィックが多用され、JavaScriptはもともとそうしたグラフィックを動かすために存在しています。にもかかわらず、本稿のJavaScriptの手法では、飾りのないコマンドラインを作るためにグラフィックをはぎ取ってしまうからです。
本稿で説明するコマンドラインは、さまざまな形で応用できます。例えば、ホームページ上の手軽なショートカットとして実装し、わずかなキー入力でWeb検索を実行できるようにしたり、大きなシステムの一部として実装し、グラフィカルインターフェイスのない（少なくとも今はまだない）機能にアクセスできるようにするなどの用途が考えられます。
このブラウザコマンドラインには拡張性もあり、独自のコマンドを簡単に定義できます。また、JavaScriptで作成されているので、コンパイルやリンクの必要がありません。ブラウザを再読み込みするだけで、新しいコマンドを実行できるようになります。私自身、このブラウザコマンドラインが気に入っています。キーボードとマウスの間で手を往復させると時間がかかりすぎるからです。
コマンドラインを試す
最初に、コマンドラインを実際に見てみましょう（図1を参照）。ソースコードを使って自分で試してみたい場合は、本稿のダウンロードサンプルを展開し、ブラウザで「index.html」ファイルを開きます。すると、コマンドラインの実装が含まれる「bcl.js」ファイルが読み込まれます。「index.html」からフォームHTMLを抜き出して、自作のWebページに追加することもできます。その際は、<script>タグで「bcl.js」を正しいディレクトリから読み込むようにしてください。
例としていくつかのコマンドを用意していますが、その1つが、Google検索を実行するgコマンドです。図2では、語句「command line」を検索するためにg command lineというコマンドを入力しています。
Enterキーを押すと、Googleのページにジャンプし、「command line」を検索します。図3は検索結果です。
g i command lineというコマンドを使って、直接イメージ検索を行うこともできます。
さらにalというコマンドがあります。これはJavaScriptのalert()関数を呼び出します。あまり役には立ちませんが、コマンドラインで何ができるかが分かります。
それでは、コードがどのような仕組みで動いているかを見てみましょう。
フォーム
最初にフォームから見ていきます。
<form id="bclform" onSubmit="return bcl_go( this );"> <b>%</b> <input style="background-color: #e0e0e0; font-family: monospace; font-size: 150%; font-weight: bold" id="bclline" type="text" name="cmd" size="80"> </form>
ここで唯一興味を引くのは、id=bcllineの部分です。これは同じページ上のJavaScriptコードが、カーソルのフォーカスを強制的にテキストフィールドに移動できるようにするための定義です。こうすることで、ユーザーが入力の前にマウスでテキストフィールド内をクリックせずに済むようにしています。フォーカスの移動を処理しているのが次のコードです。
<script> function bcl_focus() { var bclline = document.getElementById( "bclline" ); bclline.focus(); } </script>
そして、ページが読み込まれるときに、bodyタグの'onload'ハンドラからこのコードを呼び出します。
<body onload="bcl_focus();">
全体の処理は次のように非常に単純です。
- ページが読み込まれる。
- フォーカスがテキストフィールドに移動する。
- ユーザーがテキストフィールドにコマンドを入力する。
- ユーザーがEnterキーを押す。
- コマンドが実行される。
ただし、コマンドを実行するには、先にコマンドを解析する必要があります。
