にしし ふぁくとりー
にししふぁくとりーフリーCGI → Fumy Image Showcase
サムネイル画像のリストとそれぞれの拡大画像を手軽に表示させられるアルバムCGI

Fumy Image Showcase

2006年11月20日 Ver 1.00 新規公開.

CGIの紹介

サンプル表示
たくさんの画像を表示するページの作成に
画像数に上限はなし,サムネイルの列数にも制限なし
スタイルシートベース
スキン式でカスタマイズ自由自在
このフリーCGIは、どなたでも無料でご利用頂けます。個人サイト・商用サイト共に、ご自由にご利用下さい。 代行設置にも制限はありませんが、このCGIそのものを販売してはいけません。また、著作権表示の削除・書き換えは絶対に行わないで下さい。

CGIのダウンロード

[Version] 1.00 [File] showcase.zip [Size] 52.7KB [Date] 2006,11,20.
Ver 1.00 をダウンロードする (このサイトから)
ZIP形式で圧縮しています。
ダウンロード後、展開して下さい。

CGIの実行サンプル

下記にテスト運用版があります。画像が10個登録されています。

CGIの設置方法・設置環境

CGIの設置環境

CGIの設置方法(パーミッションの設定)

「README.TXT」を除くすべてのファイルを、同一のディレクトリに格納して、次のパーミッションに設定して下さい。
ファイル名パーミッション補足
実行ファイル
showcase.cgi755メインCGI
データファイル
showcase.csv644画像リストデータ保存ファイル
表示HTML関連ファイル
skin.html644サムネイルページ用のスキンファイル(テンプレートHTMLファイル)
largeskin.html644拡大画像ページ用のスキンファイル(テンプレートHTMLファイル)
showcase.css644表示用スタイルシートファイル
※各ファイル名は変更することも可能です。(ファイル名の変更内容は showcase.cgi 内に反映させないといけません。あまりPerlに詳しくない場合はデフォルトのままご使用下さい。)
※「Readme.txt」ファイルは、アップロードしないで下さい。解説を記述したただのテキストファイルです。

CGIの設置方法(CGIファイルの書き換え)

* showcase.cgi をエディタで開いて、次の箇所を必要に応じて書き換えます。
※デフォルトの状態で使用するのであれば、1行目以外、まったく書き換えなくても動きます
(1行目) #! /usr/bin/perl
Perlの位置を必要に応じて書き換えます。 /usr/local/bin/perl など。
(24行目) my $cginame = 'showcase.cgi';
このCGIのファイル名(デフォルトでは showcase.cgi。省略しても構いません。)
(26行目) my $datafile = 'showcase.csv';
データファイル名(拡張子はcsvでなくても構いませんが、記録形式はCSVです。)
(28行目) my $mainskin = 'skin.html';
メインスキンファイル名(サムネイル表示ページ用)
(30行目) my $liskin = 'largeskin.html';
拡大画像スキンファイル名
(33行目) my $smallimages = './sampleimages/';
画像フォルダ名(サムネイル画像を格納しているフォルダ名)
(35行目) my $largeimages = './sampleimages/large/';
画像フォルダ名(拡大画像を格納しているフォルダ名。※サムネイル側と同じでも構いません。)
(38行目) my $charcode = "Shift_JIS";
文字コード(デフォルトは "Shift_JIS")
▲変更する場合はCGIや各種データファイルの文字コードも一緒に変更して下さい。
(47行目) my $tablecoldef = 3;
サムネイル表示時の1行あたりの表示画像数(=列数)(デフォルトでは 3 )
(59行目) my $addatag = '(任意の属性)';
リンクタグ(=a要素)に加える任意の属性(拡大画像を別ウインドウで表示させるために「target="_blank"」を加えたいときなどに活用できます。※デフォルトでは何も指定されていません。)

※以下は、サムネイル表示時のテーブルHTMLを特別に編集したい場合にのみ修正して下さい。

(44行目) my $tablehead = qq|<table class="listimages" cellspacing="0" summary="画像リスト">|;
サムネイル表示の際のtable開始タグ(任意の内容に変更できますが、必ずtableタグは使って下さい。)
(45行目) my $tablefoot = qq|</table>|;
サムネイル表示の際のtable終了タグ(任意の内容に変更できますが、必ずtableタグは使って下さい。)

