WebPhotoの紹介および設定方法

このホームページでは写真を掲載するためにWebPhotoという自作のCGIを使用しています。
その紹介と設定方法を以下で説明します


WebPhotoの紹介
WebPhotoは多数の画像をサムネールによる一覧表示から、個別の元画像表示まで行うCGIです。

特徴
1.画像のパスデータ、コメント等をCSVファイルに持っているため、HTMLの変更なしに自由に画像の表示(表示順、表示項目、コメント)をカスタマイズできます。
2.カテゴリ別に複数のページを1個のCGIで管理でき、一覧表示の画面についてはカテゴリ毎にカスタマイズできまったく違った個別のページとして作成できます。

汎用性と実用性を考慮したCGIです。家族の画像表示にとどまらず、商店の商品の紹介ページなど、利用の用途は無限大です。


配布ファイル

ファイル名 パーミッション 備考
webphoto.cgi 755 実行プログラム
data.csv 644 画像定義csvファイル(雛形)
title.txt 644 ヘッダー定義ファイル(雛形)
foot.txt 644 フッタ定義ファイル(雛形)


設置条件


Perl 5.0が使用できるサーバーである事。


設置方法の説明

1.WebPhoto.cgiをエディタで開いて,1行目の「#!/usr/local/bin/perl」 perlのパスをプロバイダで指定されているパスに書き換えます。

2.設置例
index.htmlからCGIを呼び出し、gazou1,gazou2のカテゴリ(分類)がある場合以下の様に設置します。

/ public_html
   | index.html
   +- / cgi-bin(CGI格納フォルダ)
   |     +- webphoto.cgi
   +- / gazou1(任意に作成したフォルダ)
   |     +- / index(任意に作成したフォルダ、サムネール画像格納用)
   |     |     +- a1.jpg(サムネール表示画像)
   |     |     +- a2.jpg
   |     |     +- a3.jpg
   |     +- title.txt(ヘッダ定義ファイル)
   |     +- foot.txt(フッタ定義ファイル)
   |     +- data.csv(画像定義csvファイル)
   |     +- a1.jpg(元表示画像)
   |     +- a2.jpg
   |     +- a3.jpg
   +- / gazou2(任意に作成したフォルダ)
         +- / index(任意に作成したフォルダ、サムネール画像格納用)
         |     +- b1.jpg(サムネール表示画像)
         |     +- b2.jpg
         |     +- b3.jpg
         |     +- b4.jpg
         +- title.txt(ヘッダ定義ファイル)
         +- foot.txt(フッタ定義ファイル)
         +- data.csv(画像定義csvファイル)
         +- b1.jpg(表示画像)
         +- b2.jpg
         +- b3.jpg
         +- b4.jpg

3.CGIのカスタマイズ
上記フォルダ構成の場合WebPhoto.cgiのファルダ定義を以下の様に修正します。

#*************************
#フォルダ定義開始
#*************************
$path[0]="../gazou1/";
$path[1]="../gazou2/";
#*************************
#フォルダ定義終了
#*************************

4.data.csvのの作成

ファイル仕様

data.csvは以下の項目を記述します。
元画像,サムネール画像,画像総数,コメント

作成例
上記フォルダ構成の場合data.csvは以下の様に作成してカテゴリ毎のフォルダに格納します。

/ gazou1に格納するdata.csv

../gazou1/a1.jpg,../gazou1/index/a1.jpg,3,コメント
../gazou1/a2.jpg,../gazou1/index/a2.jpg,3,コメント
../gazou1/a3.jpg,../gazou1/index/a3.jpg,3,コメント


/ gazou2に格納するdata.csv

../gazou2/b1.jpg,../gazou2/index/b1.jpg,4,コメント
../gazou2/b2.jpg../gazou2/index/b2.jpg,4,コメント
../gazou2/b3.jpg,../gazou2/index/b3.jpg,4,コメント
../gazou2/b4.jpg,../gazou2/index/b4.jpg,4,コメント


5.title.txtの作成
一覧表示画面のヘッダーを指定する背景画像や背景色、および一覧表示の見出し等をHTMLの形式で指定します。

6.foot.txtの作成
一覧表示のフッタを指定する。画像を一覧表示した後に表示したいもの(バーナ等)があればHTML形式で指定します。

7.HTMLからのCGIの呼出し

HTMLからCGIを呼び出す場合、分類毎にCGIに定義したフォルダ定義を意識してwebphoto.cgiを呼び出します。

gazou1の分類を呼び出す場合
〜/cgi-bin/webphoto.cgi?0←フォルダ定義の0番目に定義した分類を呼び出す

同じようにgazou2の分類を呼び出す場合
〜/cgi-bin/webphoto.cgi?1←フォルダ定義の1番目に定義した分類を呼び出す


WebPhoto使用サイトの紹介

湯の街別府ヨンマル会 活動報告での画像表示はWebPhoto β版を使用しています。



プログラムの配布について

WebPhotoはシェアウェアです。
スクリプト1設定につき、個人で使用される場合1,000円、商用利用の場合5,000円でアカウントを購入してください。
著作権はKysSystemが保有します。アカウントの購入によりスクリプトの使用を許可します。
まずは、メールでご連絡ください。



免責事項

このサイトで配布されるスプリクトは OS FreeBsdで動作確認をしております。
他のOSや、全てのサーバーでの動作を保証するものではありません。
スクリプトを使用した結果起きた、いかなるトラブルや損害に対しても配布元KysSystemは一切の責任を負いません。
また、スクリプト使用によって起こり得るいかなる損害も当方は賠償致しません。  
KysSystemに著しく不利益があると判断した場合には、スクリプトの使用を中止していただくことがありますのでご了承ください。