絵コンテとかレイアウトとかのIMGタグ

gyokuei
2006年02月22日 23:25 投稿

web上に画像を表示するには<IMG>タグを使います。たとえば

<IMG SRC="http://www.zarasu.com/f/tfsafe.cgi/img/zlogo.png">

と書くと

こんなかんじに表示されるわけです。
この画像ひとつならこれでもいいですが、大きな画像や複雑な構成のサイトでの表示のときは、

<IMG SRC="http://www.zarasu.com/f/tfsafe.cgi/img/zlogo.png" WIDTH=120 HEIGHT=43>

というように大きさを指定してやるとページ全体のレイアウトが素早く決まって読み込みがスムーズになります。また

<IMG SRC="http://www.zarasu.com/f/tfsafe.cgi/img/zlogo.png" WIDTH=120 HEIGHT=43 ALT="ザラスロゴ">

というように画像の説明を入れてやれば、回線が遅かったり画像の読み込みをオフにしてる人にもどんな画像なのか分かって親切です。

さらに、画像が大きくてレイアウト上はみ出して欲しくない場合があります。こういうときは、縮小した画像を表示しておいて、クリックすると原寸大の画像が出てくるようにします。

<A HREF="http://www.zarasu.com/f/tfsafe.cgi/img/zlogo.png">
<IMG SRC="http://www.zarasu.com/f/tfsafe.cgi/img/zlogo.png" WIDTH=60 HEIGHT=22 ALT="ザラスロゴ"></A>

ザラスロゴ

さらに、大きな画像を別ウインドウで表示させるには、

<A HREF="http://www.zarasu.com/f/tfsafe.cgi/img/zlogo.png" TARGET="_blank">
<IMG SRC="http://www.zarasu.com/f/tfsafe.cgi/img/zlogo.png" WIDTH=60 HEIGHT=22 ALT="ザラスロゴ"></A>

ザラスロゴ

と、書き加えます。


え? そんなことはとっくに知ってるって?
いや本題はこれからなんですよ。
このタグ書くの、めんどくさくないですか?
特に画像サイズがばらばらの場合とか。
まぁ一番上の例だけで済ませちゃえばいいと言われれば、それまでなんですけど。
同じサイズに揃えた場合でも、画像1枚分のタグを書いて、コピぺして、ファイル番号だけ全部書き替えて……とかやってたら発狂しそうになりませんか。ならないですか。


こういう、フォーマットが決まってるものは、マシンにやらせるに限るでしょ!


そういうわけで、かんたんなcgiを組みました。(といっても、ほとんど、他の方のライブラリの流用ですが……)
perlでかいてます。





レイアウト・絵コンテup用cgi ver.1.0


使い方

1)フォルダをつくって、好きな名前にして、並べたい画像を全部入れる。(gif,jpg,png)

2)ここからindex.cgiを手に入れて、エディタで開いて設定部分を編集し、画像と同じフォルダに入れる。

3)Script LaboratoryさんとこからimgSz.plを手に入れて、index.cgi・画像と同じフォルダに入れる。

4)フォルダをcgiの使える場所にアップロードなりなんなりして、index.cgiをパーミッション755にして、アクセスする。

そうすると、画像の大きさをCGIが拾って自動的に整列表示してくれるというわけです。
ヘッダをhtmlでカスタマイズすればそのままギャラリーページにも使えますし、
ソースの<!--ここから--><!--ここまで-->の間をコピぺしてblogにはっつけてもOK。
私のこのへんのページはそんなかんじでタグ組みました。らくちんです。


ダウンロード

  index.cgiのダウンロード

  imgSz.plのダウンロード (Script Laboratory)


設定

#1行目
#!/usr/bin/perl
perlのパス。サーバによって違うんでてけとーになおしてください。

#16行目
#フォルダまでのパス(http://から/まで。同じフォルダのまま使う場合は不要)
$path = "";
アップロードしたindex.cgiをそのままギャラリーとして使ったり、
同じフォルダの中に、出力したソースをコピぺしたhtml入れて使ったりする場合は指定しなくてOK。
別の場所のhtmlとかから読む場合は画像フォルダの正しい場所を指定してください。

#19行目
#画像の横幅(コレを超えると縮小表示+クリックで原寸画像)
$maxwidth = "320";
レイアウト上これを超えると縮小したいという横幅
超えない場合は原寸表示します

#22行目
#縮小表示された場合の原寸画像表示先
# (指定なしだと同じウインドウ、_blankだと新しいウインドウ)
$target = "_blank";
$target = "NEW";とか適当な名前をつけるとすべての画像が同じ別ウインドウに表示

#26行目
#画像のコメント位置(0だと上、1だと下)
$comiti = "0";
画像の上か下にかんたんなコメントつけます

#29行目のあたり
#画像のコメント内容(NONEだとなし、INFOだと画像の大きさと重さ)
#(指定しない場合ファイル名(拡張子を除く)、それ以外なら入力した言葉+番号)
#$comment = "";
#$comment = "NONE";
#$comment = "INFO";
$comment = "シーン13-";
#(言葉+番号の場合番号の表示方法指定)
#(0だとふつうに数字、1だと固定桁数 3なら003とかそんなかんじ)
$numberh = "1";
#(桁数の変更は108行目sprintf("%03d",$fileno)の%03dの3を変更)
↑まぁ読んだとおりなので適当に
$commentのとこは使うの以外は先頭に#つけてください

#40行目
#画像の区切り
$kugiri = " ";
画像と画像の間をナニで区切るか指定
かってに改行してくれるblog用に出力する場合は注意してね

#
の表示(blogソース用、1だと表示0だと表示しない 0の場合区切りも
以外で)
$BRTAG = "1";

#46行目以下
#ヘッダ(htmlで)
#フッタ(htmlで)
まぁ適当にhtmlで。
文字化けする場合\とかつっこんでみてください
文字コード でぐぐると何かわかるかも


パーミッションの例

──(任意の名前のフォルダ)
 ─index.cgi[755]
 ─imgSz.pl[644]
 ─(任意の画像ファイル).gif/.jpg/.png[644]


注意事項

・てけとーなcgiなので、フリー、無保証です。てけとーに改造して使ってください。改造依頼とかは受けません。

・画像サイズ取得ライブラリimgSz.plはScript LaboratoryのWatsonさんが配布されてるものです。

・デフォルトの状態では表示できるのはgif,jpg,pngのみです。並び順はファイル番号順です。他の並べ方がいいひとは改造してください。




この記事に関連するかもしれない本:

 
この記事のトラックバックURL:
はてなブックマークに追加 はてなブックマークを見る
※コメントは、SPAMが多いため承認制になっています。

コメント


ツッコミ・感想・情報などありましたらどうぞ






保存しますか?


銀の月動画計画 は、
「萌えるアニメ」の制作を模索するアニメ闘士・玉英の作品と趣味のサイトです。
銀の月動画計画バナー
Copyright © 1995-2007, 玉英・ZARASU.com
銀の月動画計画ロゴ  
powered by Google
ウェイク☆アップ!歌い手&振付け募集
五六神王計画声優公募final
五六神王計画絵師
ロゴ