表示 - みる会図書館


検索対象: UNIX MAGAZINE 2001年2月号
73件見つかりました。

1. UNIX MAGAZINE 2001年2月号

ェ 196 小さな画面を活かすには 画血 - E で長いリストを見るときはスクローノレヾーがよく ば、それだけ多くの情報を提示できるようになります。 ューザーの操作により異なる情報が見えるようにすれ 一度に表示できる情報の量はどうしても限られますが、 ・ユーザーの操作により表示を変える ンを重ねて表示すれば、場所を節約できます。 があります。たとえは、テキストの上に半透明なアイコ 異なる不頁の情報は、同じ場所に重ねて表示できる場合 情報を重ねて表示する 容宿する去も有効です。 かぎらないので、必要な箇戸雇ごけを表示したり、表示内 また、 Web ページやメールの内容はすべてが重要とは 小さなフォントでもきれいに表示されます。 10 月号で紹介した CIearType のような技術を使うと、 面にも多くの情報が表示できます。たとえは、 2000 年 小さなフォントを使ったり図形を縮小すれば、小さな画 表示内容を縮小する のような方法が考えられます。 小さな画面で多くの情報を扱えるようにするには、以下 します。 し、これを携帯電話へのメール中幻幻こ応用する方法を解説 回は、 Baby Face を利用するための技術をいくつか紹介 計算機には不要なさまざまな工夫か必要になります。今 はれています。 Baby Face では、大きな画面を備えた 号に書いたように、これらの機器は、、 Baby Face" と呼 器がよく使われるようになってきました。 2000 年 1 月 描は、携帯電話秀帯型言 1 算機など、画面の小さい機 フ Baby Face のインターフェイス イ ス の 街 角 38 増井俊之■ 使われますし、山も匠は、ズーミング・インターフェイス いろいろな手法 ます。たとえば、アイコンとリンクが重なっている場所を 操イ御剞によって優先度が切り替えられるようになってい ネ世昜氏のシステムでは、 GUI 部品が重なっているときは、 キスト中のリンクとアイコンか重なっています ) 。そこで、 作不能になってしまいます ( 図 1 では、画面の下部でテ とリンクか 1 司し場所に重なってしまうため、どちらかカ ページのようにリンクを含むテキストの場合は、アイコン 通常のテキストならこれで間題はありませんが、 Web トを読めるので、小さな画面領域を有効に活用できます。 操作用のアイコンか表示されていても、その下のテキス る研究をおこなっています [ 1 ] 。 などと重ねて表示する場合のインターフェイス手法に関す 日本電気の神場知成氏は、半透明なアイコンをテキスト GUI 部品の重ね合せ のをいくつか紹介します。 れていますが、それらのなかから、やや毛色の変わったも 上記の去を組み合わせたいろいろなシステムが開発さ 所にも多くの情報を表示することができます。 電光掲カ反や重丿 / アニメーションを使えは、小さな場 時分割で異なる情幸ミ表示されるようにする る内容か変わるようにするのも有効かもしれません。 っといえます。あるいは、見る部分や方向によって見え ーも、小さな画面を有効に活用するための技術の 1 ています。マウスをクリックしたときだけ表示されるメ によって画面を拡大 / 縮小するガ去もさかんに研究され UNIX MAGAZINE 2001.2

2. UNIX MAGAZINE 2001年2月号

