jquery.cookie.jsで手軽に文字サイズ切り替え

jquery.cookie.jsを使えばすごい簡単にjavascriptでcookieが扱えます。

$.cookie('保存名', 値) だけで保持できるし、 $.cookie('保存名') だけで取得できる。うーん便利すぎる。

この記事ではRailsプロジェクトでjquery.cookie.jsを使って、文字サイズの切り替えを自由に行える方法をメモとして残します。やりたいことは自由に文字のサイズを切り替えられて、ページ遷移やリロード時も選択中の文字サイズの設定を引き継げるようにしたい。

• jquery-cookie.jsのソースをクローン

# Rails.rootで
git clone https://github.com/carhartl/jquery-cookie

• jquery.cookie.jsを/vendor配下に設置

cp jquery-cookie/src/jquery.cookie.js vendor/assets/javascripts/
# コピーしたら他は必要ないので消しちゃってOK
rm -rf jquery-cookie

• application.jsに定義

app/assets/javascripts/application.js

//= require jquery.cookie
//= require_tree .
//= require font_change

• 処理

app/views/layouts/_header.html.slim

.navbar-text
  | 文字サイズ  
  = link_to '小', '#', class: 'btn btn-default font-change', id: 'fontS'
  |  
  = link_to '中', '#', class: 'btn btn-default font-change', id: 'fontM'
  |  
  = link_to '大', '#', class: 'btn btn-default font-change', id: 'fontL'

app/assets/javascripts/font_change.js.coffee

 $ ->
  # フォントサイズ適用
  history = $.cookie('fontSize')
  elm_body = $('.wrapper') # bodyタグの上にwrapperクラスを追加しておく
  if history
    elm_body.addClass(history)
    $("##{history}").addClass('active') # bootstrapのactiveクラスを追加

  # フォントサイズ変更
  $('.font-change').click ->
    history = $.cookie('fontSize')
    set_font_size = $(this).attr('id')
    $("##{history}").removeClass('active')
    $(this).addClass('active')
    if history
      elm_body.removeClass(history).addClass(set_font_size)
    else
      elm_body.addClass(set_font_size)
    $.cookie('fontSize', set_font_size)

app/assets/stylesheets/hoge.css.scss

.fontS {
  font-size: 14px !important;
}

.fontM {
  font-size: 16px !important;
}

.fontL {
  font-size: 18px !important;
}