検索フォームを作成する方法には、標準検索フォームを利用する方法と、一から自分で作成する方法があります。一から作成する場合の手順は、ややWeb上級者向けになります。
ここでは、一から作成する方法を説明します。標準検索フォームを使用する場合はこちらをご覧ください。
検索フォームの果たす役割は、ユーザーが指定した出発駅や到着駅などの情報をURL引数(URLの?以降の部分)に乗せて検索結果表示ファイルに渡すことです。
引き渡すべき情報は、出発駅および到着駅の駅番号(データテスターの「駅一覧」で確認できます)と出発駅でユーザーが乗車しようとしている路線の番号(データテスターの「動作確認」で確認できます)、 およびFaredio 2.0が存在するディレクトリへの相対パス、そしてデータファイル名です。
各情報とURL引数の対応は以下の通りです。
| 引数名 | 設定項目 | 備考 |
|---|---|---|
| vl | 出発駅が属する路線番号 | 必須 |
| gl | 到着駅が属する路線番号 | 必須(Faredio 2.0.23以降) |
| lev | 出発駅の駅番号 | 必須 |
| arv | 到着駅の駅番号 | 必須 |
| dir | Faredio 2.0ディレクトリの 相対パス | 必須。検索結果表示ファイルから見た相対パスで指定 |
| fn | データファイルのファイル名 | 必須。ファイル名のみで、パスは不要 |
検索フォームの送信先は検索結果表示ファイルです。従って、<form>タグのaction属性の値は検索結果表示ファイルへの相対パスを設定します。
また、URL引数でフォームデータを送信するので、method属性の値は"get"とします(デフォルト値なので省略可)。
また、フォームから上の表に示した引数を送信しなければならないので、vl、lev、arv、dir、fnの名前(name属性)を持った<input>要素または<option>要素が必要です。
送信される値は各<input>要素(または<option>要素)のvalue属性の値です。dir、fnは非表示要素(<input type="hidden" value="〜">)を使って指定します。vl、lev、arvについては、ユーザーの操作によってvalueの値を設定するように設計する必要があります。 JavaScriptで動的に変化させるか、セレクトボックスやラジオボタンを使用するのが有効です。
データファイルから路線名や駅名を抽出する場合は、datasystem.jsとデータファイルをこの順で読み込んでおく必要があります。
両ファイルを読み込んでおくと、下記JavaScriptコードで路線名や駅名などを抽出することが出来るようになります。 総路線数、駅数は、それぞれlines配列およびstationList.staList配列の長さから取得できます。
標準検索フォームを利用すれば、簡単なコードの入力でFaredio 2.0の検索フォームを作成することが可能です。標準検索フォームは、サンプルファイルや本サイトトップページの「実装例」で採用されているものです。
標準検索フォームは、検索結果を表示させたい箇所に以下のコードを挿入するだけで作成できます。ただし、このままではデザインが大きく崩れるので後述のCSSファイルを読み込んでおく必要があります。
<script type="text/javascript">
<!--
var resultScr = "showresult.html";
var faredioDir = "faredio2.0/";
//-->
</script>
<script type="text/javascript" src="faredio2.0/datasystem.js"></script>
<script type="text/javascript" src="faredio2.0/datas/DATAFILENAME.js"></script>
<script type="text/javascript" src="faredio2.0/createForm.js"></script>外部JavaScriptの読み込みを行っている部分(italic体で示した箇所)については、実際の環境に合わせ各JavaScriptファイルへの相対パスを指定して下さい。
ソースコード中、赤字で示した箇所には次のパスを指定します。
| 変数名 | 設定項目 | 備考 |
|---|---|---|
| resultScr | 結果表示画面への相対パス | 必須 |
| faredioDir | faredio2.0ディレクトリへの相対パス | 必須。検索結果表示ファイルから見た相対パスで指定 |
| DATAFILENAME | データファイルへの相対パス | 必須 |
検索フォームを正しく表示するには別途CSSファイル(faredio.css、faredioBox.css)を読み込んでおく必要があります。 <head>〜</head>内に以下の2行を追加してください。
<link rel="stylesheet" type="text/css" href="faredio.css" />
<link rel="stylesheet" type="text/css" href="farediobox.css" />
italic体で示した箇所については、実際の環境に合わせ各CSSファイルへの相対パスを指定して下さい。
Faredio 2.0では、標準検索フォームの駅名一覧をポップアップ表示するように変更しましたが、検索フォームの設置位置によってはポップアップが画面の外側にはみ出してしまい、うまく表示されないようです。 その場合は、farediobox.cssの下記の赤字の部分の値を適宜変更してください。
div.faredioFormPulldown {
position: relative;
/*以下の行のうち、どれか必要なものだけを追加*/
left: ??px; //ボックスの左端からの位置を指定
right: ??px; //ボックスの右端からの位置を指定
top: ??px; //ボックスの上端からの位置を指定
bottom: ??px; //ボックスの下端からの位置を指定
border: 1px solid #aaaaaa;
background-color: #ffffff;
padding: 10px;
width: 600px;
display: none;
}| 値 | ボックス位置の指定方法 |
|---|---|
| static | 特に配置方法を指定しません。top、bottom、left、right属性は使用できません。 |
| relative | デフォルトではこの値に指定してあります。top、bottom、left、right属性によって、本来の位置からどの程度ずらすかを指定できます。 |
| absolute | 検索フォームを配置する場所の親ボックスを基準に絶対位置でボックスの位置を指定する場合に使用します。 |
| fixed | absoluteと基本的に同様ですが、ページをスクロールしても位置が固定されます。 |