CGIを使用してフォルダー内の画像を一覧表示

icon 項目のみ表示/展開表示の切り替え

動作環境

Windows上で動くwebサーバーでCGIとしてWindowsアプリを動作させることができること。

簡単なCGIプログラム

CGIは、HTMLファイルを表示したときに、C言語などで書かれたプログラムを呼び出して、その結果を受け取ることにより、柔軟なwebを実現するものである。次のCのプログラムをコンパイル（コマンドラインプログラムとして）し、拡張子をexeからcgiに変更し、自宅webサーバーで外部から見えるフォルダーに保存しする。名前はneko.cgi <-右クリックで対象ファイルを保存する。(IEの場合)

#include<stdio.h>
#include<string.h>

int main(int argc,char** argv ){
  printf(
    "content-type: text/html\n"
    "\n"
    "<html>\n"
    "<head>\n"
    "<title> 猫大好き </title>\n"
    "</head>\n"
    "<body>\n"
    "<p>\n"
  );
    
  if(strcmp(argv[1],"mike")==0)
          printf( "<p>三毛猫</p>");
  if(strcmp(argv[1],"rosi")==0)
          printf( "<p>ロシアンブルー</p>");

  printf(
    "</p>\n"
    "<hr>\n"
    "</body>\n"
    "</html>\n"
  );
  return 0;
}

次のhtmlファイルを用意する。名前はneko.htmlとしneko.cgiと同じフォルダーに保存する。

<html>

<head>
<meta http-equiv="Content-Type"
content="text/html; charset=x-sjis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="keywords" content="123">
<meta name="GENERATOR" content="notepad.exe">
<title>title</title>
</head>

<body>

<p><a href="neko.cgi?mike">neko1</a></p>

<p><a href="neko.cgi?rosi">neko2</a></p>
</body>
</html>

webサーバーを起動した状態で、neko.htmをブラウザから表示させるとneko1、neko２が表示され、それぞれをクリックすると漢字の猫名が表示される。

HTMLソース上のneko.cgiの後ろの?のmike,rosiのそれぞれの文字はneko.cgiのmain関数のargv[1]に保存される。
neko.cgiは標準出力にcontent-type: text/htmlと空白行を表示した後、普通のhtmlにしたがって表示しているだけである。
すなわち、通常のコマンドラインプログラムのように引数を受け取り、標準出力にhtmlソースを吐き出す動作をしている。
httpdでCGIのプログラムをperlによって実行するように設定されている場合は、拡張子cgiのファイルに対してファイルの中身を確認し、exeファイル形式の場合、perlを使わず、cgi拡張子のプログラムをexeファイルとして実行する用に設定しなければならない。

オプション　一般　拡張子 cgiを選んで編集を選択 EXE形式の実行にチェックを入れる。

これらのことからわかるように、CGIのプログラムをwebサーバー側から実行されるため、サーバに応じた言語や実行ファイルを用意しなければならず、プロバイダのサーバによっては制限を受けるものである。

フォルダーの一覧を得る

findfirstとfindnext関数を使えば実現できる。

次のソースをコンパイル（コマンドラインプログラムとして）する。xdir.cpp xdir.exe

#include <windows.h>
#include <stdio.h>

int main(int argc, char** argv){
        WIN32_FIND_DATA FindFileData;
        HANDLE hFind;
        hFind = FindFirstFile(argv[1], &FindFileData);
        if (hFind == INVALID_HANDLE_VALUE) {
                printf("検索ハンドルの取得に失敗しました\n");
                exit(1);
        }else{
                do{
                        puts(FindFileData.cFileName);
                }while(FindNextFile(hFind,&FindFileData));
                FindClose(hFind);
        }
        return 0;
}
コマンドラインで xdir *.* と入力して実行すると、そのフォルダーのファイルの一覧が表示される。

画像一覧を表示するCGI β2(Visual C++ 2005ランタイムファイルが必要)

β１では、画像フォルダーと同じフォルダーにcgiプログラムを置く必要があり、画像フォルダーがたくさんある場合はその数だけ用意する必要があった。また、読み込まれて解析されたり、セキュリティが甘いと改ざんされる可能性もある。このバージョンでは、ホームページとは別フォルダーにcgiを置くようにした。(/cgi-bin/jpg) に固定。
表示したいフォルダーをphtoとするには、/cgi-bin/jpglist.cgi/phto?640+480+60+80+0+vga+small とする。フォルダー名は環境変数から得ている。なお、ブラウザサイズが240以下の場合は、携帯で閲覧していると判断して、アクセスキー(携帯のテンキー等で直接画像のリンク先にジャンプする)に対応する。
ソース　実行ファイル 　のダウンロード <-右クリックで対象ファイルを保存する。(IEの場合)

画像一覧を表示するCGI β1

CGIプログラムがおかれたフォルダーのjpegファイル名を取得し、サムネイルとそのリンクの一覧を作成する。なお、サムネイル画像は大きさを指定された表の中に表示される。ブラウザのウィンドウサイズを渡すことにより横の表示数を自動的に調整したり、AU携帯のフルブラウザにあわせて、画像の一覧表示数を１画面サイズに限定し、残りは次のページに表示することができる。
使い方の例1
　<a href="jpeglist.cgi?640+480+60+80+0+vga+small">一覧表示</a>

上記は、smallフォルダー内のindex.htmファイルの一部とする。
smallフォルダーにjpeglist.cgiを置く。
サムネイルで表示されるファイルは index.htmに対して ../small フォルダとなる。
リンク先のフォルダーはindex.htmに対して..vgaフォルダとなる。
サムネイルで表示される画像は、横60、縦80ピクセルの表のセルの大きさの中に表示される。
640と480はブラウザのウィンドウサイズである。javaを使用するば実行時に大きさを取得することができ、携帯用のページにあわせて横に表示される画像数を調整することができる。

使い方の例2
　<a href="jpeglist.cgi?240+278+60+80+0+qvga+small">一覧表示</a>
上記は、ブラウザのウィンドサイズが240であるため、携帯と判定し、１画面に収まる、サムネイル数とし、残りの画像に対しては、[Back] [Next] [Top]のリンクを表示する。

使い方の例3 JAVAを使用してブラウザサイズを自動取得
次のhtmlファイルを用意 lageフォルダーに保存

<html>

<head>
<meta http-equiv="Content-Type"
content="text/html; charset=x-sjis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="keywords" content="123">
<meta name="GENERATOR" content="notepad.exe">
<META NAME="robots" CONTENT="noindex"> 

<title>title</title>

<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -
function moveunder(sel) {if (sel != "") {top.location=sel}}
//----------------->
<!--

function CALLCGI(){
        CGINAME= "jpglist.cgi?" + document.body.clientWidth+"+"+document.body.clientHeight+"+60+80+0+qvga+small";
        location.href=CGINAME;
}
// -->
</SCRIPT>
</head>

<body>
<p>ブラウザサイズ <script type="text/javascript"><!--
        document.write(document.body.clientWidth+"*"+document.body.clientHeight);
//-->
</script>
</p>
<p><a href="javascript:CALLCGI()">一覧</a></p>
</body>
</html>