kintone JavaScript API の「はじめの一歩」を踏み出そう

目次

はじめに

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

カスタマイズの内容

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

必要なもの

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

kintone

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

Web ブラウザー

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

テキストエディタ

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

カスタマイズする

アプリを作成する

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

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

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

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

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

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

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

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 に適用する

いよいよ作成したカスタマイズを 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 ドキュメントで深めた知識を前提とし、実務につながる気付きやノウハウを得られる応用的な内容となっています。
information

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