◆簡単「画像サムネイル化」スクリプト　　[Blog News]

クリックするとでっかくなります

今日はちょっといつもと違って、サイトでこういう風に「画像をサムネイル化して使う方法」をご紹介。
ちなみに、ほぼ全てをPHPスクリプトが自動で行ってくれますので、ブラウザからアップロードできるのでサイトを更新する時に画像を使いたい人にはとっても便利なんです。特にメンドクサイ画像エディタを使って「元の画像」「サムネイル画像」両方をFTPでアップして・・・とかなんてのは必要ないし、MovableTypeなどのブログを使ってる人もこっちの方が全然使い勝手がいいです。

ちなみに、いわゆるレンタルブログを使ってる人も「画像をアップ出来るサーバー」さえあれば同じように使うことができます。画像をアップするサーバーは、別にブログのサーバーと一緒じゃなくても大丈夫です。画像URLをフルパスで書き出すようにすれば、見た目には変わりません。（ただし、そういう場合はファイルの直リンを外部からリンクできる場合のみ。簡単に言うと、無料サーバーはほとんどダメかと。最近はジオシティーズもダメになったよネ）

ブログとかと画像をアップするサーバーが別な人は、必ずこのスクリプトを「画像をアップする方のサーバー」にアップしないとダメですよ（ま〜当たり前ですが）。

【やり方】
ぷにゅねっとさんの「サムネイル作成＆画像ファイルアップローダー」を使わせてもらいます。
やり方も書いてあるんですが、エルエルも一応。ちなみにPHPスクリプトですので、サーバーでPHPが使えないとダメですよ。

DLした後に解凍して、サーバーにアップした後に書いてある通りにパーミッションを設定します。

そして重要なトコロが「何のシステムを使ってサムネイルを作るか？」って部分。
通常、最新のサーバーなどだとPHPのGD（グラフィックライブラリ）ってのがインストールされています。コレは画像のサムネイルを作るシステムみたいなモンです。ただ、GDがインストールされていないサーバーも多いです。（聞くところによると、このGDってのは結構サーバーに負荷をかけるらしい）

エルエルの今現在使っているサーバーはGDもインストールされていますが、昔のトコロはされていませんでした。なので、そういう時は「repng2jpeg」を使います。
repng2jpegは菅処さんよりDL出来ます。とても聞き慣れないファイルだと思いますけど、エルエルも実はこの時初めて聞きました。
簡単に言うと、サーバー側に「PHPのGD」とか「ImageMagick」とかがインストールされてなくてもサムネイルを作ってくれるシステムです。
DLして解凍すると大量のファイルがあると思います。その中から自分の使うのを一個だけ選びます。サーバーのＯＳによって分かれているようです。使用しているサーバーのＯＳがわからない場合は、管理者に聞いた方が早いかも。（ま〜一個ずつ試して言って使えるのをチョイスするって手もありますが）

そして、repng2jpegを使う人は先ほどのぷにゅねっとさんのsamc.phpと同じトコロにアップします。

後の細かい設定は「samc.php」をエディタで開いて設定します。基本的な部分は読めばわかるハズです。そしてブラウザからsamc.phpにアクセスすると、最初に先ほどsamc.phpで設定したIDとPASSを書く画面が出てきます。その後は画像を選択してアップするだけ〜。アップ同時に「画像を貼りつけるソース」を吐き出してくれます。

●ちょっとお得な改造方法●
【スクリプトが吐き出す画像のURLをフルパスにする】
デフォルトだと、いわゆる/img/○○.jpgみたいな感じのパスになりますので、それをhttp://からのフルパスを吐き出すようにします。独自ドメインなどを使ってる人は移転してもＵＲＬは変わらないで済むし、別サーバーから画像だけを呼び出したりする人はフルパスじゃないとダメですからネ。ま〜何かとフルパスの方が便利かと。

samc.phpをエディタで開いて６８行目以下を直します。
『元ソース』（「>」が大文字なのは仕様です）
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
// HTMLソーステンプレート(サムネイル有り)
$source_thumb = '＜a href="＜!--file_name--＞" target="_blank" title="＜!--file_size--＞ B"＞＜img src="＜!--thumb_name--＞" border="0" width="＜!--w--＞" height="＜!--h--＞" alt="＜!--file_size--＞ B"＞＜/a＞＜br /＞
サムネイルを表示しています。クリックすると元のサイズを表示します。';

// HTMLソーステンプレート(サムネイル無し)
$source_normal = '＜a href="＜!--file_name--＞" target="_blank" title="＜!--file_size--＞ B"＞＜img src="＜!--file_name--＞" border="0" width="＜!--w--＞" height="＜!--h--＞" alt="＜!--file_size--＞ B"＞＜/a＞';
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−

