2011年8月20日土曜日

Uber-Uploader 6.8.2 の使い方（その2）

（追記）2017/6に，FreeBSD で fine-uploader を使ってみた（その1）というのを書いた。 そこでは fine-uploader という JavaScript のライブラリを使ったファイルのアップローダーについて書いている。 Uber Uploader はすでに古く更新されていないので，fine-uploader など新しいアップロードライブラリを使うことをお薦めする。
この記事は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 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)