初代

デモ

2代目

デモ

3代目

デモ

4代目

デモ

5代目

デモ

6代目

7代目

8代目

ということでCeraBoxというものを使います。
Lightboxとしての機能もそうですが、YouTubeやSWF、IFRAME、それにAndroidやiOSなどのスマートフォンにも対応しているので、すんげぇいい感じです。
ですが、ちょっと問題が。使い方が違うのでそのままでは使えない。
Slimboxでは以下のようにrel属性を設定するようにしていました。

<a href="large-image.png" rel="lightbox[]" target="_blank" title="Image title"><img alt="Image title" height="150" src="small-image.png" width="200" /></a>

ここでブランケット（[]）の中に文字列を入れることでグループ化することができます。
過去の記事を書き換えるのは面倒臭いので、このルールを変更することなくCeraBoxに移行するための対応をすることにします。

ということで、JavaScriptをガリガリっと。

var LightboxManager = {
    /**
     * Create Lightbox
     * Using CeraBox on Mootools
     *
     * @param attrName string Name of attribute
     * @param groupName string Name of group, and attribute value must be 'groupName[]'
     * @param options object Options for CeraBox
     */
    createLightbox: function(attrName, groupName, options) {
        options = options || {};
        var elements = $$('a[' + attrName + ']');
        var targetElements = [];
        var regexp = new RegExp('^' + groupName, 'i');
        for (var i = 0, len = elements.length; i < len; i++) {
            var relValue = elements[i].getAttribute(attrName);
            if (relValue.match(regexp)) {
                if (!targetElements[relValue]) {
                    targetElements[relValue] = 0;
                }
                targetElements[relValue]++;
            }
        }
        for (var i in targetElements) {
            var createOptions = options;
            if (i.match(/\[.*\]/)) {
                createOptions.group = targetElements[i] > 1;
            } else {
                createOptions.group = false;
            }
            $$('a[' + attrName + '="' + i + '"]').cerabox(createOptions);
        }
    }
}

window.addEvent('load', function(e) {
    LightboxManager.createLightbox('rel', 'lightbox', {
        animation: 'ease',
        loaderAtItem: true,
        titleFormat: 'Image {number} / {total} - {title}',
        fixedPosition: true
    });
});

これで大体同じ動きをしよるはずです。

JavaScriptライブラリのアップデートは結構勇気が入ります。特にメジャーバージョンアップだのしていると特に。実装されていた命令の名前が変わっていたりするからです。

私はMootoolsで動作するプラグインをいくつか使用しているのですが、今回はその一つ、noobSlideの1.4対応についてお話します。

Mootoolsでソースをダウンロードするとき、1.2系と1.3系をコンパチしてくれるオプションがありますが、今回はあえてそのオプションは使わないことにします。

noobSlideの場合、問題となるのは2箇所。以下のメソッドを使っているところです。

• $extend()
• $clear()

$extend()は第1引数のオブジェクトに第2引数をマージするのですが、同じ名前のプロパティを上書きしない、つまり増えたプロパティだけ拡張するというものらしいです。
http://docs111.mootools.net/#$extend

これは、1.4ではObject.append()というメソッドに置き換えられます。
http://mootools.net/docs/core/Core/Core#Deprecated-Functions:extend
http://mootools.net/docs/core/Types/Object#Object:Object-append

なので、_class.noobSlide.jsの107行目は以下のように書き換えます。

this.fx = new Fx.Tween(this.box,$extend((params.fxOptions||{duration:500,wait:false}),{property:this.modes[this.mode][0]}));
↓変更
this.fx = new Fx.Tween(this.box,Object.append((params.fxOptions||{duration:500,wait:false}),{property:this.modes[this.mode][0]}));

もう一つは$clear()。
これはclearTimeout()関数に置き換えるようにとのこと。JavaScriptのネイティブ関数ですね。
http://mootools.net/docs/core/Core/Core#Deprecated-Functions:clear

で、_class.noobSlide.jsの147行目は以下のように書き換えます。

$clear(this._play);
↓変更
clearTimeout(this._play);

これで一応動くみたいです。

I use JavaScript based on Mootools for this site. I had been using version 1.3.x, and now decided to update it to 1.4.x.

Updating JavaScript Library is really troublesome job, isn’t it? Especially, the command names are sometimes unavailable by changing when major version is updated.

I’m using some plugins for Mootools, this time this is the story to migrate to 1.4.x for one of them, noobSlide.

Downloading source from Mootools website, you can choose the option to download compatible source of 1.2 and 1.3, but I don’t choose it this time.

So, the following two methods are problems on noobSlide:

• $extend()
• $clear()

Please get detail about $extend() from the following URL.
http://docs111.mootools.net/#$extend

