RubyとRakeを使って カスタムShadowbox.jsを作る

前回の記事「Shadowbox.jsのキャプション位置を画像の下に変えてみる」の追記です。あの作例では、ソースの skin.js にてキャプション位置を入れ替え、可読性のよろしくない shadowbox.js を開いてズボ替えする方法を採りました。

これでも結果オーライだからまあいいのですけれど、別解として skin.js を修正した後、自分でカスタム shadowbox.js を作る方法も紹介します。

なお、カスタム shadowbox.js を作るには

• Ruby
• Rake（Rubyによるビルドツール）

が必要なのでご了承のほど。ここでは、Ubuntuを使ってのビルド（作成）方法について紹介していきます。

まずは ruby と rake を apt か aptitude でインストール。

sudo apt-get install ruby rake

GitHubからダウンロードした Shadowbox.js のソースディレクトリに移動し設定ファイル build.yml を開きます。

---

# May be the name of any adapter in source/adapters
adapter: base

# May be any language code in source/languages
language: en

# An array of names of players found in source/players
players: [flv, html, iframe, img, qt, swf, wmp]

# YES to include support for CSS selectors, NO to decline
css_support: YES

# YES to compress the code, NO to use the source code
compress: NO

# The directory to output the build to
target: build

日本語環境で使うなら

-language: en
+language: ja

あとはお好みで、ライブラリとしてjQueryを使いたいなら

-adapter: base
+adapter: jquery

可読性よりもファイルサイズ・実行速度重視なら

-compress: NO
+compress: YES

と変更すればよいでしょう。

それではおもむろに Rake でビルド。build.yml のあるディレクトリでコマンドを実行します。同じディレクトリにある Rakefile が自動的に build.yml の設定内容を読みにいってくれるので、rakeコマンドは引数なしでオッケイです。

rake

すると、同じ階層に build というディレクトリが新たにできます。build ディレクトリの中身は例えばこんな感じですね。

LICENSE
README
close.png
expressInstall.swf
loading.gif
next.png
pause.png
play.png
player.swf
previous.png
shadowbox.css
shadowbox.js

これでビルドは完了。ディレクトリ名を Shadowbox などに適宜変えて、いつもどおりウェブサーバ上にディレクトリごとアップロードしてください。