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

目次

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

準備するもの

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

  • kintone 開発者ライセンス
  • cybozu.com の 推奨ブラウザ (External link)
  • 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;
  });
})();

STEP 3. kintone に適用する

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

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

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

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

STEP 4. 動作確認

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

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

まとめ

今回は簡単なサンプルで、kintone にカスタマイズファイルを適用する方法を学びました。
次は、 kintone JavaScript API を使ってみよう について学習しましょう。