#332 Refinery CMS Basics

顧客からピアノ販売のサイトを構築したいと相談があったとしましょう。サイトの名前はPiano Plusで、販売店についての情報が載っていて、ピアノの在庫をブラウズできるページと店舗の所在地を表示するページが必要です。そのサイトではユーザとのやり取りが多いわけではありませんが、店のオーナーは各ページの内容を自分で編集したいと考えています。これはコンテンツ管理システム(CMS)を利用するのにうってつけのケースなので、今回のエピソードと関連のProエピソードでRefinery CMSを利用してこのサイトを構築していきます。Refineryは非常に優れたCMSで、Railsエンジンを利用することでモジュール性を高めています。Refineryの独自の設計方針のおかげで、新規にRailsアプリケーションを作成することも、既存のアプリケーションに追加することも可能です。

Refineryのインストール

RefineryはImageMagickに依存するので、まずそれからインストールします。OSXの場合一番簡単なのはHomebrewを利用する方法です。必要な作業は以下のコマンドを実行するだけです。

$ brew install imagemagick

次にRefinery gemをインストールします。

$ gem install refinerycms

このgemは複数の依存関係を持つため、インストールにはしばらく時間がかかります。インストールが終わったら、新規のRefineryアプリケーションを作成するために、refinerycmsコマンドをアプリケーション名を指定して実行します。

$ refinerycms piano_plus

これによってフル機能のRailsアプリケーションが生成されて、それにRefineryが追加され、migrationが実行されます。それが終わると、次におこなうことの指示が表示されるので、それに従って新規のアプリケーションのディレクトリに移動してサーバを起動します。

$ cd piano_plus/
$ rails s

はじめてのRefinery

ブラウザでアプリケーションを見てみましょう。初めてのアクセス時には、まだユーザが一人もいないので登録ページが表示されます。このページを使ってadminというユーザを登録します。

登録が終了するとRefineryダッシュボードが表示されます。このページには最新の活動状況が表示され、各種のタスクを実行するためのリンクがあります。

メインセクションの上部にはタブもあります。ここから、UsersやPagesなどCMSの各種のパーツを管理するためのページにジャンプすることができます。右の方にある小さなタブをクリックして、これらのタブを並び替えることができます。ページに対しての作業がほとんどなので、まずPagesを見てみます。

Refineryはデフォルトでいくつかのページを自動的に作成します。homeページ、about usページ、404エラーを処理するページです。ページを編集するために編集アイコンをクリックすると、そのページの内容を編集できるページが開きます。デフォルトではページには「Body」と「Side Body」の2つのセクションがありますが、カスタマイズすることも可能です。Refineryでは、ページの各セクションを編集するためにリッチテキストエディタを利用できます。ページの最下部には「advanced」セクションがあり、ページの各種の設定を変更するためのオプションが提供されます。

では実際のアプリケーションを見てみましょう。そのためには各ページの左上部にあるオレンジ色のボタンをクリックします。

ページの内容を見ると、スタイルがまったく設定されていないことがわかります。これは、サイトがエンドユーザにどう見えるかを完全に制御できることを意味するため、むしろその方がいいでしょう。

設定の変更とCSSの追加

次にアプリケーションにCSSを追加し、会社名などの設定情報も変更します。Refineryアプリケーションは、基本的にはRailsアプリケーションに少しRefineryの追加機能が組み込まれただけなので、 その構造にはなじみがあると思います。routesファイルを見ると、rootパスにRefineryエンジンをマウントしていることがわかります。

# This line mounts Refinery's routes at the root of your application.
  # This means, any requests to the root URL of your application will go to Refinery::PagesController#home.
  # If you would like to change where this extension is mounted, simply change the :at option to something different.
  #
  # We ask that you don't use the :as option here, as Refinery relies on it being the default of "refinery"
  mount Refinery::Core::Engine, :at => '/'

Refineryの動作設定を変更したい場合は/config/initializers/refineryディレクトリの中身を確認します。そこには各種の設定を変更するためのいくつかのファイルがあります。これらのファイルの設定オプションは、コメント部にわかりやすくドキュメント化されているので、少し時間をかけてどのような設定が可能かをよく読んで理解しておくことをお勧めします。ここではサイトの名前を変更したいのですが、このオプションはcore.rbファイルに定義されているので、このオプションを非コメント化して変更します。

# Site name
config.site_name = "Piano Plus"

この設定は初期化ファイルにあるため、変更を有効化するためにはサーバの再起動が必要です。再起動後にページをリロードすると、ページのヘッダとフッタに修正後の名前が表示されていることを確認できます。

