【rails】coffeescriptで文字数カウンターを作る | 瀬戸内の雲のように

【rails】coffeescriptで文字数カウンターを作る

Posted: 2018-01-21


スポンサーリンク

目次

背景

googleの検索順位には記事の文字数が関係あるとかないとか。
ということでこのブログでは1記事あたり最低でも600文字以上は書こうと決めています(多分本当は1000文字以上必要だけどね。。)
そこで、下書きの段階に現在何文字なのかをチェックするカウンターを作りたいと思った次第です。

どうやって作るのか

記事作成中は当然ながら文字数はすぐに変わります。なのでいちいち保存とかして確認するのはめんどくさい。
ということで漠然と「javascriptで作ると動的に変わって良さそう」と思い、作ることに。

coffeescriptとは

以前railsについて研修で学んでいた時に、railsではcoffeescriptってのが使えるよということを習いました。
その時は触りしか勉強しなかったため改めて調べたところ、javascriptをより簡易に(記述量を少なく)書ける言語ということがわかりました。
ということで、あまりこだわりは無かったのですが、一応coffeescriptで作ることにしました。

内容

修正箇所は全部で4箇所あります。

coffeescript本体

まず、カウンタの処理本体がこちら

 # app/assets/javascript/count_length.js.coffee
ready = ->

  # text_areaの部分のkeyupイベントが発生したら文字数を計測し、表示
  $("#blog_content").keyup ->
    $("p#length_check").html(count_length)

  # 文字数を計測し、表示する文字列を作成("X文字"の部分)
  count_length = ->
    msg = $("#blog_content").val().replace(/(\r\n|\r|\n)/g, "").length + "文字"
    return msg

$(document).ready(ready)
$(document).on('turbolinks:load', ready)

view

次に表示させるviewがこちら

 # app/views/blogs/_form.html.erb
<p id="notice"><%= notice %></p>

<%= form_for(@blog, url: choose_new_or_edit) do |f| %>

   ~~中略~~

  <br>
  <%= f.label :content %>
  <%= f.text_area :content, :id => 'blog_content', class: 'form-control' , size: "100x30" %>
  <p id="length_check">0文字</p>
  <br>
  <%= f.submit '保存', class: 'btn btn-primary' %>
  <%= link_to "戻る", myblogadmin_blogs_path, :class => 'btn btn-default' %>
<% end %>

重要なのは、以下2点です。

  • text_areaの部分のidをviewとcoffeescriptで合わせる(上では'blog_content')
  • 文字数を表示する部分(上ではp id="length_check"の部分)

application.js

作ったカウンタを読み込むためにapplication.jsも以下のように修正が必要です。

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require jquery.turbolinks          ★追記
//= require turbolinks
//= require_tree .

これでブログ作成中に文字数をカウントすることができます。

ちなみに、当初はkeyupではなくchangeを使っていたのですが、うまくいかなかったのでkeyupにしました。

以上です。


スポンサーリンク




コメント一覧


コメントを投稿する


お名前


コメント内容





TOP back