この記事では、これからkintoneのカスタマイズを始める方に、kintone JavaScript APIの「はじめの一歩」をお届けします。
kintone開発者ライセンスを取得したら、まずは本記事の内容にチャレンジしてみましょう。
本記事にしたがって実際に手を動かすことで、アプリの作成からkintoneカスタマイズを適用するまでの手順を学ぶことができます。

kintone JavaScript APIを利用して、アプリのレコード作成時、フィールドに「こんにちは、kintone!」を初期値として設定するカスタマイズを行います。

本記事では、次の環境が必要になります。

kintone開発者ライセンスを取得済みの方は、すでにkintoneを利用可能です。
開発者ライセンスを未取得の方は、 kintone開発者ライセンス（開発環境） のページから開発者ライセンスを申し込みましょう。

cybozu.comの 推奨ブラウザ を使用します。

Visual Studio Code、Sublime Text、Vimなど、お好みのテキストエディタを用意します。

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

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

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

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

設定画面でフィールドコードに「hello」と入力し、設定内容を保存します。
フィールドコードは、のちほど記述するJavaScript内で使用します。

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

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

アプリを作成できたら、次はアプリをカスタマイズするためのコードをJavaScriptで記述しましょう。
サンプルコードを用意したので、次のコードをエディタにコピーし、文字コードを「UTF-8（BOMなし）」に設定してファイルを保存してください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

/*
 * hello kintone program
 * Copyright (c) 2021 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
*/
(function() {
  'use strict';
  kintone.events.on('app.record.create.show', (event) => {
    const record = event.record;
    record.hello.value = 'こんにちは、kintone!';
    return event;
  });
})();

いよいよ作成したカスタマイズをkintoneに適用していきます。
歯車ボタンをクリックしてアプリの設定画面を開きましょう。

「設定」タブから「JavaScript / CSSでカスタマイズ」へ進みます。

今回はPC用のカスタマイズですので、「PC用のJavaScriptファイル」に先ほど保存したファイルをアップロードします。
アップロードが完了したら「保存」をクリックしましょう。

「アプリを更新」からアプリの設定を保存すれば、カスタマイズの適用は完了です！

アプリのレコード一覧画面から「＋」ボタンをクリックし、レコード追加画面を表示してみます。

「こんにちは、kintone!」がフィールドに初期値として入力されました！

kintone JavaScript APIを利用すれば、kintoneの見た目を変更したり、他のシステムと連携したりできます。
本記事の内容を終えたら、次はcybozu developer networkのコンテンツでkintoneカスタマイズの知識をさらに深めましょう！

• チュートリアル

  • 豊富なサンプルをもとにJavaScriptの使い方からkintone APIによるカスタマイズまで、幅広い知識を身につけることができます。

• kintone APIドキュメント

  • kintone APIの仕様を確認できます。

• 開発Tips

  • kintone APIによるさまざまなカスタマイズ事例を紹介したTipsです。
  • TipsはチュートリアルやAPIドキュメントで深めた知識を前提とし、実務につながる気付きやノウハウを得られる応用的な内容となっています。

この記事は、2021年3月版kintoneで動作を確認しています。