画像ビューア

Counter: 192, today: 1, yesterday: 0

内容 †

内容
目的
ツールのURL
機能の概要
- list.cgi
- viewer.cgi
ソースイメージ
- list.cgi
- viewer.cgi
改版履歴
- 090521(初版)
- 090523
バグ管理簿

目的 †

アップした画像を閲覧する。
どうぶつの森の写真アップツール等で自動アップした画像を見るために作った。

このように

http://hinata.la.coocan.jp/doubutsu/20090309_18244401/ichiran.htm
http://hinata.la.coocan.jp/doubutsu/20090309_18244401/RUU_0001.JPG
http://hinata.la.coocan.jp/doubutsu/20090309_18244401/RUU_0002.JPG
http://hinata.la.coocan.jp/doubutsu/20090309_18244401/RUU_0003.JPG
http://hinata.la.coocan.jp/doubutsu/20090521_01400175/ichiran.htm
http://hinata.la.coocan.jp/doubutsu/20090521_01400175/RUU_0001.JPG
http://hinata.la.coocan.jp/doubutsu/20090521_01400175/RUU_0002.JPG
http://hinata.la.coocan.jp/doubutsu/20090521_01400175/RUU_0003.JPG

ディレクトリごとに整理された画像を見る時に便利。

どうぶつの森の写真アップツールはSDカードをさしてダブルクリックするだけで自動で上記のような構成でアップするので、このツールと連携するともう、ほんと便利でため息が出ちゃう。

いや、この画像ビューアだけなら、良くあるWebサービスのアルバム機能のほうが高機能だしそれやればいいのだけど、どうぶつの森の写真アップツールのようにSDカードさしてだプルクリックするだけでアップされるサイトはないだろうし、組み合わせることでパワーを発揮するツールなんです。
携帯で撮った画像とか、デジカメで撮った画像とか、なんでもこの2つのツールの組み合わせでいけますよ。SDカードさしてダブルクリックだけですよ、奥さん！！

↑

ツールのURL †

http://hinata.la.coocan.jp/doubutsu/list.cgi

↑

機能の概要 †

↑

list.cgi †

・配下のディレクトリ一覧を自動で取得し、その配下のichiran.htmへのリンクを作る。
・配下のディレクトリの配下にある画像の枚数を表示する。
・ディレクトリは以下の1枚目～3枚目の画像へのリンク(viewer.cgiを使用)も作る。
　(4枚以上ある時は"・・・・"を表示する。もっとあるよ、的な。)
・list.htmをつくり、ディレクトリの数が変更されていない限りこれを表示する。(高速化のため)

↑

viewer.cgi †

・ディレクトリと画像の名前をURLで渡すことでその画像を表示し、前後4つの画像へのリンクを自動生成する。
・最後の画像の右の小さい画像は最初の画像に、最初の画像の左の小さい画像は最後の画像にリンク。(一周しても気づかずにぐるぐる回してしまうことがあったので、1枚目の画像の時に「1枚目♪」と表示する)
・URLで渡された画像が見つからない場合はichiran.htmを表示する。
・URLで渡されたディレクトリが見つからない場合はlist.cgiを表示する。

↑

ソースイメージ †

↑

list.cgi †

#!/usr/bin/perl

$O_HEIGHT=120;
$IMAGE_DSP_NUM=3;
$HTML_FILE="./list.htm";

