Fumy Image Showcase

• 画像のリストを簡単に作成できるショーケースCGIです。
• サムネイル画像のリストと、それぞれの拡大画像を手軽に表示させられます。
• 各画像にはタイトルのほか、コメントを付加することができるので、アルバムのような使い方もできます。写真アルバムCGIとも言えるでしょう。

• サムネイル画像のリストでは、1行に何列表示させるかを自由に設定できます。列数・行数に制限はありません。
• 列数は、閲覧者がプルダウンメニューから自由に選択することも可能です。閲覧者ごとにウインドウ幅にあわせた表示が選べます。
• 登録可能画像数にも制限はありません。

• 表示は、スタイルシートベースなため、スタイルシートを書き換えるだけでデザインを変更できます。
• スタイルシートは、外部に独立したファイル（デフォルトでは showcase.css）として存在していますから、書き換えも楽々です。

• さらに、HTML部分は外部のスキンファイル（テンプレートHTMLファイル）を読み込んで表示させているため、スキンさえ書き換えれば、デザインは自由自在に変更できます。 配色どころではなく、タイトルの位置や日付の位置、本文の表示形態など、自由自在にカスタマイズできます。
• CGIに関する知識がなくても、スキン（HTMLファイル）さえ書き換えれば、自由自在に表示形態やデザインをカスタマイズできます。

• テスト運用版（表示）

CGIの設置環境

• CGIは Perl で記述しています。動作には、Perl 5 が必要です。さらに、CGIモジュールが使用できることが必須です。（※CGIが設置可能なサーバであればたいてい問題ないでしょう。CGIモジュールがサーバにインストールされていない場合は、CGIモジュールを別途入手し、このCGIと同じディレクトリに格納すれば使えます。）
• それ以外には、特に必要なものはありません。

CGIの設置方法（パーミッションの設定）

CGIの設置方法（CGIファイルの書き換え）

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

CGIのカスタマイズ方法

• デザインのカスタマイズ
  • showcase.css : 表示に使われるスタイルシートです。スタイルを変更したい場合に書き換えます。
• ページそのもののカスタマイズ
  • skin.html : サムネイル画像表示用のスキン（テンプレートHTMLファイル）です。
    • HTML内に、<<showcase>> と記述すると、その位置にサムネイル画像群(table)が挿入されます。
  • largeskin.html : 拡大画像表示用のスキン（テンプレートHTMLファイル）です。
    • HTML内に、<<showname>> と記述すると、その位置に画像のタイトルが挿入されます。
    • HTML内に、<<showitem>> と記述すると、その位置に画像が挿入されます。
    • HTML内に、<<shownote>> と記述すると、その位置に画像のコメントが挿入されます。
  • 両スキンに共通の指定：
    • HTML内に、<<ssi:(ファイル名)>> と記述すると、その位置に指定ファイルの中身がそのまま挿入されます。（SSIと同じ機能が使えます。）
  • 上記のキーワードは、1ページ内に何度でも挿入できます。（1度も使わない項目があっても構いません）
    デフォルトのスキン内でも、同一キーワードを何度も使用しています。
  • HTML内のその他の部分は、何でも自由に書き換えることができます。
• 付属のスキンファイルを参考にして編集すれば、楽にカスタマイズできるでしょう。

表示

ブラウザで 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の設定で固定する仕様になっています。