データの受け渡し

  1. フォームと CGI
  2. URL とパラメータ
  3. PHP から JavaScript へ

  1. フォームと CGI

      FORM 要素は,ホームページにおいて,ユーザからの情報を受け取るために使用される要素です.例えば,ホームページを通してのアンケートや,ネットワークショッピング等に使用されます.しかし,単にフォームを作成しただけでは,ほとんど意味を持ちません.フォームを介して入力されたデータが,Web サーバに送られ,何らかの処理をされてこそ意味を持ってきます.そこで,CGI ( Common Gateway Interface )が必要になってきます.

      CGI は,外部のプログラム(ここでは,フォームを含んだホームページ)が,Web サーバとの間で情報を授受するための標準的な方法を規定するものです.この方法を実現するプログラムのことを,CGI プログラムと呼び,Web サーバに準備しておく必要があります.CGI プログラムは,どのようなプログラミング言語でも書くことが出来ます.また,UNIX のシェルスクリプトのように,スクリプト言語を使用することも可能です.

      フォームを介してサーバにデータを送信すると,CGI プログラムは,標準入力からの文字列データとして送信されたデータを読み込みます.また,CGI プログラムからブラウザに情報を送る場合は,基本的に,送る情報を標準出力へ出力すれば良いことになります.ただし,そのままでは,ブラウザがサーバから送られてきた情報をどのように扱って良いか分かりません.そこで,CGI プログラムは,必要な出力を行う前に,HTTP ヘッダを出力してやる必要があります.ヘッダを出力後,空行を1行だけ出力し,その後必要な情報を出力します.

      HTTP ヘッダには非常に多くのものが存在しますが,最もよく使用されるのは,情報の形式( MIME タイプ)を指定する Content-type というヘッダです.例えば,MIME タイプが text/html の場合(コメントは,text/plain の場合)は,
    printf("Content-type: text/html\n\n");	 // printf("Content-type: text/plain\n\n");
    			
    の後に,必要な情報を出力することになります.例えば,C 言語で CGI を記述した場合は,以下のようになります(クライアントから送られてきたデータを,そのまま返すだけですが).

    #include <stdio.h>
    
    int main()
    {
    	char str[1000];
    
    	printf("Content-type: text/html\n\n");   // HTTP ヘッダの送信
    
    	printf("<HTML>\n");
    	printf("<HEAD>\n");
    	printf("	<TITLE>FORM と CGI</TITLE>\n");
    	printf("	<LINK REL=\"stylesheet\" TYPE=\"text/css\" HREF=\"../../master.css\">\n");
    	printf("	<META HTTP-EQUIV=\"Content-Type\" CONTENT=\"text/html; charset=utf-8\">\n");
    	printf("</HEAD>\n");
    	printf("<BODY CLASS=\"white\">\n");
    
    	printf("	<H1 CLASS=\"center\">送信されたデータ</H1>\n");
    	while (scanf("%s", str) != EOF) {
    		printf("%s<BR>\n", str);
    	}
    
    	printf("</BODY>\n");
    	printf("</HTML>\n");
    
    	return 0;
    }
    			

      以下に示す 2 つの例では,ENCTYPE を変えて同じデータを送信しています.なお,CGI プログラム( test.cgi )は,上に示したように,C 言語で記述してあります(このサーバでは実行できません).なお,送信ボタンの下の枠内は,FORM 要素内のソースプログラムです.

    ENCTYPE="application/x-www-form-urlencoded" の場合


    性別    男性
       女性
    好きな野菜   キャベツ
      大根
      ジャガイモ
      トマト
    好きな果物   

    <FORM ACTION="test.cgi" METHOD="post" ENCTYPE="application/x-www-form-urlencoded">
    	<LABEL>氏名: </LABEL><INPUT TYPE="text" NAME="shimei" STYLE="font-size: 90%"></LABEL><BR>
    	<FIELDSET>
    		<LEGEND>性別</LEGEND>
    	  <INPUT TYPE="radio" NAME="sex" VALUE="Male"> 男性<BR>
    	  <INPUT TYPE="radio" NAME="sex" VALUE="Female"> 女性<BR>
    	</FIELDSET>
    	<FIELDSET>
    		<LEGEND>好きな野菜</LEGEND>
    	 	<INPUT TYPE="checkbox" NAME="v1" VALUE="kyabetu"> キャベツ<BR>
    	 	<INPUT TYPE="checkbox" NAME="v2" VALUE="daikon"> 大根<BR>
    	 	<INPUT TYPE="checkbox" NAME="v3" VALUE="jagaimo"> ジャガイモ<BR>
    	 	<INPUT TYPE="checkbox" NAME="v4" VALUE="tomato"> トマト<BR>
    	</FIELDSET>
    	<FIELDSET>
    		<LEGEND>好きな果物</LEGEND STYLE="font-size: 90%">
    	  <SELECT MULTIPLE SIZE="3" NAME="fruit" STYLE="font-size: 90%">
    		  <OPTION VALUE="orange"> 蜜柑 </OPTION><BR>
    		  <OPTION VALUE="apple"> 林檎 </OPTION><BR>
    		  <OPTION VALUE="grape"> 葡萄 </OPTION><BR>
    	  </SELECT>
    	</FIELDSET>
    	<P STYLE="text-align: center"><INPUT TYPE="submit" VALUE="送信" STYLE="font-size: 90%"></P>
    </FORM>
    			

    ENCTYPE="text/plain" の場合


    性別    男性
       女性
    好きな野菜   キャベツ
      大根
      ジャガイモ
      トマト
    好きな果物   

    <FORM ACTION="test.cgi" METHOD="post" ENCTYPE="text/plain">
    	<LABEL>氏名: </LABEL><INPUT TYPE="text" NAME="shimei" STYLE="font-size: 90%"></LABEL><BR>
    	<FIELDSET>
    		<LEGEND>性別</LEGEND>
    	  <INPUT TYPE="radio" NAME="sex" VALUE="Male"> 男性<BR>
    	  <INPUT TYPE="radio" NAME="sex" VALUE="Female"> 女性<BR>
    	</FIELDSET>
    	<FIELDSET>
    		<LEGEND>好きな野菜</LEGEND>
    	 	<INPUT TYPE="checkbox" NAME="v1" VALUE="kyabetu"> キャベツ<BR>
    	 	<INPUT TYPE="checkbox" NAME="v2" VALUE="daikon"> 大根<BR>
    	 	<INPUT TYPE="checkbox" NAME="v3" VALUE="jagaimo"> ジャガイモ<BR>
    	 	<INPUT TYPE="checkbox" NAME="v4" VALUE="tomato"> トマト<BR>
    	</FIELDSET>
    	<FIELDSET>
    		<LEGEND>好きな果物</LEGEND>
    	  <SELECT MULTIPLE SIZE="3" NAME="fruit" STYLE="font-size: 90%">
    		  <OPTION VALUE="orange"> 蜜柑 </OPTION><BR>
    		  <OPTION VALUE="apple"> 林檎 </OPTION><BR>
    		  <OPTION VALUE="grape"> 葡萄 </OPTION><BR>
    	  </SELECT>
    	</FIELDSET>
    	<P STYLE="text-align: center"><INPUT TYPE="submit" VALUE="送信" STYLE="font-size: 90%"></P>
    </FORM>
    			

      CGI プログラムを C/C++ で記述した場合,受け取った文字列から必要な情報を切り取るなど,多少面倒な処理が必要です,さらに,プログラム自身,サーバへ転送した後,そこでコンパイルしてやる必要があります.しかし,PHP で記述すると,コンパイルの必要はありませんし,必要なデータが,METHOD="get" の場合は定義済み変数 $_GET (配列変数)に,また,METHOD="post" の場合は定義済み変数 $_POST (配列変数)に,代入され受け渡されるため,処理が非常に簡単になります.以下に示す 2 つの例においては,下に示すように,CGI プログラムを PHP で記述しています( C の場合と同様,受け取ったデータを送り返すだけです).
    <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    	<TITLE>FORM と CGI</TITLE>
    	<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
    	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    </HEAD>
    	<H1 CLASS="center">送信されたデータ</H1>
    	<PRE>
    		<?php
    			print_r($_GET);   // METHOD="post" の場合は,$_POST
    		?>
    	</PRE>
    </BODY>
    </HTML>
    			

    METHOD="get" の場合


    性別    男性
       女性
    好きな野菜   キャベツ
      大根
      ジャガイモ
      トマト
    好きな果物   

    <FORM ACTION="test1.php" METHOD="get">
    	<LABEL>氏名: </LABEL><INPUT TYPE="text" NAME="shimei" STYLE="font-size: 90%"></LABEL><BR>
    	<FIELDSET>
    		<LEGEND>性別</LEGEND>
    	  <INPUT TYPE="radio" NAME="sex" VALUE="Male"> 男性<BR>
    	  <INPUT TYPE="radio" NAME="sex" VALUE="Female"> 女性<BR>
    	</FIELDSET>
    	<FIELDSET>
    		<LEGEND>好きな野菜</LEGEND>
    	 	<INPUT TYPE="checkbox" NAME="v1" VALUE="kyabetu"> キャベツ<BR>
    	 	<INPUT TYPE="checkbox" NAME="v2" VALUE="daikon"> 大根<BR>
    	 	<INPUT TYPE="checkbox" NAME="v3" VALUE="jagaimo"> ジャガイモ<BR>
    	 	<INPUT TYPE="checkbox" NAME="v4" VALUE="tomato"> トマト<BR>
    	</FIELDSET>
    	<FIELDSET>
    		<LEGEND>好きな果物</LEGEND>
    	  <SELECT MULTIPLE SIZE="3" NAME="fruit" STYLE="font-size: 90%">
    		  <OPTION VALUE="orange"> 蜜柑 </OPTION><BR>
      		<OPTION VALUE="apple"> 林檎 </OPTION><BR>
    		  <OPTION VALUE="grape"> 葡萄 </OPTION><BR>
    	  </SELECT>
    	</FIELDSET>
    	<P STYLE="text-align: center"><INPUT TYPE="submit" VALUE="送信" STYLE="font-size: 90%"></P>
    </FORM>
    			

    METHOD="post" の場合


    性別    男性
       女性
    好きな野菜   キャベツ
      大根
      ジャガイモ
      トマト
    好きな果物   

    <FORM ACTION="test2.php" METHOD="post">
    	<LABEL>氏名: </LABEL><INPUT TYPE="text" NAME="shimei" STYLE="font-size: 90%"></LABEL><BR>
    	<FIELDSET>
    		<LEGEND>性別</LEGEND>
    	  <INPUT TYPE="radio" NAME="sex" VALUE="Male"> 男性<BR>
     		<INPUT TYPE="radio" NAME="sex" VALUE="Female"> 女性<BR>
    	</FIELDSET>
    	<FIELDSET>
    		<LEGEND>好きな野菜</LEGEND>
    	 	<INPUT TYPE="checkbox" NAME="v1" VALUE="kyabetu"> キャベツ<BR>
    	 	<INPUT TYPE="checkbox" NAME="v2" VALUE="daikon"> 大根<BR>
    	 	<INPUT TYPE="checkbox" NAME="v3" VALUE="jagaimo"> ジャガイモ<BR>
    	 	<INPUT TYPE="checkbox" NAME="v4" VALUE="tomato"> トマト<BR>
    	</FIELDSET>
    	<FIELDSET>
    		<LEGEND>好きな果物</LEGEND>
    	  <SELECT MULTIPLE SIZE="3" NAME="fruit" STYLE="font-size: 90%">
    		  <OPTION VALUE="orange"> 蜜柑 </OPTION><BR>
    	 		<OPTION VALUE="apple"> 林檎 </OPTION><BR>
    		  <OPTION VALUE="grape"> 葡萄 </OPTION><BR>
    	  </SELECT>
    	</FIELDSET>
    	<P STYLE="text-align: center"><INPUT TYPE="submit" VALUE="送信" STYLE="font-size: 90%"></P>
    </FORM>
    			

  2. URL とパラメータ

      単に,特定のデータを指定したページに受け渡すだけであれば,下に示す例のように,URL の最後に ? をつけて受け渡したいパラメータを記述することによって可能です.test3.php,または,test3.htm をクリックすると,
    <A HREF="test3.php?par1=10&par2=abc">
    <A HREF="test3.htm?par1=10&par2=abc">
    			
    という記述によって,2 つのパラメータを test3.php,または,test3.htm に送っています.test3.php は,受け取ったパラメータを表示しているだけであり,以下に示すように,METHOD="get" の場合に対する CGI プログラムと全く同じものです.なお,test3.php では,参考のため,JavaScript によるパラメータの受け取りも行っています.JavaScript だけを使用する場合は,test3.htm のように,通常の HTML ファイルで構いません.

    test3.php

    <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    	<TITLE>データの受け渡し</TITLE>
    	<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
    	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    	<SCRIPT TYPE="text/javascript">
    		function GetParameter()
    		{
    			let result = new Array();
    			if(1 < window.location.search.length) {
    							// 最初の1文字 (?記号) を除いた文字列を取得する
    				let str = window.location.search.substring(1);
    							// 区切り記号 (&) で文字列を配列に分割する
    				let param = str.split('&');
    				for(let i1 = 0; i1 < param.length; i1++ ) {
    							// パラメータ名とパラメータ値に分割する
    					let element = param[i1].split('=');
    					let Name    = decodeURIComponent(element[0]);
    					let Value   = decodeURIComponent(element[1]);
    							// パラメータ名をキーとして連想配列に追加する
    					result[Name] = Value;
    				}
    			}
        		return result;
    		}
    	</SCRIPT>
    </HEAD>
    <BODY CLASS="white">
    	<H1 CLASS="center">送信されたデータ</H1>
    	<H3>PHP による方法</H3>
    	<PRE>
    		<?php
    			print_r($_GET);
    		?>
    	</PRE>
    	<H3>JavaScript による方法</H3>
    	<SCRIPT TYPE="text/javascript">
    		let result = GetParameter();
    		document.write(result['par1'] + "<BR>");
    		document.write(result['par2'] + "<BR>");
    	</SCRIPT>
    </BODY>
    </HTML>
    			

    test3.htm

    <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    	<TITLE>データの受け渡し</TITLE>
    	<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
    	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    	<SCRIPT TYPE="text/javascript">
    		function GetParameter()
    		{
    			let result = new Array();
    			if(1 < window.location.search.length) {
    							// 最初の1文字 (?記号) を除いた文字列を取得する
    				let str = window.location.search.substring(1);
    							// 区切り記号 (&) で文字列を配列に分割する
    				let param = str.split('&');
    				for(let i1 = 0; i1 < param.length; i1++ ) {
    							// パラメータ名とパラメータ値に分割する
    					let element = param[i1].split('=');
    					let Name    = decodeURIComponent(element[0]);
    					let Value   = decodeURIComponent(element[1]);
    							// パラメータ名をキーとして連想配列に追加する
    					result[Name] = Value;
    				}
    			}
        		return result;
    		}
    	</SCRIPT>
    </HEAD>
    <BODY CLASS="white">
    	<H1 CLASS="center">送信されたデータ</H1>
    	<SCRIPT TYPE="text/javascript">
    		let result = GetParameter();
    		document.write(result['par1'] + "<BR>");
    		document.write(result['par2'] + "<BR>");
    	</SCRIPT>
    </BODY>
    </HTML>
    			

  3. PHP から JavaScript へ

      場合によっては,PHP によって計算した結果などを JavaScript のプログラムに渡したい場合があります.上に述べた URL のパラメータを利用しても可能ですが,以下に示す方法( test4.php )を使用すれば,同じページ内で可能になります.

    test4.php

    <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    	<TITLE>データの受け渡し</TITLE>
    	<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
    	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    </HEAD>
    <BODY CLASS="white">
    <?php
    	$x[0] = "fig0.jpg";   // PHP で得られた結果
    	$x[1] = "fig1.jpg";   // PHP で得られた結果
    ?>
    	<SPAN ID="a0" STYLE="display:none"><?php echo $x[0] ?></SPAN>
    	<SPAN ID="a1" STYLE="display:none"><?php echo $x[1] ?></SPAN>
    	<SCRIPT TYPE="text/javascript">
    		let x = new Array();
    		x[0]  = document.getElementById("a0").innerHTML;
    		x[1]  = document.getElementById("a1").innerHTML;
    		document.write(x[0] + "<BR>");
    		document.write(x[1] + "<BR>");
    	</SCRIPT>
    </BODY>
    </HTML>