ActiveDesktop_04

Last-modified: 2014-08-16 (土) 12:41:50 (2015d)

ActiveDesktop_03

GoogleやWikipediaの検索フォームを表示する

04_01.png

誰しもが自分のwebサイトに一度は掲載したことのある、Google等の検索フォームをデスクトップ上に配置します。

基本的に入力フォームを作るだけなので、そんなに難しいことではないのですが、送信先のアプリケーションによって有効な文字コードが違う場合があるため、クライアント側で文字コードの変換等の作業を行わなくてはなりません(GoogleとWikipediaだけならUTF-8でwebページを作れば済むことなのですが)。

文字コード変換方法

複数の、文字コードの違うアプリケーションを持つフォームを同一ページ内に表示し機能させるにはいくつかの方法があります。

今回はコーディングが簡単な、インラインフレームを使う方法を採用します。

FORM内に accept-charset や enctype(?) を指定できるブラウザエンジンなら良いのですが、今回はActiveDesktopのためIEエンジン(Trident)で動作させることになり、上記パラメータは無効となります。

文字コード変換webアプリケーションに仲介させる方法

文字コード変換webアプリケーションを自作します。

そのwebアプリケーションはクエリを受け取った時点で

  1. クエリをデコード
  2. 文字コードを変換して再エンコード
  3. Googleなどのwebアプリケーションに送信する

という動作をさせます。

  • 環境を構築するのが比較的難しいため(最低でもwebサーバが必要)、ActiveDesktop向きでは無い気がする。
  • メンテナンスも比較的大変。
  • 安定した動作が期待できる。

JavaScript?でテキストボックスの文字を直接変換する方法

JavaScript?には標準では便利な文字コード変換メソッドが無いため、フリーのライブラリ等を活用することになると思います。検索すれば出てくると思います。

http://nurucom-archives.hp.infoseek.co.jp/digital/escape-codec-library.html

  • ロードするHTMLソースが長くなってしまう。

JavaScript?でページ全体の文字コードを変換する方法

フォーム内の入力ボックスをクリックした瞬間にページ全体の文字コードをJavaScript?で変更します。送信する際は自動的にその文字コードでエンコードされたものが送出されます。

(拙作 phMessenger2 のチェッカーアプリにて行っている方法です)

  • ページ内に日本語がある場合、キレイに動作しない
  • コーディングは比較的簡単

インラインフレームを使う方法

(文字コードを送信先のwebアプリケーションと揃えた)検索フォームだけのhtmlファイルを作り、そのHTMLファイルをインラインフレーム(IFRAME)で配置すれば、IEでも正しくエンコードして送信してくれます。

  • HTMLソースファイルが複数に小分けされてしまう
  • コーディングは比較的簡単

複数の送信フォームの選択方法

ユーザーが複数の送信先をどう選択するか、についてです。

本ページ最上部のサンプル画像を見ていただくと解りますが、今回は入力フォームを複数作成する方法を採用しました。

入力フォームを複数作成する方法

こっちはGoogle用のテキストボックス、こっちはWikipedia用のテキストボックス、という風に、テキストボックス(というかFORM)を複数作ってしまう方法です。

  • コーディングは簡単
  • ユーザーは、文字を入力する前に送信先を決定しなければならない。そのため、「やっぱりこっちで検索してみよう」といった感じに文字入力後に送信先を変更することは出来ない。
  • 文字入力後にエンターキーを押した場合、意図通りの検索結果が得られる(文字入力前に既に送信先アプリケーションを決定しているため)
  • 送信先アプリケーション数に応じた大きなスペースが必要。
  • メンテナンスは比較的大変
  • 送信先ごとに文字コードが違っていてもインラインフレーム対応が容易

検索ボタンを複数作成する方法

googleのトップページ(Google検索ボタンとI'm Feeling Luckyボタンがある)やgoo辞書にある(国語/英和/和英の各ボタン)ような、検索実行ボタンを複数配置する方法です。数多くのwebサイトで見ることができます。

  • コーディングは比較的大変
  • 文字入力後に送信先を選択できる
  • 文字コード変換が大変
  • インターフェースが解りやすい

プルダウンで選択する方法

送信先をプルダウン(ドロップダウンリスト)を用いて選択する方法です。各種WEBブラウザ(FirefoxやOpera等)のツールバーに配置されている検索窓はこの方式が多いようです。

  • 多くの送信先が登録されていても圧倒的少スペース
  • コーディングは比較的大変
  • 文字入力の前後どちらでも送信先を選択できる
  • マウスであれキーボードであれ、かなり使いづらい
  • メンテナンスが容易

蛇足ですが、「Grani」ウェブブラウザのウェブ検索窓のインターフェイスはプルダウンで選択する方法と複数ボタンで選択する方法が複合された、とっても使いやすいものだと思いました。

構成

  • google検索フォームを内包するgoogle.html (UTF-8)
  • wikipedia検索フォームを内包するwikipedia.html (UTF-8)
  • 上記2ファイル共通のJavaScript?ファイル search.js
  • 上記2ファイル共通のCSSファイル search.css

以上のファイルを作成し、includeフォルダ以下に配置することとします。

検索フォームファイル作成後、上位 index.html ファイル内で

<DIV id="search_google">
<IFRAME src="include/google.html" scrolling="no"></IFRAME>
</DIV>

このようにインラインフレームを作れば、デスクトップ上に検索窓を表示することができます。

スクリプトファイルの作成

google.html

<HTML>
<HEAD>
<META http-equiv="Content-Language" content="ja" />
<META http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<LINK  type="text/css" rel="stylesheet" href="search.css" />
<SCRIPT type="text/javascript" src="search.js"></SCRIPT>
</HEAD>
<BODY>
<FORM action="http://www.google.co.jp/search" method="GET"  target="_BLANK">
<INPUT name="q" value="google" onFocus="inputOnFocus();" onBlur="inputOnBlur('google');" />
</FORM>
</BODY>
</HTML>

wikipedia.html

<HTML>
<HEAD>
<META http-equiv="Content-Language" content="ja" />
<META http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<LINK  type="text/css" rel="stylesheet" href="search.css" />
<SCRIPT type="text/javascript" src="search.js"></SCRIPT>
</HEAD>
<BODY>
<FORM action="http://ja.wikipedia.org/wiki/%E7%89%B9%E5%88%A5:Search" method="GET" target="_BLANK">
<INPUT name="search" value="wikipedia" onFocus="inputOnFocus();" onBlur="inputOnBlur('wikipedia');" />
</FORM>
</BODY>
</HTML>

search.js

function inputOnFocus(){
	document.forms[0].elements[0].value="";
	document.forms[0].elements[0].style.color="#fff";
}
function inputOnBlur(str){
	document.forms[0].elements[0].value=str;
	document.forms[0].elements[0].style.color="#bbb";
}

search.css

*{margin:0; padding:0;}
BODY{
	background:#777;
}
INPUT{
	color:#bbb;
	border:0;
	background:#777;
	width:100%;
	height:100%;
	font-family:meiryo,sans-serif;
	font-size:75%;
}

動作サンプル

動作サンプル