#298 Getting Started with Spree

Spreeは、Railsアプリケーションに簡単に統合できる、フル機能のEコマースソリューションです。Railsアプリケーションを商品を販売するオンラインストアにしたいという場合に、Spreeはこれをすぐ実現するための方法の一つです。今回のエピソードでは、新規のRailsアプリケーションにSpreeを設定し、いくつかの機能をカスタマイズしながらその仕組みを理解して、自分のアプリケーションのニーズに合うかどうかを判断できるための知識を身につけます。

Spreeのインストール

Spreeはイメージ処理のためにImageMagickに依存するので、Spreeをインストールする前にそれをインストールする必要があります。これをおこなう一番簡単な方法としてHomeBrewを利用します。

$ brew install imagemagick

ImageMagickをインストールしたら、新規のRails 3.1アプリケーションをstoreという名前で作成します。Spreeは既存のRailsアプリケーションに統合することもできますが、まずは新規のアプリケーションで試して、何が追加されるかを見てみるのがいいでしょう。

$ rails new store

Spreeとその多くの依存関係をインストールするために、それらをアプリケーションのGemfileに追加してbundleコマンドを実行します。Spreeは頻繁に更新されているので、ここではバージョン番号を指定しました。この記事の公開時点では、バージョン0.70.1が最新です。

source 'http://rubygems.org'

gem 'rails', '3.1.1'

gem 'sqlite3'

# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '~> 3.1.4'
  gem 'coffee-rails', '~> 3.1.1'
  gem 'uglifier', '>= 1.0.3'
end

gem 'jquery-rails'

group :test do
  # Pretty printed test output
  gem 'turn', :require => false
end

gem 'spree', '0.70.1'

gemをインストールしたら、generatorを実行してSpreeをサイトに追加します。

$ rails g spree:site

このコマンドでいつかのことがおこなわれます。Spreeに必要なデータベーステーブルを生成するmigrationファイルをコピーし、アプリケーションのいくつかのファイル(主にapp/assetsにあるもの)をカスタマイズします。またgeneratorはapplication.jsとapplication.cssの2つのファイルを削除するので、もしこれらのファイルをカスタマイズしている場合は、変更点をSpreeがアプリケーションのアセットを構成する方法に統合する必要があります。

アプリケーションの/app/assetsディレクトリを見てみると、そこにあるimages、javascripts、stylesheetsの各ディレクトリがそれぞれadminとstoreというサブディレクトリを持っていることがわかります。これは公開されているストア用のアセットと非公開の管理ページを分けるためです。ストア用のall.cssファイル(またはapplication.jsファイル)を見ると、それがSpree内のいくつかのファイルをrequireして、自動的にロードします。

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *

 *= require store/spree_core
 *= require store/spree_auth
 *= require store/spree_api
 *= require store/spree_promo
 *= require store/spree_dash

 *= require_self
 *= require_tree .
*/

すべての設定を完了するために、もう一つのコマンドを実行します。これは前にコピーされたmigrationを実行します。データベースの既存のデータを削除していいかを確認されることに注意してください。

$ rake db:bootstrap
This task will destroy any data in the database. Are you sure you want to 
continue? [y/n] y
db/development.sqlite3 already exists
...

このコマンドはまたadminユーザのためのメールアドレスとパスワードを求めてきます。表示されるデフォルト値をそのまま使用します。最後にサンプルデータをロードするか聞かれるので、yと答えストアに何らか商品がある状態にします。

Email [spree@example.com]: 
Password [spree123]: 
Load Sample Data? [y/n]: y

これでアプリケーションのサーバを起動してストアを見ることができます。

Spreeの外観

これがストアの外観です。デフォルトではテーマが適用されていないのでかなりプレーンな状態です。しかし、サイトはフル機能のEコマースストアで、generatorを実行したときにロードされたサンプルの商品を持ち、ショッピングカートとチェックアウト処理も含まれています。

管理セクションもhttp://localhost:3000/adminで提供されていて、generatorを実行したときに設定したメールアドレスとパスワードを使ってログインすると表示されます。こちらも機能が完備していて、受注状況や、どの商品が売れているかを見るための各種のチャートを見ることができます。商品や注文の確認や編集をするためのページもあります。

管理セクションにはいくつかの設定オプションがあり、ストアが対応する支払い方法を変更する機能も含まれています。environmentごとに支払い方法があり、これらの内の一つを編集すると、それが使用する支払い方法を変更することができます。変更をおこなうと、Spreeがそのゲートウェイ用の認証情報を入力するためのオプションを表示します。これによって選択したペイメントゲートウェイ用の設定をおこなうことができます。

Spreeのカスタマイズ

ここまででRailsアプリケーション内に総合的なEコマースソリューションがほぼ出来上がりましたが、顧客に対しての見た目をさらに細かく制御したい場合はどうすればいいでしょうか? デフォルトの見た目はかなり地味ですが、これはテーマが何も適用されていないからです。このエピソードの残りを使って、ストアの見た目や振る舞いをカスタマイズするいろいろな方法を紹介します。

