プログラム フォームの作成。

Cgi upload - perlmeme.org で紹介されている、ファイルアップロードのための実用的なコードの、HTML フォーム作成部分を確認します。

# CGI オブジェクト作成

my $q = new CGI;



# HTTP ヘッダ

print $q->header;



# HTML ヘッダ

print $q->start_html(

  -title => "An example file upload web page",

);



# 見出し, フォームスタート

print $q->h3('Use this form to upload a local file to the wev server'),

      $q->stat_multipart_form(

        -name => 'main_form');



# ファイルフィールド

print 'Enter a filename, or click on the browse button to choose one: ',

      $q->filefield(

        -name => 'filename',

        -size => 40,

        -maxlength => 80);



# サブミットボタン

print $q->hr;

print $q->submit( -value => 'Upload the file');

print $q->hr;



# フォームエンド

print $q->end_form;

このプログラムコードは、英語をベースに書かれているので、日本語ベースで利用するには、HTTP ヘッダを出力するメソッド header() で、文字コードの設定を追加する必要があります。

今回は、この中から「 CGI オブジェクトの作成」と「 HTTP ヘッダの作成 」および「 HTML ヘッダの作成 」を確認します。

CGI オブジェクトの作成

まず、モジュール CGI.pm を「 オブジェクト指向スタイル 」で利用するために、新しい CGI オブジェクトを作成します。それから、HTTP ヘッダと HTML ヘッダを作成します。

「 オブジェクト指向スタイル 」での利用は、(0xb0) で確認しました。

# CGI オブジェクト作成

my $q = new CGI;



# HTTP ヘッダ

print $q->header;



# HTML ヘッダ

print $q->start_html(

  -title => "An example file upload web page",

);

僕は普段、CGI "新しい問い合わせオブジェクトの作成" - perldoc.jp の例に倣い、次の様にしてオブジェクトを作成しますが、上記の様なスタイルでも問題ない様です。

my $q = CGI->new;

HTTP ヘッダ作成

HTTP ヘッダの作成では、日本語表示を可能にするために、パラメータ「 -charset 」を指定することにします。HTML 上の表示を英語だけで済ませるつもりなら、この設定は不要です。

メソッド header() の各パラメータは、(0xd0) 等で確認しました。

# パラメータ -charset で EUC-JP を指定

print $q->header( -charset => 'euc-jp');

HTML ヘッダ作成

(0xe3) で確認した通り、日本語表示を行う場合は、メソッド header() の設定のみで問題ありませんが、僕は HTML ヘッダでも、次の様に日本語の設定をする様にしています。ついでにタイトルも変更します。

# HTML ヘッダ

print $q->start_html(

  # -title => "An example file upload web page",

  -title => "ファイルロードの Web ページ例",

  -lang  => 'ja',

  -encoding => 'euc-jp',

);

HTTP ヘッダと HTML ヘッダでの日本語設定

上述した通り、日本語の設定を行う場合は、HTTP ヘッダで設定してあげれば、日本語の文字列が文字化けしないことを確認しています。

しかしながら、HTML ページの日本語設定についての理解がしっかりしていなかった僕は、"念のため" HTML ヘッダ側でも日本語の設定を行っていました。

なぜならば、Web 系の情報が掲載されたページでは HTML ヘッダのみ、ネットワーク系のページでは HTTP ヘッダのみの記述に終始する場合がほとんどで、双方の関係について、確たる理解を得ることが出来なかったからです。

そうした中で、今回の記事をきっかけに、改めて Web を徘徊したところ、双方の情報が丁寧に解説された Web ページを発見しました。

 文字コード宣言は行いましょう(HTML) - Web 標準普及プロジェクト

このページによって、HTTP ヘッダ側で日本語設定を行えるのであれば、HTML ヘッダ側での設定は不要であることをはっきり確認出来ました。ありがとうございます。

この Web サイトの "Web標準化Tips" は、Web サイト構築に関わる場合にとても役立つ ( 知りたいことが書いてある ) 様に思えるので、今後も参照していく予定です。いいサイト見つけたな。

0x111 -> 0x112 へ

次回は、HTML フォームの作成部分を確認します。


参考情報は書籍「 初めての Perl 第 6 版 」を中心に perldoc, Wikipedia および各 Web サイト。それと詳しい先輩。

目次 - Perl Index