カスタマイズファイルを適用してみよう

固定リンクがコピーされました

更新日：2023年06月20日

kintone APIの詳細を学ぶ前に、まずはカスタマイズファイルを適用する方法を学んでみましょう。
このページの内容に沿って実際に手を動かすことで、アプリの作成からkintoneカスタマイズを適用するまでの手順を学ぶことができます。

準備するもの

固定リンクがコピーされました

kintoneのカスタマイズを行うには、次の環境が必要になります。

kintone開発者ライセンス
cybozu.comの推奨ブラウザ
Visual Studio Code、Sublime Text、Vimなど、お好みのテキストエディタ

kintone開発者ライセンス未取得の方は、 kintone開発者ライセンス（開発環境）から開発者ライセンスを申し込みましょう。

STEP 1. アプリを作成する

固定リンクがコピーされました

kintoneのポータルから「＋」ボタンもしくは「アプリを作成」をクリックして、アプリを作成します。

「はじめから作成」をクリックして、新しくアプリを作成します。

アプリのフォームを設定する画面が表示されるので、「文字列（1行）」フィールドを配置します。

配置したフィールドの右上にある歯車のボタンをクリックして「設定」に進みます。

設定画面でフィールドコードに「Hello」と入力し、設定内容を保存します。
フィールドコードは、のちほど記述するカスタマイズファイル内で使用します。

ここまで作業ができたら、アプリを公開します。

アプリのレコード一覧画面が表示されれば、アプリの作成は完了です。

STEP 2. JavaScriptでコードを記述する

固定リンクがコピーされました

アプリをカスタマイズするためのコードをJavaScriptで記述します。
次のサンプルコードは、レコード追加時、フィールドの初期値に「こんにちは、kintone!」を設定するサンプルコードです。
コードの書き方については次回以降説明しますので、今はおまじないだと思ってコピーすれば大丈夫です。
コードをエディタにコピーし、文字コードを「UTF-8（BOMなし）」に設定してファイルを保存してください。
このとき、拡張子は「.js」にする必要がありますが、ファイル名は何でもよいです。
この記事では「sample.js」にしました。

1
2
3
4
5
6
7
8


(() => {
  'use strict';
  kintone.events.on('app.record.create.show', (event) => {
    const record = event.record;
    record['Hello'].value = 'こんにちは、kintone!';
    return event;
  });
})();