皆さん、こんばんは。
先週にバレーボール(観戦）とa nationを堪能して、ヘトヘトな笹亀です。
今年の夏も終わりにさしかかり、いよいよPHPカンファレンスの時期を向かえます。
今年のカンファレンスはsymfony 開発者 Fabien Potencier 氏がいらっしゃるとのことでとても楽しみにしています＾＾
尚、カンファレンスには参加登録が必要になりますので登録を忘れずに。。
さて、本日はphpImageCloudを紹介したいと思います。
まずは画像をご欄ください。
このように画像を雲のようにたくさん表示して見せることができます。
画像を視覚的に楽しんでみることができてとてもおもしろいと思いました。
jQueryと一緒に使う事によって画像をクリックしてアニメーションをさせて表示させることもできます。
実際にサンプルを使ってみたい場合は下記をご参照ください。
http://phpimagecloud.sourceforge.net/examples/jquery/
実際にクラスを使って自分の画像を取り込んでみたいと思います。
リンク先よりダウンロードください。
http://sourceforge.net/projects/phpimagecloud/files/
２種類のファイルがありますが「phpimagecloud_0.1_full.zip」はサンプルの画像情報を含んだファイルになります。今回は「phpimagecloud_0.1_without_images.zip」のサンプルの画像情報を含んでいない方を利用してご紹介します。
早速ダウンロードをして、解凍するとファイル構成は下記のようになっております。
解凍したファイルとフォルダの説明を記載しておきます。
array.txt：generate.phpで実行すると作成されるファイル（phpImageCloudで表示する画像情報がシリアライズされている
generate.php：Cloud画像を生成するPHPファイル
→items.txtに記載されているリストからitemsフォルダを参照してtagsに出力するスクリプト
index.php：Cloud画像を表示するスクリプト
items：Cloud画像にする元画像を格納するフォルダ
items.txt：itemsフォルダに入っているリストをCloud画像の設定情報付きでリスト化したもの
jquery.js：省略
jquery.pngFix.js： jQueryをつかった透過PNG処理するjavascript
tags：変換したCloud画像を格納するフォルダ
解凍したらまずはCloud画像を作成する必要があります。
itemsフォルダにCloud画像にするファイルを格納します。
ファイル形式はjpgのものを入れます。
※その他の形式は対応しているかわかりませんでした。
次にgenerate.phpを実行します。
items.txtから作成するようになっていたので、
itemsフォルダから読み込むように変更しました。
※書き込み処理を行うのでjqueryフォルダ以下のアクセス権限を書き込みができるように変更しておいてください。
参考までに変更した一部分のファイルです。
//read file with items list
//$items = file("items.txt");
$dir = "./items/";
//need add more item
$add = true;
if ($dh = opendir($dir)) {
while (($file = readdir($dh)) !== false) {
if ($file != '.' & & $file != '..') {
if ($add)
{
$item = explode(",",$file);
$value = 20+5*(((int)$item[1])+2); //just stupid calculation (value must be [0-100])
//add item to cloud
$id = $cl->additem("items/" . $file,$value,$item[0]);
echo "Added file: items/".$file."<br>";
flush();
//save cloud piece
$item = explode('.', $file);
$cl->saveitemtofile($id-1, "tags/".$item[0].".png");
echo "Saved tag: tags/".$item[0].".png<br>";
flush();
if ($id === false)
{
$add = false;
echo "That's all.<br>";
}
}
else
{
echo "Not need to add, cloud is full.<br>";
}
}
}
closedir($dh);
}
※generate.phpでは50件くらいの画像変換が限界でした
→「Not need to add, cloud is full.」のようにエラーが出力されました
実行後はtagsフォルダにCloud画像ができているのを確認してください。
最後にindex.phpへアクセスするとCloud画像が作成されて、下記ように表示がされるようになります。
SNSや画像リストを表示するときにこの表示方法で見せたらおもしろいなぁと思いました。
しかし。１つ１つ変換をしないといけないので動作が重くなるのとページング処理を作成したりするのが大変そうですね＾＾；
おもしろく表示ができるので、
皆さんも是非利用してみてください。