FlashとCGI

FlashとCGI

　CGIとFlashを連携させるには、まずはCGIというものを理解しないといけません。いつも何気なく掲示板やお店のフォームに名前やコメントを入力してデータを送信したり、受け取っていますが、実は裏でこのCGIというシステムが働いているからなのです。ブラウザで色々なサイトを閲覧できるのは相手がその情報をサービスしてくれているので、それらを見ることができます。しかし自分の意思を文字にして伝えたりする事ができません。これでは一方的ですね？しかしCGIを使用すると双方的（インタラクティブ）なウェブページを構築する事ができるようになります。これにFlashを組み合わせます。CGIはC、Perl、シェルスクリプトなどの言語で作る事ができます。私は一般的なPerlで説明させていただきます。今回はFlashの説明よりもCGIの説明になってしまっていますが勘弁してくださいね。

フォーム

　フォーム（HTMタグ等で作成)にはチェックボックス、ラジオボタン、プルダウンメニュー、テキストフィールド、テキストエリア、ボタン、リストボックス,ファイルフィールド,非表示フィールド（hidden）などの種類があります。

　まずはCGIを使って、どのようにして変数受け取ったり、保存したりしているのかを理解する必要があります。下記のフォームの例にして説明します。

　通常の流れでは名前、URL、コメントを入力して、送信ボタンを押すと、用意したCGIファイルが動作して、その後に表示、保存等を行います。ただ単にフォームのタグを打ち込んでHTMLファイルを作成して送信してもCGIファイルがなければ動作しません。

まずは試しに上記のフォームに入力して送信ボタンを押してみてください。（わかっている方はそのまま読んでくださいね。）

　名前とURLとコメントを入力して送信ボタンを押すと、サーバー内にあるCGIファイルに送信されて処理を行います。そして皆さんが入力したデータが見れるようになります。今回はフォームが設置されたHTMLファイルからデータを送信して、cgiファイルに表示させます。その為には下記のファイルが必要となります。さて早速下記のファイルをダウンロードして試してみましょう。HTMLファイルのフォームは名前だけ入力して送信するシンプルなタイプにしてあります。

FTPソフトを使用してファイルをサーバーへUPします。cgiが使えるサーバーを利用してください。test.cgiの最初の一行目のパスは

#!/usr/local/bin/perl　になっています。
サーバーのパスが#!/usr/bin/perlの場合は変更してください。

FTPソフトについての説明はこちら。

ファイル	ファイルの説明	パーミッション
test.htm	フォームが設置されているHTMLファイル　拡張子はhtm	644
test.cgi	CGIファイル拡張子はcgi	755
cgi-lib.pl	CGIライブラリ　拡張子はpl	755
jcode.pl	日本語変換拡張子はpl	644

DownLoadはこちらから　

上記のファイルを4つ同じディレクトリ（階層）にアップロードしてファイルの権限（パーミッション）を変えてtest.htmを開いて動作確認をしてみてください。

test.cgiのスクリプト

#!/usr/local/bin/perl

#########################################################################################
#このファイルはFLASHの枝のLesson用ファイルです。 
#http://www.1art.jp 
#########################################################################################

require './jcode.pl';
require './cgi-lib.pl';

&ReadParse;
             
print "Content-type:text/html\n\n";
print "<html><head></head><title>送信テスト</title><body>\n";
print "<center>入力完了しました。今入力した内容は以下の通りです。<hr /></center><br>\n";
print "<b>名前：</b>$in{'name'}<br>\n";
print "</body></html>";

簡単に説明します。（HTMLの部分はちょっと汚い書き方でごめんなさい。）

#はコメントとみなされます。
\nはプログラムのソース内での改行です。
ActionScriptのコメントの/*～*/、//などと一緒です。最初のパスの#だけは特別でコメントではありません。
requireはこのcgiファイルに各ライブラリの機能をこのスクリプトから使用できるようにしています。
&ReadParse;の部分では%in（ハッシュ）にフォームからの情報を処理したデータが代入されます。
Content-type:text/html はヘッダーです。\nが二回なのはHTTP 通信文本文と分ける為です。

　このページで説明したForm1のフォームのコメント部分のtextareaではセキュリティを考慮して、タグ、スクリプトを書けない様に置換演算子なども使用しています。HTML部分が長くなればprint関数を使って書くのも大変なので、ヒアドキュメントというものを使用してまとめる方法などもあります。

ヒアドキュメントを使った例

print <<EOF;
Content-type:text/html
             
 <html><head></head><title>送信テスト</title><body>
 <center>入力完了しました。今入力した内容は以下の通りです。<hr /></center><br>
 <b>名前：</b>$in{'name'}<br>
 </body></html>
EOF;

　このようにprint<<EOF;　と　EOF;の間で挟んであげればprint関数を使用する必要がなくなります。最後のEOF;はエンドトークンと呼び、最後に必ず改行してください。改行しないとエラーになります。ヘッダーの後は上記でも説明したように一行空けています。

　こんなに短いスクリプトでデータのやり取りを行えるのはcgi-lib.plのお陰であって、このライブラリを使わないのなら、下記の様に長いスクリプトとなります。

#!/usr/local/bin/perl

require './jcode.pl';

&ReadParse;

$method=$ENV{'REQUEST_METHOD'};
if($method eq 'GET'){
	$in=$ENV{'QUERY_STRING'};
}elsif($method eq 'POST'){
	read(STDIN,$in,$ENV{'CONTENT_LENGTH'});
}
@in=split(/[&;]/,$in);
foreach $i(@in){
	$i=~s/\+/ /g;
	($name,$val)=split(/=/,$i,2);
	$name=~s/%([A-Fa-f0-9]{2})/pack("c",hex($1))/ge;
	$val=~s/%([A-Fa-f0-9]{2})/pack("c",hex($1))/ge;
	$in{$name}=$val;
}


print "Content-type:text/html\n\n";
print "<html><head></head><title>送信テスト</title><body>\n";
print "<center>入力完了しました。今入力した内容は以下の通りです。<hr /></center><br>\n";
print "<b>名前：</b>$in{'name'}<br>\n";
print "</body></html>";

　送信方法がGETの場合は何たら、POSTの場合は何たら、配列inをsplitで区切って・・・見てるだけで、頭が痛くなりませんか？FORM情報を処理するのに、こんなにわけのわからない事を書かなくてはいけないのです。実はこれを理解する事も重要なのですが・・・

※cgi-libの他にFORM情報を処理する機能を持ったCGI.pmというモジュールもあります。

　長くなりましたが、サーバーに全てのファイルをアップロードしてHTMLファイルにアクセスすると、下記のテキストフィールドが表示されますから、そこに名前を入力して表示されれば成功です。

Top | Back | Next