Ｚ壁紙ディスプレー１号とは
- 素材屋のみなさま方、壁紙の背景サンプル表示はどうされていますか？
- 壁紙ごとに HTML ファイルを用意したりしていませんか？
- Ｚ壁紙ディスプレー１号は、壁紙ごとに HTML ファイルを作ることなく、壁紙の背景サンプル表示を行う CGI です。
- 壁紙の背景サンプルは、別のウインドウ、或いは、別のフレーム上に表示します。
- とってもシンプルな CGI スクリプトですから、HTML がある程度理解できていれば、簡単に設置できると思います。
こんな感じです
- 別ウインドウを開いて壁紙サンプルを表示する。[ サンプル ] [ 組込方法 ]
- 別ウインドウを開いて壁紙サンプルを表示する（JavaScript使用）。[ サンプル ] [ 組込方法 ]
- 別フレームに壁紙サンプルを表示する。[ サンプル ] [ 組込方法 ]
別ウインドウ．．サンプルの壁紙は、有名なGTOOLさんの作品です。素材の草分け的サイトで芸術的な作品が豊富です。（私は日記帳のファンです）
別フレーム．．サンプルの壁紙は、ずーみん村サイトのゆうり作です。
動作条件
- ホームページがあるサーバーでPerlを使用したCGIが使えること。
- Perlのバージョンが 5（Perl5）以上であること。
- ホームページがあるサーバーのOSがLinux、UNIXであり、Web Server が Apache で動作確認しています。
- 上記以外では動作確認していません。あしからずご了承ください。
ここからダウンロードできます
- Windowsな人 ZIP形式
- Linux、UNIXな人（準備中）
- ダウンロードしたら自分のローカルマシン上で解凍してください。
- 必ず、ディレクトリ付きで解凍してください。
ディレクトリ・ファイル構成
- zbgshow1.cgi --- Ｚ壁紙ディスプレー１号CGI本体プログラム
- このプログラムファイル一本あればOK です。
ユーザー変数の編集 [ zbgshow1.cgi ]
- [ zbgshow1.cgi ]をメモ帳などのテキストエディタで開いて編集します。
- 設定項目は以下の2項目です。
- 壁紙ディスプレーページのタイトル [ $Title ]
- 壁紙ディスプレーページに表示する簡単な文章 [ $Body ]
==== zbgshow1.cgi ====
..
..
###################################################################
#
# カスタマイズ可能変数（お好みで書き換え可）
#
###################################################################
$Title = '壁紙サンプル表示';
$Body = '表示はこんな感じです。<br>いかがですか？';
..
..
- 壁紙ディスプレーページのタイトル [ $Title ] は、壁紙が背景となったページに表示するタイトルです。
- 壁紙ディスプレーページに表示する簡単な文章 [ $Body ] は、壁紙が背景となったページに表示する文章です。一言・二言くらいのメッセージを定義してください。
- 簡単な文章 [ $Body ] は、HTML タグが使用 OK です（「HTMLで定義してください」と言うべきか、、）。
- 上記以外の箇所は編集しないでください。（Perlでプログラムできる人は除く）
- 勢いあまって、ダッシュ（’）イコール（＝）やセミコロン（；）などを消してしまわないようにご注意ください
Perlを使用する時のおまじない行の編集 [ zbgshow1.cgi ]
- 自分のホームページがあるサーバーのPerlへのパスを指定します。Perlへのパスは、ホームページを置いているサーバー管理者に聞いてください。
- CGI本体プログラム [ zbgshow1.cgi ] をメモ帳などのテキストエディタで開いて編集します。
==== zbgshow1.cgi ====
#!/usr/bin/perl <==== 先頭行です。
..
..
- 編集するのは、zbgshow1.cgi の先頭行のみです。
サーバにアップロード
- 自分のホームページがあるサーバーにディレクトリ・ファイル構成に気をつけてアップしてください。（普通にFTPでアップする手順でOKと思います。）
- 但し、サーバーの漢字コードに注意してください。例えば、ローカルなPCがWindowsで、サーバーがUNIXやLinuxの場合は、FTP転送時に漢字コード変換が必要になります（必要ない場合もあるが、、）。よく分からない人は、ホームページを置いているサーバー管理者に相談してください。
- 漢字コード変換が必要な場合は、以下に従ってアップしてください。
./zbgshow1.cgi --- 漢字コード変換が必要です。[ FTP アスキー転送モード ]
実行権、書込権の付与
- サーバー上のCGIが動作できるように、CGIスクリプトの実行権と、ファイルへの書込み権を設定します。
- サーバーにアップしたファイルやディレクトリの属性を、以下のとおりに変更してください。
./zbgshow1.cgi --- rwxr-xr-x [ 755 ]
ページへの組み込み ・・その１・・
別ウインドウを開いて壁紙サンプルを表示する
- 壁紙素材ページ(HTML)から Ｚ壁紙ディスプレー１号をリンクする記述例です。
- 以下の例を参考にして、HTML ファイルを記述してください。
- 赤で表示しているところは、皆さんの環境に従って変更すべき箇所です。
<a href="/home/cgi-bin/zbgshow1.cgi?url=/home/img/kabegami.gif&title_col=FF0000&body_col=0000FF"
target="zbgshow1">
<img src="/home/img/kabegami.gif">
</a>
- 上記例の '/home/cgi-bin/zbgshow1.cgi' は、Ｚ壁紙ディスプレー１号 CGI への URL です。
- '/home/cgi-bin/' の部分は、皆さんのインストール環境にあわせて変更してください。
- これに続く '?' マークは、これ以降は CGI へのパラメータですよという印です。
- '?' マークは大事ですので、付け忘れないようにお願いします。
- 続く 'url=/home/img/kabegami.gif' の部分は、CGI へのパラメータで、背景画像の URL を指定します。
- 皆さんの環境にあわせて、壁紙画像への URL を記述してください。
- 尚、この URL は、CGI プログラムから参照できるパスを指定する必要がありますので、この例のように、絶対パスで指定した方がよいでしょう。（相対で指定する場合は、CGI プログラムから見た相対パスで指定してください。）
- これに続く '&' マークは、CGI パラメータがもっとありますよという印です。
- '&' マークも大事ですので、付け忘れないようにお願いします。
- 続く 'title_col=FF0000' の部分は、CGI パラメータで、タイトル文字色を指定します。
- 'FF0000' の部分を、お好みの色に変更してください。
- これに続く '&' マークは、CGI パラメータがもっとありますよという印です。
- '&' マークも大事ですので、付け忘れないようにお願いします。
- 続く 'body_col=0000FF' の部分は、CGI パラメータで、本文の文字色を指定します。
- '0000FF' の部分を、お好みの色に変更してください。
設置サンプル
ページへの組み込み ・・その２・・
別ウインドウを開いて壁紙サンプルを表示する（JavaScript使用）
- 壁紙素材ページ (HTML) の記述例
- 先ず、下のJavaScriptをHTMLソースに挿入してください。
- 挿入する箇所は <HEAD> 〜 </HEAD> の間です。
<script language=javascript>
<!--
function BgWin( url ) {
var win=open(url, "zbgshow", "toolbar=no,width=300,height=400,resizable=1");
win.focus();
}
// -->
</script>
- 次に、CGI をリンクする箇所です。
- 赤で表示しているところは、皆さんの環境に従って変更すべき箇所です。
<a href="/do_javascript_function"
onClick="BgWin(
'/home/cgi-bin/zbgshow1.cgi?url=/home/img/kabegami.gif&title_col=FF0000&body_col=0000FF'
);return false">
<img src="/home/img/kabegami.gif">
</a>
- 変更方法についての考え方は、上記の「・・その１・・別ウインドウを開いて壁紙サンプルを表示する」と同じですので、そちらを参照してください。
設置サンプル
ページへの組み込み ・・その３・・
別フレームに壁紙サンプルを表示する
- 先ず、フレームを作る HTML ファイルを作成します。
<html>
<head><title>お好きなタイトル</title></head>
<frameset rows="40%,60%">
<frame src="frame1.html" name="frame1">
<frame src="frame2.html" name="frame2">
</frameset>
</html>
- この例では、上下にフレームを分けました。
- 上部フレーム部分に壁紙素材ページ [ frame1.html ] があり、下部はその壁紙サンプル表示フレームとします。
- 下部フレームに指定されている [ frame2.html ] は、フレームを作る HTML から最初に一回だけよばれますから、何か、適当な説明でも書いた HTML を用意しておけばよいでしょう。
- 次に、上部フレーム部分の壁紙素材ページ [ frame1.html ] を編集します。
- 下の例のように、[ frame1.html ] に、このCGI をリンクするタグを埋め込みます。
- 赤で表示しているところは、皆さんの環境に従って変更すべき箇所です。
<a href="/home/cgi-bin/zbgshow1.cgi?url=/home/img/kabegami.gif&title_col=FF0000&body_col=0000FF"
target="frame2">
<img src="/home/img/kabegami.gif">
</a>
- target="frame2" の部分がみそですね。。
- その他、変更方法についての考え方は、上記の「その１．別ウインドウを開いて壁紙サンプルを表示する」と同じですので、そちらを参照してください。
設置サンプル