2011年8月20日土曜日

Uber-Uploader 6.8.2 の使い方(その2)

この記事はUber-Uploader 6.8.2 の使い方(その1)からの続きです。
Uber-Uploader 6.8.2 の使い方(その1)
Uber-Uploader 6.8.2 の使い方(その3)
Uber-Uploader 6.8.2 の使い方(その4)

今回はUber-Uploader を自分用にアレンジする方法を述べよう。

(1) アップロード受付php(ubr_file_upload.php)をアレンジ
まず,アレンジしたいのが,アップローダーの受付のページである。それは「ubr_file_upload.php」が行っている。ちなみに,私は「ln -s ubr_file_upload.php index.php」として,index.php にシンボリックリンクを張っている。apache の設定で,index.html 以外に index.php を使うことを明示しておくと,URLでindex.php を省略できて便利なので。

さて,以下に ubr_file_upload.php で具体的にいじると良い部分を列挙しよう。

(1-a) web ページのタイトル
オリジナルの69行目にある
<title>Uber-Uploader - Free File Upload Progress Bar</title>
をいじると,web ページのタイトルをいじることができる。私は ubr_default_config.php に加えておいた $_CONFIG['my_title'] を使うために,以下のようにしている。
<title><?php print $_CONFIG['my_title']; ?> Uploader</title>

(1-b) 固有の css ファイルと背景等の指定
オリジナルの74行目に Uber-Uploader 用の css ファイルの記述があるが,それとは別に css ファイルを読みこませるには,以下のように記述しておく。
<link rel="stylesheet" type="text/css" href="../main.css">
オリジナルの123行目から,web ページの本体(body)が始まる。背景やサイト全体に渡る設定は,<body> の中や <body> の直後(<div id="main_container">の直前)に書くのがよい。私の場合は <body> を以下のようにしている。
<body class="yellow" onLoad="iniFilePage()">
ここで,body の中の class="yellow" の設定は,別に用意した css ファイルに以下のように書いてある。
body.yellow{ background-image: url(./images/xxxxxxxx.gif); }

(1-c) web 本文の記述
web の本文は,オリジナルの174行目にある「<!-- Add Your Form Values Here -->」の部分
<div id="upload_form_values_container"> と </div>に囲まれている領域)に書く。
そこでは,挨拶があり,どんな種類のファイルが,どの程度のファイルサイズまでアップロードできるか,や,その他の注意点を書いている。

(1-d) パラメータの受け取り
web ページでは,ファイルだけではなくて,その他の情報(メールアドレス,氏名等)や,コメントを一緒に入力してもらって,それを後で受け取りたい。そのためには,web 本文の記述の中に,以下のようなものを書く。
名前(必須)
<input type="text" id="OWNER" name="OWNER" maxlength="50" size="50" style="ime-mode: active;"> 
メールアドレス(必須)
<input type="text" id="EMAIL" name="EMAIL" maxlength="50" size="50" style="ime-mode: inactive;">
コメント(任意)
<textarea cols="70" rows="4" name="COMMENT" style="ime-mode: active; font-size: 100%;"> </textarea>
(ここで,OWNER や EMAIL というのがパラメータの名前であり,表示を50文字分にしている。また,アップロードした人の名前やメールアドレスなので,入力の最大文字数をここでは 50 文字に制限している。ime-mode: active というのは日本語入力モードにしろ,ime-mode: inactive は日本語入力をキャンセルさせ半角英数字モードにしろ,という意味なので,あってもなくてもよい。)また,コメントは量が多い可能性があるので textarea を使っている。
 また,id="xxx" は,後で JavaScript必須入力をチェックするために入れておく。

パラメータを使う(受け取るには)以下の3つのパターンがある(ここではパラメータ EMAIL について書く)。
(I) アップロード前(ubr_file_upload.php の中)では,$_POST['EMAIL'] として使える。
(II) アップロード後に「ubr_upload.pl」の中で,$query->param("EMAIL"); として受け取れる。
(III) アップロード後に「ubr_finished.php」の中で,$_POST_DATA['EMAIL'] として受け取れる。
もし,入力時やアップロード開始直後にパラメータのチェックは,ubr_file_upload.js の中に特定のパラメータのチェックルーチンを加えればよいが,これに関しては後で述べることにする。

