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 などに適宜変えて、いつもどおりウェブサーバ上にディレクトリごとアップロードしてください。

こんな記事もいかがですか？

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。