フォームのメニューを作るには？
今回は再びＨＴＭＬ文書(ハイパー･テキスト)で“ジャバ･スクリプト”を書く方法です。みなさんがウェブサイトをご覧になっていると、右のようなメニューはよく出てくると思います。また名前などの情報を書き込むページも、入力欄へ同じパターンが使われており、これらはすべて“フォーム”と呼ばれる機能を利用したものです。
横井康和著
オンライン･ノベル
フォームを使ったメニューの一例“フォーム”を使うことでページにこうした入力欄やボタンが作れ、それ自体はさほど難しくありません。ただ、その入力欄やボタンでインプットされた情報をどう処理するかが問題で、いままでならサーバー側へＣＧＩを置いて制御しました。このＣＧＩはＨＴＭＬへの記述だけだと不可能な働きが可能になる反面、扱いがかなり面倒であり、ある程度は専門知識も必要です。それが“ジャバ･スクリプト”を使えば、サーバーは頼らずクライアント側だけの処理ができます。
“ジャバ･スクリプト”では<form>の<input>タグへＣＧＩに送る情報の代わり｢onClick｣を設定し、そこで“ジャバ･スクリプト”の関数を呼び出すわけです。つまり、何をさせたいか指定します。たとえば、先の例だとメニュー･リストから小説のタイトルを選び、｢移動｣ボタンを押す(クリックする)ことで選んだ小説のページへジャンプさせるため“ジャバ･スクリプト”を使いました。したがって、｢onClick｣でそれらが指定されなければなりません。その具体的な記述方法は以下のとおりです。
<table border=1 bordercolor=#000000 cellpadding=20>
<td bgcolor=#fffffa>
<img src="../../images/book.gif" align=left hspace=10>
<font color=#008020>横井康和著<br>
オンライン･ノベル</font></b><p><br><form>
<font color=#555555 size=-1><b>ご希望の小説タイトルを選び<br>
下のボタンを押して下さい</b><br>
<select name="list">
<option selected value="../endo1/index.html">天使達の街
<option value="../../endo2/index.html">超常疾走
<option value="../../endo3/index.html">11月のエコー、オスカーの三角地帯
<option value="../../endo4/index.html">奴にまかせろ！
<option value="../../shadow/index.html">怪人20面相を愛した女
<option value="../../billy1/index.html">突然、愛で！
<option value="../../billy2/index.html">紫の墓標
<option value="../../hisa1/index.html">りんご追っ駆け
</select><br>
<input type=button value="移動" onClick="top.location.
href=this.form.list.options[this.form.list.selectedIndex].value">
</font></form></td></table>
このスクリプトをじっくり眺めながら冒頭作例のメニュー欄や｢移動｣ボタンを操作してみると、どの部分がどう機能するのか大まかな見当はつくと思います。見当がついたら、今度はご自分の作成したＨＴＭＬ文書へこのスクリプトを書き込み、それがブラウザでどう表示されるか試されるといいでしょう。書き込む際、最初の２行と最後の１行は外枠の設定、３行目は｢本｣の画像、続く２行はタイトルのための記述ですから、面倒なら省いて下さい。
肝心なのが<form>と</form>の間で、<option value>は右側のタイトルがメニューとして表示され、タグの中は｢=｣の後がそれを選んだ時の移動先です。したがって、タイトルとアドレスをリンクさせたいページのものと差し替えれば、ご自分のメニューは完成します。メニューの数が増やしたいなら<option value>の行を増やし、初期設定はその行へ｢selected｣と挿入すればいいだけです。作例が１行目になっているだけで、指定する行の制約はありません。
“フォーム”と“ジャバ･スクリプト”が連動した使い方は、メニューと限らずまだまだあり、簡単な例をあと２つあげておきましょう。まず“フォーム”の“ボタン”を使った例だす。たとえば、サイト内で異なる複数ページからリンクした場合、リンクされたページへ｢戻る｣のボタンを設定するにも、どこへ戻るか決めかねることがあります。ブラウザの｢戻る｣のように元のリンク先はどこであれ、そこへ戻る設定が、やはり“ジャバ･スクリプト”なら可能です。
“フォーム”のボタンへbackという関数を起動させれば、前のページばかりでなく２頁でも３頁でも戻ったり進んだりは簡単にできます。ボタンの｢onClick｣で｢back()｣関数を呼び出してスクリプトが実行され、ページを戻す操作は｢history.go()｣で行うわけです。“ジャバ･スクリプト”への具体的な記述は･･････
<script langauge="JavaScript">
function back(num)
{
num = num * (-1);
history.go(num);
}
</script><form method="post">
<input type="button" value="１頁前に戻る" onClick="back(1)">
<input type="button" value="２頁前に戻る" onClick="back(2)">
<input type="button" value="３頁前に戻る" onClick="back(3)">
</form>
このスクリプトを書き込んだのが以下のボタンです。押すとブラウザの｢戻る｣のような働きをする様子はおわかりいただけるでしょう。
また、スクリプト４行目の｢num = num * (-1);｣をマイナス値の代わりプラス値で記入すれば、｢戻る｣でなく｢進む｣となります。ただし、いったん先のページへ進み、そこから戻った状態でない限り｢進む｣ことはできないのでご注意ください。もっとも、みなさんが実際に使うとしたら｢１頁戻る｣ぐらいで、それ以外は必然性がないかもしれません。
次は“フォーム”の“ラジオ”を使った例で、以下が“ジャバ･スクリプト”への記述方法とそれを書き込んだ実例です。実例の３つボタン(ラジオ)のどれかをクリックすると、入力欄にはその説明が表示されます。
<script language="JavaScript">
function check(radio) {
form = radio.form;
form.Contents.value = radio.value;
}
</script><form method="post">
“ハリウッド最前線”には以下のセレクションがあります。<p>
<input type="radio" name="Selection"
value="最新映画情報"
onClick="check(this)"> レッドマガジン<br>
<input type="radio" name="Selection"
value="ヨコチンのエンターテイメント･ワールド"
checked onClick="check(this)"> ヨコチンページ<br>
<input type="radio" name="Selection"
value="Ｌ･Ａマガジン"
onClick="check(this)"> ブルーマガジン<p>
<input name="Contents" size="40"
value="ヨコチンのエンターテイメント･ワールド">
</form>
スクリプトの中で３つの<input>が３行づつあります。これは見やすいよう改行しただけで、記述の際１行にしても構いません。ただし、改行しない場合、かならず半角スペースが必要です。つまり、最初の<input>は１行目が「･･･"Selection"｣で終わり２行目は｢value･･･｣で始まっているところを、｢･･･"Selection" value･･･｣とつなげ、その次も同じく｢･･･映画情報" onclick･･･｣と記入して下さい。また、入力欄へ説明文が表示された後、そこにリンクも設定できますから、冒頭の作例を参照し、ご自分で試されては？
これらの他にも“フォーム”はいろいろな使い方があり、その多くの機能は“ジャバ･スクリプト”と連動させることで扱いやすく、より凝ったページ作りも可能です。１つの入力欄へ数字を書き込めば、もう１つの入力欄にはその数字を使った計算式の答が表示される設定とか、メニューでも入力欄をもう１つ作って、そこへは確認しやすいよう選択したタイトルが表示される設定など、これらの記述にＣＧＩを知る必要はありません。機会があれば、そういった他のスクリプトもご紹介します。
なお、冒頭のメニューを使ってサンプル･ページも作ってみました。興味があるかたはご覧ください。
【注： ｢Yokochinのハイパーテキスト･マニュアル｣ではフォームのメニューに関して、より詳しい解説がご覧いただけます】
|
お断り