And, you have to use Object.append() instead of it on 1.4.
http://mootools.net/docs/core/Core/Core#Deprecated-Functions:extend
http://mootools.net/docs/core/Types/Object#Object:Object-append

So line 107 on _class.noobSlide.js will be changed like the following:

this.fx = new Fx.Tween(this.box,$extend((params.fxOptions||{duration:500,wait:false}),{property:this.modes[this.mode][0]}));
// Change to the following:
this.fx = new Fx.Tween(this.box,Object.append((params.fxOptions||{duration:500,wait:false}),{property:this.modes[this.mode][0]}));

The other is $clear(). You can use clearTimeout(), the native JavaScript method, instead of it. Please get detail from the following URL.
http://mootools.net/docs/core/Core/Core#Deprecated-Functions:clear

And, line 147 on _class.noobSlide.js will be changed like the following:

$clear(this._play);
// Change to the following:
clearTimeout(this._play);

And noobSlide looks moving correctly.

インストールするのはGvim。GUI上で動作するVimをインストールする。
Vimとはかぶらないので大丈夫。

便利なものでUbuntuには「Ubuntuソフトウェアセンター」というアプリケーションがついており、ソフトウェアのパッケージ管理をしている。
かつてはSynapticとかでしていたと思うのだが、11.10ではこれに変わっている。

「すべてのソフトウェア」を選択し、検索欄に「gvim」と入力するとパッケージの一覧が表示される。
そこで「インストール」をクリックするとインストール完了。

ちなみにターミナル上で「gvim」を実行すると、Gtk-WARNINGエラーがでることがある。
以下のサイトを参考に必要モジュールをインストールする。
http://d.hatena.ne.jp/hoge37/20111119/1321680014

ここでGUI上で実行出来なかったので、OSを再起動させてみたら見事に使えた。
Gvimの設定ファイルはLinuxの場合ホームディレクトリの.gvimrcに記述する。なければ作成する。

基本的にはWindowsやMacで動作しているものの設定が流用できる。
フォントなどシステムに依存する箇所以外は見事に動く。
以下の記事を参照。
http://tom-gs.com/blog/index.php?itemid=248

インストール自体は、何回かVMwareなどでインストールした経験があったのだが、やはりインストールが簡単。
このTZ90はオーナーメイドで作ってもらったもので、Windows Vista Business Editionが入っており、Google日本語入力もまともに動かない（起動中に落ちる）というカオスなマシン。
常にHDDアクセスランプが付いているので、いい加減乗り換えたかった。

HDDは60GHz、メモリは2GBに増設済み。

オフィシャルサイトの指示通り、インストールディスクを作成。CD-Rで作れるのが魅力的。
光学ドライブにCDをセットして、起動させると見事Ubuntuのインストーラーが立ち上がる。

インストール自体は1時間ぐらいだっただろうか？　2時間はかからなかったと思う。普通に待てる時間だった。

会社でPCのインストールとかやってるけど、Windows XPに比べてWindows 7は速い。しかしUbuntuはOSのインストール自体もそうだが、ハードウェアのドライバの依存関係もデフォルトで解決してくれるので、OSインストール後の手間がはるかに違う。
Viva Linux!　マイクロソフトも見習って欲しい。

インターフェースはMac OSに似てる。どっちが先かは知らんが。

無線LANの設定に少し戸惑うも、アップデートも行い最新の状態に。これで2、3時間ぐらいじゃないだろうか。
Google Chrome（Chromium Browser）とMozcをインストール。メーラーもセットアップ。すこぶる快適だ。

Windows使うよか快適な感じ。（このPCの場合）

Windowsとのファイル共有もできるので、何の支障もない。
ただ、若干ウェブとかで文字化けしているところがあるっぽい。（特にFlash関連）

でも一応快適だ。
なんどもいうが、Linuxのドライバのサポート率は半端ない。

ディスプレイもUSBも、BluetoothもLANも気にしなくてもOSインストール後そのまま使える。

問題となっているのはhtml_errorsという設定項目。
これのOn/Offを切り替えることでブラウザ上に表示されるエラーがHTMLフォーマットになるかどうかを設定できる。

Apacheなんかのエラーログに載るときはHTMLフォーマットのエラーは見づらくなるので、お好みの方を選べばいい。
個人的に開発段階では、HTMLフォーマットのほうが見やすいと思う。

/etc/php.ini

html_errors = Off

なので、アクセスログとエラーログを同じファイルに出力しているという人も聞いたことがある。
どっちにしろ、ログ解析をする時に困る。

論より証拠。
私のVMware環境のログ。確かに日付のフォーマットが違う。

==> error_log.0127 <==
[Fri Jan 27 01:02:24 2012] [error] [client 192.168.***.***] File does not exist: /home/www/localhost/public_html/test

