UpLoad & Lightbox.js Ver.0.02です。
ブラウザから複数の画像ファイルのアップロードできるようにしました。
でも、まだ削除はできません。
http://www.streamlive.podzone.net/upload-lightbox0.02/

lightbox.jsを使ったアルバム生成スクリプトを使わせてもらいました。
作ったのは、画像リサイズ、リネームをしなくてもブラウザから画像をアップロードして手軽にアルバムが生成されるPHP。
超シンプル。（しかし無駄が多い…）

＜?php
//ファイル番号のログファイル
$logfile = "counter.log";
//ファイル番号のログファイルを開く
$counter = 0;
if( $fn = @fopen($logfile, 'r') ) {
$counter = trim(fgets($fn));
fclose($fn);
}
//カウントアップ
$userid = ++$counter;
$img_store_dir = './images/dir/';//出力先ディレクトリ
$resized_img_filename = $img_store_dir . $userid . "-01.jpg"; // 出力ファイル名設定
//ログファイルに記録
if( $fn = @fopen($logfile, 'w') ) {
fwrite( $fn, $counter);
fclose($fn);
}
$up_filename = $_FILES['up_filename']['tmp_name'];
//縦横サイズを取得
list($width,$height)=getimagesize($up_filename);
$src = @imagecreatefromjpeg($up_filename);
//縦横サイズを決定。縦横比が変わらないようにしてみたつもり
$width2 = 640;
$percent = $width / $width2;
$height2 = $height / $percent;
//変更後の画像領域を作成
$dst=imagecreatetruecolor($width2 ,$height2);
//画像の大きさを変更
imagecopyresized($dst,$src,0,0,0,0,$width2,$height2,$width,$height);
//画像を保存
imagejpeg($dst,$resized_img_filename);
//サムネイルを作成
//縦横サイズを取得
list($width,$height)=getimagesize($resized_img_filename);
$src = @imagecreatefromjpeg($resized_img_filename);
//縦横サイズを1/5に
$width3 = $width2 / 5;
$height3 = $height2 / 5;
//変更後の画像領域を作成
$dst=imagecreatetruecolor($width3 ,$height3);
//画像の大きさを変更
imagecopyresized($dst,$src,0,0,0,0,$width3,$height3,$width2,$height2);
//画像を保存
imagejpeg($dst,$img_store_dir . $userid . "-01-01.jpg");
?>

自動でアルバムを生成するスクリプトに画像を読み込ませるには、ファイル名を連番にして
サムネイルの末尾に-01-01.jpg、本画像の末尾に-01.jpgを付けてディレクトリにまとめる。
本画像の横幅を640ピクセルに揃えて、高さの比は変わらないようにしてみたつもり。
問題点：
・一枚ずつしかアップできない。
・入力チェックがない。
・ブラウザから新しいアルバムが作れない。
・タイトルの変更もできない。
・テンプレート化してない。
などなど
デモ
http://streamlive.podzone.net/album1/imageupload1.php

世界選手権。
始まりますね。
しかも今年は北京オリンピックの出場枠を得るための予選になってるだけあって、盛り上がってることでしょう。
みんながんばれー！！

最近サーバー上でHTMLを書いていることが多い。
最初はローカルで編集してから、SCPでアップの方が良かったが、
慣れてくるとシェルで直接編集が楽になってきた。
とは言っても、複数のファイルの中身を一括で置換したりなどの操作はドリームウィーバーを
使ってしまってた。
しかし、正規表現を用いての文字列の検索、置換にはUNIXに軍配が上がるそうだ。
今もっているDWがCSSの描写に対応してないから、一括置換をするときくらいしか使ってない。
ならば、HTMLコーディングを全部シェルで行って、HTMLエディタ以上に使い倒してやろう。
とは言えまだ初心者なので、使えるTIPSをここにメモります。
hogehogeを検索
オプション　-r　をつけてディレクトリ以下のファイルを再帰的に検索

