chatGPT がプログラムコードも生成してくれるようなので、kintone のコードを聞いてみます。
概要
ChatGPT がまだ成長段階ですが、現時点でどの程度できるか試してみます。
重要な注意事項として、下記があります。
- ChatGPT に問合せた内容は、OpenAI側で無制限かつ無償で利用されることを許容
詳しくは、ChatGPTによるプログラム生成の可能性と限界（前編）
kintone について
まず、kintone について聞いてみます。よくできた説明が返ってきました。
Q. クラウドサービスの kintone について教えてください
kintoneは、クラウド上で提供されるビジネスアプリケーションの開発・運用プラットフォームです。kintoneは、ビジネスユーザーが直感的なUIでデータを入力、編集、検索することができます。また、kintoneにはワークフロー機能があり、申請、承認などのプロセスを自動化することができます。
kintoneは、特に中小企業や部署単位の業務改善に適しています。既存のシステムとの連携や、外部システムとのAPI連携も可能で、柔軟なカスタマイズができるため、様々な業務に対応することができます。
kintoneは、プラットフォームとして提供されるため、開発スキルがなくても、ビジネスユーザーが自分たちの業務に合わせたアプリケーションを簡単に作成することができます。また、kintoneには多数のテンプレートが用意されているため、ビジネスニーズに合わせて素早く導入することができます。
kintoneの特徴として、低コストで利用できる点が挙げられます。導入費用、ランニングコストが低いため、中小企業や部署単位の業務改善に向いています。また、kintoneはセキュリティにも配慮されたサービスとなっており、信頼性の高いシステムとしても知られています。
ダイアログ表示
いよいよコードを生成してみます。
Q. kintone の JavaScript カスタマイズで、画面表示時にダイアログを表示するコードを教えてください
kintoneのJavaScriptカスタマイズで、画面表示時にダイアログを表示するには、以下のようなコードを記述することができます。
(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を非表示にすることができます。
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を非表示にすることができます。
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 レコードコメントをレコード一覧に表示してみよう！のことを問合せてみます。
Q. kintone でレコード一覧ページ上で、特定のレコード番号上をホバーするとツールチップに最新のコメントの内容が見られるようにコードを教えてください
以下のようなコードを使用することで、kintone のレコード一覧ページで特定のレコード番号上をホバーすると、最新のコメントの内容がツールチップに表示されるようにすることができます。
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 カスタマイズのやり方も変わっていきそうです。
今後の成長が楽しみです。