CGIを用いたWebフォームの作り方を基礎から応用まで丁寧に解説します。クライアント側のHTMLフォーム作成から、CGIスクリプトを使ったサーバー側処理まで一通りカバーし、初心者でも理解できるステップごとの手順を紹介します。これにより、ユーザー入力に対応したシンプルなWebアプリを実装できるようになります。
管理人本記事の読者層は以下の方を想定しています。
- CGIを使ったフォーム作成を初めて試みる初心者
- フォームを利用したWebアプリに挑戦したいエンジニア志望の方
- Webサイトにインタラクティブな機能を加えたいデザイナーやディレクター
CGIとは？フォーム作りの基礎知識
CGI（Common Gateway Interface）は、クライアントからの要求に応じてWebサーバが外部プログラムを実行し、その結果をブラウザに返す仕組みを指します。この手法を利用することで、入力フォームなどを介してユーザーのデータを受け取り、サーバー側で処理を行って動的に結果を表示するWebアプリケーションを構築できます。CGIの仕組みを理解することは、基礎的なWebアプリ作りの第一歩です。
それでは、具体例を示しておきましょう。
CGIを動かすには、「サーバー側」の設定と「CGI側」の設定の二つが必要です。
- (1) HTML側…..クライアント側/ブラウザー側
- (2)CGI側…..サーバー側
クライアント側：HTMLフォームの作り方
まず、ユーザーが入力するフォームをHTMLで作成します。この入力フォームは、サーバーにデータを送信するためのインターフェイスとなります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>入力フォーム</title>
</head>
<body>
<form action="cgi-bin/cal.sh" method="GET">
<h3>5つの数字を入力してください。</h3>
<p>
数値1:<input type="text" name="value1" size="3"><br>
数値2:<input type="text" name="value2" size="3"><br>
数値3:<input type="text" name="value3" size="3"><br>
数値4:<input type="text" name="value4" size="3"><br>
数値5:<input type="text" name="value5" size="3"><br>
</p>
<p>
<input type="submit" value="送信"><input type="reset" value="リセット">
</p>
</form>
</body>
</html>上記のフォームでは、method="GET"を指定しているため、入力したデータはURLに連結されてCGIに送信されます。入力内容をサーバー側で受け取り、処理を行うための準備が整いました。
サーバー側：CGIスクリプトの作成方法
続いて、サーバー側で受け取ったデータを処理するCGIスクリプトを作成します。今回はシェルスクリプトを使って、フォームで入力された5つの数値を合計する例を紹介します。
#!/bin/bash
# 初期設定
SUM=0
# 送信されたデータを解析
VALUE=$(echo "${QUERY_STRING}" | tr '&' '\n' | sed 's/[^0-9]*//g')
# 合計処理
for i in ${VALUE}; do
SUM=$((SUM + i))
done
# HTML結果を返す
cat << EOF
Content-type: text/html; charset=UTF-8
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>加算結果</title>
</head>
<body>
<h3>5つの数値の合計は：</h3>
<p>${SUM}</p>
</body>
</html>
EOFこのスクリプトの解説：
- QUERY_STRING：
GETメソッドで送信されたデータを解析し、入力された5つの数値を抽出します。 - trコマンドとsedコマンドを使用し、不要な記号を削除して数値のみを取得しています。
- for文で合計値を計算し、結果をHTMLで表示します。
スクリプトの最初に#!/bin/bashを記載することで、シェルスクリプトとして実行できるように設定しています。
CGIスクリプトの実行確認とデバッグ方法
フォームの送信からCGIスクリプトの実行までを確認するには、Webサーバの設定やスクリプトのファイル権限も重要です。
パーミッションの確認
CGIスクリプトに実行権限が必要です。次のコマンドで確認し、必要に応じて権限を付与してください。
chmod +x cgi-bin/cal.shサーバー設定
CGIスクリプトの動作確認には、WebサーバがCGIを許可しているか確認してください。Apacheなどを使う場合は、次の設定を有効にすることが推奨されます。
ScriptAlias /cgi-bin/ /var/www/cgi-bin/
<Directory "/var/www/cgi-bin">
Options +ExecCGI
AddHandler cgi-script .sh
</Directory>デバッグ
CGIスクリプトのエラーログを確認し、問題点を特定します。Apacheの場合、/var/log/apache2/error.logでエラーを確認できます。
CGIフォーム作成の応用と活用法
CGIを使うことで、フォームの入力データに対するさまざまな処理を可能にし、データの保存や分析、条件分岐など柔軟に対応できます。たとえば、ユーザーからのアンケートやコメントの保存、システムのステータス確認ツールなど、さまざまなアプリケーションに応用できます。
まとめ
今回の記事では、CGIを使ったフォームの作り方と仕組みについて解説しました。初めてCGIに触れる方でも、基本的なフォームの構築から動作確認まで、一連の流れが理解できたかと思います。ぜひCGIの基本を理解して、簡単なWebアプリケーションの構築に挑戦してみてください。
- CGIの基本構造とフォーム作成手順を学び
- CGIスクリプトでのデータ処理方法を理解
- Webサーバの設定やデバッグ方法を把握
次回の記事をご期待下さい。どうぞよろしくお願いいたします。
関連リンク
コメント