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

以上です。


スポンサーリンク




コメント一覧

2022/09/18 05:29:53

Michaelpedさん

Cheers! A good amount of material.

price prescription drugs global pharmacy canada drug prices comparison https://rxpharmacyteam.com


2022/09/18 06:04:42

AlvinJowさん

Many thanks! A good amount of data.

writing a great essay https://ouressays.com/ writing helps


2022/09/18 06:50:58

leagreeさん

doxycycline for chlamydia Based on this distinct localization pattern, we hypothesized that ОІ1AR- mediated cAMP likely regulates distinct PKA effectors in each membrane compartment s vicinity.


2022/09/18 07:54:12

AlvinJowさん

You expressed that very well.
writing essay help how to write an argument essay college admission essay writing service


2022/09/18 12:59:04

AlvinJowさん

Really plenty of superb knowledge.
writing a personal essay australian essay writers personal statement writer


2022/09/18 16:30:04

JoeteOaOaさん

online singles near me
free adult personals site
date internet site


2022/09/18 20:50:45

AlvinJowさん

Thank you, Ample stuff!

college essay writing services https://service-essay.com/ write my dissertation for me


2022/09/18 23:38:39

BruceCandyさん

Incredible many of helpful data.
online drugstore pharmacy canadadrugsonline mail order pharmacies


2022/09/19 02:27:17

Wendellunapsさん

Terrific data, With thanks!
overseas pharmacy forum prescription drugs online without doctor meds online


2022/09/19 08:47:48

Michaelpedさん

Perfectly spoken without a doubt! .
canadian drugs canadian pharcharmy onlinecanadian online pharmacy canadadrugstore365 https://rxpharmacyteam.com


2022/09/19 16:17:02

Wendellunapsさん

Nicely put, With thanks!
compound pharmacy online pharmacy without prescription pharmacy prescription


2022/09/19 21:03:02

AlvinJowさん

Beneficial knowledge. Many thanks.
medical school essay service https://service-essay.com/ online professional resume writing services


2022/09/19 20:42:07

MarrisOaOaさん

essay writing websites
essay help sydney
write my essay fast


2022/09/20 03:09:27

BruceCandyさん

Thank you! Numerous write ups.

discount prescription drug canadian rx pharmacy online humana online pharmacy


2022/09/20 03:57:20

AlvinJowさん

Many thanks, Valuable stuff.
how to write 5 paragraph essay essay pay for writing an essay


2022/09/20 10:01:50

AlvinJowさん

You have made your point!
romeo and juliet essay help essays writers web writing services


2022/09/20 19:47:32

Wendellunapsさん

Amazing quite a lot of superb data.
rx price comparison pharmacy tech canada viagra


2022/09/21 00:48:42

AlvinJowさん

With thanks, Helpful stuff.
how to become a good essay writer write my essay technical writing services


2022/09/21 01:55:15

Michaelpedさん

Regards, Numerous postings!

no 1 canadian pharcharmy online pharmacy price compare canadian drug https://canadianpharmacylist.com


2022/09/21 06:46:36

BruceCandyさん

You said it adequately.!
discount drugs online pharmacy canadian pharmacy cialis prescription drugs canada


2022/09/21 09:32:52

Wendellunapsさん

You explained that terrifically!
cialis canadian pharmacy online pharmacy usa walmart online pharmacy


2022/09/21 09:42:16

MartyOaOaさん

custom essay writing help
application essay writing service
online essay writers


2022/09/21 15:39:42

Michaelpedさん

Excellent forum posts. Thank you!
online order medicine pharmacy online store online pharmacy without scripts https://canadapharmacyspace.com


2022/09/21 20:37:15

BruceCandyさん

Thanks a lot! Good information.
canada prescription drugs canadian pharmacies without an rx canadian pharcharmy online fda approved


2022/09/21 23:28:49

Wendellunapsさん

Awesome material. Cheers.
canada pharma limited llc canadian rx international pharmacies that ship to the usa


2022/09/22 03:02:52

AlvinJowさん

Kudos! Ample postings!

essay about college education essay typer medical residency personal statement writing services


2022/09/22 05:34:19

Michaelpedさん

Tips well taken.!
canada pharmaceuticals mexican pharmacy online canada pharmacies/account https://northwestpharmacylabs.com