==> access_log.0127 <==
192.168.***.*** - - [27/Jan/2012:01:02:24 +0900] "GET /test HTTP/1.1" 404 278 "-" "Mozilla/5.0 (Windows NT 6.1; rv:9.0.1) Gecko/20100101 Firefox/9.0.1"

これを同じフォーマットになるように設定を変更する。
私はアクセスログにデフォルトで用意されているcombined識別子を使うため、それを直接変更してみた。

#変更前
LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combined

#変更後
LogFormat "%h %l %u [%{%a %b %d %T %Y}t] \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combined

%{format}tを使う。参考にできるページは以下のとおり。

• Apache モジュール mod_log_config
  
• Man page of STRFTIME
  
• PHP: strftime - Manual
  

これで再度確認してみたら、日付のフォーマットが統一できた。

==> error_log.0127 <==
[Fri Jan 27 01:03:27 2012] [error] [client 192.168.***.***] File does not exist: /home/www/localhost/public_html/test

==> access_log.0127 <==
192.168.***.*** - - [Fri Jan 27 01:03:27 2012] "GET /test HTTP/1.1" 404 278 "-" "Mozilla/5.0 (Windows NT 6.1; rv:9.0.1) Gecko/20100101 Firefox/9.0.1"

と、ここで疑問が湧いてきた。

なぜアクセスログとエラーログで日付のフォーマットが違うのか。
その答えを探してみたが見つからなかった。

Apacheのエラーログのページには、エラーログはカスタマイズできないが、アクセスログと照らし合わせることでトレース可能みたいな内容。
深く確認していないのだが、ApacheのエラーログはLogFormatみたいな指定ができない・・・ってことだろうか。

ひとまずこれは、サーバー設定項目で必須のものとなるはずだ。

だいぶ前、自作ランチャーの作り方をブログに投稿しましたが、仕事で使っていてこの方法が意外に便利だと気づきました。
ショートカットでランチするソフトを追加したり、削除したりできるのも便利なんですが、特定のファイルを開くこともできるできるということです。

具体的には・・・

仕事でよくhostsというネットワーク用のファイルをいじることが多いのですが、Windows上のhostsはかなり深い階層に存在していて、しかも拡張子がついていないので、ファイルタイプで使用するソフトを関連付けすることができない。
そこで、ショートカットと実行ファイルの使い方を利用して、ランチャーで起動できるようにします。

エディタはVimを利用しています。
では、設定方法。前回の記事の構成を利用します。

C:\launcherで右クリック＞「新規作成」＞「ショートカット」。
「項目の場所を指定してください」に以下のように記述して、「次へ」。

"C:\Program Files\Vim\vim72\gvim.exe" "C:\Windows\System32\drivers\etc\hosts"

「ショートカットの名前を入力してください」に「hosts」と入力。「完了」をクリックします。
簡単なんです。

あまり馴染みがないと思いますが、コマンドプロンプト上では、exeファイルは一種のコマンド（いや実行ファイルだけど）みたいなもので、引数が指定できるようになっています。
Vimの場合、第1引数はファイルを指定することができます。
詳細は各ソフトのヘルプを見る必要がありますが、大体第1引数はファイルみたいです。

ちなみに、Vimの場合はコマンドプロンプトで以下を実行するとヘルプが見れます。

"C:\Program Files\Vim\vim72\gvim.exe" --help

いやー、下手に他のランチャソフトに手出さなくてよかった。

RedmineのブログにCentOS 5.6へのインストール方法の記事があった。
この通りやったら概ねうまくいった。ということでその方法。

ちなみにCentOS 6.0に入れた。MySQLは5.5。

ちなみにTracのインストールもやってみたけど、これはようわからんかった。
インストール手順とかがわかりにくかったので諦めました。

ApacheとかMySQLとかの基本的な設定は、自身の開発環境なので整っています。
そこで、まずは最初にデータベースを片付けます。
MySQLにrootでアクセスして以下のクエリを実行です。パスワード等は変えてください。

CREATE DATABASE redmine DEFAULT CHARACTER SET utf8;
GRANT ALL ON redmine.* TO redmine_admin IDENTIFIED BY 'password';
FLUSH PRIVILEGES;

では、Linux上でrootになり必要なサーバーモジュールのインストールからはじめます。

# yum install httpd-devel
# wget http://rubyenterpriseedition.googlecode.com/files/ruby-enterprise-1.8.7-2011.03.tar.gz
# tar xzvf ruby-enterprise-1.8.7-2011.03.tar.gz
# ./ruby-enterprise-1.8.7-2011.03/installer --dont-install-useful-gems --no-dev-docs
[/opt/ruby-enterprise-1.8.7-2011.03] : /usr/local/
# gem install rack -v=1.1.1 --no-rdoc --no-ri
# gem install rake -v=0.8.7 --no-rdoc --no-ri

