ChatGPT で kintone のコードについて聞いてみた

chatGPT がプログラムコードも生成してくれるようなので、kintone のコードを聞いてみます。

# 概要

ChatGPT がまだ成長段階ですが、現時点でどの程度できるか試してみます。
重要な注意事項として、下記があります。

- ChatGPT に問合せた内容は、OpenAI側で無制限かつ無償で利用されることを許容

詳しくは、[ChatGPTによるプログラム生成の可能性と限界（前編）](https://qiita.com/autotaker1984/items/5b5ac8c01d11fbbbc4a7)


# kintone について

まず、kintone について聞いてみます。よくできた説明が返ってきました。
Q. クラウドサービスの kintone について教えてください

>kintoneは、クラウド上で提供されるビジネスアプリケーションの開発・運用プラットフォームです。kintoneは、ビジネスユーザーが直感的なUIでデータを入力、編集、検索することができます。また、kintoneにはワークフロー機能があり、申請、承認などのプロセスを自動化することができます。

>kintoneは、特に中小企業や部署単位の業務改善に適しています。既存のシステムとの連携や、外部システムとのAPI連携も可能で、柔軟なカスタマイズができるため、様々な業務に対応することができます。

>kintoneは、プラットフォームとして提供されるため、開発スキルがなくても、ビジネスユーザーが自分たちの業務に合わせたアプリケーションを簡単に作成することができます。また、kintoneには多数のテンプレートが用意されているため、ビジネスニーズに合わせて素早く導入することができます。

>kintoneの特徴として、低コストで利用できる点が挙げられます。導入費用、ランニングコストが低いため、中小企業や部署単位の業務改善に向いています。また、kintoneはセキュリティにも配慮されたサービスとなっており、信頼性の高いシステムとしても知られています。

# ダイアログ表示

いよいよコードを生成してみます。
Q. kintone の JavaScript カスタマイズで、画面表示時にダイアログを表示するコードを教えてください

>kintoneのJavaScriptカスタマイズで、画面表示時にダイアログを表示するには、以下のようなコードを記述することができます。

~~~.js
(function() {
  'use strict';

  kintone.events.on('app.record.index.show', function(event) {
    var message = '画面表示時に表示されるダイアログです。';
    swal(message);
  });
})();
~~~

>このコードでは、kintoneの app.record.index.show イベントに対して、ダイアログを表示する関数を登録しています。ダイアログの表示には、 swal というライブラリを使用しています。

>swal メソッドの引数には、表示するメッセージを指定しています。この例では、「画面表示時に表示されるダイアログです。」というメッセージがダイアログに表示されます。

>このように、kintoneのJavaScriptカスタマイズでは、イベントに対して関数を登録することで、様々な処理を実行することができます。ダイアログの表示はその1つの例です。


コードと処理毎に説明が行われています。

# 項目の非表示

Q. kintone の詳細画面で、項目Aの値が"X"の時、項目Bを非表示にする JavaScript コードを教えてください。

>以下のような JavaScript コードを使用することで、kintone の詳細画面で項目Aの値が"X"の場合に項目Bを非表示にすることができます。

~~~.js
kintone.events.on('app.record.detail.show', function(event) {
  var record = event.record;

  if (record['項目A'].value === 'X') {
    kintone.app.record.setFieldShown('項目B', false);
  }
});
~~~

>上記のコードでは、kintone の app.record.detail.show イベントが発生した際に、現在のレコードの 項目A の値が "X" である場合に、項目B を非表示にします。

>kintone.app.record.setFieldShown メソッドを使用することで、フィールドの表示・非表示を切り替えることができます。第一引数に非表示にするフィールドコード、第二引数には true/false で表示・非表示を指定します。


# 項目の非表示その２
「アロー関数を使って」という条件を追加すると回答も変わってきます。
Q. kintone の詳細画面で、項目Aの値が"X"の時、項目Bを非表示にする JavaScript コードを教えてください。アロー関数を使って。

>以下のように、アロー関数を使用したコードで項目Aの値が "X" の場合に項目Bを非表示にすることができます。

~~~.js
kintone.events.on('app.record.detail.show', event => {
  const record = event.record;
  
  if (record['項目A'].value === 'X') {
    kintone.app.record.setFieldShown('項目B', false);
  }
});
~~~

>上記のコードでは、kintone.events.on メソッドで app.record.detail.show イベントを指定し、アロー関数を使用してイベント処理を記述しています。詳細画面が表示された際に、現在のレコードの 項目A の値が "X" である場合に、項目B を非表示にします。

>const キーワードを使用して定数 record を宣言し、現在のレコードを取得しています。また、kintone.app.record.setFieldShown メソッドを使用して、フィールドの表示・非表示を切り替えています。第一引数に非表示にするフィールドコード、第二引数には true/false で表示・非表示を指定します。

# レコードコメントをレコード一覧に表示

kintone Tips [レコードコメントをレコード一覧に表示してみよう！](https://cybozudev.zendesk.com/hc/ja/articles/4403197787801-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%E3%82%92%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E4%B8%80%E8%A6%A7%E3%81%AB%E8%A1%A8%E7%A4%BA%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86-)のことを問合せてみます。

Q. kintone でレコード一覧ページ上で、特定のレコード番号上をホバーするとツールチップに最新のコメントの内容が見られるようにコードを教えてください

>以下のようなコードを使用することで、kintone のレコード一覧ページで特定のレコード番号上をホバーすると、最新のコメントの内容がツールチップに表示されるようにすることができます。

~~~.js
kintone.events.on('app.record.index.show', function(event) {
  var records = event.records;
  var app = event.app;

  for (var i = 0; i < records.length; i++) {
    var record = records[i];
    var recordId = record.$id.value;
    var comment = '';
    
    // 最新のコメントを取得する
    kintone.api(kintone.api.url('/k/v1/record/comments', true), 'GET', {record: recordId}, function(resp) {
      if (resp.comments.length > 0) {
        comment = resp.comments[0].text;
      }
    });

    // ツールチップを設定する
    $(`#record-${recordId} .gaia-argoui-tooltip > .argoui-tooltip__text`).attr('data-tooltip', comment);
  }
});
~~~

>上記のコードでは、kintone の app.record.index.show イベントが発生した際に、各レコードの最新のコメントを取得し、ツールチップに表示するようにします。最新のコメントは、kintone.api() メソッドを使用して取得します。

>$(selector) を使用して、ツールチップを表示する要素を取得し、data-tooltip 属性にコメントを設定することで、ツールチップを表示させます。selector はレコード番号を含む ID であり、各レコードのホバーイベントで発火する onmouseover イベントによって設定されます。


なんとなく、よさそーなコードですが、いくつか間違いがあります。

- app 番号
    - event.appId
- セレクタ指定


# 感想

現時点でかなり、それらしいコードを生成してくれますが、いろいろ間違いが混ざっています。
cybozu developer network のチュートリアルや Tips を学習させると、かなり使えるようになると思いますが、著作権等の問題があります。
サイボウズ社が AI を学習させていけば、 JavaScript カスタマイズのやり方も変わっていきそうです。
今後の成長が楽しみです。