$ grep -r 'hogehoge' ./*

拡張子が.htmlのファイルに含まれる文字列、hogeをfooに置換

sed "s/hoge/foo/g" *.html

これだと、置換はされても保存されないので、
元ファイルを.bakにバックアップして、置換処理後の元ファイルに保存する。

for FILE in *.html; do cp $FILE $FILE.bak; sed -e "s/hoge/foo/g" $FILE.bak > $FILE; done

実はforコマンドの使い方が良くわかってない・・・
それと、この場合で、ディレクトリ以下から検索、置換の方法がわからない。
この辺を参考にしました。
http://zapanet.info/blog/item/854

続きを読む

阿佐ヶ谷にあるラピュタビルという、不思議な建物の中に入っているフレンチレストラン。
「山猫軒」
http://www.laputa-jp.com/yamaneko/index.html
すごいアットホームな感じの店内で、雰囲気はとても良かった。
料理は、ええと、いろいろ食べたけど、とにかく美味しかった（←コメント力無し）
また行きたいレストランでした。

Google AJAX Feed APIの表示されるFeed数の変更をしたのでメモ。

google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("http://www.shunpei.jpn.org/blog/index.xml");
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
container.innerHTML += "<li><a href='" + entry.link + "'>" + entry.title + "<\/a></li>";
}
}
});
}
google.setOnLoadCallback(initialize);

デフォルトでのFeed数は4なので、

feed.setNumEntries(5);

とすると、好きな数の件数を読み込むことができる。
その他詳しい使い方はGoogle AJAX Feed API Developer Guideに書いてある。

いまさらながら
Twitter
を使って見ました。
トップに貼り付けてみたのだが、どーなのこれ。
サイトに貼り付けるタグが用意されていたのだけれど、サイトにはっ付けてどーするの、これ？
使い方が理解できてないよね･･･

次もPHP＋Ajaxなファイラー
PHP Navigator
これも機能的には大差はないが、GDLibraryをいれれば画像ファイルのサムネイルが見れるようだ。
でも、アカウントの管理はないです。
パーミッションが変更できるようなのだが、アカウント管理がないのにパーミッションが変更できて意味があるのだろうか･･･？
いまいち良くわからないけど、使いやすくはありそうだ。
デモ
http://streamlive.podzone.net/navphp4/

ブラウザベースのファイラーで良いのがないかと探していたのですが、
候補に上がっていたものをインストールしてみた。
Ajaxなエクスプローラ「AjaXplorer」
説明要らずで使えるリッチでシンプルなAjaxのUIはとても使いやすそう。
しかし、権限の管理が一切ないのでそこのところを何とかしないかぎり、
複数人で使うにはあまり現実的ではなさそう。
http://streamlive.podzone.net/ajaxplorer/
試しに自サバに入れてみました。

「-moz-border-radius」というプロパティがあるのを最近知りました。
Mozillaの独自拡張で実験的には実装しています。
これは良いと思うんだけどな。
是非ともCSS３では実装されて欲しい。
下のサンプルは当然IEでは角丸にはなりません。
Firefoxを使いましょう。

<h1 style="-moz-border-radius:10px;
background-color:black;
color:white;&quot>
角丸</h1>

角丸

パドラーのブログやサイトを集めたリンクのページを作りました。
ずっと工事中でごめんなさい。
www.shunpei.jpn.org/links
これからリンクも増やしていきます。
リンクのページもMTで作りました。
MTのタグっていっぱいあるのね。
いまいちよくわかんなかった。んー

MTのナビゲーション部分をモジュール化したらリンクがおかしくなってしまった。。。
今日はもう寝ます。
明日直そうっと。

しばらく前から使っていたRSSをトップページに表示させるサービスがうまく表示されてなかったので、
「Google AJAX Feed API」
を使ってみることにした。
Javascriptの勉強も兼ねて。
ってか、リファレンスも豊富にありすぎてJavascript知らなくてもできてしまいそうだけど。
googleのサービスはやっぱりさすがですなぁ･･･
いろいろといじれるようだけど、とりあえず最低限の最新エントリーへのリンクが表示されるように
してみました。

google.load("feeds", "1");
function initialize() {
//読み込むxmlの指定
var feed = new google.feeds.Feed("http://www.shunpei.jpn.org/blog/index.xml");
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
//liを作成
container.innerHTML += "
<li><a href='" + entry.link + "'>" + entry.title + "<\/a>

";
}
}
});
}
google.setOnLoadCallback(initialize);

とりあえず動いたけど絶対おかしい。
Javascript内にHTMLタグ書いてるし。
Javascriptでタグも生成できるようにしよう。

ひどいねー
世界選手権でこんな運営するようでは。
終わってるのは、日本カヌー連盟だけではなかったのね。
これでよく日本でオリンピック開こうなんて言えるね！
http://www.mainichi-msn.co.jp/sports/field/news/20070829k0000m050178000c.html

と言うか、目標。
集中してやらないと進まないから、何やるかしっかり決めてしまおう。
・今週～
読み途中の本を終わらす。
「コンプライアンスの考えかた」
オライリーのサイ本をまずは読了。
不明点にはチェックを付ける。
・来週～
Javascriptの復習。
と言うか不明点をはっきりさせて、要点を押さえる。
自サバにCentOSのインストール。
PHP＋DBの実践
今後（たぶん秋）
・perl
・入門vi
・subversion、自サバに開発環境の構築
・経理のフローの理解
・HTTP、RESTとはなんぞや
・XHTML＋CSSの復習。
・MT以外のCMSを使ったサイト構築
・