この時点で以下のコマンドしろとか言われるけど、実際もっと後なのでしなくてOK。しても怒られるだけ。

# rake generate_session_store
# gem install i18n -v=0.4.2 --no-rdoc --no-ri
# gem install mysql --no-rdoc --no-ri

ここでApache用のユーザー（私の場合はwebmaster）に切り替えます。

# su - webmaster

迷いましたが以下のディレクトリを作ってそこに展開することに。

# mkdir cgi-bin
# cd cgi-bin/
# wget http://rubyforge.org/frs/download.php/75097/redmine-1.2.1.tar.gz
# tar zxvf redmine-1.2.1.tar.gz
# cd redmine-1.2.1/
# cp config/database.yml.example config/database.yml

DB設定をします。データベース、ユーザー、パスワードを先ほど作ったものにします。

# vi config/database.yml

production:
  adapter: mysql
  database: redmine
  host: localhost
  username: redmine_admin
  password: password
  encoding: utf8

システムの設定をします。

# cp config/configuration.yml.example config/configuration.yml

domainの部分を適当にかえます。

# vi config/configuration.yml

production:
  email_delivery:
    delivery_method: :smtp
    smtp_settings:
      address: "localhost"
      port: 25
      domain: 'example.com'

# rake generate_session_store
# rake db:migrate RAILS_ENV=production

ドキュメンルート以下にシンボリックリンクを作って見れるようにする。

# ln -s /home/webmaster/cgi-bin/redmine-1.2.1/public/ /home/webmaster/public_html/redmine

ここでrootに戻ります。

# exit
# gem install passenger --no-rdoc --no-ri
# passenger-install-apache2-module

# vi /etc/httpd/conf.d/passenger.conf

LoadModule passenger_module /usr/local/lib/ruby/gems/1.8/gems/passenger-3.0.9/ext/apache2/mod_passenger.so
PassengerRoot /usr/local/lib/ruby/gems/1.8/gems/passenger-3.0.9
PassengerRuby /usr/local/bin/ruby

Header always unset "X-Powered-By"
Header always unset "X-Rack-Cache"
Header always unset "X-Content-Digest"
Header always unset "X-Runtime"

PassengerMaxPoolSize 20
PassengerMaxInstancesPerApp 4
PassengerPoolIdleTime 3600
PassengerUseGlobalQueue on
PassengerHighPerformance on
PassengerStatThrottleRate 10
RailsSpawnMethod smart
RailsAppSpawnerIdleTime 86400
RailsFrameworkSpawnerIdleTime 0
RailsBaseURI /redmine

# /etc/init.d/httpd configtest
# /etc/init.d/httpd graceful

これでhttp://IPアドレス/redmine/にアクセスするとRedmineが見れます。最初のユーザーはIDもパスワードもadminとなっているのでそれでログインできます。

というこうとで、前にやったようにyumでインストールします。

$ yum install ganglia-gmond

でまぁ設定して、起動します。

$ /etc/init.d/gmond start

で監視サーバーの方を見てみたのですが、待てど暮らせど監視対象として上がってきやしない。
いろいろ試してみたのですが、結局のところ使ってるバージョンの問題であると判明。
っていうのは新しいバージョンのやつを入れて気づきました。

モニタリングのクライアントである、gmondのバージョンが問題のようです。
私の環境では、

ということでCentOS 5.6には3.0がインストールされてしまうんです。
サーバー側のgmetad-3.2とクライアントのgmond-3.0の相性がよくないらしい。っていうか、対応してないみたい。

ということで、最新の3.2をインストールすることにします。

まずは、インストールした3.0を削除します。

$ yum remove ganglia*

でRPM取ってきます。私のはGUI環境だったのでブラウザでダウンロードしました。コマンドでやる場合は以下でOK・・・みたいです。

$ wget http://cdnetworks-kr-2.dl.sourceforge.net/project/ganglia/ganglia%20monitoring%20core/3.2.0/libganglia-3.2.0-1.i386.rpm
$ wget http://cdnetworks-kr-2.dl.sourceforge.net/project/ganglia/ganglia%20monitoring%20core/3.2.0/ganglia-gmond-3.2.0-1.i386.rpm
$ yum localinstall ganglia-gmond-3.2.0-1.i386.rpm libganglia-3.2.0-1.i386.rpm --nogpgcheck

でRPMはローカルインストールでyumコマンド使えるので、簡単にインストールできます。
「--nogpgcheck」をつけるのを忘れないようにしてください。
あとは同じように設定するだけで、監視サーバーからモニタリングすることができます。