サムネイルメニューskin版(コメント機能付き) ver.1.0 解説

このファイルはダウンロードファイルに入っているものと全く同じです。

サムネイルメニューskin版について少し詳しく解説します。読むと余計わからなくなるかも・・・。

まずは何も変更せず、解凍した「pa」ディレクトリをそのままアップロードして「big」ディレクトリにファイル名が「1」から連番の「.jpg」ファイルを数枚アップロードして、「photo_album.php」にアクセスしてみてください。これだけでOKです。

サムネイルメニューskin版(コメント機能付き)の概要

  1. サムネイルメニューskin版にそれぞれの写真にコメントをつける機能をプラスしました。
  2. 画像をアップロードするだけで、サムネイルとメニューページ、画像1枚を表示するページを自動的に生成します。
  3. 対応している拡張子は「jpg、png」です。
  4. メニューページと画像表示ページはHTMLのテンプレートで簡単にカスタムできます。
  5. PHPファイル(photo_album.php)と画像保存ディレクトリを複製することで、いくつものアルバムができます。
  6. GDが使えるサーバーが必要です。
  7. サムネイルの生成には「aki web PHP(http://aki.adam.ne.jp/)」さんの「gdthumb.php(http://aki.adam.ne.jp/php/gdthumb/download.php)」を使用しています。「aki web PHP」さんの著作権表示は消さないでください。

ページトップにもどる

スクリプト設置方法とphoto_album.phpの設定方法

長々と書いていますが、設置方法の注意点は以下の4点です。

  1. 「photo_album.php」と「gdthumb.php」、「htmltemplate.inc」は同じ階層に置く。
  2. 画像保存ディレクトリに入れる画像のファイル名は「1」や「01」など「1」からの数字の連番にする(*)。
  3. 画像ファイルの拡張子は1つのディレクトリ内で混在させてはいけません。
  4. 画像保存ディレクトリにある「ログファイル(log.cgi)」に写真それぞれに表示させたいコメントを書き込み、パーミッションを606などにします。

この4点以外は、変更してもphoto_album.phpで正しく設定すれば機能します。skinのカスタム方法はHTMLファイルの作成方法とほとんど同じです。

(*):ファイル名は「1」、「01」、「001」などを基点にした連番である必要があります。ファイル名の基点桁数は設定できます。初期設定では「1」を基点としています。

スクリプト設置方法詳解

ダウンロードファイルを解凍すると「pa」ディレクトリの中に、次の7つのファイルと1つのディレクトリ(1つのログファイルを含む)が入っています。

まずは何も考えずに「pa」ディレクトリごとサーバーにアップロードしてください。次にbigディレクトリの中に「1」から連番のjpg画像ファイル(1.jpg、2.jpg、3.jpg・・・)を適当な枚数アップロードします。そしてphoto_album.phpにアクセスします。これで機能するはずです。

この時点でうまく機能しない場合は次のような原因が考えられます。

  1. bigディレクトリにアップロードした画像の拡張子が「jpg」以外である。(初期設定はjpgになっています。)
  2. 画像のファイル名が「1」からの連番になっていない。(初期設定は「1」からになっています。)
  3. アップロードに失敗している。
  4. サーバーがXREAである。又は広告が自動挿入されるサーバーである。詳しくはこちらをご覧ください。
  5. photo_album.phpのバグ(報告していただけると助かります。)
  6. サーバーでPHPが使えない。
  7. サーバーでGDが使えない。
  8. PHPのバージョンが4.0以下である。

メニューページで、クリックしても画像ページが表示されない場合。

「photo_album.php」の43行目からの4行を下記のように書き換えてみてください。

if (phpversion()>="4.1.0"){
extract($_SERVER);
extract($_REQUEST);
}

この4行を

if(phpversion() >= "4.2.0") {
extract($HTTP_POST_VARS);
extract($HTTP_GET_VARS);
}

に書き換えてみてください。

photo_album.phpの設定方法詳解

設定項目は下記の13項目あります。

設定項目 説明
1 $arg["title"] = "Photo Album"; ページタイトルなどを指定します。
2 $filetype = "jpg"; 画像の拡張子を指定します。「jpg、png」のみ。
3 $beams = "1"; ファイル名の数字の基点桁数(1から始まるなら「1」、01から始まるなら「2」、001から始まるなら「3」・・・)
4 $menufile = "menu.html"; photo_album.phpからみたメニュー表示テンプレートへのパス。ファイル名まで記入してください。
5 $photofile = "photo.html"; photo_album.phpからみた画像表示テンプレートへのパス。ファイル名まで記入してください。
6 $arg["home_url"] = "../index.html"; photo_album.phからの戻りURLへのパス
7 $arg["home"] = "HOME"; 戻りURLアンカーの文句
8 $imgdir = "big/"; photo_album.phpから画像保存ディレクトリへのパス。最後は「/」で。
9 $maindir = "../"; 画像保存ディレクトリからphoto_album.phpのあるディレクトリまでのパス。最後は「/」で。
10 $log = "log.cgi"; コメントログファイル名を記入する。
11 $rev = "0"; メニュー画面でのファイルの表示順(0=昇順、1=降順)
12 $mmw = "100"; メニューページサムネイルの最大横幅(単位はピクセル)。
13 $mmh = "100"; メニューページサムネイルの最大縦幅(単位はピクセル)。
14 $pmw = "55"; 画像表示ページサムネイルの最大横幅(単位はピクセル)。
15 $pmh = "55"; 画像表示ページサムネイルの最大縦幅(単位はピクセル)。

サムネイルは指定した値に縦横等倍に縮小されます。また指定した値より元画像が小さければ、元画像が表示されます。

ログファイルにコメントを書き込む

log.cgiファイルにコメントを書き込みます。以下のような要領「写真のファイル名|写真のタイトル|写真のコメント」の順で「|」で区切って書き込んでいきます。コメントを付けたくない写真は空欄で構いません。

001|和歌山(写真タイトル)|和歌山産湯海水浴場(写真コメント)
002|出雲|出雲、日御碕
003||
004|米俵|奈良信貴山

複数のカテゴリーのアルバムを作る

PHPファイル(photo_album.php)と画像保存ディレクトリを複製することで無限にカテゴリーを作ることができます。テンプレートファイルを複製する必要はありません。いくつカテゴリーを作ってもテンプレートファイルを書き換えるだけで全てに反映されます。

【複数カテゴリーディレクトリ構成例】

public_html / index.html (トップページ)
    |
    +--- pa / photo_album01.php
         |  / photo_album02.php
         |  / photo_album03.php
         |  / gdthumb.php (GD自動サムネイル作成)
         |  / pa.css
         |  / menu.html (メニューページテンプレート)
         |  / photo.html(画像表示ページテンプレート)
         |  / htmltemplate.inc
         | 
         +-- big01/  [画像ファイルを格納]
         |            | 
         |            +-- /log.cgi[606](コメントログファイル)
         |
         +-- big02 / [画像ファイルを格納]
         |            | 
         |            +-- /log.cgi[606](コメントログファイル)
         |
         +-- big03 / [画像ファイルを格納]
                      | 
                      +-- /log.cgi[606](コメントログファイル)

これでそれぞれのPHPファイルで画像を表示させるディレクトリ名を設定(設定項目の8番目)すればOKです。

カテゴリー毎にテンプレートを変えたい場合は、それぞれのテンプレートを用意してPHPファイルでテンプレートのファイル名を正しく設定(設定項目の4、5番目)すればOKです。

ページトップにもどる

テンプレートをカスタムする

テキストメニューskin版のテンプレート(「menu.html」、「photo.html」)のカスタム方法を少し解説します。基本的に通常のHTMLファイルと同じですが、テンプレートタグがいくつかあり、それを駆使して作ります。

両方のページで使用できるテンプレートタグ

{val title}
「photo_album.php」で設定したページタイトル
{val self_url}
メニューページのURL。
{val home_url}
「photo_album.php」で設定した戻りURL。
{val home}
「photo_album.php」で設定した戻りURLアンカーの文句。
<!--{each menu_loop}-->
メニュー生成ループ開始。メニュー生成ループの頭に置きます。
<!--{/each}-->
メニュー生成ループ終了。メニュー生成ループの最後に置きます。
以下は上記「<!--{each menu_loop}--><!--{/each}-->」の間でのみ有効です。
{val menu_loop/photo_url}
画像表示ページのURL
{val menu_loop/photono}
画像番号。
{val menu_loop/allimg_url}
画像のURL。
{val menu_loop/size}
画像のファイルサイズ(KB表示)。
{val menu_loop/allimg_width}
画像のwidth。
{val menu_loop/allimg_height}
画像のheight。
{val menu_loop/allimg_size}
画像のwidthとheight。これだけで「width="454" height="326"」などと表示されます。。
{val menu_loop/thumb_url}
サムネイル画像URL
{val menu_loop/ptitle}
ログファイルに記入した写真のタイトル
{val menu_loop/com}
ログファイルに記入した写真のコメント

画像表示ページ(photo.html)でのみで使用できるテンプレートタグ

{val img_url}
画像のURL。
{val img_size}
画像のwidthとheight。これだけで「width="454" height="326"」などと表示されます。
{val back_url}
ひとつ前の画像表示ページURL。1枚目の場合は、一番最後の画像表示ページURLとなります。
{val next_url}
次の画像表示ページURL。最後の画像の場合は、1枚目の画像表示ページURLとなります。
以下は「<!--{each menu_loop}--><!--{/each}-->」の間でのみ有効です。
{val menu_loop/now_page}
メニュー生成ループ内で現在表示されている画像と一致した場合「 id="now"」と表示されます。先頭には半角空白が入ります。aタグなどと組み合わせてCSSで色々できます。(具体例
{val menu_loop/now_ptitle}
ログファイルに記入した表示されている写真のみのタイトル
{val menu_loop/now_com}
ログファイルに記入した表示されている写真のみのコメント

テンプレートタグの具体的な使用例を少し

テンプレートタグの具体的な使用例を少し挙げておきます。ダウンロードしたテンプレートを眺めたりしてうまくテンプレートタグを活用してください。

画像を表示する

<img src="{val img_url}" {val img_size} alt="画像です">

これで下記のようなソースが生成されます。

<img src="big/2.jpg" width="454" height="326" alt="画像です">

画像表示ファイルへリンクを貼る

<ul>
<!--{each menu_loop}-->
	<li><a href="{val menu_loop/photo_url}">Photo No.{val menu_loop/photono}<span>({val menu_loop/size})</span></a></li>
<!--{/each}-->
</ul>

これで下記のようなソースが生成されます。「<!--{each menu_loop}--><!--{/each}-->」で囲まれた範囲は画像の数だけループを繰り返し、メニューを生成します。

<ul>
	<li><a href="/pa/photo_album.php?num=1">Photo NO.1<span>(134KB)</span></a></li>
	<li><a href="/pa/photo_album.phpp?num=2">Photo NO.2<span>(88KB)</span></a></li>
	<li><a href="/pa/photo_album.php?num=3">Photo NO.3<span>(180KB)</span></a></li>
	<li><a href="/pa/photo_album.php?num=4">Photo NO.4<span>(75KB)</span></a></li>
</ul>

{val menu_loop/now_page}

下記のようにテンプレートに記述する。

<ul>
<!--{each menu_loop}-->
	<li><a href="{val menu_loop/photo_url}{val menu_loop/now_page}">Photo No.{val menu_loop/photono}<span>({val menu_loop/size})</span></a></li>
<!--{/each}-->
</ul>

そして例えば画像3のページを開くとソースは下記のようになります。

<ul>
	<li><a href="/pa/photo_album.php?num=1">Photo NO.1<span>(134KB)</span></a></li>
	<li><a href="/pa/photo_album.phpp?num=2">Photo NO.2<span>(88KB)</span></a></li>
	<li><a href="/pa/photo_album.php?num=3" id="now">Photo NO.3<span>(180KB)</span></a></li>
	<li><a href="/pa/photo_album.php?num=4">Photo NO.4<span>(75KB)</span></a></li>
</ul>

そしてCSSで「#now a {・・・}」などと装飾を指定してやれば、他のアンカーと違った表示をしてやることができます。文字で説明するのが難しいので実際にダウンロードした「photo.html」と「pa.css」やサンプルを眺めてみてください。今何番目の画像を見ているのかわかりやすいという仕組みです。

ページトップにもどる

XREAで利用する場合の注意点

無料のXREAで利用する場合は、普通にアップロードしただけでは「gdthumb.php」が正しく機能しません。「gdthumb.php」を「x」フォルダ内に入れるか、「.htaccess」ファイルで各ファイルの先頭に自動挿入される改行を取り除いてください。「.htaccess」での方法は設置したディレクトリ以下の広告も消えてしまうので詳細は省きます。広告免除の方も1行目に改行が入るのであれば正しく機能しないかもしれません。同じく「x」ディレクトリに入れるか、「.htaccess」ファイルなどで先頭の改行を取り除いてください。

「gdthumb.php」を「x」ディレクトリに置くなどして、PHPファイル(photo_album.php)と違う階層においた場合は、PHPファイルの102、145行目付近の「$thumb_url = "gdthumb.php?path=".$imgdir.$i.".".$filetype."&mw=".$mw."&mh=".$mh;」を正しいパスに書き換えてください。

【例えばこんな構成の場合】

public_html / index.html (トップページ)
    |
    +--- pa / photo_album.php
         |  / pa.css
         |  / menu.html (メニューページテンプレート)
         |  / photo.html(画像表示ページテンプレート)
         |  / htmltemplate.inc
         | 
         +-- x / gdthumb.php (GD自動サムネイル作成)
         | 
         +-- big / [画像ファイルを格納]
                      | 
                      +-- /log.cgi[606](コメントログファイル)

「photo_album.php」の102、145行目付近2箇所を下記のように書き換える。

$thumb_url = "x/gdthumb.php?path=../".$imgdir.$i.".".$filetype."&mw=".$mw."&mh=".$mh;

「<!--nobanner-->」を「gdthumb.php」に加えてもうまくいきませんでした。他にもうまい方法があるやも知れません。

更新履歴

2006.08.05 ver.1.0
メニュー表示ページでの表示順の昇順、降順の選択が可能に。
2005.12.27 ver.0.95
写真表示ページでも全てのタイトルとコメントを表示できるように改良。他、テンプレートタグを追加。
2005.12.04 ver.0.9
サムネイルメニューskin版(コメント機能付き) 公開

ページトップにもどる

最後に

  1. このスクリプトはLOLIPOP、XREAでのみで動作確認しております。
  2. 改造はOKです。ど素人な管理人が作ったので粗があると思います。スマートに改造してみてください。アドバイスなどいただけるとうれしいです。
  3. 再配布は二次的著作物に限りOKです。
  4. 著作権表示は残していただけるとうれしいです。デザインの関係でどうしても消したい場合は消してもらってかまいません。その際はサイトのどこかのページでこっそりリンクを張っていただけるとうれしいです(「aki web PHP」さんの著作権表示は消さないでください)。
  5. このスクリプトを利用した事によるいかなる損害も、作者は一切の責任を負いません。

作成者:a340(http://a340.oops.jp/cb400ss/php/)

ページトップにもどる