楽しいホームページ入門
8.利用しやすいホームページへ


● 検索エンジンへの対応


私たちは、情報が欲しい時に、ホームページを検索します。YahooやGoogleが代表的に使われる検索エンジンでしょうか。これらの検索エンジンは、ホームページの中に含まれている「言葉」を収集し、その「言葉」で検索された時に該当するページを一覧表にしています。この時、ページ内に含まれない言葉やあいまいな表現は収集されませんので、あえてこれらの「言葉」をキーワードとしてHTML文書の中に記述しておく事ができます。これによって、検索されやすいホームページになります。又、一方で、検索エンジンに収集されては困る場合には、収集されない様に設定する事もできます。

収集してもらう為には、HTML文書中、<head>~</head>の間で、metaタグを次の様に使います。

<meta name=”keywords” content=”キーワード1,キーワード2,・・”>

複数のキーワードを用意している場合は、上の様にコンマ「,」で区切ります。例えば、「高齢化」、「セカンドライフ」、「シルバーライフ」で検索された時に、検索に引っ掛かり一覧表に載せたいホームページなら、

<meta name=”keywords” content=”高齢化,セカンドライフ,シルバーライフ”>

と記述します。又、キーワードの代わりに短文(50文字以下)でページの紹介や概要を示す事もできます。短文で示したい場合は、HTML文書内での記述は下の様になります。

<meta name=”description”content=”ページの紹介や概要”>

さてここまで書いてきた事とまったく逆に、検索エンジンに収集されては困る場合には、次の様に記述します。

<meta name=”robots” content=”noindex,nofollow”>

尚、metaタグを使った慣用句は他にもあります。下の3つがそれですが、この3つの文も検索用metaに続けて記述します。

<meta http-equiv=”content-type” content=”text/html; charset=shift-jis”>
<meta http-equiv=”content-style-type” content=”text/css”>
<meta http-equiv=”content-script-type” content=”text/javascript”>

なお、これらの記述は無くてもブラウザが自動的に判別してくれます。しかし、文字化けや誤動作を防ぐ意味から記述しておきます。

ここまででmetaタグの代表的な使用例を見て来ました。すでに理解できた様に、metaタグで記述される文はHTML文書のヘッダ情報の1種です。従って、HTML文書中で<head>~</head>の間に置かなくてはなりません。

これ以外にmetaタグを使用する例としては自動的に他のページに移りたい場合や、自動的にページをリロードしたい場合があります。記述方法は、

<meta http-equiv=”reflesh” content=”値A”>

となります。値Aに数値のみを入れた場合は、その数値(秒)後にページがリロードされます。値Aに

数値;url=任意の文書のURL

を入れた場合は、その数値(秒)後に、指定URLのページへ移動します。サイトを引っ越しした場合に使います。


● 入力フォームでコミュニケーションアップ


以前リンクを使用してメールを作る事を学びました(→こちらです)。しかし、あらかじめ決められたフォームに情報を埋め込んで送信すれば、読者にとっては便利です。ここでは、このフォームを使っての方法に挑戦してみます。

フォーム作りのおおよその流れは、HTML文書中<body>~</body>間で、<form>~</form>で囲んでフォームの内容を記述し、formタグの属性として、データの送信先、送信方法を設定すると言うものです。formタグの具体的な書き方は下の通りです。

<form action=”データの送信先” method=”データの送信方法”
         enctype=”データの形式”>

この記述中の「送信先」ですが、2種類考えられます。一つはメールアドレスであり、もう一つはURLです。メールアドレスの場合は、「データの送信先」は

mailto:”メールアドレス”

と記述します。一方、URLの場合は、「データの送信先」は、はCGIスクリプトのURLを指定する事になります。CGIについては後のページで述べます(→こちらです)。

次に「送信方法」ですが、今回は post と記述します。これは、フォームのデータのみを送る方法で、他には get と記述する方法もあります。

最後にデータの形式ですが、これも数種類ある中で、 text/plain と指定します。これにより、内容がエンコードされる事無く、そのまま読める状態で送信されますので文字化けしません。画像などのファイルを送る場合は、 multipart/form-data と記述します。

以上でformタグの記述が出来ましたので、formの中味に移ります。1行テキストの入力欄とポップアップメニュー、複数行テキストの入力欄の3つをフォームの中に入れて見ます。まず、1行テキストの入力欄を作る記述する方法は、

<input type=”text” name=”送信されるデータのフィールド名
         ” value=”入力欄にあらかじめ表示されるテキスト”
         size=”表示幅(半角での文字数)
         ” tabindent=”tabキーでの入力順指定”>

となります。input typeは「text」に固定しましたが、他には、入力したテキストを直接表示させない「password」や、送信ボタンの表示を指定する「submit」(次ページで説明します)があります。

ポップアップメニューとは、あらかじめ作られた選択リストの中から選択してもらう方法の一つで、

<select name=”送信されるデータのフィールド名” size=”表示項目数”>

<option value=”選択されたら送信される文字列”>
         フォーム内で表示する文字列</option>

<option value=”選択されたら送信される文字列”>
         フォーム内で表示する文字列</option>
      ・
      ・
      ・

</select>

と記述します。複数項目選択可能にしたい場合はselectタグの中にmultiple属性を入れます。又、あらかじめデフォルトとして表示しておきたい選択肢にはoptionタグの中にslected属性を入れておきます。

