2007-09-03 (月)
■ Zend Framework 用 Piece_Flow, Piece_Right コンポーネント Ver.0.7 を公開
１週間ほど前に Ver.0.6 をリリースした のに引き続きバージョンアップ。 変更点は以下の通り。
- Revulo_Controller_Dispatcher_Flow (Piece_Flow を用いた Dispatcher)
- モジュールへの対応を強化するために、configDirectory, cacheDirectory の設定方法を見直し
- モジュールのディレクトリを起点とする相対パスで指定するように変更
- 指定がなければ、デフォルト値を用いて自動設定するように変更
- 必要な時だけ Zend_Config クラスを読み込むように変更
- モジュールへの対応を強化するために、configDirectory, cacheDirectory の設定方法を見直し
- Revulo_Validate_Right (Piece_Right を用いた Validator & Filter)
- Piece_Flow コンポーネントと同様の変更
- 各オプションを設定する setConfigDirectory() などのメソッドを追加
最初は、モジュールへの対応のつもりでコードを修正していたが、 どちらかというと、改良のメインはディレクトリの自動設定の方。 考えてみれば、ディレクトリ構造はほぼ決まっているのだから、 それに合わせてデフォルト値を設定してしまえば良かったんだった。
あと、マニュアルの方もかなり書き直したので、 少しは分かりやすくなったんじゃないかと。
■ Zend Framework 用 Piece_Flow コンポーネント Ver.0.7.1 を公開
Ver.0.7 でモジュール対応を行ったつもりだったが、 キャッシュが利用されなかったり動かなかったりする場合があったので、 取り急ぎその修正を行った。変更点は以下の通り。
- フロー定義ファイルとキャッシュは、デフォルトモジュールのディレクトリの下に配置するように変更
- autoload する際に全てのコントローラディレクトリを include_path に含めるように修正
Piece_Flow のコードや、自分で書いたコードの流れを追いかけてみると、 configDir, cacheDir の値は、フローを開始した際の値がずっと使われている。 ということは、config や cache のディレクトリは、各モジュールごとに用意しても無意味。 全モジュールに共通のディレクトリというのを１つだけ用意してやらないといけない。
あと、２番目の方は、 今までは現在のコントローラディレクトリだけを include_path に含めていたが、 モジュールを横断して別のフローに移動するような場合を考えると、 それでは不十分だったので修正しておいた。
2007-09-07 (金)
■ Safari の backgroung-position のバグ
古い Macintosh でテストする機会があったので、 自分の書いた JavaScript や CSS をいろいろとチェックしてみた。 PukiWiki のツリーメニューのスタイルシートで、
background: transparent url(leaf.gif) no-repeat left 0.3em;
のように指定していたが、これだと Safari 1.1 の場合に画像が変な位置にずれる。 以下のように left → 0 に書き換えるとなぜかＯＫ。
background: transparent url(leaf.gif) no-repeat 0 0.3em;
Safari 1.3 でテストしたら両方とも問題なしだったので、 どうでもいいといえばどうでもいい話なのだけれど、 かなり古い Safari にも対応するつもりなら、下のように書いておいた方が安全。
参考までに、関連のありそうなページをいくつか。
2007-09-09 (日)
■ PukiWiki 用プラグイン socialbookmark.inc.php Ver.1.0 を公開
ブログなんかだと、 ソーシャルブックマークのアイコンがずらーっと並んでいるのをよく見かけるが、 PukiWiki ではあまりそういうのを見かけないのでプラグインを作ってみた。
特徴は以下の通り。
- 各種ソーシャルブックマークのアイコンを表示
- ページの登録ボタン
- ページの被ブックマーク数 (クリックすると詳細を表示)
- JavaScript を無効にしていても機能する
- 以下のソーシャルブックマークに対応
- del.icio.us
- はてなブックマーク
- livedoor クリップ
今のところ、３種類のソーシャルブックマークにしか対応していないが、
$services = array(
'delicious' => array(
'name' => 'del.icio.us',
'add' => 'http://del.icio.us/post?url='. $permalink . '&title=' . $title,
'view' => 'http://del.icio.us/url/' . md5($permalink),
'counter' => 'http://del.icio.us/feeds/img/savedcount/' . md5($permalink) . '?aggregate',
'icon' => 'http://images.del.icio.us/static/img/delicious.small.gif',
'width' => 10,
'height' => 10,
),
'hatena' => array(
'name' => 'はてなブックマーク',
'add' => 'http://b.hatena.ne.jp/add?mode=confirm&url=' . $permalink . '&title=' . $title,
'view' => 'http://b.hatena.ne.jp/entry/' . $permalink,
'counter' => 'http://b.hatena.ne.jp/entry/image/' . $permalink,
'icon' => 'http://b.hatena.ne.jp/images/append.gif',
'width' => 16,
'height' => 12,
),
'livedoor' => array(
'name' => 'livedoor クリップ',
'add' => 'http://clip.livedoor.com/clip/add?link=' . $permalink . '&title=' . $title,
'view' => 'http://clip.livedoor.com/page/' . $permalink,
'counter' => 'http://image.clip.livedoor.com/counter/' . $permalink,
'icon' => 'http://parts.blog.livedoor.jp/img/cmn/clip_16_16_w.gif',
'width' => 16,
'height' => 16,
),
);
こういう形にまとめてあるので、この部分のデータさえ増やせば、 他のソーシャルブックマークにも比較的簡単に対応できるはず。
■ サイト名を Revulo's Laboratory に変更
トップページ のサイト名を Revulo's Memo から Revulo's Laboratory に変更しました。
開設当初はインストールメモがメインコンテンツだったのが、 次第に自作のスクリプトやライブラリの比率が高くなってきたので、 内容に合わせて改名したくなった、というのが理由の１つ。
それとソーシャルブックマークのアイコンを設置したので、 名前を変えるなら今のうちだ、と思ったのがもう１つの理由。
…なのだけれど、はてなブックマークで試してみたところ、 サイト名を改名しても、 すでにブックマークされているページには反映されないみたい。 まぁ、それはしょうがないか。
2007-09-11 (火)
■ jQuery 1.2 がリリース。gzip 圧縮でサイズが 14kB に
jQuery 1.1.4 と比較すると、 かなりの機能が追加されたり、別プラグインとして分離されたりしている。 詳しい変更点は、 本家サイト や こちらのサイト がよくまとまっていると思うので、そちらを見て下さい。
さて、普通の解説は他の人に任せるとして、 jQuery のサイトに書かれている
jQuery 1.2 (14kb, Minified and Gzipped)
という文の解説でも。この辺の経緯というか、詳しい話は、
- Julien Lecomte's Blog ≫ Gzip Your Minified JavaScript Files
- Dean Edwards: Notes on JavaScript Compression
あたりに書かれているが、結論としては、 YUI Compressor などで minify (コメントや空白を取り除いたり、変数名を短くしたり) して、 その後 gzip 圧縮をかけるのが一番圧縮率がよい、ということ。 従来の Packer を使って圧縮した jquery.pack.js のサイズが 26kB なので、その差は明らかだろう。
あと、これは予想だが、 gzip 圧縮の場合はブラウザが展開作業を行うのに対し、 Packer で圧縮したコードは JavaScript によって展開作業が行われる。 だから、jquery.pack.js を使うと、 非力なマシンの場合にもたつくんじゃないか、という気がする。
2007-09-13 (木)
■ Piece_IDE 0.1.0 がリリース
Piece Framework の統合開発環境である Piece_IDE がついにリリースされた。 現バージョンでは、以下の機能を備えているらしい。
- フローデザイナー
- プロジェクト生成ウィザード
インストール方法や使い方なんかはこちらのページに載っている。
これで、フロー定義ファイルを作成・編集するのに、 手でゴリゴリ書かなくても Eclipse 上で GUI で編集できるようになったので、 少しは導入が楽になるんじゃないかと思う。拙作の Zend Framework 用 Piece_Flow コンポーネント を使う時にも役立つはず。
早く試してみたいけれど、 この前 OS を再インストールした時に Eclipse の環境を消しちゃったんだよな。 どうせなら Ubuntu をインストールしてその上に環境構築したいので、 試すのはしばらく先になりそう。でも早く試さねば。
2007-09-16 (日)
■ JavaScript を使わずに Yahoo!ブックマークに追加する方法
Yahoo!ブックマークの公式ページには JavaScript を使った方法しか載っていないが、 JavaScript を使わずに登録する方法がようやく分かった。 以下の URL にアクセスすればよい。
http://bookmarks.yahoo.co.jp/action/bookmark?u=(Permalink)&t=(Title)
この方法の情報源がどこなのか分からなかったが、 いろいろと試してみたらこれでうまくいった。 ちなみに、
http://bookmarks.yahoo.co.jp/action/post?u=(Permalink)&t=(Title)
でも良いのだけれど、 こちらはブックマークした後に元のページに戻ってくれないので、 最初の形式の方がオススメ。
ただし、実際には onclick を併用して、 JavaScript が有効か無効かによって場合分けする方がよいかもしれない。
■ PukiWiki 用プラグイン socialbookmark.inc.php Ver.1.1 を公開
Yahoo!ブックマークの JavaScript を使わない登録方法 が分かったので、自作の PukiWiki 用プラグインにも組み込んでみた。 前バージョン からの変更点は以下の通り。
- Yahoo!ブックマークに対応
- del.icio.us のブックマーク数は JSON feed を解析して得るように変更
ダウンロードは以下のページから。
del.icio.us と Yahoo!ブックマークのブックマーク数は、 画像でなくテキストで表示するようにしたが、 この部分は JavaScript というか JSONP を使って非同期にやった方がいいのかも。 全部 PHP の側で処理しようとすると、 この通信の部分がボトルネックになって、 ページ全体の表示が遅くなってしまう可能性がある。
あ、でも、結果をキャッシュしておけばいいんだな。 前回の取得から１時間以内だったらキャッシュを利用とか。 そうか、JavaScript でやるとキャッシュを利用しにくいから、 むしろこの方がいいかな。
でも、dump2html プラグインなんかを使って HTML 化する場合を考えると、 JavaScript で最新情報を得るようにした方がいいのか。 一長一短だな。
2007-09-17 (月)
■ jQuery UI 1.0 と jQuery 1.2.1 がリリース
予告通り jQuery UI がリリースされていた。
prototype.js に対する script.aculo.us みたいなものか。 ただ、一部の機能は今までも jQuery のプラグインという形で提供されていたので、 どちらかというと公式のプラグイン集という感じかも。
あと jQuery 1.2.1 がバグフィックスリリースされていた。 主な変更点は以下の通り。
- Relative Animations の記法を変更
- jQuery 1.2 で削除された .eq() メソッドを復活
2007-09-20 (木)
■ robots.txt に Sitemap の設定を追加
やるのをずっと忘れていたが、 サイトマップの存在を検索エンジンのクローラーに知らせるために、 robots.txt に以下の設定を追加してみた。
Sitemap: http://www.revulo.com/sitemap.xml Sitemap: http://www.revulo.com/blog/sitemap.xml
Sitemap: 行を複数書いているのは、 メインコンテンツ (PukiWiki) とブログ (tDiary) で別々にサイトマップを生成しているため。 公式ページの説明 ではその辺の記述があいまいだが、 検索してみた限りでは、こういう書き方でもＯＫっぽい。
今まで Google に対しては、 Google ウェブマスター ツール でサイトマップの URL を登録していたが、 Yahoo! に対しては何もしていなかったので、 これで少しは検索に引っかかりやすくなったりするんだろうか？ まぁ、気休めみたいなものだが、 robots.txt に１、２行追加するだけなので、やっておいて損はないだろう。
2007-09-21 (金)
■ robots.txt に Sitemap の設定を追加 (2)
昨日の robots.txt で Sitemap を指定する 話の続き。 Sitemap: 行を複数書いても大丈夫なのか少し心配だったので、 Google ウェブマスター ツール で、robots.txt を解析 っていうのをやってみたら、 こんな結果が出た。
| 値 | 結果 |
|---|---|
| 行 1 : Sitemap: http://www.revulo.com/sitemap.xml | 有効なサイトマップが検出されました |
あれ？ これって、２行目のサイトマップが認識されていないのでは？ ますます心配になって、もう１度検索し直してみたところ、以下の記事を見つけた。
Google の中の人が、 複数の Sitemap: 行を記述するような例を挙げている。 だからたぶん、大丈夫なんじゃないかと。
しばらくアクセスログを観察してクローラーの挙動を見て、 なにかまずそうだったら、 サイトマップインデックスファイルを作るとか、 別の方法を考えることにしよう。
2007-09-25 (火)
■ IE5.01SP2, IE5.5SP2 のインストール方法
IE 5.01 SP2 のテスト環境を念のために作っておこうかと思い、 ウィンドウズ関連ファイル直リン倶楽部のログを参考に、 Microsoft からダウンロードしてこようとしたら、404 のエラーが返ってきた。 げっ、もうダウンロードできなくなってしまったのか！？
まだどこかにないのかな、と探してみたところ、 ここ にそれらしき URL を発見したので、試しにダウンローダにセットしてみた。 おぉ、こっちの URL はまだダウンロード可能だ！ ということで、とりあえず今のうちなら、 TA-31z Counter Force / Windows UpDate / Internet Explorer に (リンク切れ) として載っている URL の先頭部分を、
http://www.download.windowsupdate.com/msdownload/update/v3/static/ie501sp2/x86/ja/ http://www.download.windowsupdate.com/msdownload/update/v3/static/ie55sp2/x86/ja/
に変更すればダウンロードできます。
そうやって、80 個くらいのファイルをダウンロードしてきたら、 IESETUP.INI というファイルを、
[Version] Signature="Active setup" [Options] IELiteMode=0 ConfirmFileList=0 LocalInstall=1
のように作り、IE5SETUP.EXE を実行すればＯＫ。
あと、現在ダウンロードできる VMX86_01.CAB は破損している (というか、JavaVM を使えないように Microsoft がファイルを修正している) が、実は１バイト書き換えれば正常なファイルに戻すことができる。 もしパッチ箇所を知りたい人がいたら、メールでもくれれば教えます。
2007-09-26 (水)
■ Zend Framework 1.0.2 がリリース
Zend Framework のバグフィックスバージョンがリリースされている。
93 個のバグ修正と、若干の機能追加が行われているらしい。 ぱっと見た感じでは、Zend_Db 関連の修正が結構入っているようだ。
あと、関係ないが、ChangeLog を見ていたらこんなことが書かれていた。
array_intersect_key(), array_diff_key() を使うより、 同等の処理を PHP で書いた方がずっと高速だと書かれている。 え？ そうなのか。たしか自分が書いたコードのどこかで使っちゃっていたよな。 それが本当なら直しておくか。
2007-09-27 (木)
■ ２カラムレイアウトでフッターを最下部に表示する
最近知りましたが、 コンテンツ量が少ない場合でもフッターを画面最下部に表示する、 という CSS のテクニックが存在します。
このテクニックをマルチカラムの時に使えないものか、と探してみたところ、 ３カラムレイアウトと組み合わせた素晴らしい例がありました。
ただ、私は２カラムの方が好みなので、 これを参考に２カラム用のスタイルシートを作ってみました。
- ヘッダー＆フッター＆左サイドバーのレイアウト
- サイドバーは幅固定、メインコンテンツは幅可変
- コンテンツの量が少ない場合でも、フッターは最下部に表示
サンプルも用意したので、見てみて下さい。
なお、このサンプルは、広告を入れるために CSS を多少いじってあるので、 こちらに広告無しのサンプルを置いておきます。
特に権利は主張しないので、好きなように改変して使って下さい。
(追記) 上のサンプルだとレイアウトが崩れやすいので、 さらに修正を加えて min-width の設定も加えたものを作りました。(2007/10/11)
さて、ここからは技術的な話（というか苦労話）を。 オリジナルのスタイルシートでは表示が崩れることがあったので、 それを防いだりするためにいろいろと改変しています。
- CSS ハックを用いて１つの CSS ファイルに統合
- コンテナの役割をする部分のクラス名を container-*** のように変更
- ヘッダ部分に margin-right: -200px; の設定を追加し、IE 5.0 で表示が崩れていたのを修正
- カラム落ちを防ぐために word-break: break-all;、overflow: hidden; の設定を追加
- z-index の設定を削除
- その他ちょこちょこ変更
結果として、HTML と CSS はそれぞれ次のようになっています。 (主要な部分だけ抜き出しています。)
<html> <body> <div id="header"> Header </div> <div id="container"> <div id="container-header"></div> <div id="container-right"> <div id="right"> Main contents </div> </div> <div id="container-left"> <div id="left"> Sidebar </div> </div> <div id="container-footer"></div> </div> <!-- closing #container --> <div id="footer"> Footer </div> </body> </html>
* {
margin: 0;
padding: 0;
border: none;
}
html, body {
height: 100%;
}
#container {
min-height: 100%;
margin-left: 200px;
margin-bottom: -100px;
}
* html #container { /* for IE6 and below */
height: 100%;
}
#container-header {
height: 100px;
}
#container-right {
width: 100%;
float: right;
position: relative;
}
#container-left {
width: 200px;
margin-left: -200px;
float: right;
position: relative;
}
#container-footer {
height: 100px;
clear: right;
}
#header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
margin-right: -200px; /* for IE 5.0 */
}
#left {
word-break: break-all; /* for IE6 and below */
overflow: hidden;
}
#footer {
width: 100%;
height: 100px;
position: relative;
}
ここまでいじったのが上のサンプルなわけですが、 もう少し手を加えた方が良さそうな箇所があるので、 それを書いておきます。
min-width の設定
ブラウザの幅を縮めた時に表示が崩れるのを防ぐために、 body と #header に min-width を設定した方が良いです。 ただし、IE6 以下で擬似的に min-width を実現するのが面倒なので、 サンプルではそこまでやっていません。
word-break: break-all; の設定
サイドバーに長い単語が現れた時に横にはみ出してしまうのを防ぐために、 overflow: hidden; の設定を追加しています。 ところが IE6 以下には、親要素の幅を広げるというバグがあるため、 これだけだと、いわゆるカラム落ちの現象が発生してしまいます。
それを防ぐために、word-break: break-all; の設定も追加しているわけですが、 実は幅を指定することでもこのバグは回避できるようです。
つまり上の例で言うと、 word-break: break-all; の代わりに width:178px; のように指定すれば良いです。 この方が、全てのブラウザで同じように表示されるので良いかもしれません。
ネガティブマージンの使い方
２カラムレイアウトにするためにネガティブマージンを使っていますが、 結構珍しいやり方をしていると思います。
- 一番外側のコンテナに左マージンを設定して幅を狭めている
- そのため、ヘッダの部分にも min-width を設定しないと表示が崩れる
- コンテンツの量によらず、サイドバー部分がきれいに色分けされる
このようにメリットとデメリットがありますが、 メインコンテンツとサイドバーが同じ背景色でも構わないのならば、 普通の２カラムレイアウトにした方が良い気がします。
2007-09-29 (土)
■ VMware に Debian etch をインストールした際の問題
今まで Debian sarge を VMware にインストールしていろいろと使っていたが、 ミスってその仮想マシンを壊してしまったので、 いい機会なので VMware 上に Debian etch のテスト環境を作ってみた。 が、何ヶ所かで予想外に苦労したのでメモしておく。
NFS のファイルロックがエラーになる
NFS マウントしたディレクトリに対して読み書きすると、 ファイルロックしている箇所でこういうメッセージが出た。
lockd: cannot monitor xxx.xxx.xxx.xxx lockd: failed to monitor xxx.xxx.xxx.xxx
検索してみると、 ここ に /etc/init.d/nfs-common start して statd を起動させれば直ると書いてあった。 でも、それはさすがに場当たり的な感じがしたので、 さらに検索してみたところ、詳しく書かれているページを見つけた。
このページによると、結局、起動スクリプトのバグが原因ということらしい。 嬉しいことに、解決法もいくつか載っている。
- initscripts のパッケージを 2.86.ds1-38.1 (lenny) にアップグレードする
- /etc/network/if-up.d/mountnfs にパッチをあてる
- NFSv4 プロトコルでマウントする
この中では、initscripts を最新版にするというのが一番素直な方法だろう。 ただ、まともにアップグレードしようとすると、 libc6 のアップグレードまで要求されるので、 パッケージを展開して、その中の /etc/network/if-up.d/mountnfs と差し替えることにした。
# cd /dev/shm # wget http://ftp.jp.debian.org/debian/pool/main/s/sysvinit/initscripts_2.86.ds1-38.1_i386.deb # dpkg -x initscripts_2.86.ds1-38.1_i386.deb . # cp -p etc/network/if-up.d/mountnfs /etc/network/if-up.d/mountnfs
vmxnet ドライバの使い方
VMware Tools をインストールすると、 高速な vmxnet ネットワークドライバが使えるようになる。 ところが、実は、起動時に vmxnet より先に pcnet32 のネットワークドライバが組み込まれており、 せっかくの vmxnet のドライバが使われていない。 (lsmod や lspci コマンドを使うと、そのことがよく分かる。)
だから、vmxnet を機能させるためには、 何とかして pcnet32 のドライバが読み込まれないようにしないといけない。 たぶん、一番楽な方法は、
ethernet0.virtualDev = "vmxnet"
の設定を vmx ファイルに追加すること。 こうやって指定すれば、vmxnet がネットワークドライバとして使われるようになる。
ところがさらに問題があって、 この変更を行うとシャットダウンが途中で止まってしまうようになった。 シャットダウン時の動作を追っていくと、 /etc/rc6.d/K08vmware-tools というスクリプトで VMware Tools のサービスを停止しているが、 その中で vmxnet のドライバを外してしまっており、 それ以降ネットワークが使えなくなってしまっていた。 要するに、タイミング的に、vmxnet のドライバを外すのが早すぎる。
だから、このタイミングを遅らせればいいのだけれど、 どこまで遅らせれば良いのかはっきりしないので、
$ sudo rm /etc/rc6.d/K08vmware-tools
とやって、この VMware Tools を停止するスクリプトを削除してしまった。 ちょっと強引な方法だけれど、これで解決できた。
2007-09-30 (日)
■ Debian etch に Dotdeb 版 PHP 5.2.4 をインストール
昨日、VMware で Debian etch を動かすのにえらく苦労したが、 これでようやく Debian etch をまともに動かす目処がたったので、 早速、PHP 5.2 のテスト環境を VMware 上に作り直してみた。 Wiki の方にインストール手順もまとめておいた。
これはあくまでも自分がインストールした時のメモであって、 他の人が使う場合には適宜読み替えないといけないのだけれど、参考にはなるかと。
# Fujiwara Takahiro [いや〜IE5のダウンロードてのは難しいんですねえ。]