CodeZine(コードジン)

特集ページ一覧

JavaScriptでブラウザコマンドラインを実装する

コマンドをテキストボックスに入力し特定の機能を呼び出す方法

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/04/23 08:00

ダウンロード サンプルコード (1.2 KB)

Ajaxの手法はWebに洗練されたGUIをもたらしましたが、時にはコマンドラインからコマンドを実行することが必要になる場合もあります。本稿では、ユーザーインターフェイスに追加できるカスタムコマンドラインを作成し、フリーのランタイムスクリプトエンジンを手に入れる方法について説明します。

目次

はじめに

 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 ブラウザコマンドライン
図1 ブラウザコマンドライン

 例としていくつかのコマンドを用意していますが、その1つが、Google検索を実行するgコマンドです。図2では、語句「command line」を検索するためにg command lineというコマンドを入力しています。

図2 Google検索を実行
図2 Google検索を実行

 Enterキーを押すと、Googleのページにジャンプし、「command line」を検索します。図3は検索結果です。

図3 検索結果
図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();">

 全体の処理は次のように非常に単純です。

  1. ページが読み込まれる。
  2. フォーカスがテキストフィールドに移動する。
  3. ユーザーがテキストフィールドにコマンドを入力する。
  4. ユーザーがEnterキーを押す。
  5. コマンドが実行される。

 ただし、コマンドを実行するには、先にコマンドを解析する必要があります。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:japan.internet.com翻訳記事

もっと読む

著者プロフィール

  • Greg Travis(Greg Travis)

    ニューヨーク在住のJavaプログラマ兼テクノロジーライター。ハイエンドPCゲーム業界で3年間を過ごした後に、EarthWebに参加し、当時最新鋭のJavaプログラミング言語を用いた新規テクノロジーを各種開発。1997年以降は、さまざまなWebテクノロジーについてのコンサルタントを務める。

  • japan.internet.com(ジャパンインターネットコム)

    japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.com や EarthWeb.c...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5