LocomotiveCMS + Devise を使って作ったログインページのデザインをCMS側でできるようにする(1)


#Devise が出力するビューを、LocomotiveCMS 側でデザインしたい！

先日、[LocomotiveCMS にユーザー認証機能を組み込み](http://qiita.com/hal_sk/items/c6d4f5582d23bc4dd415)ましたが、デザインがこんな感じでした。

![登録画面](https://qiita-image-store.s3.amazonaws.com/0/1399/7b31a530-1e51-e2ec-be11-b0c2ae844b3f.png)

これではイケてないので、せっかくなので LocomotiveCMS 側のテンプレートをレンダリングできるようにしました。

まず、devise のコントローラーを拡張してみます。devise はデフォルトだと controller などのファイルは作成されませんが、自分で作ることもできます。

## 拡張用のコントローラーを作る

まずはユーザー登録からいきます。前回はusers モデルに対して認証機能を実装したので、app/controllers/users/registrations_controller.rb を作ります。

```ruby:app/controllers/users/registrations_controller.rb
class Users::RegistrationsController < Devise::RegistrationsController
  def new
    logger.debug 'test'
    super
  end
  def create
    super
  end
end
```

routes.rb を以下のように変更します。

```ruby:config/routes.rb
  devise_for :users, :controllers => {
    :registrations => 'users/registrations'                                                                                                                   
  }
```

この状態で、localhost/users/sign_up を表示すると、ログファイルに 'test' の文字が表示されます。

## Liquid テンプレートを読み込む

では、今度は LocomotiveCMS のテンプレートを読めるようにしましょう。engine 側の /app/controllers/locomotive/public/pages_controller.rb を見てみると、Locomotive::Render と LocaleHelpers がなにやら関係してそうです。controller からインクルードしましょう。

```
  include Locomotive::Routing::SiteDispatcher
  include Locomotive::Render
  include Locomotive::ActionController::LocaleHelpers
```

device の大元のソースコードと、LocomotiveCMSのソースコードをマージさせたのが以下のソースです。
これで、テンプレートデザインにLocomotive側のCMSを利用することができるようになります。

```ruby:app/controllers/users/registration_controller.rb
class Users::RegistrationsController < Devise::RegistrationsController
  include Locomotive::Routing::SiteDispatcher
  include Locomotive::Render
  include Locomotive::ActionController::LocaleHelpers
  before_filter :require_site
  def new
    build_resource({})
    @page ||= self.locomotive_page('/userregistration')
    respond_to do |format|
      format.html {
         render :inline => @page.render(self.locomotive_context({ 'user' => resource}))
      }
    end
  end
  def create
    super
  end
end
```

`@page ||= self.locomotive_page('/userregistration')`という部分で、/userregistration というテンプレートを読み込みに行っていますので、LocomotiveCMS の管理画面側でその名前を持ったテンプレートを作っておく必要があります。内容は以下のようにしました。このテンプレートがそのままサイトに表示される必要はありませんので、listed は false にしています。

```HAML:/app/views/pages/userregistration.liquid.haml
---
title: ユーザー登録
slug: userregistration
listed: false
published: true
cache_strategy: none
response_type: text/html
---   
{% extends 'parent' %}
{% block main %}
.row
  .large-8.columns
    %h1 ユーザー登録ページ
    %form#new_user.new_user{"accept-charset" => "UTF-8", action: "/users", method: "post"}
      .hidden
        {% csrf_param %}
        %input{name: "utf8", type: "hidden", value: "✓"}/
      %div
        %label{for: "user_email"} Email
        %br/
        %input#user_email{autofocus: "autofocus", keyev: "true", mouseev: "true", name: "user[email]", size: "30", type: "email", value: ""}/
      %div
        %label{for: "user_password"} Password
        %br/
        %input#user_password{keyev: "true", mouseev: "true", name: "user[password]", size: "30", type: "password"}/
      %div
        %label{for: "user_password_confirmation"} Password confirmation
        %br/
        %input#user_password_confirmation{keyev: "true", mouseev: "true", name: "user[password_confirmation]", size: "30", type: "password"}/
      %div
        %input{name: "commit", type: "submit", value: "Sign up"}/
{% endblock %}
```

とりあえず既存のdevise で出力されたHTMLをHAMLに変換しただけです。devise 側のviewテンプレートではform_forなどを使っているのですが、残念ながら LocomotiveCMS の Liquid テンプレートでは form_for は使えません。また、注意点として、テンプレート内に`{% csrf_param %}`という文字が入っています。これは、FORMのパラメータにCSRF対策用の `<input type="hidden" name="authenticity_token" value="DQoZGjuFVeiqetim……">`というタグを埋めこむものです。

上記では parent を拡張しているので、http://yourhost/users/sign_up を表示すればサイト全体のデザインが適用されているはずです。

![user_registration.png](https://qiita-image-store.s3.amazonaws.com/0/1399/a59368e1-b1ed-f435-287f-98b38a125584.png "user_registration.png")

これで、Devise 側のページもCMSから編集することができるようになりました。

次の記事では、create メソッド側も修正します。
[LocomotiveCMS + Devise を使って作ったログインページのデザインをCMS側でできるようにする(2)](http://qiita.com/hal_sk/items/c0f56736398f1154ddca)

---
Locomotive 関連の記事一覧：
* [Locomotive Engine を Heroku で動かすまで](http://qiita.com/hal_sk/items/0512a4a9cb215fb016f5)
* [LocomotiveCMS でニュース記事一覧機能を作る](http://qiita.com/hal_sk/items/b72db4a288566e92096c)
* [LocomotiveCMS のページにユーザー認証機能を組み込む（Engineの拡張）](http://qiita.com/hal_sk/items/c6d4f5582d23bc4dd415)
* [LocomotiveCMS + Devise を使って作ったログインページのデザインをCMS側でできるようにする(1)](http://qiita.com/hal_sk/items/50c45f764cb95615dd59)
* [LocomotiveCMS + Devise を使って作ったログインページのデザインをCMS側でできるようにする(2)](http://qiita.com/hal_sk/items/c0f56736398f1154ddca)
* [LocomotiveCMS + Devise を使って作ったログインページのデザインをCMS側でできるようにする(3)](http://qiita.com/hal_sk/items/92d653f47ddadb6d879c)
* [LocomotiveCMS で、複数の Heroku インスタンスを使う](http://qiita.com/hal_sk/items/aba8d324638d205b2ce1)