2013年2月5日火曜日

deviseの標準画面をカスタマイズする ~標準画面をカスタマイズする~

というわけで今回はdeviseの画面をカスタマイズします。
カスタマイズ手順にありがちな以下の感じでやっていきます。
  1. 現在の画面の仕様を理解する(知らずににいじると不完全な機能をもった画面になるので)
  2. 現在の画面をバックアップする(この辺はgitでも使ってりゃいらないんだろうけど、とりあえず今回はやっておきます)
  3. どういうカスタマイズをするか決める
  4. カスタマイズする

1. 現在の画面の仕様を理解する。
ざっくり理解(というかそんなに難しくない)します。
前にやってきた標準画面の整理の話とソースをみると以下の点がわかる。
画面遷移については以下
  • ログインフィルターでNGが出るとこの画面に飛んでくる
  • ここからログイン処理を呼び出してOKだと標準画面(root_to で指定する所)に飛ぶ
  • この画面からユーザ登録画面(SignUp)に飛べる
  • この画面からパスワードリセットメール発行画面に飛べる
画面の項目については以下
ログイン用フォーム
  • email入力フォーム
  • password入力フォーム
  • remember_meチェックボックス
リンク
  • ユーザ新規登録へ
  • パスワードリセットメール発行へ
ポイントとしては以下2点だと考えます。

  • フォームの飛び先(ひじょうにきほんてきですが)
  • リンクを出力しているコード

フォームの飛び先と何をPOSTするかを理解していれば自動生成されたViewを使わずとも、自分でログイン用フォームを作れるでしょう。

あと、リンクを出力する部分はerb中で
<%= render "devise/shared/links" %>
のように部分テンプレートで描画している。
⇒ つまり片方のリンクだけ消すとかいうのは(さしあたり)ムリなように見える。

ちなみに該当の部分テンプレートの中身は以下のカンジ。
#毎度のごとく日本語コメントはコチラで追加。

<%- if controller_name != 'sessions' %>
  
  <%= link_to "Sign in", new_session_path(resource_name) %>

<% end -%>



<%- if devise_mapping.registerable? && controller_name != 'registrations' %>
  
  <%= link_to "Sign up", new_registration_path(resource_name) %>

<% end -%>



<%- if devise_mapping.recoverable? && controller_name != 'passwords' %>
  
  <%= link_to "Forgot your password?", new_password_path(resource_name) %>

<% end -%>


<%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
  <%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name) %>

<% end -%>




<%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' %>
  
  <%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name) %>

<% end -%>



<%- if devise_mapping.omniauthable? %>
  
  <%- resource_class.omniauth_providers.each do |provider| %>
    <%= link_to "Sign in with #{provider.to_s.titleize}", omniauth_authorize_path(resource_name, provider) %>

  <% end -%>
<% end -%>


のように『現在のユーザの状態を判断して必要そうなリンクを出力する』のようになっているので、標準以外で行くならココの部分の必要なリンクだけ抜き出すのがいいでしょう。

というわけでざっくり以下の理解と課題抽出ができました。

  • ログインフォーム(formの部分ね)のPOST先と中身
  • リンクを出力する機構
  • confirmable,lockable,omniauthableが示す機構については調べないと


2. 現在の画面をバックアップする
ホントgitを使えばこんなのいらなくて、こんなことをやっているのがバレたら、
『アムロ! バージョン管理ツールを使わずにファイルの手動バックアップを繰り返す人類など、システム開発のノミだということがなぜ分からん!』
とか罵られて
アクシズを落とされても文句が言えないレベル
だと思うのですが、さしあたりできてないのでカッコ悪いバックアップします。
ログイン画面を表示しているのは
{railsアプリルート}/views/devise/sessions/new.html.erb
なので、同じ場所に new.html.erb.bcup という名前でバックアップしておきます。
#ださい。。。

3. どういうカスタマイズをするか決める
難しいカスタマイズは後回しにしてまずは簡単なところから行きましょう。
というわけで以下のカンジ。

  • 表示内容を日本語化する
  • rememberチェックボックスはよくわからないから一旦外す
  • ユーザ登録とパスワードリセットのリンクも一旦外す(遷移を封印して管理対象を少なくするのがねらい)


4. カスタマイズする
↑のカスタマイズをしていきます。
まずは簡単なリンクの封印から。
これは↑で調べておいた通りリンクを描画する部分テンプレートを封印すればいい。

次に表示内容の日本語化。
これはページタイトルと入力フォームの部分を日本語化すればいい。

最後にrememberチェックボックスを外すのは、何も考えずに一旦コメントアウトするという作戦で行く。
#パラメータが投稿されてないからエラーになるとかいう可能性があるけど、一旦やってみる。
で、できたのがコレ。


ちなみにソースはこう。

ログイン

<%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
<%= f.label 'メールアドレス' %>
<%= f.email_field :email, :autofocus => true %>
<%= f.label 'パスワード' %>
<%= f.password_field :password %>
<%= f.submit "ログイン" %>
<% end %>
という感じで当初の目的は達成したので、今回は一旦以上。
次回は余裕があればもうチョットいじってみようかと思います。





2 件のコメント:

  1. OmniouthはTwitterやfacebookと連携するときに使う機能だよ。そっちでは使わないんじゃなかったっけ。

    返信削除
  2. エコエンジニアさんありがとうございます。
    はい、Omniauthは使わない予定です。
    なのでDBのカラムも潰しています。

    返信削除