kintoneレコード画面に任意のテキストを表示したいけど改行できない

１．崖下の kintone カスタマイズスペシャリスト

資格勉強における成功の鍵は３つ。

１）期限を決める（2024年内に受験）
２）自分よりできる人達の集団（崖下）に身を置く
３）アウトプットする

というわけで、これはJavaScript初心者の私がkintoneカスタマイズスペシャリストを目指して七転八倒する学習記録です。学習中に躓いたこと、役に立ったこと、面白いと感じたことなどをアウトプットしていきます。

正直、Qiitaにアウトプットするなんて烏滸がましいと震えながら書いています。この記事が私のような初心者の方のヒントや勇気になりますように……。

学習内容はcybozuさんが公開しているチュートリアルを参考に進めていきます。今回は「レコード画面に任意のテキストを表示してみよう」です！

参考ページ：
チュートリアル
レコード画面に任意のテキストを表示してみよう

２．長文を表示してみよう

この課題はkintoneのレコード一覧画面の上部スペースを指定して、任意の文字列を表示するというシンプルなものです。

課題の文字は'Hello Members!'の1文。
せっかくなのでもっと長文を表示させてみようと「外郎売」をせっせとコピペしてみました。改行無しで1,844文字です。

わあ！読みにくい！
エディタ上の読みにくさは更に上を行きます。

横にうんっとスクロールしないと「ういろうは、いらっしゃりませぬか。」にたどり着けません。

エディタ上でもスクロールなしで文章を読めるようにバックスラッシュ（\）で改行を入れました。

バックスラッシュで改行

 headerSpaceElement.textContent = 
 '拙者親方と申すは、お立合の中に、御存じのお方もござりましょうが、\
  お江戸を発って二十里上方、相州小田原一色町をお過ぎなされて、青物町を登りへ\
  おいでなさるれば、欄干橋虎屋藤衛門只今は剃髪致して、円斉となのりまする。\

他に試してみたエディタ上の文字列改行

文字列の塊を+で繋げる

 headerSpaceElement.textContent ='拙者親方と申すは'+
                                 'お立合の中に、'

 // 文字列の塊ごとに「''」で囲むのが面倒くさすぎて早々に断念。

バッククォートで囲んでテンプレートリテラルにして改行

 headerSpaceElement.textContent =`拙者親方と申すは
                                  お立合の中に、`
                                  
 // 一番簡単ですが、kintoneの画面上にも改行が反映されてしまうらしいのでパス。

３．あれっ。改行できない……？

画面上で改行する方法は主に二つ。

１）改行したい箇所に改行コードを入れる
２）テンプレートリテラル内で改行

今回はエディタ上の改行と画面上の改行を分けたかったので、改行コードを入れてみました。

改行コード

改行コード色々

 \n    // 改行 (Newline) 。カーソルを次の行の先頭に移動させます。
 
 \r　  // キャリッジリターン (Carriage Return) 。カーソルを現在の行の先頭に戻します。
 
 \r\n  // 改行＆キャリッジリターン。
 // 多くのシステムでは、\n だけで新しい行を開始します。
 // しかし、一部のシステム（特にWindows）では、 \r\n の組み合わせを使用します。

じゃあ、「。」の後ろに「\n」を入れて改行してみようかな。

改行コードをいれて改行

 headerSpaceElement.textContent = 
 '拙者親方と申すは、お立合の中に、御存じのお方もござりましょうが、\
  お江戸を発って二十里上方、相州小田原一色町をお過ぎなされて、青物町を登りへ\
  おいでなさるれば、欄干橋虎屋藤衛門只今は剃髪致して、円斉となのりまする。\n\

よし完璧！

完璧に途切れることのない１文です。ありがとうございます。

改行コード、どこ行ってしまったん……？
ほら。あの青い長方形だよ。改行コードは半角スペースになったんだ……。

４．textContent は改行できない。 innerText を使おう！

textContent はテキストだけのプロパティ。HTMLタグや改行コードを含められないのです。

改行コードだろうがテンプレートリテラル内の改行だろうが改行できません（全て試して撃沈しました）。だって、テキストだけのプロパティだから！基礎がなっていないから、こんな簡単な罠に引っかかってしまう！これからもどんどんひっかかっていきます。

textContent は改行できない。じゃあ、もう一生外郎売は改行できないのかというと、勿論そんなことはありません。 innerText や、 HTMLタグを記述できる innerHTML を使えば改行可能です。

今回は改行さえできればよいので innerText を使ってみました。
改行のタイミングが分かりやすいように行頭に字下げもいれています。

テンプレートリテラルも改行コードもバッチリ

      headerSpaceElement.innerText = 
      // テンプレートリテラルで改行
      `　拙者親方と申すは、お立合の中に、御存じのお方もござりましょうが、
      お江戸を発って二十里上方、相州小田原一色町をお過ぎなされて、
      青物町を登りへおいでなさるれば、欄干橋虎屋藤衛門只今は剃髪致して、円斉となのりまする。
      
      `+
      // 改行コードで改行
     '　元朝より大晦日まで、お手に入れまする此の薬は、昔ちんの国の唐人、外郎という\
      人、わが朝へ来り、帝へ参内の折から、この薬を深く籠め置き、用ゆる時は一粒ず\
      つ、冠のすき間より取り出す。依ってその名を帝より、とうちんこうと賜わる。\n\
      　即ち文字には「頂き、透く、香い」とかいて「とうちんこう」と申す。\r\
      　只今はこの薬、殊の外世上に弘まり、方々に似看板を出し、イヤ、小田原の、灰俵の、\
      さん俵の、炭俵のと色々に申せども、平仮名をもって「ういろう」と記せしは親方\
      円斉ばかり。\r\n\
      　もしやお立合の内に、熱海か塔の沢へ湯治にお出でなさるるか、又は伊勢御参宮の\
      折からは、必ず門違いなされまするな。お登りならば右の方、お下りなれば左側、\
      八方が八つ棟、表が三つ棟玉堂造り、破風には菊に桐のとうの御紋を御赦免あって、\
      系図正しき薬でござる。\n\n\
      　イヤ最前より家名の自慢ばかり申しても、ご存じない方には、正身の胡椒の丸呑、\
      白川夜船、さらば一粒食べかけて、その気味合をお目にかけましょう。先ずこの薬を\
      かように一粒舌の上にのせまして、腹内へ納めますると、イヤどうも云えぬは、胃、\
      心、肺、肝がすこやかになりて、薫風咽より来り、口中微涼を生ずるが如し。魚鳥、\
      茸、麺類の食合せ、其の他、万病速効ある事神の如し。\r\r\

結果がこちら！

綺麗に改行できました。
１行空けたい時はおなじ改行コードを２回続けて入れます。　\n\n \r\r

これでいつでも kintone 一覧画面に短編小説を掲載できますね！

覚書

プロパティ

textContent ：テキストのみのプロパティなので改行やHTMLタグを入れられない。
innerText ：改行コードを入れられる。
innerHTML ：改行コードとHTMLタグを入れらる。ただしセキュリティ上の危険（ DOM based XSS ）があるので注意。

キーボードの入力方法

 // バックスラッシュ：半角で￥マーク
 /*エディタ内で文字列を改行できる。
 　画面上では改行されない。*/
 \
 
// バッククォート：半角でShiftキー+＠
 /*バッククォートで囲んだ文字列はテンプレートリテラルになる。
 　Enter改行だけで、エディタ上も画面上も改行される。*/
 `