2022/09/22 09:30:49

MerolaOaOaさん

i need someone to write my essay
writing essay services
best article writing service


2022/09/23 05:25:42

AshlenOaOaさん

writing essay services
online essay writers wanted
buy argumentative essay


2022/09/24 01:12:39

CharitaOaOaさん

help me to write an essay
cheap custom essay
essay correction service


2022/09/24 03:34:17

BruceCandyさん

Beneficial advice. Thanks.
prescription price comparison canada pharma limited llc online pharmacy without scripts


2022/09/24 17:17:20

AlvinJowさん

Appreciate it, An abundance of tips.

writing outlines for essays write my essays ghost writer essays


2022/09/24 19:09:47

CharitaOaOaさん

cheap essay writing service
online essay writers
sat essay writing help


2022/09/25 00:03:09

AlvinJowさん

You said it perfectly..
value of a college education essay write my essay custom writings plagiarism


2022/09/25 14:36:47

NaniceOaOaさん

write my essay for me
how can i pay someone to write my essay
custom essay paper


2022/09/26 09:39:26

ChelsaeOaOaさん

essay on old custom
english essay helper
i need someone to write my essay


2022/09/27 05:04:02

PennyOaOaさん

essay writing service canada
essaywriting service
essay writing services usa


2022/09/28 20:39:00

AntonieOaOaさん

custom essay online
your essay writer
cheap custom essays


2022/09/29 16:07:12

RhiamonOaOaさん

writing essays services
custom essays usa
service to others essay


2022/09/30 11:34:14

CharoOaOaさん

essay about military service
legitimate essay writing service
help writing scholarship essays


2022/10/01 06:14:37

DronaOaOaさん

write my social work essay
english essay helper
cheap essay writing service online


2022/10/02 01:52:15

TwylaOaOaさん

custom essay writing online
live essay help
how to be a good essay writer


2022/10/02 22:22:23

LeilahOaOaさん

cheapest essay writing services
premium essay writing service
help writing argumentative essay


2022/07/08 04:15:00

AurlieOaOaさん

all slots casino
free igt slots
play free online slots machine 999999999999


2022/07/16 05:56:37

JoeteOaOaさん

nursing dissertation help
premium dissertation writing service
dissertation proposal help


2022/07/20 02:05:55

ChandaOaOaさん

dissertation cover page
writing a dissertation methodology
research writing help


2022/07/21 01:55:31

AvivaOaOaさん

uf dissertation award
professional writing service
language editing phd thesis


2022/07/21 21:10:18

DortheaOaOaさん

dissertation assistance
uf thesis and dissertation
help with masters dissertation


2022/07/22 16:34:21

VerieeOaOaさん

thesis dissertation
writing dissertation
writing a literature review for a dissertation


2022/07/24 04:13:20

SuzannOaOaさん

help dissertation
help with writing dissertation proposal
writing my dissertation


2022/07/24 22:44:36

SalliOaOaさん

dissertation research and writing
dissertation proposal writing services
dissertation literature review


2022/07/25 19:03:20

DarsieOaOaさん

buy dissertations
best rated essay writing service
define dissertation


2022/07/26 16:52:16

MabelleOaOaさん

help with masters dissertation
dissertation editing help
dissertation help free


2022/07/26 17:43:10

TandiOaOaさん

casino play for real money
online casino no deposit welcome bonus
no deposit bonuses


2022/07/27 14:34:18

JenneeOaOaさん

writing dissertation methodology
custom dissertation writing
rutgers dissertation proposal help


2022/07/27 18:53:08

AbagaelOaOaさん

usa casino online
no deposit on line casinos
usa online casinos


2022/07/28 11:03:27

HerminaOaOaさん

doctoral dissertation writing help
language editing phd thesis
doctoral dissertation help history


2022/07/28 18:26:45

ShaylaOaOaさん

casino real money
free sign up bonus online casino
casino games for money


2022/07/29 06:45:43

AudreOaOaさん

how long is a doctoral dissertation
dissertation proposal writing help
dissertation vs thesis


2022/07/29 09:04:58

Jariewereさん

cialis generic online Generic Bentyl


2022/07/29 17:25:27

VerenaOaOaさん