ここの部分に以下の部分を足します。
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
// HTMLソーステンプレート(サムネイル有り)
$source_thumb = '＜a href="http://○○.com/~○○/＜!--file_name--＞" target="_blank" title="＜!--file_size--＞ B"＞＜img src="http://○○.com/~○○/＜!--thumb_name--＞" border="0" width="＜!--w--＞" height="＜!--h--＞" alt="＜!--file_size--＞ B"＞＜/a＞＜br /＞
サムネイルを表示しています。クリックすると元のサイズを表示します。';

// HTMLソーステンプレート(サムネイル無し)
$source_normal = '＜a href="http://○○.com/~○○/＜!--file_name--＞" target="_blank" title="＜!--file_size--＞ B"＞＜img src="http://○○.com/~○○/＜!--file_name--＞" border="0" width="＜!--w--＞" height="＜!--h--＞" alt="＜!--file_size--＞ B"＞＜/a＞';
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−

○○の部分は自分のサイトのＵＲＬです。たとえばウチのサイトならば「http://10e.org/」になります。
画像がアップされる場所は、samc.phpで設定したフォルダの中になりますので、そのフォルダをこのアドレスの直下に作って下さい。（設定によってはどうにでも変更可能です）

【文字を画像の回り込ませる方法】

こんな風にサムネイルの横に文字を回り込ませる方法です。コレも自動的に行えるようにＣＳＳを使って設定しておくと更新が楽になります。

やり方は簡単なのですが、エルエルはいわゆる「外部スタイルシート」を使用していますの、それに準じて書きますと・・・。
たとえばＣＳＳに以下の文章を追加します。

.img_L{ float: left; border: none; margin-right:8px; margin-top:0px; }

コレは「画像を左に寄せる場合」です。右にしたい場合は「float: right;」にして下さい。
よーするに、コレを画像をアップする際に同時にクラス指定を付け加えるようにするんです。先ほどのイジったソースの部分に更にクラス指定のソースを付け足します。

−−−−−−−−−−−−−−−−−−−−
// HTMLソーステンプレート(サムネイル有り)
$source_thumb = '＜a href="http://○○.com/~○○/＜!--file_name--＞" target="_blank" title="＜!--file_size--＞ B"＞＜img src="http://○○.com/~○○/＜!--thumb_name--＞" class="img_L" border="0" width="＜!--w--＞" height="＜!--h--＞" alt="＜!--file_size--＞ B"＞＜/a＞＜br /＞
サムネイルを表示しています。クリックすると元のサイズを表示します。';
−−−−−−−−−−−−−−−−−−−−

「サムネイル無し」の方はそもそもサムネイルを作成しないようなので、左寄せのタグは同時には書き出せないみたい。手動で自分で一個づつ書いて。

こうすることによって、ブラウザから画像をアップすると同時に左寄せの状態のタグを吐き出してくれますよ。

あとは「画質」や「サムネイルサイズ」については自分の好きなように変更して下さい。samc.phpの中にちゃんと設定する部分があるので簡単なハズ。
ウチのサイトの場合は「１７０×１７０」「画質８５」が基本になっています。あまりファイルサイズが大きくなるような状態にしてしまうと、ＴＯＰページだ重くなるので注意しましょう。

あとは使い方によっては様々なコトが可能です。たとえば・・・

クリックするとでっかくなります

みたいなカンジで３回画像をアップして並べるコトも可能です。（この場合は左寄せ指定のタグは書いちゃダメよ。エルエルは実はsamc.phpが２個アップしてあって、「通常版」と「左寄せ版」と２個を使い分けています。）
最初はこうやって画像をイッパイアップすると、ブログなんかを使ってる人は記事を書く画面がソースだらけになってとまどいますけど、慣れてくると結構簡単にいろいろ出来るようになります。ウチみたいな内容のサイトだと、やっぱり画像があった方がわかりやすいし見てて楽しいですよネ。
（ちなみに、いきになって毎日画像をアップしまくってると結構な量になりますので、サイト容量の少ない人は注意が必要です。エルエルはこうやって使ってる画像だけで今現在で２００メガくらいあるかな・・・）

一度コレになれると、MovableTypeに付属してる画像アップロード機能とかは使いづらくてやってられませんよ。こっちの方が全然楽なのです。

最後に、とっても便利なスクリプトを提供してくれている「ぷにゅねっとさん」と「菅処さん」に感謝。

※なんかわからないトコロがあって、エルエルが理解出来る部分ならば質問などもどうぞ。