sub getsize{
    require "imgSz.pl";
    
    my $filename="$_[0]/$_[1]";
    my $size = -s $filename;

    open(IN, "$filename");
    binmode(IN);
    read(IN, $buf, $size);
    close(IN);

    return &imgSz::szJpeg($buf);

}
sub tagset{
    my $dirname =$_[0];
    my $date_time=$_[1];
    my $imagename=$_[2];
    my $ind=$_[3];
    my $ret="";
    my $filename="./$dirname/$imagename";


    (my $width,my $height)=&getsize("$dirname","$imagename");
    $width=int ($O_HEIGHT * ($width/$height) );
    $height=$O_HEIGHT;

    if( -f $filename){

        if($ind == $IMAGE_DSP_NUM){
            $ret=<<EOL;
            <td width ="250"><font size ="5">・　・　・　・</font></td>
EOL
            return $ret;
        }
        $ret=<<EOL;
            <td width ="250"><a  href="./viewer.cgi?$dirname&$imagename">
            <img title="$date_time $imagename" height="$height" alt="$date_time $imagename" src="./$dirname/$imagename" 
            width="$width" border="0" style="FLOAT: left; MARGIN: 0px 5px 5px 0px" /></a></td>
EOL
    }
    return $ret;
}
sub print_line{
    my $dirname = $_[0];
    my $date_time = $_[0];
    my $width=160;
    my @imgtag;
    my $images="";
    my $ind=0;
    $date_time=~s/([0-9]{4})([0-9]{2})([0-9]{2})_([0-9]{2})([0-9]{2})[0-9]{4}/$1年$2月$3日 $4時$5分/g;

    my @jpgs=glob("$dirname/*.JPG");
    my $jpegnum=@jpgs;
    for($ind=0;$ind<=$IMAGE_DSP_NUM;$ind++){
        if($ind < $jpegnum){
            $jpgs[$ind]=~s/$dirname\///;
            $imgtag[$ind]=&tagset("$dirname","$date_time","$jpgs[$ind]","$ind");
        }
        $images = $images . $imgtag[$ind];
    }

    print HTML<<"EOL";
    <tr>
    <td width="200" align="center"><a href="./$dirname/ichiran.htm">$date_time</a><br>
            <div align="right"><font size="2">$jpegnum枚♪</font></div></td>
    <td>
        <table>
        <tr>
            $images
        </tr>
        </table>
    </td>
    </tr>
EOL
}
sub modyfy_html{
    my @dirs = glob ("*");
    my $dirnum=@dirs;
    my $ind=0;
    open(DIRNUM,">./dirnum.txt");
        print DIRNUM $dirnum;
    close(DIRNMU);
    print HTML<<"EOL";
    
    <HTML>
        <HEAD>
            <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
            <TITLE>どうぶつの森　今まで撮った写真</TITLE>
        </HEAD>
    <BODY>
    <table align="center"><tr>
        <td width="120"><img src="./mew.jpg"></td>
        <td width="620"><img src="./title.JPG"></td>
        <td><img src="./aju-.jpg"></td>
    </tr></table>

    <table border="1">
EOL
    for($ind=$dirnum;$ind>=0;$ind--){
        my $dirname=$dirs[$ind];
        if( -d $dirname) {
            &print_line("$dirname");

        }
    }
    print HTML<<"EOL";
    </table>
    </BODY>
    </HTML>
EOL

}
sub check_mod{
    $lastnum=0;
    my @dirs = glob ("*");
    $thistimenum=@dirs;
    open(DIRNUM,"./dirnum.txt");
    while(<DIRNUM>){
        if($_=~/([0-9]+)/){
            $lastnum=$1;
            $numnum=$1;
        }
    }
    close(DIRNMU);

    if(($thistimenum==$lastnum) && ( -f $HTML_FILE)){
        return 0;
    }
    return 1;
}
if(1==&check_mod){
    open(HTML,">$HTML_FILE");
    &modyfy_html();
    close(HTML);
}
#print "Content-type: text/html";
print "Location:$HTML_FILE\n\n";

↑

viewer.cgi †

#!/usr/bin/perl

@miniheight=("40","20","10","5");

sub set_data{
    my @data = split(/&/,$ENV{QUERY_STRING});
    return ($data[0],$data[1]);
}

sub settitle{
    my $date_time = $_[0];

    my $thisjpg = $_[1];
    $date_time=~s/([0-9]{4})([0-9]{2})([0-9]{2})_([0-9]{2})([0-9]{2})[0-9]{4}/$1年$2月$3日 $4時$5分/g;
    return "$date_time　$thisjpg";
}
sub getsize{
    require "imgSz.pl";
    
    my $filename="$_[0]/$_[1]";
    my $size = -s $filename;

    open(IN, "$filename");
    binmode(IN);
    read(IN, $buf, $size);
    close(IN);

    return &imgSz::szJpeg($buf);

}
sub setminiimage{
        my $ret="";
        my $dirname=$_[0];
        my $jpg=$_[1];
        my $tagind=$_[2];
        my $ind=$_[3];
        my $saishosaigo="";
        my $size=3-$tagind;
        (my $width,my $height)=&getsize("$dirname","$jpg");

        $width=int ($miniheight[$tagind] * ($width/$height) );
        $height=$miniheight[$tagind];
        if($ind==0){$saishosaigo="<div align=\"center\">o</div>";}else{$saishosaigo="";}

        $ret=<<EOL;
        <td>
        <a href="viewer.cgi?$dirname&$jpg"><img height="$height" width="$width" 
        border="0" src="./$dirname/$jpg"></a><br><font size="$size">$saishosaigo</font>
        </td>
EOL

        return $ret;
}