top online casinos
mobile casino games
online casino no deposit bonus


2022/07/30 02:42:56

HestiaOaOaさん

dissertation help service
cheap dissertation help
dissertation help service


2022/07/30 15:58:26

DixieOaOaさん

online casino bonus no deposit
best online casino bonus
online casino review


2022/07/31 13:46:51

LaureenOaOaさん

deposit bonuses
win real money online
casino games that pay real money


2022/08/02 12:49:15

PearlOaOaさん

no deposit casino online
best online casino real money
no deposit bonuses


2022/08/03 11:13:57

BobbieOaOaさん

the best online casino
no deposit welcome bonus casino
casino bonuses


2022/08/04 09:39:12

LeslieOaOaさん

american online casinos
best online casino deposit bonuses
real money casino no deposit


2022/08/07 09:25:10

TrudieOaOaさん

bingo casino online
mobile casino games for real money
bester online casino bonus


2022/08/07 20:17:17

HonorOaOaさん

trust.zone vpn
business vpn cost
firefox vpn


2022/08/08 08:39:47

JaynellOaOaさん

online casino games real money
free no deposit bonus casino
deposit bonuses


2022/08/08 16:32:18

TeddieOaOaさん

best vpn 2019
chrome vpn extension free
free vpn windows


2022/08/09 16:18:08

DulceaOaOaさん

blackjack real money
online casino sign up bonuses
bonus no deposit


2022/08/10 00:58:18

JenneeOaOaさん

free mobile vpn
free vpn no download
best vpn for china


2022/08/10 16:41:02

CarolanOaOaさん

casino deposit bonuses
bonus casino no deposit
best online casinos for usa players


2022/08/10 21:12:58

JenneeOaOaさん

best free vpn for windows 10
free vpn for mac
vpn business benefits


2022/08/11 16:00:27

FanyaOaOaさん

casino games for money
free casino bonus
free cash no deposit casino


2022/08/11 17:29:44

AshleighOaOaさん

good vpn free
free vpn no credit card
tunnelbear vpn


2022/08/12 14:25:41

KelseyOaOaさん

the best vpn free
hide my asss vpn
buy vpn with gift card


2022/08/12 16:08:48

CarolinOaOaさん

free sign up bonus no deposit casino
biggest online casino bonus
best online bingo


2022/08/14 10:50:00

FifineOaOaさん

best welcome bonus casino
us online casino
free welcome bonus no deposit casino


2022/08/15 07:00:11

FifineOaOaさん

bingo online for money
casino bonus no deposit
no deposit casino bonuses


2022/08/15 14:45:25

SheelaghOaOaさん

buy usa vpn
international vpn service
best vpn for kodi


2022/08/16 06:11:03

GwenoreOaOaさん

win real money online casino for free
best casino online usa
best online casino usa


2022/08/18 05:15:29

Piniwhipsさん

Viagra Ohne Rezept Im Ausland buy ivermectin


2022/08/19 07:42:19

encathyさん

Cialis Viagra Per Donne ivermectine msd Cialis E Cortisone


2022/08/23 19:28:54

GladiOaOaさん

chub gay dating
gay redneck dating
older gay men dating sites


2022/08/24 10:38:45

JoannOaOaさん

romancemingle
free datinsites chat
online singles near me


2022/08/24 14:48:04

JeraleeOaOaさん

gay dating sights
online gay dating site crossword
squirt gay hook up dating cruising and sex site


2022/08/25 10:33:30

KyrstinOaOaさん

gay black dating apps for fat black gay men
free gay dating older men
best free gay dating sites


2022/08/25 22:28:07

BertheOaOaさん

dating sites online
best dating apps
online dejting


2022/08/26 19:31:42

KaitlynnOaOaさん

online dating site
online dating site crossword
dating women online


2022/08/27 16:42:29

DavinaOaOaさん

beste dating site
free online dating sites
free dating sites no fees


2022/08/28 02:36:47

GladiOaOaさん

gay dating grinder
free gay dating sites grindr
gay hook up dating site


2022/08/28 14:52:47

ChelsaeOaOaさん

singles in women
date free website
40 online dating


2022/08/28 21:55:30

JeraleeOaOaさん

top gay dating sites dallas texas
gay dating apps military man imposter
japan gay dating sites


2022/08/29 13:03:20

EmaliaOaOaさん

dating sites
online dating best site
datiing websites


2022/08/29 17:20:30

KyrstinOaOaさん

which gay dating app?
sado masoicsm gay dating site
gay mature men dating site in palm springs california


2022/08/30 10:51:35

KarryOaOaさん

strydom mail
free dating ads
top single service


2022/08/30 13:34:20

CasandraOaOaさん

online casino for us players
free bonus no deposit
online casinos with no deposit bonus


2022/08/31 09:03:37

AmataOaOaさん

online casino with free signup bonus real money usa no deposit
best casino bonus
usa online casinos


2022/08/31 09:30:47

LettiOaOaさん

tinder dating site pictures women
free dating site
dateing site


2022/09/01 06:02:13

uncothithさん

L acquisto del Cialis Generico ГЁ un ottimo modo per curare ogni segno di disfunzione erettile buying generic cialis online safe


2022/09/01 22:56:39

LettiOaOaさん

meet men online
dating sim
victoriasonlinedating


2022/09/02 02:06:06

GennieOaOaさん

free asian chat lines gay
local gay chat
free chat rooms gay chat


2022/09/02 08:24:52

offemiaさん

Trumac Healthcare buy cialis with paypal There are increasing experimental data that increased concentrations of NO and cGMP have an antifibrotic effect on tissues including the tunica albuginea and corporal tissue, supporting a role for tadalafil to halt the pathophysiologic role of CVOD in post-prostate cancer treatment ED


2022/09/02 22:12:43

DeeynOaOaさん

free gay chat lines los angeles
gay mens chat
gay teen chat groups


2022/09/03 10:14:55

dupdaydayさん

buy priligy 30 mg x 10 pill Lushniak, MD, MPH, leads the School of Public Health at the University of Maryland, the university s youngest and most racially and ethnically diverse academic college


2022/09/03 17:27:11

EmaleeOaOaさん

gay mature chat
michigan gay chat
snap chat gay boy cums


2022/09/03 16:41:35

Randylibさん

Amazing many of awesome data! essay writing service law courses work thesis editing


2022/09/04 12:47:10

StephineOaOaさん

indian gay chat
gay teen cam chat
senior gay chat lines


2022/09/04 15:24:17

Amuxureさん

If you think you might have ED, your best bet is to see your doctor priligy results If self-image or cognitive styles may reflect delayed maturation viagra without prescription sales of the earth


2022/09/05 08:22:01

Snoseneさん

Retail price 417 where to buy cialis cheap


2022/09/06 14:28:07

adazirlさん

order cialis online Generally, Cialis can be taken by mouth with or without food - or as advised by your doctor


2022/09/06 19:47:02

Alvenruilaさん

Whoa plenty of awesome info. thesis writing service uk how to write a great narrative essay


2022/09/07 04:06:46

RobenaOaOaさん

one on one gay sex chat on camera for masterbation
gay chat cam chat
gay video chat private show


2022/09/07 10:42:54

Expancyさん

cialis online without prescription View samples for which you are eligible and available savings offers


2022/09/08 23:10:47

DRUMSLIRLさん

cheap cialis generic online 3 and Patient Counseling Information 17


2022/09/09 20:03:21

TallouOaOaさん

gay random chat
gay chat randon
chat random gay chat


2022/09/10 08:27:58

iodiblyさん

Acta Endocrinol Copenh. how is clomid taken Studies have not shown it to be any better.


2022/09/10 16:06:07

MarilinOaOaさん

first time gay chat
first gay chat
random gay cam chat


2022/09/13 11:00:27

fusaanimiさん

tamoxifen without prescription We ve been some research compound.


2022/09/13 17:43:36

AlvinJowさん

Amazing stuff. Many thanks.
writing a perfect essay essay website help me write my personal statement


2022/09/13 18:51:38

Michaelpedさん

Cheers. I value this.
drug price canadian pharmacy viagra generic canadian prescriptions https://canadianpharmacies-24h.com


2022/09/14 01:13:29

AlvinJowさん

Helpful data. Regards.
high school vs college essay compare and contrast https://ouressays.com/ writing company


2022/09/14 02:01:26

Wendellunapsさん

Regards. An abundance of advice!

viagra pharmacy 100mg generic viagra online pharmacy visit poster's website


2022/09/14 06:21:43

AlvinJowさん

Amazing quite a lot of fantastic tips.
engineering college essay https://orangepornhub.com/ custom article writing service


2022/09/14 08:19:32

Michaelpedさん

Regards. Awesome information!
best online pharmacy stores viagra from canada online rx pharmacy https://online-pharmacy-inc.com


2022/09/14 12:24:34

AlvinJowさん

Nicely put. Kudos.
how to write the perfect college application essay college admission essay writing service help writing thesis statement


2022/09/14 12:29:00

BruceCandyさん

Useful advice. Thanks a lot.
top rated online canadian pharmacies prescription drug buy drugs online


2022/09/14 13:50:29

MavisOaOaさん

deting
free online dating
free dating ads


2022/09/14 21:39:04

Michaelpedさん

Wow a good deal of beneficial tips!
canada prescription plus pharmacy canadian pharcharmy onlinecanadian online pharmacy best online pharmacy stores https://canadapharmacyspace.com


2022/09/15 01:00:45

AlvinJowさん

Info clearly considered..
essay community service college essay word limit web content writers


2022/09/15 01:46:53

BruceCandyさん

Thanks! I value this.
mexican pharmacies online canadian pharmacies without prescriptions canadianpharmacyusa24h


2022/09/15 02:34:23

AlvinJowさん

With thanks! A lot of info.

writing a great essay writing good essays all ivy writing services


2022/09/15 04:37:47

Wendellunapsさん

Nicely put. Kudos.
board of pharmacy internet pharmacy list of approved canadian pharmacies


2022/09/15 15:17:54

JuanitaOaOaさん

dating for singles
plenty fish date site
skip the game dating site free search


2022/09/15 17:54:03

Wendellunapsさん

Nicely put. Thanks.
buy prescription drugs from canada canadian pharmacy king canadian drugs pharmacy


2022/09/16 00:13:14

Michaelpedさん

Nicely put. Thanks.
pharmacy online drugstore compare prescription prices canadian pharmacy no prescription https://canadianonlinepharmacybase.com


2022/09/16 02:34:58

AlvinJowさん

Really a lot of valuable info!
essay websites essay writing service write my thesis statement for me


2022/09/16 04:06:53

AlvinJowさん

Nicely put, Regards.
college admission essay editing services things to write an argumentative essay on best websites for essays


2022/09/16 04:24:12

BruceCandyさん

Thanks, Quite a lot of stuff.

drugs from canada with prescription canada pharmacy online orders discount drugs online pharmacy


2022/09/16 16:06:16

MaisieOaOaさん

chat with singles
searchingforsingles
free sites sites


2022/09/16 17:48:57

BruceCandyさん

With thanks, Numerous data.

online pharmacy no prescription needed approved canadian online pharmacies canadian prescription drugstore


2022/09/17 01:40:29

Reombakさん

From the Departments of Surgery, Section of Vascular Surgery J. doxycycline stomach pain


2022/09/17 04:17:54

AlvinJowさん

Very good material, Regards.
academic writing essay essays writer custom article writing


2022/09/17 06:37:01

BruceCandyさん

Thanks a lot. I appreciate it!
online canadian discount pharmacy no prescription online pharmacy pharmeasy


2022/09/17 11:00:30

AlvinJowさん

Cheers, An abundance of info.

what is the best custom essay writing service https://essayssolution.com/ executive resume writers nyc


2022/09/17 15:51:42

Michaelpedさん

Good stuff. Regards.
prescription price comparison best canadian online pharmacy canadian pharmacy certified canada pharmacy online https://northwestpharmacylabs.com


2022/09/17 17:11:32

EachelleOaOaさん

dating online
dating site online
plenty of fish dating


2022/09/17 20:14:00

BruceCandyさん

You explained that exceptionally well!
canadian prescriptions online viagra from canada walgreens pharmacy online


2022/09/17 23:06:14

Wendellunapsさん

Thank you, An abundance of content.

canadian pharmacies online canada online pharmacy canada drugs pharmacy online



コメントを投稿する


お名前


コメント内容





TOP back