カスタマイズファイルの適用方法

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;
  });
})();