ヘルプ UNIX MAGAZINE 2001.2 リの内容を書き換えたりできます。 タンカ甘甲されているかをチェックしたり、テキストエント チェックやその変更ができます。たとえば、どのラジオポ JavaScript を使うと、容易にフォームの要素の内容の 例題 2 : フォームの加工 の加工をしてみましよう。 す。次に、より多くの場面て役立っと思われる、フォーム この伊題では、プラウサの表示そのものを加工していま このスクリプトを実行した結果カ咽 2 です。 メソッドを使ってプラウザの画面に表示しています。 ラウサの表示を司る document オプジェクトの write() 日時の情報を文字列にして返します。これらの清報を、プ っています。また、 toLocaleString() というメソッドは、 位の日該リを値として返す getHours() というメソッドをも を変数 date に褓内します。このオプジェクトは、 1 時間単 具イ勺には、まず日時の情報を司る Date オプジェクト しています。 メッセージを刻ヒさせます。また、現在日該リの報も表示 このスクリプトは、クライアント側の現在日該リに応して 連載 / WWW サーパーの育て方一⑨ 図 2 日時に応じたメッセージの列 ファイル編集表示ジャンプウインドウ こんばんは。 現在の日時は、 S 16De0200001 : 57 : 27. AIv お T です。 図 3 ロードした直後 hour = date. getHours ( ) ; if ( hour く 6 Ⅱれ 0 Ⅱ r > 18 ) { document . write(" こんばんは。く br>") ; else { document . write(" こんにちは。く br>"); document . て ite ( " 現在の日時は、 " + date . toLoca1eString() + ”です。 " ) ; く /script> く /body> く /html > ファイル 商品 単価 注文 編集表示 ジャンプウインドウ 合計 .0 22t50 叩日 : ヘルア 図 4 商品と個数も尺するとフォームが自動的に埋まる ファイル編集表示ジャンプウインドウ 商品黄色いくま ' 」個数」 3 」三」 N ts し上 : ヘルプ 単価功 0 合計 11200 リスト 1 では、フォームのセレクトタブを選択するイ べントによって、フォーム内のテキスト・フィールドの 内容を書き換える関数か呼ばれるようになっています。 select タグのオプションで、、 onChange" と書かれてい るのがイベントハンドラを登録している部分で、このセレ クトタブか変更されたら calc という関数か呼び出されま す。この関数に渡される引数は this となっています。 れは JavaScript の特別な文字列で、イベントを起こした フォーム要素を表しています。 calc(it) 関数側では、 it. form. unit-price. value を書 き換えている部分がありますが、この意味するところは、 、 it の所属するフォームの unit-price という名前が付け られた要素 ( ここでは text 要素 ) の値 " です。同様に、 it. form. item-select. selectedlndex は、、 it の戸斤属するフ ォームの item-select という名前カ寸けられた要素 ( こ では select 要素 ) の何番目が尺されているか " を意味し ています。変数 selectedlndex には <option> タグの定 義偵に 0 、 1 、 2 ・・・・・・と番号が付けられます。 また、この関数によって書き換えられる側の text 要素 には、 onFocus= ” this. blur(); ”というイベントハンドラ があります。これは、フォーカスが合ったときに呼び出 されるハンドラとして、フォーカスを外す blur ( ) という メソッドを登録しています。このように書くことで、この text 要素は書換えカきなくなります。 このスクリプトを実行した様子力咽 3 ~ 4 です。 63

3. UNIX MAGAZINE 2001年2月号

大変である、接続先が異なっていてもメールの返信アド レスを統一しておけば 1 カ所で受信できる、プロバイダ のメール中幻機能を使うガ去でも受信するプロバイダを 1 カ所にできる、 Mac 用の SMTP サーバーソフトには、 Eudra lnternet Mail Server や AppleShare IP があ る、 MachTen をインストールして SMTP サーバーを 動かしたり、 Mac OS X Public Beta を使うという方 法もある、といったフォローがきました。 Newsgroups: . sys. ibmpc Subject: ☆部屋の電圧が変わるとマシンが勝手にリプー トするのですか・ これまで NEC PC ー 9821 を使い続けてきたのですが、 性能が足りなくなってきたので PC を自作しました。と ころが、部屋のなかでほかの電器具を使うと自作 PC がリセットしてしまいます。同しコンセントにつないで いる PC ー 9821 にはそのような症状は起きていないので すが、何か悪いのでしようか、という質間記事です。 これに対して、電圧変動に敏感な機器であれはリセッ トすることはありうる、瞬間停電かそれに近いことカ起き ているのではないか、経験的にそのようなときでも PC- 9821 には間題カ吽じないことが多い、コンセントの電圧 を測ってみれは原因か判明するのではないか、角夬方法と しては、電気の契約アンペア数を増やす、 PC の電源を電 圧変動に強いものに替える、 UPS を導入するなどが考え られる、契約アンペア数を増やしても鮹夬するとは思えな い、イ合される間工カ觝いのであれば電力会社に相談すれ はよい、一翦勺な PC は 115V 用 ( 230V との切替え ) の電源を 100V の日本の竟で使っていて電圧力坏足し やすいので、 100V 用のものに交換するとよい、高価だが 90V でも動く電源がある、爿圧器を使って王を上げれ は安くすむ、とりあえす独立したコンセントに接続し、す こしでも高い電圧を確保してみてはどうか、といったフォ ローがきました。 Newsgroups: questions.misc Subject: CO. ? 旧 c. ? Ltd. ? 株式会社カ蹴名をアルファベットて表記する場合には abc lnc. や abc Co. , Ltd. などと書きます。 Co. が Company 、 lnc. が lncorporated 、 Ltd. が Limited の略なのは分かるのですが、これらの使い分けはどうなっ ているのでしようか、という疑問記事です。 これに対し、 Co. , Ltd. は英国式、 Corp. と lnc. は米 国式である、意味はどれも大きな違いはなく、 Corp. と lnc. の使い分けはただの好みだと思われる、これらはい すれも有限責任の会社を表し、日本では株式会社と有限 会社にあたる、ちなみに合名会社は無限責任会社で、合 資会社は有限責任と無限責任の両方の構成員からなる会 社である、株式会社に近い英語の表現を探しているので あれはどの表記でもかまわないのかもしれないが、日本 と外国では会社織を定める法律が違うはすなので、日本 のオに会社をアルファベットて表記する場合は K. K. に したはうがよいと思う、会社の登記にはアルファベット は使えないので各社の好みで付けているだけではないか、 社名の正式なアルファベット表記は各企業の英文の会社 紹介パンフレットなどで判断すればよい、といったフォ ローがきました。 これから、社名はヘポン式ローマ字にするのが一一般的 なのかという言龠や、さまざまな企業のアルファベット 表記の社名の話題に発展しました。 Newsgroups: . net. WWW. browsers, OS. ms-windows.win98 Subject: 旧のキオスクモード 展示用の PC でプラウサを起動したままにしたいので すが、 lnternet ExpIorer のキオスクモードでツールノヾ ーだけを使う ( タイトルバー、メニューバー、アドレス バーがない状態にする ) にはどうすればよいのでしよう か、という質間記事です。 これに対して、キオスクモードではなく、、全画面表示 " 機能を使えはよいのではないか、ただし [x] ボタンがあ るので悪意のあるユーサーに閉しられてしまう可能生は ある、 IE Power Tools (http://www.okmstn.co.jp/ sdw/olsoft. html) の、 IE ツールノヾー " を使えはツール ーを分離して表示できそうである、 IE を望みどおりの ノヾ 状態に設定して起動する Visual Basic Script を作成 したらどうか、ただし Alt 十 F4 で閉しることはできる、 VBScript を工夫すれは閉じてもすぐにまた開くように できる、といったフォローがきました。 また、、、キオスクモード " とは何か分からないという フォローが数件あり、上記のような各種のバーが表示さ れない状態を指す、コマンド行から、、 iexplore -k" を 実行して表示されるものを指す、これを終了するときは 。信第冫に第信第信 / 既第に既信第信を第信す第日日等第信勢 3 第に第信信第 : 第に : 島等第既 : : 第に第 3 第 ' UNIX MAGAZINE 2001.2 157

4. UNIX MAGAZINE 2001年2月号

UN Ⅸ便利帖 宮下健輔 イロモノいろいろ 今回は、、便利帖 " というタイトルから多少はすれるかも しれませんが、、、便利 " とか、、不便 " という尺度では表せ な可頁のものを紹介します。 計算機に向かって原稿を書いたり仕事をしたりしている ときにちょっと休憩して楽しめる、そういうアプリケー ションを選んでみました。楽しむといっても、あくまで 、休憩 " ですから、それによって何かが生産されるような ものではありません。そういう類のアプリケーションを、 新旧とりまぜて、いくつか紹介したいと思います。 今回紹介するアプリケーションのインストールには Linux の rpm や FreeBSD の packages を利用してもよ いのですが、 こでは基本的なガ去であるソースコードを 入手してコンパイルし、バイナリを作りだす様子を解説し ます。もちろん、 rpm や packages を利用すれは統一的 なガ去でインストールできるし、インストールされている ソフトウェアの管理も容易になりますから、今回説明する ガ去がつねに最善とはかぎりません。しかし、アプリケー ションのアーカイプを取得して自分で作成するという作業 から得られるものは少なくないと思います。作者の書いた README を読んだり、 Makefile やソースファイルを 覗いたりするのもなかなか楽しいものです。とくに、 rpm や packages を使ったインストールしカ絲釜験がないという 人は、せひ一度試してみてください。 xantfarm 皆さんはルート・ウインドウをどのように使っている でしようか。描丘は・算機のメモリも増え、多くの色数を サポートしたグラフィックス・カードが普及しているの で、お気に入りの写真や絵を表示している人も多いと思い 116 ます。また、たくさんのウインドウか画面いつばいに表示 されていてルート・ウインドウは見えないなんてことや、 標準のままの細かい格子模様か表示されている場合もある でしよう。私はたいてい、黒一色に塗りつぶしています 1 xantfarm は、このルート・ウインドウに蟻を放して 巣を作らせ、その様子を眺めるというアプリケーションで す。作者は Jef Poskanzer さんで、 1991 年に作られま インストール xantfarm のアーカイプは http://www.acme.com software/xantfarm/xantfarm-230ct91. tar. gz という ファイルです。これをダウンロードしたら、次のようにし て展開します。 % tar xzf xantfarm—230ct91. tar ・ gz すると xantfarm というディレクトリか作らその なかにファイルが展開されます。ますは README を一 # make ihstall % su % make ( 略 ) make includes make Makefi1es imake —DUseInsta11ed % xmkmf ー a % cd xantfarm す。 読しましよう。 —I/usr/X11R6/1ib/X11/config xantfarm をインストールするには次のように操作しま UNIX MAGAZINE 2001.2 2 蜷丘の感覚では、、とても古い " アプリケーションになるでしようか。 1 、 xsetroot —solid black" てす。

5. UNIX MAGAZINE 2001年2月号

連載 UN Ⅸ便利帖ーの 図 1 xantfarm で作られた巣部 # make install . man README には、 xmkmf のあとで "make depend せよと書いてありますが、 xmkmf に引数 -a を付けること でそれらをまとめて実行しています。また、最後の行はマ ニュアルをインストールするための操作です。アプリケー ションにマニュアルが用意されているときには忘れすにイ ンストールしましよう。 使ってみる xantfarm には次のような引数があります。 -num num 蟻の数を指定する。標準は 10 -c cycles 蟻の動作を 1 秒間に何回計算させるかを指 定する。標準は 15 回。 —id xantfarm をバックグラウンドで走らせ、そのプロ セス ID を出力する。 -air color 空の色を指定する。標準は白色 -sand color 砂の色を指定する。標準は茶色 -ant c 。ん 7 、蟻の色を指定する。標準は黒色 ー屬己以外に、ファイル名を引数として指定すると、途中 釜茴をそのファイルに保存しながら衄乍します。こうして おけば、 xantfarm を途中で止めても、次回はその続きか ら再開できるので、長期間にわたって蟻の巣作りを眺める ことカきます。 xantfarm を起動すると、ルート・ウインドウの上端 から 1 / 3 の部分カ啌となり、それより下部はもとのルー ト・ウインドウのままになります。そして、空の彼方から 蟻カ鱗りてきてルート・ウインドウをうろうろし始め、穴 を掘ったり砂を積み上げたりしながら巣を作り始めます。 UNIX MAGAZINE 2001.2 こで蟻の上にマウスカーソルを重ねると、蟻はパニック に陥ります。 10 匹の蟻が免かかって作った巣の一部を図 1 に示し ます。 ルート・ウインドウを楽しくしてくれるアプリケーショ ンは、ほかにもいくつかあります。有名なものは、ゴキプ リか動き回る xr 。 ach3 や雪か降る xsnow4 、衛星から撮っ た士愑 ) 写真を表示してくれる x3arth5 などでしよう。 xcrmse xcruise は UNIX のファイルシステムを宇宙空間に見 立て、マウスを使ってそのなかを航毎するアプリケーショ ンです。東京工業大学の新山祐介さんが開発しています。 原稿丸点 : での最第版はバージョン 0.24 でした。 xcruise では、個々のディレクトリは銀河を表す白色ま たは水色の輪て表現されます。ファイルは内部を塗りつぶ された円で表現さこれは惑星を表します。また、シン ポリック・リンクは、、ワームホール " として緑色の曲線で 表されます。これらはその名前とともに表示されます。 惑星の色や大きさ、銀河の大きさ、それらの位置関係な どは、ファイルやディレクトリの名前やサイズから独特の アルゴリズムて 1 夬定されます。 インストール ます、 xcruise-0.24. tar. gz を適当なサイトから取得し ます。これは、作者本人の Web ページ (http://tanaka -www.cs.titech.ac.jp/-euske/) からもダウンロードで きますし有名なソフトウェアなのであちこちの FTP サ ーバーでみつけることができます。 ダウンロードしたら適当なディレクトリで展開します。 すると xcruise-0.24 というディレクトリカイ乍成されるの で、そこへ移動します。 5 ftp://metalab.unc.edu/pub/Linux/X11/desktop/ 4 http://www.euronet.nl/&rja/Xsnow/ Lite/usr/src/games/xroach/ 3 ftp://ftp.freesoftware.com/pub/4.4BSD-Lite/4.4BSD- このディレクトリにある README. jp などの説明を % cd xcruise-O .24 % tar xzf xcruise—O. 24. tar ・ gz x3arth-1.1. tar. bz2 117

6. UNIX MAGAZINE 2001年2月号

連載 / UN Ⅸ便利帖ー・ 操作か可能です。 終了する。 @、 # 、 $ 、 % 、気 & 、 ) 色を切り替える。 0 ~ 9 文字カヾ充れる速度を変化させる。 ポールド文字が出現しなくなる。 すべての文字がポールド文字になる。 ポールド文字が出現するようになる。 文字の流れ方の同期 / 非同期を切り替える。 q Ⅱ B b UNIX MAGAZINE 2001.2 % make % . /configure % cd xda1ic10ck—2.18 / X11 とは make を実行するだけです。 作成は、 configure というスクリプトでおこなうので、あ clock を作成するために必要な工羅竟の設定や Makefile の xdaliclock を作成するには次の啣て操作します。 xdali- PaImOS ーヒで動作するものの 2 不頁があります。 X 用の xdaliclock には、 X ウインドウ上で動作するものと、 ME を一読しましよう。 そのなかにファイルが展開されます。ますは READ- すると、 xdaliclock-2.18 というディレクトリカイ乍成さ % tar xzf xda1ic10ck—2.18. tar. gz アーカイプは次のようにして展開します。 0 ョンは 2.18 で、 xdaliclock-2.18. tar. gz という名則で xdaliclock/ から取得できます。原稿執嶇寺点でのバージ xdaliclock のアーカイプは、 http://www.jwz ・ org/ インストール CIock を X に移植したものです。 た。 xdaliclock は、 Jamie Zawinski さんがこの DaIi- てもおもしろく、つい、ば一つと眺めてしまったものでし 字で表示する日 t なのですが、その数字の変化の仕方がと 動いているのを見たことがあります。これは現在日リを数 昔 Macintosh 上で DaliClock という不思議な日 1 ガ、 xdaliclock いたほうが無難でしよう。 の人か利用している計算機で長時間実行するのはやめてお cmatrix は CPU の処理能力をかなり要します。多く 図 5 xdaliclock ( 13 時 22 分になる直前 ) ー 3 : 2 2 嚇 0 % su Password : # make install PalmOS 上で動作する xdalicIock9 を作成するときは pålm というディレクトリに移動して上記と同様に操作し ますが、説明は省略します 10 。実行可育新彡式のバイナリは 上述のページから取得できます。 使ってみる xdaliclock にはおもに以下のような引数があります。 ー 12 日該リを 12 時間制で表示する。 ー 24 日該リを 24 時間制で表示する。 -noseconds 秒を表示しない嫖準では表示される ) 。 背景と文字の色か刻々と刻ヒする。 ー cy cle —font ル厩 7 田 me フォントを指定する。 -root ルート・ウインドウに表示する。 -transparent 背景を透明にする。 —countdown date 指定した時刻までのカウントダ ウンを始める。時刻は 1970 年 1 月 1 日 0 時 0 分 からの秒数か、または” Ja Ⅱ 1 00 : 00 : 00 2001 ”といっ た形式で指定する。 xdaliclock を実行している様子を図 5 に示します。 xdaliclock のウインドウ上で、キーポードからスペース を入力すると 12 時間制と 24 時間制を入れ替えることが でき、 q または、、 Ct ル C " を入力するとプログラムカ鮗 了します。 今回は、、ちょっと休憩 " ということで、 X で動く楽しい アプリケーションを紹介しました。 UNIX の基本的な操 作を身につけるには、こういったものを楽しみながらイン ストールすることも効果的かもしれません。 ( みやした・けんすけ京都女子大学 ) ☆ 9 こクメ昜合は、 x " カせして、たんに daliclock という名前になります。 10 この場合は、 PaImOS 用のクロスコンパイルが可能な gcc が必にな ります。詳しくは README ファイルを参照してください。 121

7. UNIX MAGAZINE 2001年2月号

インター (b) 一部を拡大 フェイスの街角 図 1 半透日月のアイコンを重ねて表示した醯 ! ′メ 40 ー 6 0d2 ヨ tes ・ー 0 m 、・ e ー 41 を U れ紅 ed Na 新 0 れ 5 ー A 引 0b ヨ江 e メ t0 を n て它 rns 川 n 01 the hi3h 50 れ叩・ 0 げ「「•'IJ.N. d に厄 90t に 5 行朝第 1 ロ 0 れ iD れ whO 常 1 to adopt the dOOe れ t tod . 1 トだ 31 ・ 0 e リ m に 50 would gmrnit 新に 0 「目 in ? of 、目 5 that \'Bkte fi$hinq 虍 9 ⅵヨ tB れ物 d & に y & nd 物、 ( h ヨ i Ⅲ 13 ハョ LJ. N. ( 01 「き円て 2 0 物を [ 1 辷 ・ IM 黼 0 Of 00P に in 【 00 式 0k0 れ、」 ni に i03 wil bmefit,» said Br はれ Tatin, ( d mini'tet of 山 ie 0 ( 色ヨれ引・ルを wotfd wil h 代 0 ⅵに d ba:k を orn に師 oe of de ⅵ no.. コを れ 9 ー 0 は 5 me ocean. 興 1 } をⅶ印北 up にをれ 33 こ 3 雁 d せを沼 vee ま 一瞬タッフするとアイコン刎択されますが、長いあいだ (a) 一覧表示 図 2 Flip Zooming ーはこ 001 第いーを飛新 - 1 ゞ .. 単聽 ーー第係創 ロ当ロ日コロ , 、、・に″旧、い汜ドじ肥 d Ⅲざ朝ⅵ当 ! い麒 0 es. - 10 5 盟お hl ー浦「新 0 こい 10m 、 200 国「 n ツに 心第第 0 : いぬ es 純川第 on. ′部、れ 5 comp は郁 cn needs ーツに be dOne once. 田池 itis nct に 00n02 リ ab にい↑こ 0 い 2d000 リご n 物ご いな第 d00 、ドれを 0 い 0 載を 0.4 れ e 「ナを se 0-0 日し 8 00 き都を 山口巳 5Y5 にツい ~ ト p 日れに新ピ第 2 こ om 卩 u : 005 ed : 0 、を 0n を 0 05 創ⅵ第を use 0 国肥店 0-0 日℃リを 0 れ 0 助 0 ル 刊 Zoom 翫 ows 町 ・、 sap ct 化 ex 部 1 朝日朝 5 前 10. 、 ha 朝 p に門 ed 300 「”き物 2 「 ( Se にしで 4 ) The = を「 cnn Ⅵ釟、 HYML 第い、 00 れ「 ~ 00 宿当、 01n 心 . At the 190 田 0 し Cn ツでこ一 00 : いプを d. ト朝第町可ご、、当、 : ⅱ に 00 n 肥 0 を -1 に「 0 「 - 価こ u3 0 れ第 2b00M こ 0n7 0 な曲 x せ 8 ま ed を肥地ロ邑弋 0 ロ h い山 n 朝引 : 獸朝 1 を引 丁 hi Ⅲ 1 計 e に 1 日 5 物Ⅱ especial•y ⅲ第ロ ta 啾℃ - ー第豊 00 を sp 第 y 第の 0 まにを d. を 002 い 0J3 に w ー 0 にら way 【 0 00 「ⅳ第 y び 103 : a w にし 0 ま 押しているとアイコンを、、突き抜けて " ード側にあるリンク が尺されます。 FIip Zooming Flip Zooming は、スウェーデンの Viktoria lnsti- tute の Lars Erik Holmquist 氏 1 か開発した小型端末用 の表示手法です。 1 つの画面に多くの画像やページを並べて表示しようと すると、 1 つ 1 つの画像がかなり小さく見づらくなりま す。一覧情報とともに、一都を詳しく表示できるようにす るために、、、非線形ズーミング " という手法が使われるこ とがあります 2 。非線形ズーミング・システムは、一部だ けを連続的に拡大して表示できるという特色をもっていま すが、操作に対して画面がぐにやぐにや動くような印象が あり、かならすしも使いやすいとはいえません。 Flip Zooming は、複数の画面のうちの 1 つだけを大 きく表示し、残りは小さなサイズでその周辺に配置する手 法です ( 図 2 ) 。 図 2-a は、 Flip Zooming 用のテキストプラウサによ る一 -- 一覧表示酌面です。図 2-b では、文書の 13 ページ目の ー碚肋去大されています。この場合、周辺窈宿小されてい 1 http://www.viktoria.informatik.gu.seFleh/ 2 非糸「彡ズーミング・システムについては、 http://www.cs.indiana. edu/hyplan/tkeahey/tkeahey/research/nlm/nlm.html に 詳しい解説があります。残念ながら、ひろく使われているシステムは まだないようですが、 Mac OS X のデスクトッフ下部に表示される 、 D 。 ck " のようなものといえは分かりやすいかもしれません。 UNIX MAGAZINE 2001.2 るべージの内容はほとんど分かりませんか : 全体の雰囲気 は擱めるのではないでしようか。 メールの圧縮表示 メールを携帯電話やポケベルなどに転送するとき、主要 な部分に絞って送れば小さな画面でも必要十分な情幸肋碍 られます。日本電気の坂十秀和氏は、携帯電話などへメー ルを転送する際、メッセージを劇的ロ宿する手法を提案 しています [ 2 ] 。 通常のメールメッセージには、一殳に冗長な情報か数多 く含まれています。たとえば、地頁部分に、 「ソニーの増井です」 などと書くことがよくあります。しかし、これは From: 行を見れは明らかなので、わざわざ書く必要はないかもし れません。さらに続けて、 「ご無太しております」 などと書く人も多いでしよう。これも、ご無沙汰している ことか明白であれ ( 新く要な情報かもしれません。メールの 末尾によくある、 「よろしくお願いします」 といった文言もとくに重要ではないので、読み飛ばしても 間題はないはずです。要件さえ伝われはよい場合、このよ うな決まりきった表現は思いきってすべて省略してもよい のではないでしようか。完全に省くのカ墹題なら、「あり 197

8. UNIX MAGAZINE 2001年2月号

連載 / WWW サーパーの育て方一⑨ リスト 1 イベントによるテキスト・フィールドの謝奐え く html> く he ad> く /head> く script Ianguage="JavaScript " > price-table = new Array(), 600 , 500 , 100 ) ; function calc(it) it . form. unit_price . va1ue = price_table Cit . form. item_select . selectedlndex] , it . form. price . value it . form. unit—prxce. value * it . form. unit_select . options . selected 工 ndex; く /script> く body> く form> 商品 く select name="item_select' く option selected>— く optio Ⅱ > 黄色いくま く optio Ⅱ > しましまのとら く optio Ⅱ > びんくのプタ く /select> 個数 く select name="unit_select" く option selected>— く /form> 合計 単価 く br> く /select> く optiO Ⅱ > 3 く optio Ⅱ > 2 く optio Ⅱ > 1 onChange=" calc (this) , onChange="caIc (this) ; く input type= 'text" name="unit—prlce ー va1ue="O" onFocus="this . blur() ; く input type="text" name=' price" onFocus="this . blur() ; " > く input type="submit " value=" 注文 " > く /body> く /html> このように、 JavaScript を使うと簡単にフォーム要素 にアクセスすることができます。このガ去を用いると、た とえはフォームに入力された電子メールアドレスが正しそ うかどうかのチェックも、いちいち WWW サーバーと 通信せすにおこなうことができます。 JavaScript でテータベース検索 こでやっと今回の本題に入ります。たしかに Java- Script は便利ですが、 JavaScript から WWW サーバー 側に配置されているデータベースと通信したいという場面 が多々あります。 たとえは、オンライン・ショッピングサイトの購入フ 64 ォームなどを作成している場合、ユーサーか商品名と個数 をフォームに入力するだけで、現在の単価や在庫数の石忍 などができれは利です。もちろん、フォームに入力して [Submit] ボタンをクリックし、 CGI などで処理をおこ なったのちに、別のページを新たに表示しなおしても同様 のことは実現できます。しかし、たとえばたくさんのエン トリをもつフォームがテープル内に表示されていたりする ような込み入ったテサインのページだと、表示に時がか かり、たくさんの商品を購入する場合などにストレスを感 します。 そこで、 ・フォームか表示されているべージはそのままで ・サーバー側のデータベースにアクセスする UNIX MAGAZINE 2001.2

9. UNIX MAGAZINE 2001年2月号

JavaScript の特徴としては、 ・酉改含む変数を扱える ・関数を定義できる 正規表現を扱える 連載 / WWW サーパーの育て方 のあいだに日当します。また、 < script > タグを知らない ・ウインドウなど、プラウサがもつ要素にアクセスするこ ・フォームの要素の値を変更できる ・ HTML を酌に作成することができる ・プラウサで発生するイベントをハンドルできる とができる の両方のプラットホームで重川乍するように書くガ去につい があります。 Netscape のプラウサと lnternet Explorer ているので、 lnternet Explorer では一陪師川しないこと のコードは Netscape のプラウサて川乍するように書かれ 密には満たしていませんがご容赦ください。また、これら 以降のサンプルコードは、現在の HTML の仕様を厳 で書いてみます。 呼び出すこともできます。ここでは、 HTML に埋め込ん ともできますし、別のファイルに言当されたスクリプトを JavaScript は、 HTML ファイルに埋め込んで書くこ JavaScript を書いてみる チェックなどにもよく用いられているようです。 された文字列か要求された日を満たしているかどうかの ンドウ操作が使われています。そのほか、フォームに入力 とがありますが、これにはたいてい、 JavaScript のウィ を表示すると広告用のウインドウか勝手に開いたりするこ Web サーフィンをして遊んでいるときに、あるべージ 発工竟などか不要なことも特徴の 1 っといえます。 などか挙げられます。また、スクリプトなので、特別な開 く script 1anguage="JavaScript " > さて、 JavaScript のプログラム部分は、 ては別の機会に説明したいと思います。 62 プラウサのために、普通は、 く /script> と、 でコードの部分を挟み、大きなコメントとして見せるよう にします。したがって、 HTML ファイル中の JavaScript の部分は以下のように記述することになります。 く script 1anguage="JavaScript"> こにコードを書く く /script> また、 Netscape のプラウザの場合、 WWW ページを 開くために URL を指定するところに、 javascript:" と入 力すると、 JavaScript のコンソール・ウインドウかき ます ( 図 1 ) 。思うようにスクリプトか動かない場合には、 このコンソールに何か工ラーか表示されているかもしれま せん。スクリプトをデバッグするときにイ甦リです。 例題 1 日付を表示してみる さっそく、 JavaScript のスクリプトを書いてみましょ う。 JavaScript での Hello, Ⅵ rld ! " 的なスクリプトと して、日該リに応したメッセージの表示スクリプトがありま す。これは、たとえは以下のようなものです。 く html> く head> く /head> く body> く script language=" JavaScript " > date = new Date() ; 図 1 JavaScript のコンソール・ウインドウ JavaScript Er•ror: tunknowrr origin) : ョ is not defined. Java%ript Error: CunkftöbJn originl : ヨ is not defined. [ ect 恥・ⅵ javascHpt typein w indow Cle Co れ so 厄 & 当」 と、 UNIX MAGAZIN E 2001.2

10. UNIX MAGAZINE 2001年2月号

連載 / WWW サーパーの育て方一⑨ 図 5 フォームを書き換える仕組み ブラウサのウインドウ フォーム用のフレーム 商品名を入力 すると・・・ UNIX MAGAZINE 2001.2 と、そのカタログ番号に対応した商品の、商品名・単価・ う。仕様としては、フォームにカタログ番号を入力する を想定した、注文伝票を作成するべージを作ってみましょ この仕組みを使った例題として、通信販売サイトなど 例題 3 : 注文伝票 このイ督はみを示したのか図 5 です。 します。 的に生成し、メインのフォームの内容を書き換えるように です。そしてその通信の結果として、 JavaScript を自動 別のフレームで WWW サーバーと通信しようというわけ そこで、メインのフォームをフレームを使って表示し、 ます。 ンドウや、別のフレームのフォーム要素も触ることができ であれは、スクリプトか書かれているべージとは別のウィ 自由に書き込むことができます。さらに、同しプラウサ内 ムか書き換えられたことを本剱日したり、フォームの要素に さきはどの例でも示したように、 JavaScript はフォー ーバー側の CGI の力を借ります。 にはいかないので、プラウサのフレーム機能と WWW サ とはいっても、 JavaScript をそのように拡張するわけ 種明かし ガ去を紹介します。 CGI が生成して、ブラウザが実行する フォームを改変する JavaSc ⅱ pt を このフレームで CGI が呼ばれ、 CG ーアクセス用のフレーム Submit 書き込む 単価や納期の情報を 表 1 データベースのテーフル catalog-code goods—name prlce stock 在庫数 不友きの単価 商品名 品を識別する 商品のカタログコード。 これによって商 金額・消費税・合言 1 額のフィールドが自重加勺に埋まること にします。今回は、 WWW サーバーのバックエンドには PostgreSQL を配置し、 CGI を使ってアクセスします。 それでは、各部品ごとにみていきましよう。まずは商品情 報をオ内するデータベースのテープルの要素を決めます。 表 1 が今回用いるデータベースのテーフルです。 このテープルを作成するための SQL 文は以下のとおり create table goods ( catalog—code varchar ( 10 ) primary key , goods—name varchar ( 50 ) , price int, stock int , リスト 2 に、 2 つのフレームを表示するための index. html を示します。上下に 2 分割されたウインドウの、上 のフレームにフォームを表示し、下のフレームで CGI を 呼び出します。 次に、フォームを表示する main. html ( リスト 3 ) に ついて説明します。このファイルに書かれている Java- script のおもな仕事は、フォームの内容の変更に応じて、 別フレームで CGI を呼び出すことです。 まず、変数の彳齬リから説明します。 amount-array 3 つの商品入力フィーノレドの各商品 の数量をイ尉寺するための酉リです。ページか読み込まれ た時点ですべて 1 に期化されます。 prefix-array 3 つの商品入力フィールドには、それ ぞれ LI ~ L3 という識別子が付けられていますが、 の識別子をもとに amount-array の添え字として使う 数字 : に変換するために使用します。 次に、関数について説明します。 lookup-prefix() 商品入力フィールドの識別子 (LI —L3) から数字へ変換します。 text フィールドの文字列の後ろの空白を取り ChOP() 除く関数です。 65