Spreeはテーマと機能拡張をサポートしていて、Blue ThemeがSpreeをカスタマイズする方法のいい例になるでしょう。このテーマは、Spreeのほとんどの部品と同じようにRailsエンジンのしくみを利用していて、これを用いてapp/assetsとapp/overridesの2つのディレクトリの多くのものをオーバーライドします。このテーマをインストールするためにGemfileに次の行を追加して、bundleコマンドを実行します。

gem 'spree_blue_theme', :git => 'git://github.com/spree/spree_blue_theme.git'

テーマを有効化するためにはスタイルシートファイルを修正して、デフォルトのスタイル(require store/で始まるもの)をそのテーマ用のものに置き換える必要があります。

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *

 *= require store/screen
 *= require_self
 *= require_tree .
*/

ストアの見た目はすっかり違うものになりました。これは、テーマを使うか使わないかのいずれを選択するにしても、Spreeアプリケーションの外観を自由にカスタマイズできることを示すいい例となります。

サイトのパーツのカスタマイズ

次にサイトの個々のパーツをカスタマイズする方法を見ていきます。例えばページの左上部のロゴを独自のものに変更したい場合はそれも可能です。デフォルトの画像は/assets/admin/bg/spree_50.pngに保存されていてSpreeエンジンが表示していますが、このアプリケーションでこれをオーバーライドできます。

これをおこなう方法は2つあります。一つはアプリケーションに/app/assets/images/admin/bgディレクトリを作成してそこに別の画像(例えばデフォルトのrails.png)をコピーして、ファイル名をspree_50.pngに変更します。この画像がデフォルト画像をオーバーライドして、ページをリロードするとそれが表示されます。(ただし変更を有効にするにはサーバの再起動が必要です。)

ロゴを変更するもう一つの方法はSpreeの設定の一部をオーバーライドする方法です。デフォルトの設定は、多数の設定オプションを持ったこのファイルでおこないます。ここにはロゴオプションもあり、デフォルトのロゴファイルの場所が指定されています。Spreeは完全な設定選択の仕組みを持っていて、これらの設定を複数の方法でおこなえる手段を提供します。データベースから、管理パネルから、あるいは初期化ファイルを作成してRubyからおこなうという方法があります。一番最後の方法を選択して、新規にspree.rb設定ファイルを作成します。

Spree::Config.set(logo: "store/rails.png")

Spree::Config.setを呼び出してオプションを設定します。ロゴオプションを指定したら画像を/app/assets/images/store/に移動し名前をrails.pngに変更します。ページをリロードすると、画像の場所はhttp://localhost:3000/assets/store/rails.pngになっています。

テンプレートの一部をオーバーライドしてSpreeをカスタマイズする方法もあります。これをおこなうには、まずSpreeのソースコードを見てテンプレートを探します。これは難しくはありませんが、インストールしたSpreeと同じバージョンのソースコードを探す必要があります。今回の場合は バージョン0.70.1を見ます。正しいバージョンを見ていることを確認したら、core/app/views/layoutsにあるspree_application.html.erbファイルを探します。ここにロゴを表示するコードが含まれているので、このテンプレートをオーバーライドします。

<div id="logo" data-hook>
  <%= logo %>
</div>

表示を変更するためにこれをオーバーライドする方法はいくつかあります。アプリケーションの同じ場所にレイアウトファイル全体をそのままコピーすることも可能です。するとSpreeはデフォルトではなくこちらのテンプレートを使用し、変更を加えたらそれがアプリケーションに反映されます。

もう一つは、Defaceというgemを使う方法です。このgemはすでにSpreeの依存関係なので改めてインストールする必要はなく、 Spreeが作成した/app/overridesディレクトリで使用してSpreeのテンプレートをオーバーライドします。プロジェクトのホームページのREADMEの情報に、その仕組みについて示したいろいろな例が含まれています。リストの最初の例を、このディレクトリに新規に作成するlogo.rbにコピーして、ページの変更したい部分のための修正をおこないます。

Deface::Override.new(:virtual_path => "layouts/spree_application", 
                     :name => "logo", 
                     :replace_contents => "#logo", 
                     :text => "Store")

ここで4つのオプションを指定します。virtual_pathは修正するerbテンプレートのパスで、nameには好きな名前をつけます。divのうちidがlogoであるものの内容を置き換えたいので、replace_contentsオプションを使って、そのdivに一致するCSSセレクタを指定します。最後のオプションでは、内容を何で置き換えたいかを指定します。今回の例ではロゴをStoreというテキストに置き換えます。

ページをリロードすると、ロゴはなくなりその場所にテキストが表示されます。

画像をテキストに置き換えましたが、少しスタイルを設定することにします。スタイル情報をstylesheets/storeディレクトリに追加しますが、新規ファイルを作成するのがいいでしょう。テキストを大きく色を白にします。

#logo {
  font-size: 32px;
  color: #FFF;
}

アプリケーションにアクセスすると、カスタマイズしたスタイルで表示されています。

今回のエピソードは以上です。Spreeについてここでカバーしきれなかったことはまだたくさんあるので、追加の情報についてはSpree Guidesを読むことをお勧めします。Spreeについて知っておくべきおよそすべてのことについてのトピックが見つかるでしょう。