次にページにスタイル設定を追加します。ページ構成としては、ヘッダセクションには画像が含まれ、ページセクションはページのbodyとside_bodyセクションで構成され、side_bodyにはサイドバーが含まれています。今回のアプリケーションでは/app/assets/stylesheetsディレクトリにapplication.cssファイルがあり、通常のRailsアプリケーションと同じように振る舞います。同じディレクトリにlayout.css.scssファイルを作成し、そこにスタイル情報を記述します。ページをリロードすると見た目はずっときれいになりました。

次にhomeページを編集します。ヘッダにh2要素とダミーテキストのパラグラフを追加します。その下に、二つの短いテキストからなるもう一つのパラグラフを追加します。これらはリンクになりますが、リンク先のページはまだ存在しません。スタイルメニューを使って、この最後のパラグラフのフォントサイズをlargeに設定します。ページ内に画像も入れることにします。ファイルはローカル端末にあり、Refineryの機能で画像をアップロードしてリサイズします。リサイズのオプションはmediumを選択し、左寄せでfloatさせ、目的の位置にドラッグしてページ上部近くに配置します。

生成されるHTMLのソースコードの内容を確認したい場合は、HTMLボタンをクリックして生のコードを見ることができます。WYSIWYGエディタが期待する通りのコードを生成していない場合には直接編集することも可能です。このページではサイドバーには何も置きたくないので、Side Bodyセクションを編集してそこにあるテキストを削除します。作業が終わったらページを保存し、サイト上でどのように見えるかを確認します。

このページの見た目はよくなりましたが、CSSを微調整する必要があります。ほとんど完成に近づきましたが、最上部に赤いバナーセクションを追加したいと思います。その前に所在地ページを追加します。この作業は再度管理セクションでおこないます。まず使用しない「About」ページを削除して、「Store Location」という新規ページを追加します。このページに地図を表示したいので、HTMLボタンをクリックして次のコードを入力して、ページにGoogleマップを表示させます。

<h2>Store Location</h2>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=109+West+57th+Street,+New+York,+NY&amp;aq=&amp;sll=40.760254,-73.97747&amp;sspn=0.009962,0.013025&amp;gl=us&amo;ie=UTF8;&amp;hq=&amp;hnear=109+W+57th+St,+New+York,+10019&amp;t=m;&amp;spm=0011376,0.018238&amp;z=15;&amp;iwloc=A;&amp;output=embed"></iframe>

また、このページのサイドバーにコンタクト情報を含んだテキストを追加してから保存します。トップページにこの新しいページへのリンクがほしいので、トップページの編集画面に戻って「Store Location」のテキストを選択してから「Add Link」ボタンをクリックして新規ページへのリンクを追加します。トップページに新規ページへのリンクが追加され、「Store Locator」ページには地図とコンタクト情報が追加されました。

カスタムセクションを追加する

次にトップページの最上部に赤いバナーを追加します。この部分にはテキストと画像が含まれ、ページのメインボディの上に表示されます。これを独立したセクションに配置したいのですが、今はセクションはBodyとSide Bodyしかありません。この新規のバナーをサイドバーに含めることも可能ですが、本当に配置したいのはそこではないので、新規にセクションを追加します。Refineryには新規セクションの追加を許可するかどうかを規定する設定オプションがあります。デフォルト値はfalseになっているのでそれを変更します。

# Configure whether to allow adding new page parts
# config.new_page_parts = true

初期化ファイルを変更したので、サーバを再起動します。その後でトップページ(あるいはいずれのページでも)の編集ページにアクセスすると、セクションを追加か削除するための新規のボタンが表示されています。これらを使って、このページでは使用しないSide Bodyセクションを削除し、「Banner」という名前の新しいセクションを追加します。続けてreorderボタンをクリックして、「Banner」セクションが「Body」セクションの後ろに現れるようにします。もしRefineryの2.0.2よりも古いバージョンを使用している場合は、ここでエラーが発生するかも知れません。その場合は次のようにコンソールで手動で新規のページ部品を追加できます。

>> Refinery::Page.find(1).parts.create! "Banner"

これでページに「Banner」セクションが追加されたので、バナーに表示したい内容を追加してページを保存します。

このセクション用のCSSはすでに追加してあるので、トップページを表示させると新規に追加したバナーにすでにスタイルが適用されているのがわかります。ページの上部にRefineryバーを表示させたくない場合は、ログアウトします。

顧客の視点で今一度サイト内を見てまわってみます。Refineryに再度ログインしたい場合には、URLに/refineryを追加するとログインページが表示されます。

もう一つサイトに追加したいセクションが「Browse Pianos(ピアノをブラウズする)」ページですが、このエピソードでは扱いません。在庫があるピアノのリストを表示する静的ページを作ることも可能ですが、できればこの情報をデータベースに蓄積する方がいいでしょう。そのためには独自のエンジンを作成してRefineryを拡張します。これについては今週のProエピソードで扱います。