※以下は、mod_rewriteなどの仕組みを使ってURLを独自の様式にカスタマイズする際にのみ修正して下さい。(分からない場合は、そのまま修正しないで下さい。mod_rewriteなどの仕組みを使わずに以下の設定だけを修正すると、CGI上からのリンクが正しく機能しなくなります。なお、Rewrite Ruleを記述する際には、標準のURLでのアクセスも許容できるように記述しておくことをお勧めします。)

(54行目) my $modrewrite = 0;
mod_rewriteを使うかどうか(1:使う/0:使わない)
(57行目) my $mwhead = 'img_';
mod_rewriteを使う場合の、拡大画像表示用URLの先頭に加えるダミー文字列(ダミーファイル名の先頭)
たとえば、本来 showcase.cgi?item=Green となるところを img_Green.html としてアクセスできるようにするために指定します。

全ファイルのアップロード

アップロードは、すべて「アスキーモード」(テキストモード)で行います。

文字コードは、SHIFT-JISのままアップロードされることをお勧めしますが、他の文字コードを使用したい場合は、使用したい文字コードに(全ファイルを)変換した上でアップロードして下さい。 (その際、showcase.cgi の38行目を適切に書き換える必要があります。)
よく分からない場合は、文字コードを変換せずSHIFT-JISコードのままご使用下さい。

CGIのカスタマイズ方法

次のファイルを書き換えることで、自由にカスタマイズが可能です。

CGIの使い方

表示

ブラウザで showcase.cgi を表示させるだけです。
データファイルに記述してある全画像が一覧で表示されます。各画像はクリック可能なリンクになっていて、クリックすると拡大画像が表示されます。

画像一覧は、デフォルトでは1行3列で表示されますが、閲覧者が変更することもできます。
showcase.cgi?cols=5
…というように、colsパラメータを使えば、1行に表示する列数(画像数)を自由に変更できます。値は1以上の整数を指定でき、上限はありません。
なお、デフォルトの列数は、CGIの設定(ソースを編集することによる設定)で3以外に変更可能です。

画像の登録

現在のバージョンでは、「コントロールパネル」を用意していません
画像の登録は、データファイルである showcase.csv ファイルを直接編集する必要があります。 このファイルは、カンマ区切りのテキストファイル(=CSVファイル)なので、テキストエディタで編集できるほか、Microsoft Excelなどの表計算ソフトでも編集可能です。

データファイルの記述方法は、サンプルの記述を見れば分かると思いますが、1行5列で以下のようになっています。

  1. 識別ID [任意の英数字] (例: Green )
  2. 表示名 [任意の文字列] (例: 新緑 )
  3. サムネイル画像ファイル名 (例: green.jpg )
  4. 拡大画像ファイル名    (例: green_large.jpg )
  5. コメント [任意の文字列] (例: 新緑が映えています。)

上記の5つを半角カンマで区切って1行を構成します。例えば、以下のようになります。

Green,新緑,green.jpg,green_large.jpg,夏です。新緑が映えています。

この行を、必要な数だけ列挙してください。
付属の showcase.csv ファイルには、最初にサンプルとして3行だけ記述してあります。それを参考にしてください。

なお、画像ファイル名は、必ず「ファイル名だけ」を記述します。フルパスや相対パスなど、ディレクトリ名を含めてはいけません。 ディレクトリ名は、CGIの設定で固定する仕様になっています。

更新履歴

[Ver 1.00]
新規公開.

補足事項

配布ファイルの文字コードは、すべて SHIFT-JIS になっています。
他の文字コードを使用する場合は、すべてのファイルの文字コードを変更して下さい。一部のファイルだけ文字コードを変えると、文字化けが起こります。

データファイル内には、サンプルデータが含まれています。 また、サンプル画像が6個(サムネイル3個・拡大3個)含まれています。 実際に使用する際には、すべて削除して構いません。

フィードバックのお願い(ご意見・ご要望募集)

このCGIを使ってみたご感想、ご意見などをぜひお送り下さい。
ご要望にはできるだけ応じたいと考えています。
お送り頂く先はメールでも構いませんし、掲示板でも構いません。
CGI設置に関するご質問もお気軽にどうぞ。

ホームページ作成業者(個人/法人)の方で、代行設置を行われた場合も、よろしければお知らせ下さい。 活用されていることが分かると、開発の励みになりますので(^-^)、ぜひよろしくお願い致します。
このCGIに関するお問い合わせは、メールなどでお送り下さい。
このページの製作者は、にししです。
このページで公開されているCGIを利用した結果発生するいかなる問題にも、製作者および公開者は一切責任を負いません。
使用者個人の責任でご使用下さい。