■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
【 Webプログラミング Code Sample 】 Since2001/11/23
Code018: 入力チェックの極意 その1:前方チェック(1)
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
Produced by ichikoro.com
▼毎週月曜日と金曜日に配信しています。
▼等幅フォントでご覧いただくとキレイに見えます。
▼登録・解除はこちらから可能です。
< http://www.ichikoro.com/webp/ >
※バックナンバーへのリンクもあります。
※お友達にもぜひお勧めください(^^)/
─【Contents】───────────────────────────────
01.Answer ................... 前回の回答
02.Tips ..................... 入力チェックの極意 その1：前方チェック(1)
03.News ..................... ネット業界の一週間
04.From Editor .............. 編集後記
Amazon主催の座談会に出席してきました。うーん、やはりこの業界にいると普通の人
と、インターネットに関する感覚がずいぶん違ってくるもんだなぁと、改めて実感し
ました。こっちの方が勉強になりました。というか私を選んだのは人選ミスじゃない
のか？普通じゃないぞ(^^;
さてさて、先週お話したとおり、今週から1週間に2回配信する予定です。当分の間は
トライアルとしてやっていきますので、ご意見・ご感想、ご要望などありましたら、
どしどしお寄せください。なるべく読者の皆様のご意見を反映させていきたいと思い
ます。
送り先：mm-webp@ichikoro.com
今回のメニューは、上にある通りです。
本編(C言語入門編)は金曜日になります。
では、今週も行ってみましょう！
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
01.Answer 「前回の回答」
──────────────────────────────────────
Q2. 下記のサンプルを参考にし、底辺12cm、高さ5cmの三角形の面積を求め、その
結果を表示するプログラムを完成させよ。
・サンプル
printf("%d", 1);
A. 簡単でしたでしょうか？
・ソース
#include<stdio.h>
int main(void)
{
printf("12*5/2 -> %d\n", 12*5/2);
return(0);
}
・実行例
C:\>bcc32 menseki.c
Borland C++ 5.5.1 for Win32 Copyright (c) 1993, 2000 Borland
menseki.c:
Turbo Incremental Link 5.00 Copyright (c) 1997, 2000 Borland
C:\>menseki
12*5/2 -> 30
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
02.Tips 「意外に奥が深い!?入力チェックの極意 その1：前方チェック(1)」
──────────────────────────────────────
このコーナーは読者の皆さんから寄せられた質問や、今すぐにでも使えるプログラ
ムの活用方法、実例などを取り上げていきたいと思います。突発的に色々でてきま
すが、詳細は解説しません。分からない場合は本編でいずれ取り上げると思います
のでそれまで待つか、ご自分で調べてくださいませ。
さてさて、一般的な掲示板では、
・名前
・メールアドレス(オプション)
・URL(オプション)
・タイトル
・内容
といった物をユーザーに入力してもらい、その内容をCGIで書き込んでいると思いま
す。ただ、ユーザーが全てを入力してくれるとは限りませんし、誤った内容が入力さ
れることだって十分あるわけです。そういことから、“必須入力(省略不可能)”な項
目というのを設けることがよくあると思います。アンケートなどでも、よくみかけま
すよね。また半角かどうか、数字だけの入力かどうかのチェックもしたいと言う事も
考えられます。
これをチェックするのは最終的に書き込みを行うCGI側で行うのが一番確実です。
確かに確実なのですが、同時にちょっと困ったことも発生します。一度submitすると
ブラウザはサーバに実行結果を求めます。つまり実行結果がサーバから返ってくるま
では、正解か否かの判断がユーザーはつかないことになってしまいます。サーバが込
み合っている時などにsubmitし、長い間待たされた挙句エラー画面が出るとちょっと
ムカッと来ますよね。
そこで出てくるのが「前方チェック」の考え方です。まぁそんなに難しい話じゃなく、
サーバに情報を送る“前”に正解かどうかわかるようにチェックしましょうというこ
とです。逆に送った後にチェックすることを、ここでは「後方チェック」と呼ぶこと
にしましょう。
これを実現するにはブラウザ側でチェックする必要があります。幸いなことにIEやNN
にはJavaScriptと言われる、ブラウザ側で動作するプログラム言語が用意されていま
す。他にも特定のブラウザで動作するVBScriptやPerlScriptなどがあります。
例を出して見ましょう。
<HTML>
<HEAD>
<TITLE>入力フォーム</TITLE>
<HEAD>
<BODY>
<FORM action="bbs.cgi" method="post">
<!-- この2つはオプション -->
<INPUT type="text" name="mail">
<INPUT type="text" name="url">
<!-- ここから3つは必須項目 -->
<INPUT type="text" name="name">
<INPUT type="text" name="title">
<TEXTAREA name="naiyou" rows="10" cols="60"></TEXTAREA>
<INPUT type="submit">
</FORM>
</BODY>
</HTML>
というフォームがあったとします。
まずは、
・必須項目が入力されていなかったら送信しない
という風に改造してみましょう。
<HTML>
<HEAD>
<TITLE>入力フォーム</TITLE>
<SCRIPT language="JavaScript"><!--
/*---------------------------------------------------------*/
/*■送信前チェック */
/* 引数：なし */
/* 戻り値：成功 → true */
/* 失敗 → false */
/* 処理：フォームbbsFormの必須項目が入力されていない */
/* 場合はfalse、必須項目が入力されている場合は */
/* trueを返す。 */
/*---------------------------------------------------------*/
function chkForm(){
var name = document.bbsForm.name.value;
var title = document.bbsForm.title.value;
var naiyou = document.bbsForm.naiyou.value;
/*---------------------------------------*/
/* 内容チェック */
/*---------------------------------------*/
//名前をチェック
if( name.length <= 0 ){
return(false);
}
//タイトルをチェック
if( title.length <= 0 ){
return(false);
}
//内容をチェック
if( naiyou.length <= 0 ){
return(false);
}
return(true);
}
//-->
</SCRIPT>
<HEAD>
<BODY>
<FORM name="bbsForm" onSubmit="return( chkForm() )"
action="bbs.cgi" method="post">
<!-- この2つはオプション -->
メール：<INPUT type="text" name="mail"><BR>
URL：<INPUT type="text" name="url"><BR>
<BR>
<!-- ここから3つは必須項目 -->
名前：<INPUT type="text" name="name"><BR>
タイトル：<INPUT type="text" name="title"><BR>
<TEXTAREA name="naiyou" rows="10" cols="60"></TEXTAREA><BR>
<BR>
<INPUT type="submit">
</FORM>
</BODY>
</HTML>
FORMタグのonSubmit部分で指定した関数(処理)からfalseが返ってくると、実際に送
信はされません。そこで、それぞれのフォーム要素(textとかtextarea)の文字列長を
順番にチェックし、0以下であればchkForm関数はfalseを返します。
ただ実際にやってみると分かりますが、これだと
・何が間違っているかわからない
・そもそも間違っていることに気がつかない
(submitを押したのに何の反応も無い)
ということになってしまいますので、間違っている項目をユーザーに教えてあげる必
要が出てきます。また、どうせなら入力していない所にわざわざマウスを持っていか
なくてもいいようにしてあげましょう。
<HTML>
<HEAD>
<TITLE>入力フォーム</TITLE>
<SCRIPT language="JavaScript"><!--
/*---------------------------------------------------------*/
/*■送信前チェック */
/* 引数：なし */
/* 戻り値：成功 → true */
/* 失敗 → false */
/* 処理：フォームbbsFormの必須項目が入力されていない */
/* 場合はfalse、必須項目が入力されている場合は */
/* trueを返す。 */
/* 未入力の場合はダイアログを表示し、当該項目に */
/* フォーカスする。 */
/*---------------------------------------------------------*/
function chkForm(){
var name = document.bbsForm.name;
var title = document.bbsForm.title;
var naiyou = document.bbsForm.naiyou;
/*---------------------------------------*/
/* 内容チェック */
/*---------------------------------------*/
//名前をチェック
if( name.value.length <= 0 ){
alert("名前を入力してください");
name.focus();
return(false);
}
//タイトルをチェック
if( title.value.length <= 0 ){
alert("タイトルを入力してください");
title.focus();
return(false);
}
//内容をチェック
if( naiyou.value.length <= 0 ){
alert("内容を入力してください");
naiyou.focus();
return(false);
}
return(true);
}
//-->
</SCRIPT>
<HEAD>
<BODY>
<FORM name="bbsForm" onSubmit="return( chkForm() )"
action="bbs.cgi" method="post">
<!-- ここから3つは必須項目 -->
名前：<INPUT type="text" name="name"><BR>
タイトル：<INPUT type="text" name="title"><BR>
<TEXTAREA name="naiyou" rows="10" cols="60"></TEXTAREA><BR>
<BR>
<!-- この2つはオプション -->
メール：<INPUT type="text" name="mail"><BR>
URL：<INPUT type="text" name="url"><BR>
<BR>
<INPUT type="submit">
</FORM>
</BODY>
</HTML>
これでずいぶんと親切になりましたね(^-^)
ifが連続しているのはかっこ悪いように見えるかもしれませんが、何をやっているか
一目瞭然ですよね？またコピー＆ペーストしやすいため、内容の追加・変更に対応し
やすいので、私はよくこういうコーディングをしています。経験上、妙にこった技を
使うのは逆効果なことがよくあります(^^;
さて、親切ついでにもう少しだけ工夫してみましょう。
・一番最初に入力する項目にフォーカスしておく
・送信前に「送信していいですか？」と確認する
特に2番目は重要です。IEはエンターキーを押すと有無を言わさず送信してしまうの
を、この機能が救ってくれるのです。1番目はなんて事の無い物ですが、こうしたち
ょっとした親切が、ユーザーのストレスを少しでも減らすことにつながり、結果とし
て入力ミスなどを防いでくれるとも考えられます。ちなみに、Googleでも使われてい
ます。気がついている人はあまりいないと思いますが(^^;
<HTML>
<HEAD>
<TITLE>入力フォーム</TITLE>
<SCRIPT language="JavaScript"><!--
/*---------------------------------------------------------*/
/*■onLoadイベント */
/* 引数：なし */
/* 戻り値：なし */
/* 処理：nameにフォーカスする */
/*---------------------------------------------------------*/
function setOnLoad(){
//名前にフォーカスを当てる
document.bbsForm.name.focus();
}
/*---------------------------------------------------------*/
/*■送信前チェック */
/* 引数：なし */
/* 戻り値：成功 → true */
/* 失敗 → false */
/* 処理：フォームbbsFormの必須項目が入力されていない */
/* 場合はダイアログを表示し、当該項目にフォーカ */
/* スする(送信はされない) */
/* 入力内容が大丈夫な場合は、確認ダイアログを出 */
/* し、OKであれば送信する。 */
/*---------------------------------------------------------*/
function chkForm(){
var name = document.bbsForm.name;
var title = document.bbsForm.title;
var naiyou = document.bbsForm.naiyou;
/*---------------------------------------*/
/* 内容チェック */
/*---------------------------------------*/
//名前をチェック
if( name.value.length <= 0 ){
alert("名前を入力してください");
name.focus();
return(false);
}
//タイトルをチェック
if( title.value.length <= 0 ){
alert("タイトルを入力してください");
title.focus();
return(false);
}
//内容をチェック
if( naiyou.value.length <= 0 ){
alert("内容を入力してください");
naiyou.focus();
return(false);
}
/*---------------------------------------*/
/* 送信確認 */
/*---------------------------------------*/
//送信前に一度確認
if( confirm("この内容で送信してもよろしいでしょうか？") ){
return(true);
}
return(false);
}
//-->
</SCRIPT>
<HEAD>
<BODY onLoad="setOnLoad()">
<FORM name="bbsForm" onSubmit="return( chkForm() )"
action="bbs.cgi" method="post">
<!-- ここから3つは必須項目 -->
名前：<INPUT type="text" name="name"><BR>
タイトル：<INPUT type="text" name="title"><BR>
<TEXTAREA name="naiyou" rows="10" cols="60"></TEXTAREA><BR>
<BR>
<!-- この2つはオプション -->
メール：<INPUT type="text" name="mail"><BR>
URL：<INPUT type="text" name="url"><BR>
<BR>
<INPUT type="submit">
</FORM>
</BODY>
</HTML>
一つ注意しないといけないのは、ここでチェックしているからと言ってCGI側でチェ
ックしなくていいかというとその答えは No です。例えばブラウザの設定で、JavaS
criptを使わないようになっていると、そもそもこれは機能しなくなります。他にも
理由はいくつかありますが、あくまでユーザーに使いやすくするためだけの物だと考
えてください。
さぁ次回のこのコーナーではもっとディープなチェック方法を紹介する予定です。
お楽しみに(^-^)/
【ブックマーク！】
■とほほのWWW入門
http://tohoho.wakusei.ne.jp/www.htm
・とほほのJavaScript入門
http://tohoho.wakusei.ne.jp/wwwjs.htm
・とほほのJavaScriptリファレンス
http://tohoho.wakusei.ne.jp/js/
■OpenSpace!!
http://www.shiojiri.ne.jp/~openspc/
・JavaScript例文辞典
http://www.openspc2.org/reibun/javascript/
■W3Cの仕様書等の文書の日本語訳集
http://www.w3c.org/Consortium/Translation/Japanese
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
03.News 「今週の気になるニュース
インターネット業界の一週間」
──────────────────────────────────────
ビルゲイツも来日しXBOXがいよいよ発売されましたね。
さぁこれから何をやってくれるか楽しみです。ソニーも黙っちゃいないでしょう。
ソフト会社に転向したセガの動きにも密かに注目してます。今年はゲーム業界が
熱いかも！？
---------------------------------------------
■2月18日(月)
---------------------------------------------
・インターネット広告費の伸びにブレーキ 〜電通「平成13年日本の広告費」発表
http://www.watch.impress.co.jp/internet/www/article/2002/0218/dentsu.htm
よく誤解される方がいるので一応解説すると、インターネット広告費自体は、
前年比124.6%と伸びています。成長率に急ブレーキがかかったということです。
まぁ、これまでが異常でしたからね(^^; ようやく冷静に投資できる姿勢が見え
初めてきた...ということでしょうか。
・ホームページに「投票箱」／窓口サービスの評価 東京杉並区
http://www.mainichi.co.jp/digital/internet/200202/18/02.html
---------------------------------------------
■2月19日(火)
---------------------------------------------
・ボーランド、Webサービスに対応した「Borland C++ Builder 6 日本語版」を発表
http://www.watch.impress.co.jp/internet/www/article/2002/0219/borland.htm
・ドコモ、3月にもドイツでｉモードサービスを開始
http://japan.internet.com/busnews/20020219/4.html
---------------------------------------------
■2月20日(水)
---------------------------------------------
・NetRatings と JMM、合併計画を解消
http://japan.internet.com/finanews/20020220/12.html
アメリカは競争意識をもたせることに常に重きをおいてますね。
日本も何とかしてほしいですね＜とりあえずNTT(^^;
---------------------------------------------
■2月21日(木)
---------------------------------------------
・米Google、クリック回数に応じた料金体系を広告システムに導入
http://www.watch.impress.co.jp/internet/www/article/2002/0221/google.htm
ちなみに、現在でも15万円(最低額)から広告掲載できます。
個人じゃちょっと高いですが、企業広告として考えればかなり安いです。
http://www.google.com/intl/ja/ads/pricing.html
・トレンドマイクロ、家庭向けセキュリティボックス「GateLock X200」を3月4日
に正式発売。まずは直販サイトで
http://www.zdnet.co.jp/broadband/rbb/0202/21/rbb_0221_06.html
ほしい〜（笑）
会社に導入しようかなぁと思ってちょっと調べてたんですが、
やはりホームユースらしく耐えれないと判明。むー(^^;
---------------------------------------------
■2月22日(金)
---------------------------------------------
・Xbox発売間近 ビル・ゲイツ氏、夜の渋谷に登場 日本での第1号は手渡しで
http://pcweb.mycom.co.jp/news/2002/02/22/09.html
タモさんが本人からもらってましたね！ちょっとビックリ。
XBOXにちょっと懐疑的だったりするのは、やっぱりマイクロソフトだから
かなぁ(^^;
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
編 集 後 記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
こうやって上からゆっくり見ると、何のメルマガなんだかさっぱりわかりませ
んね（笑）いかんいかん(^^;
そうそう、ゲームといえばわたしが学生のころ平林久和さんと言うその筋では結構
有名な方がうちの学校にこられ、何度かお話を聞いたことがあります。その中で一
番印象に残ったのは
平林さん「ゲームを作るということは、女の子(異性)に接するのと非常に
よく似ています。例えば一緒に歩いていて“寒くない？”とか、
歩く速さを相手に合わせたり、そういう相手を気遣うやさしさ
が一番大切なんです」
これはゲームだけじゃないんですよね。Webサイトを作る上にあって一番大切なこと
なんだと今特に思います。どれだけ“相手”のことを考えられるかということです。
そうそう、ポストペットを作った八谷和彦さんのお話も聞いたことがあるんですが、
それはまた別の機会に( ^.^)( -.-)( _ _)
久しぶりに映画見に行ってきました。ロードオブザリングの先行ロードショーやって
るとの情報を上映開始一時間前に知り、クルマを飛ばして向かったんですがついたと
たん売り切れと見事に玉砕。せっかくなんで何か見てこうということで、オーシャンズ
11とハリーポッターの激しい葛藤の末(約3秒)、あんまり期待してなかったんですが来
月1日で公開終了ということでハリポタに決定。が、始まってみるとこれが意外にはま
りました（笑）結構好きかも(^^;
久々に見入っちゃいましたねー。話自体にビックリすることはないんですが、見終わ
った後に楽しい気持ちにさせてくれます。どっちかというと学園物なんですよね。な
んか金田一っぽいというか(^^; そこがまた私のツボを刺激してくれちゃったんですが。
早くDVD出ないかなぁ、続編でも可(笑)
続編といえばマトリックスとXメンはいつ公開なのだ？スターウォーズは今年でしたっ
け。まぁ、何はともあれ売れ切れてくれてありがとう（笑）
・ハリー・ポッター公式ウェブサイト
http://harrypotter.warnerbros.co.jp/
完全に見た人向け。意外に面白い(^-^)
私はグリフィンドールでした。
相変わらずとりとめもない文章ですな。
では、今度は金曜日にお会いしましょう！ (^-^)/~~
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
【 Webプログラミング Code Sample 】
発 行 ： ichikoro.com
発行責任者 ： 勝部 麻季人
< katsube@ichikoro.com >
発行部数 ： 1694部(前回)
Webサイト ： < http://www.ichikoro.com/webp/ >
お問い合わせ先 ： < mm-webp@ichikoro.com >
Powerd by まぐまぐ
All Right Reserved, CopyRight(C) 2001 Webプログラミング Code Sample
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