(1-e) ファイル指定ボックスの移動
<div id="file_picker_container"></div>
<div id="upload_slots_container"></div>
は,それぞれ「ファイル指定ボックス」と「指定されたファイルの表示スペース」である。デフォルトでは上の方に出るので,適当に web 本文の下に入れるとよいかもしれない。


次にubr_upload.pl をアレンジする。

(2) ubr_upload.pl のアレンジ
(2-a) アップロードファイルのリストファイル(私が作ったもの)
アップロードファイルのリストがあると,後で読みだす時に便利だったりする。そこで,アップローダーのルーチンでログを書かせたいのだが,Uber-Uploader のオリジナルのログファイルは結構見にくい。そこで,私流のログファイルを書き出させている。書き出させるのは ubr_upload.pl の中である。場所はオリジナル355行目にある # Redirect or output と書かれた行の直前がよい。

具体的なルーチンは以下のとおり。
# output uploadlist file
# Create log file
my $list_file = $config{'upload_dir'}.'uploadlist';

my $timestr=&GetDateStr.'  '.&GetTimeStr;
my $in_name = $query->param("OWNER");
my $in_email = $query->param("EMAIL");
my $in_comment = $query->param("COMMENT");
$in_comment =~ s/\r\n/<br>/g;
$in_comment =~ s/\r/<br>/g;
my $in_host = gethostbyaddr(pack("C4", split(/\./, $config{'remote_addr'})), 2);

my $list_handle = new IO::File;
$list_handle->open(">> $list_file") or die("Failed to open uploadlist file: $!");

for my $file_slot (keys %uploaded_files){
    my $file_name = $uploaded_files{$file_slot}{'file_name'};
    my $file_size = $uploaded_files{$file_slot}{'file_size'};
    my $file_type = $uploaded_files{$file_slot}{'file_type'};

    if ($file_name =~ /(.*)\.([0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9])_upl/) {
        $file_name = $1;
    }
    $list_handle->print("$file_name\t");
    $list_handle->print("$timestr\t");
    $list_handle->print("$file_size bytes\t");
    $list_handle->print("$in_name\t");
    $list_handle->print("$in_email\t");

    $list_handle->print($config{'remote_addr'}.' ('.$in_host.")\t");
    $list_handle->print($config{'http_user_agent'}."\t");

    $list_handle->print("$in_comment\n");
}

$list_handle->close();
chmod 0664, $list_handle;
ここで,ログのファイル名は uploadlist と固定している。各アップロードファイルごとに,ファイル名,アップロード日時,サイズ,アップロードした人の氏名,メールアドレス,ホストIP,ホスト名,アクセス時の User Agent 情報,コメントをタブで区切って一行ずつに書いている。ホスト名は,ホストのIPアドレスから得ている。日付と時刻は,後で加えたサブルーチンを使っている。また,コメントの中の改行マークを後々の表示のために <br> に置き換えている。

(2-b) サブルーチンの追加
日付と時刻の文字列を得るために,以下のサブルーチンを,オジリナルの402行目以下(START SUB ROUTINES の下)に置いた。
#########################################
#       Get Date String
#########################################
sub GetDateStr {
    my(@GTS_date_array);
    @GTS_date_array = localtime(time);
    my($dum);
    $dum=($GTS_date_array[5]+1900)."/".&ZeroPadding($GTS_date_array[4]+1)."/".&ZeroPadding($GTS_date_array[3]);
    return $dum;
}

#########################################
#       Get Time String
#########################################
sub GetTimeStr {
    my(@GTS_date_array);
    @GTS_date_array = localtime(time);
    my($dum);
    $dum=&ZeroPadding($GTS_date_array[2]).":".&ZeroPadding($GTS_date_array[1]).":".&ZeroPadding($GTS_date_array[0]);
    return $dum;
}

#########################################
#       ZeroPadding
#########################################
sub ZeroPadding {
    my($dum)=sprintf("%d",@_);
    $dum="00".$dum;
    $dum=substr($dum,(length($dum)-2));
    return $dum;
}

次回に続く

0 件のコメント: