(著者:サイボウズ 北川 恭平)
はじめに
こんにちは。北川@サイボウズです。
kintoneでの利用シーンとして、例えばゲストスペースを利用して他社と原稿データなどの文章データやりとりしていたとします。
そんな時に、規定の文字数に達しているか?を知りたくなる方は多いのではないでしょうか?
そこで今回はレコード保存時に、文字数をカウントした情報を保存する簡単なカスタマイズを紹介します。
サンプルアプリ
それでは早速、「数値」と「文字列(複数行)」のみの簡単なアプリを作成してみましょう!
実際に作成したアプリの詳細は以下です。
フィールドタイプ | フィールド名 | フィールドコード |
数値 | 文字数 | count |
文字列(複数行) | 本文 | honbun |
サンプルプログラム
それでは早速サンプルを作っていきましょう。
とっても簡単ですね!忘れてはいけないのは、レコード登録時だけではなく、「レコードの編集」「インライン画面での編集」が行われた時でも文字数をカウントするということです。
結果確認
それでは、作成したJavaScriptで結果を確認してみましょう。
キャプチャでは、上記記載のサンプルコードの他に「文字数」フィールドの編集を制御する処理をいれています。
詳しくはこちらをご参照ください。
試しに半角スペースも入れて「保存」をおしてみます。
スペースを除いた文字数「18」が「文字数」フィールドに保存されました!
(ちなみに今回は大文字、小文字、記号は関係なく1文字とカウントします。)
最後に
今回の内容はライトなものでしたがいかがでしたでしょうか?
現在、developer networkでこんな内容のTipsが欲しい!や、こんなことで今もやもやしている!などのご意見をどしどし募集しています。
ちょっとした内容でも構わないのでお気軽に、コミュニティに投稿していただければと思います。
このTipsは、2014年6月版で確認したものになります。
こちらの文字数カウントですが、
全角は2文字、半角は1文字でカウントするということはできますか?
また、改行を1文字としてカウントすることもできましたら、
その方法をご教示いただきたいです。
kyodenさん
こんにちは。
私の方で少しためしてみました。
以下のコードで動作を確認したので、よかったらどうぞ!
(function() {
'use strict';
kintone.events.on(['app.record.create.submit','app.record.edit.submit','app.record.index.edit.submit'], function (event) {
// 本文に入力された文字数を取得
var rec = event.record;
var st = rec['honbun']['value']
var result = 0;
//改行を1文字でカウント
for (var i = 0; i < st.length; i++) {
if (st.charAt(i) === "\n") {
result++;
}
}
//空白文字を削除
var st2 = st.replace(/\s+/g, "");
//半角は1文字、全角は2文字でカウント
for (var j = 0; j < st2.length; j++) {
var c = st2.charCodeAt(j);
if ((c >= 0x0 && c < 0x81) || (c === 0xf8f0) || (c >= 0xff61 && c < 0xffa0) || (c >= 0xf8f1 && c < 0xf8f4)) {
result += 1;
} else {
result += 2;
}
}
//文字数フィールドに文字数を代入
rec['count']['value'] = result;
return event;
});
})();
※参考サイト
・全角・半角
https://zukucode.com/2017/04/javascript-string-length.html
https://javascript.programmer-reference.com/javascript-han1zen2/
・改行
http://nanto.asablo.jp/blog/2008/05/23/3537480
おんちさん
ご教示いただきまして誠にありがとうございました!
問題なく動作いたしました。
また 不明点が出たら、相談させていいただいてもよろしいでしょうか?
今後ともよろしくお願いいたします。
おんちさん
以前にご教示いただいた改行と半角と全角のカウントについてですが、
改行と半角を0.5、全角を1としたいと考えております。
この場合
result += 1;
} else {
result += 2;
を
result += 0.5;
} else {
result += 1;
に変更したら、半角と全角のカウント数は変わったのですが、
改行が文字数1にカウントされたままとなっております。
改行を0.5にするにはどのように変更すればよろしいでしょうか?
よろしくお願いいたします。
kyodenさん
こんにちは。
ご質問いただいた内容についてですが、前回のコードで「//改行を1文字でカウント」の部分も
修正すると動作するかと思います。
//改行を0.5文字でカウント
for (var i = 0; i < st.length; i++) {
if (st.charAt(i) === "\n") {
result += 0.5;
}
}
//空白文字を削除
var st2 = st.replace(/\s+/g, "");
//半角は0.5文字、全角は1文字でカウント
for (var j = 0; j < st2.length; j++) {
var c = st2.charCodeAt(j);
if ((c >= 0x0 && c < 0x81) || (c === 0xf8f0) || (c >= 0xff61 && c < 0xffa0) || (c >= 0xf8f1 && c < 0xf8f4)) {
result += 0.5;
} else {
result += 1;
}
}
今後もしまた不明点がありましたら、より多くの有志のエンジニアに見てもらえる
コミュニティのほうに質問するといいと思います!
よろしくお願いします。
おんちさん
再びご教示いただき誠にありがとうございました!
上記のコードで問題なく改行を0.5文字でカウントしてくれました。
今後もしまた不明点がある場合はコミュニティのほうへ相談します。
おたずねします。
この文字数のカウントを テーブル行で行う場合は、どうなりますか?
初心者で原理が分かっておらず、すみません。。。。
海老原さま
はじめようJavaScript第16回 kintone JavaScriptカスタマイズのプログラム実例を学ぼう④(テーブル操作)
https://developer.cybozu.io/hc/ja/articles/360027244231
「テーブルのデータの配列とオブジェクト、その扱い方の例 」にてテーブルデータの取得方法がありますので参考にしてください。
その記事でも難しかった場合、はじめようJavaScript第12回のあたりから確認されると良いかと思います。
コードを書いて不明点がありましたら、当記事の最後に記載のとおり、コミュニティをご活用ください。
よろしくお願いいたします。
こんにちは、教えてください。
文字列(一行)にカンマ区切りの日付データがあります(2020-03-02,2020-03-03,2020-03-04,)
日付データの数をカウントできるでしょうか?
宜しくお願い致します。
Yasuo Shiozawa 様
お世話になっております。
cybozu developer network 運営局です。
はい、取得したフィールドの値をカンマ区切りで配列に分割し、配列の長さを取得すると可能です。
また、このコメント欄は記事のフィードバック欄となっているため、
発展する内容についてはコミュニティをご活用ください。
よろしくお願いいたします。
お世話になります。
こちらリッチエディタで使用することはできるのでしょうか。
OHN 様
お世話になっております。
cybozu developer network 運営局です。
リッチエディタにはHTMLタグが含まれてしまいますので、そのままでは使用はできません。
実現したい場合は下記のようにまずはHTMLタグを除去する必要があります。
https://sites.google.com/site/tatsuyafukata/pg/javascript/remove-html-tag
また、このコメント欄は記事のフィードバック欄となっているため、
試してみてわからないなど、発展する内容についてはコミュニティをご活用ください。
よろしくお願いいたします。
追加でご質問よろしいでしょうか。
上記はレコード保存時に文字数カウントされますが、
フィールド変更時にカウントされるようにカスタマイズできないでしょうか。
変更の見落としがないようによりリアルタイムで表示させたく考えております。
大熊 祐三 様
お世話になっております。cybozu developer network 運営でございます。
フィールド値変更イベントにてカウントされるようにカスタマイズは可能です。
恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
実際のカスタマイズ方法や試したがわからないなど、記事から派生した技術的なご質問はcybozu developer コミュニティをご活用ください。
よろしくお願い致します。