# KINTONEのカスタマイズビューの作成について

**URL:** <https://community.cybozu.dev/t/topic/1227>\
**Category:** kintone 開発相談\
**Created:** [2022 年 12 月 12 日午前 1:50 UTC](https://community.cybozu.dev/t/topic/1227 "2022-12-12T01:50:03Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account2714](https://avatars.discourse-cdn.com/v4/letter/l/ecb155/32.png) [@Legacy\_Account2714](https://community.cybozu.dev/u/Legacy_Account2714)\
**Post date:** [2022 年 12 月 12 日午前 1:50 UTC](https://community.cybozu.dev/t/topic/1227/1 "2022-12-12T01:50:03Z")

</div>

**背景・実現したいこと**

初めまして。

こちらの記事（[https://developer.cybozu.io/hc/ja/articles/202905604-%E7%AC%AC7%E5%9B%9E-%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%83%93%E3%83%A5%E3%83%BC%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86）を参考にカスタマイズビューを作成しようと考え、以下のコードを記述いたしました。](https://developer.cybozu.io/hc/ja/articles/202905604-%E7%AC%AC7%E5%9B%9E-%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%83%93%E3%83%A5%E3%83%BC%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86%EF%BC%89%E3%82%92%E5%8F%82%E8%80%83%E3%81%AB%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%83%93%E3%83%A5%E3%83%BC%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%82%88%E3%81%86%E3%81%A8%E8%80%83%E3%81%88%E3%80%81%E4%BB%A5%E4%B8%8B%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E8%A8%98%E8%BF%B0%E3%81%84%E3%81%9F%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82)

しかし、以下の画像のように一番上の項目を表示されるのですが、中身のデータは表示されない状態です。

ソースコード（本文下部の「利用したソースコード」参照）も「フィールドコード」を変更したくらいでですが、何が原因か調べても全く分かりません。

何卒ご助力のほどよろしくお願いいたします。

**利用したソースコード**

&nbsp;

(function() {  
&nbsp; &nbsp; ‘use strict’;  
&nbsp; &nbsp; /\* global tippy \*/  
&nbsp; &nbsp; kintone.events.on([‘app.record.index.show’], function(event) {  
&nbsp;&nbsp;  
&nbsp; &nbsp;if (event.viewId === 6465098) { // 一覧名判断  
&nbsp; &nbsp; &nbsp; window.alert(‘テスト’);  
&nbsp; &nbsp; &nbsp; return event;  
&nbsp; &nbsp;}  
&nbsp;  
&nbsp; &nbsp; &nbsp;const records = event.records;  
&nbsp;  
&nbsp; const recUrl = location.protocol + ‘//’ + location.hostname + ‘/k/204’ + ‘/show#record=’;  
&nbsp; &nbsp; &nbsp; const myRecordSpace = document.getElementById(‘my-tbody’);  
&nbsp; &nbsp; &nbsp; myRecordSpace.innerText = ‘’;  
&nbsp;  
&nbsp; for (let i = 0; i \< records.length; i++) {  
&nbsp; &nbsp; &nbsp; const record = records[i];  
&nbsp; &nbsp; &nbsp; const row = myRecordSpace.insertRow(myRecordSpace.rows.length);  
&nbsp; &nbsp; &nbsp; const cell1 = row.insertCell(0);  
&nbsp; &nbsp; &nbsp; const cell2 = row.insertCell(1);  
&nbsp; &nbsp; &nbsp; const cell3 = row.insertCell(2);

&nbsp; &nbsp; &nbsp; const tmpA = document.createElement(‘a’);  
&nbsp; &nbsp; &nbsp; tmpA.href = recUrl + record.日付.value;  
&nbsp; &nbsp; &nbsp; tmpA.innerText = record.日付.value;  
&nbsp; &nbsp; &nbsp; cell1.appendChild(tmpA);

&nbsp; &nbsp; &nbsp; cell2.innerText = record.buy1.value;  
&nbsp; &nbsp; &nbsp;&nbsp;  
&nbsp; &nbsp; &nbsp; const createdAt = record.理由.value;  
cell3.innerText = createdAt.toLocaleString();

&nbsp; }  
&nbsp; &nbsp;&nbsp;  
&nbsp; &nbsp;  
&nbsp;});

---

<div class="post-metadata">

**Author:** ![Legacy\_Account871](https://avatars.discourse-cdn.com/v4/letter/l/50afbb/32.png) [@Legacy\_Account871](https://community.cybozu.dev/u/Legacy_Account871)\
**Post date:** [2022 年 12 月 12 日午前 6:27 UTC](https://community.cybozu.dev/t/topic/1227/2 "2022-12-12T06:27:45Z")

</div>

完全に同じ状態を再現できていないのですがおそらく近しい状態にしてみると

```
Uncaught SyntaxError: Unexpected end of input 

```

というエラーがコンソールに表示されていました。 &nbsp;

カスタマイズしたファイルの終わり部分の

```
});

```

についていましたので、括弧の対応が合っているか確認してみてください。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2714](https://avatars.discourse-cdn.com/v4/letter/l/ecb155/32.png) [@Legacy\_Account2714](https://community.cybozu.dev/u/Legacy_Account2714)\
**Post date:** [2022 年 12 月 12 日午前 7:00 UTC](https://community.cybozu.dev/t/topic/1227/3 "2022-12-12T07:00:07Z")

</div>

ありがとうございます。

確かに最後の括弧がおかしかったので、「})});」に正しく直しました。

ただ、データの中身は表示されないままです…

---

<div class="post-metadata">

**Author:** ![Legacy\_Account871](https://avatars.discourse-cdn.com/v4/letter/l/50afbb/32.png) [@Legacy\_Account871](https://community.cybozu.dev/u/Legacy_Account871)\
**Post date:** [2022 年 12 月 12 日午前 7:31 UTC](https://community.cybozu.dev/t/topic/1227/4 "2022-12-12T07:31:02Z")

</div>

```
   if (event.viewId === 6465098) { // 一覧名判断
      window.alert('テスト');
      return event;
   }

```

意図したものですか？もし、event.viewId === 6465098だったらテストと表示して、その後を実行しません。

もし、それでもだめならブレイクポイントを入れながら試しましょう。

動かない？そんな時はデバッグをしてみよう！入門編 – cybozu developer network  
[https://developer.cybozu.io/hc/ja/articles/207613916](https://developer.cybozu.io/hc/ja/articles/207613916)

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2714](https://avatars.discourse-cdn.com/v4/letter/l/ecb155/32.png) [@Legacy\_Account2714](https://community.cybozu.dev/u/Legacy_Account2714)\
**Post date:** [2022 年 12 月 13 日午前 12:59 UTC](https://community.cybozu.dev/t/topic/1227/5 "2022-12-13T00:59:14Z")

</div>

ありがとうございます。

if (event.viewId === 6465098)の部分は、どんな機能があるの知りたいので意図して作成しました。

以下のように直し、デバッグも行ってみたのですが未だ分からずじまいです。。。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

(function() {  
&nbsp; &nbsp; ‘use strict’;  
&nbsp; &nbsp; /\* global tippy \*/  
&nbsp; &nbsp; kintone.events.on([‘app.record.index.show’], function(event) {  
&nbsp;&nbsp;  
&nbsp; &nbsp;if (event.viewId === 6465098) { // 一覧名判断のため意図しました  
&nbsp; &nbsp; &nbsp; window.alert(‘テスト’);  
&nbsp; &nbsp; &nbsp;  
&nbsp;  
&nbsp; &nbsp; &nbsp;const records = event.records;  
&nbsp;  
&nbsp; const recUrl = location.protocol + ‘//’ + location.hostname + ‘/k/204’ + ‘/show#record=’;  
&nbsp; &nbsp; &nbsp; const myRecordSpace = document.getElementById(‘my-tbody’);  
&nbsp; &nbsp; &nbsp; myRecordSpace.innerText = ‘’;  
&nbsp;  
&nbsp; for (let i = 0; i \< records.length; i++) {  
&nbsp; &nbsp; &nbsp; const record = records[i];  
&nbsp; &nbsp; &nbsp; const row = myRecordSpace.insertRow(myRecordSpace.rows.length);  
&nbsp; &nbsp; &nbsp; const cell1 = row.insertCell(0);  
&nbsp; &nbsp; &nbsp; const cell2 = row.insertCell(1);  
&nbsp; &nbsp; &nbsp; const cell3 = row.insertCell(2);

&nbsp; &nbsp; &nbsp; const tmpA = document.createElement(‘a’);  
&nbsp; &nbsp; &nbsp; tmpA.href = recUrl + record.日付.value;  
&nbsp; &nbsp; &nbsp; tmpA.innerText = record.日付.value;  
&nbsp; &nbsp; &nbsp; cell1.appendChild(tmpA);

&nbsp; &nbsp; &nbsp; cell2.innerText = record.buy1.value;  
&nbsp; &nbsp; &nbsp;&nbsp;  
&nbsp; &nbsp; &nbsp; const createdAt = record.理由.value;  
cell3.innerText = createdAt.toLocaleString();

&nbsp; }  
&nbsp; &nbsp; &nbsp;  
&nbsp; &nbsp;}  
&nbsp; &nbsp; })});  
&nbsp; &nbsp;＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

---

<div class="post-metadata">

**Author:** ![Legacy\_Account871](https://avatars.discourse-cdn.com/v4/letter/l/50afbb/32.png) [@Legacy\_Account871](https://community.cybozu.dev/u/Legacy_Account871)\
**Post date:** [2022 年 12 月 13 日午前 1:56 UTC](https://community.cybozu.dev/t/topic/1227/6 "2022-12-13T01:56:12Z")

</div>

問題を切り分けましょう。

エラーはどんなエラーがでますか？どの部分で意図しない動作になっていますか？

よくわからないことにわからないことを重ねても難しいです。

```
(() => {
  'use strict';

  // レコード一覧画面
  kintone.events.on('app.record.index.show', (event) => {
    // ここに処理を記述
  });
})();

```

と同じ形、括弧の対応、数などは一致していますでしょうか？

いったん、カスタマイズビューのことは忘れて、  
console.log()でレコードデータが出力できるかどうか確認しましょう。一番確実なところまでもどって、わかる部分を積み重ねておかしいところを特定します。

動かない？そんな時はデバッグをしてみよう！入門編 – cybozu developer network  
[https://developer.cybozu.io/hc/ja/articles/207613916](https://community.cybozu.dev/hc/ja/articles/207613916)

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2714](https://avatars.discourse-cdn.com/v4/letter/l/ecb155/32.png) [@Legacy\_Account2714](https://community.cybozu.dev/u/Legacy_Account2714)\
**Post date:** [2022 年 12 月 15 日午前 2:25 UTC](https://community.cybozu.dev/t/topic/1227/7 "2022-12-15T02:25:55Z")

</div>

いくらコードを見直してもおかしな箇所が見つからないので、上記のコードより下に記述してある別のカスタマイズのコードを確認したところ、「）」が一つ余分に記述してありました。

それを削除したところ、カスタマイズビューがちゃんと表示されました！

全く関係ないコード同士でも、少しの間違いが他のシステムに影響を及ぼすことがあるんですね・・・・。勉強になりました。

お手数をおかけしました。本当ありがとうございます。

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2023 年 9 月 22 日午前 6:46 UTC](https://community.cybozu.dev/t/topic/1227/8 "2023-09-22T06:46:29Z")

</div>

クローズされました: 2023 年 9 月 22 日午前 6:46 UTC

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。