【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にしました。

以上です。


スポンサーリンク




コメント一覧

2021/03/21 18:30:35

Esogragmaさん

https://hcialischeapc.com/ - where to buy cialis cheap


2021/04/08 01:48:08

tyncさん

Unravel the tricks of producing an exemplification informative article. Learn more about outline the article issues, examples, and also author's hints. Seeing just how exactly to compose an SAT essay this informative article features template outline definition, creating hints, and also some professionally-written SAT article illustrations. https://rf-onlinegame.com/types-for-choosing-a-reliable-academic-writing-service/



コメントを投稿する


お名前


コメント内容





TOP back