sub print_html{
    my $left = "";
    my $right = "";
    my $ind = 0;
    my $thisnumber=0;
    my @lefttags; my @righttags;

    my $saisho="";
    my $colspan=0;
    (my $dirname,my $thisjpg)=&set_data();
    my $filename="$dirname/$thisjpg";

    if(($dirname eq "") ||  !( -d $dirname)){
        print "Location:list.htm\n\n";
    }
    if( ($thisjpg eq "") || !( -f $filename)){
        print "Location:$dirname/ichiran.htm\n\n";
    }

    my @jpgs = glob ("$dirname/*.JPG");
    my $jpgnum = @jpgs;

    my $title=&settitle("$dirname","$thisjpg");

    if($jpgnum==1){
        $colspan=1;

    }else{
        for($ind =0 ; $ind <$jpgnum ; $ind++){
            $jpgs[$ind]=~s/$dirname\///g;
            if($jpgs[$ind] eq $thisjpg){
                    $thisnumber=$ind;
            }

        }
        for($tagind =@miniheight-1 ; $tagind >=0 ; $tagind--){
            $ind=$thisnumber-$tagind - 1;
            if($ind<0){$ind = $ind + $jpgnum;}
            $lefttags[$tagind]=&setminiimage("$dirname","$jpgs[$ind]","$tagind","$ind");
            $left = $left . $lefttags[$tagind];
        }
        for($tagind =0 ; $tagind <@miniheight ; $tagind++){
            $ind=($thisnumber + $tagind + 1) % $jpgnum;
            $righttags[$tagind]=&setminiimage("$dirname","$jpgs[$ind]","$tagind","$ind");
            $right = $right . $righttags[$tagind];
        }


        if($thisnumber==0){$saishosaigo="1枚目♪";}else{$saishosaigo="";}
        $colspan=(@miniheight)*2+1;
    }
    print <<"EOL";
    Content-type: text/html
    <HTML>
        <HEAD>
            <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
            <TITLE>$title</TITLE>
        </HEAD>
    <BODY>


    <table>
        <tr>
            $left
            <td><img src="$dirname/$thisjpg"></td>
            $right
        </tr>
        <tr height ="50">
            <td colspan="$colspan" align="center"><font size="5">$saishosaigo</font></td>
        </tr>
        <tr>
            <td colspan="$colspan" align="center"><a href="$dirname/ichiran.htm"><font size="5">この日の一覧へ</font></a></td>
        </tr>
        <tr>
            <td colspan="$colspan" align="right"><a href="./list.cgi"><font size="5">今までの一覧へ</font></a></td>
        </tr>
    </table>
    </BODY>
    </HTML>
EOL

}

&print_html();

↑

改版履歴 †

↑

090521(初版) †

viewer.cgi_090521.txt

list.cgi_090521.txt

↑

090523 †

・viewer.cgiの次の画像へ、前の画像へのリンクを"→","←"ではなく、次の画像の小さい画像のリンクに修正し、だんだん小さくして各4枚表示するように変更。
・list.cgiはlist.htmが存在しない場合もlist.htmを作るロジックを追加。(今まではディレクトリが増えた場合に作る、というだけだったので、何らかの不具合でlist.htmが消えてしまった場合などにlist.htmを作り直さないという問題があった。)
・list.cgiで各ディレクトリ配下の画像枚数を表示するよう修正。
・viewer.cgiは一周しても気づかずにぐるぐる回してしまうことがあったので、1枚目の画像の時に「1枚目♪」と表示する機能を追加。
・list.cgi,viewer.cgiともに画像サイズを自動的に取得して高さを固定的に指定して幅を合わせて縮小するように変更。
・list.cgi,viewer.cgiともにいろいろべた書きで書いてしまっていた箇所を修正し、汎用的に使えるように修正。

viewer.cgi_090523.txt

list.cgi_090523.txt

↑