レスポンシブなwebサービスを作成していると、長文メッセージをPC版だけでなく、mobile版の画面でも表示しなければならない場面が出てくる。特に、flash[:notice]を利用する際に対応が発生する方が多いのではないだろうか。

flash[:notice]に設定するdevise用ymlメッセージの改行設定を行う際、一瞬、deviseをoverrideしないといけないのではないか？と対応方法の検討に戸惑ったので、備忘的な意味も込めて対応方法を簡単にまとめてみた。

config/locales/other/devise.ja.yml(必要箇所のみ抜粋)

ja:
  devise:
    confirmations:
      send_instructions: '確認メールを、登録したメールアドレス宛に再送しました。<br>メールに記載されたリンクを開いてアカウントを有効にして下さい。'

view側の記述

<% flash.each do |type, msg| %>
  <div class="flash flash--<%= type %><%= ' flash-notice--long-sentence' if msg.include?('<br>') %>">
    <span class="flash__text"><%= msg.html_safe %></span>
  </div>
<% end %>

css(scss)の記述

.flash-notice--long-sentence {
  text-align: left;
}

表示メッセージに.html_safeを記述し、メッセージ内に改行タグ<br>が存在した時は、調整用のclassを表示するという方法である。

PC版と改行箇所が同じになってしまうというデメリットもあるが、上記のように対応すると、対応工数がほとんどかからず、シンプルな実装になる。

ymlファイルに記述した文言の改行をしたい場合など応用が効きそうな方法なので、同じような場面に遭遇したらテクニックの１つとして活用していきたいと思う。