ここまでのおさらいとして、HTML文書中で下の様に記述しました。

<form name=”form1” method=”post” action=”mailto:**@**.**.jp”
  enctype="text/plain">
<p>・名前        <input size=”30” type=”text” name=”name1”
  tabindex=”1” value="姓と名前は1文字空けて下さい"></p>
<p>・表示名(ニックネーム)<input size=”30” type=”text” name=”name2
  tabindex=”2”></p>
<p>・メールアドレス        <input size=”30” type=”text” name=”name”
  tabindex=”3” value=”半角英数字で入力して下さい”></p>
<p>・年齢 (30代以下:40代:50代:60代:70代以上)
<select name=”age” size=”1” tabindex=”4”>
<option value=”30”>30代以下</option>
<option value=”40”>40代</option>
<option value=”50”>50代</option>
<option value=”60” selected>60代</option>
<option value=”70”>70代以上</option></select></p>
</form>

その結果、Web画面上では下の様に表示されます。尚、今回は選択リストでの選択方法を選びましたが、これ以外に「ラジオボタン」や「チェックボックス」での選択方法も有ります。

画面

次に、複数行テキストの入力欄を作ります。これは、HTML文書中でtextareaタグを使い、下の様に記述します。

<textarea name=”送信されるデータのフィールド名” rows=”入力欄の行数” cols=”入力欄の幅(1行の半角での文字数)” wrap=”改行の方法”>

ここで、「wrap」で設定される改行方法ですが、「soft」(画面上は自動改行・送信データは改行無し)、「hard」(画面上自動改行・送信データも改行入る)、「off」(改行無し)の3種類から選択できます。

実際にHTML文書中で次の様に記述しました。        <p>コメント<br/>     <textarea rows=”10” cols=”65” name=”comment” wrap=”soft”></textarea></p> その結果のWeb画面には、下の様なコメント欄が表示されました。

 

画面

● 送信ボタンの設置


前ページで「フォーム」の内容を作ってきましたので、「送信ボタン」の設置をして仕上げます。送信ボタンの設置にも inputタグを使い、記述方法は次の通りです。

<input type=”submit” name=”送信されるデータのフィールド名” value=”ボタンの名前” >

この記述では、type=”submit” で送信ボタンである事を示し、その後の記述で、送信用のフィールド名や画面表示時のボタン名を定義しています。又、submitの代わりにresetを入れると、フォームの内容を初期状態に戻す、いわゆる「リセットボタン」になります。今回は、HTML文書中で次の記述をしました。

<input type=”submit” name=”soushin” value=”クリックすると内容を送信します”>
<input type=”reset” name=”cancel” value=”取り消し”></p>

その結果、Web画面上では右の様になりました。

画面

さて、ここまででフォームが完成しましたので内容を適当に記入して、「送信ボタン」をクリックしてみたところ2回程警告メッセージが出ました。今回はこれらの警告にOK入力してフォームを発信しましたが、残念ながら、空白の発信メールがWeb画面上に出て来るだけで、結果的にはフォームの中味のデータを送る事はできませんでした。ちなみにこのトライは、InternetExplorer8とOutlook2007の組み合わせです。

フォームをメールアドレスに送信するのは、ブラウザやメールソフトの影響を受け不確実との情報がありますので、少し古いバージョンの組み合わせで再度トライしてみます。今度は、InternetExplorer7とOutlookExpress6の組み合わせでやって見ます。「送信ボタン」をクリックすると、まず画面に下の警告メッセージが出て来ました。これは、InternetExplorer8とOutlook2007の組み合わせの時と同様です。

画面

ここで、「OK」をクリックしてみました。その結果、次の様な警告が出て来ました。

画面

これは、InternetExplorer8とOutlook2007の組み合わせの時には出てこなかったメッセージです。ここでも「OK」をクリックしたところ、メールソフトのOutlookExpress6は無事に送信してくれました。ちなみに、送信したフォームを受信したメールは下の様なものです。

画面

一応送信できた訳ですが、、これでホームページを公開するにはあまりにも身勝手と言う事になります。CGIスクリプトへ送信すればこのようなトラブルは無いのでしょうが、まだ知識不足だし、ホームページが完成してから挑戦する事にしました。従って、私のホームページの初期バージョンでは、リンクを利用してのメールでご意見や情報を頂く事にしました。


● CGIについて


CGIとは、Common Gateway Interface の略で、ブラウザからの要求をサーバに渡し、その要求にそってサーバ内のプログラムを実行させ、実行結果をブラウザに返すしくみの事です。今回挑戦したフォームメールの他に、掲示板やアクセスカウンタ、パスワードによるアクセス制限など、さまざまな利用方法があります。

処理の流れは次の様になっています。

1.ブラウザがWWWサーバにCGIスクリプトの起動を要求する

2.WWWサーバがCGIスクリプトを起動する

3.CGIスクリプトが処理実行する

4.CGIスクリプトが処理の結果をWWWサーバへ返す

5.WWWサーバがブラウザに結果を返す

今後、実際にホームページをアップする時にはCGIにもお世話になりそうですが、今回はこれくらいで止めておきます。

ページトップへ

前ページ←

→次ページ

コーナー