第 11 回 kintone JavaScript カスタマイズをする

著者名: 村濱 一樹 (External link) (kintone エバンジェリスト)

目次

information

JavaScript 初心者がカスタマイズに必須の知識をより学べるよう、チュートリアルの内容を充実させてリニューアルしました。
リニューアル後のチュートリアルは次のページを参照してください。
はじめよう JavaScript

はじめに

ここまでで基本的な JavaScript の機能は学習してきました。
ここからは徐々に実際に kintone を使っていきたいと思います。

kintone を JavaScript でカスタマイズできることはご存じだと思いますが、実際にどんなことができるか、おさらいしながらサンプルコードを動かすところまでやりましょう。

kintone JavaScript カスタマイズとは

kintone は標準機能でさまざまなことができますが、JavaScript カスタマイズをすることで、標準機能だけでは実現できない以下のようなことも実現できます。

  • レコード一覧画面にボタンを設置し、合計値を出力する。
  • 条件によって文字や背景の色やサイズを変更する。
  • 計算フィールドでは実現できない複雑な計算をする。

JavaScript が実行できるようになるということは、ボタンを設置したりそれを押したときの振る舞いを決めたり、データの計算処理をしたりなど、ブラウザー上でできることはほとんどできるようになるということです。
さらに、kintone API と組み合わせることで、JavaScript を使って任意のレコードを取得したり、更新したり削除したりということもできます。

kintone と JavaScript カスタマイズのイメージは次のとおりです。

kintone JavaScript カスタマイズで必要なもの

ここからは kintone JavaScript カスタマイズを挑戦するために必要なものを見てみましょう。

  • kintone を閲覧するためのブラウザー
    • 普段お使いのブラウザーで問題ありませんが、当シリーズでは Chrome で統一します。
  • kintone のアカウント
  • JavaScript を書くためのエディタ
    • 当シリーズでは kintone 上で JavaScript を編集できるプラグイン「JSEdit」を利用します。(詳細は後述)
    • そのほか、 Sublime Text (External link) 秀丸エディタ (External link) Visual Studio Code (External link) を使っても問題ありません。
      ただし、その場合は編集の際 kintone に JavaScript ファイルをアップロードする必要があります。

kintone JavaScript カスタマイズをする方法

JavaScript カスタマイズをするための方法を 2 つ紹介します。
初学者の方はまずは一番のやり方で大丈夫です。

  1. JSEdit for kintone を使う。
    JavaScript を kintone 上で編集でき、kintone への JavaScript ファイルのアップロードも自動で行ってくれる優れものです。
    また、当シリーズでは JSEdit を利用します。使い方とプラグインインストール方法は次の記事を参考にしてください。
    kintone 上でカスタム JS や CSS を編集できるプラグイン「JSEdit for kintone」を使ってみよう
  2. 一般的なテキストエディタで JavaScript ファイルを編集し、kintone にアップロードする。
    お好みのテキストエディタを使う場合は、手動で kintone に JavaScript ファイルをアップロードする必要があります。
    第 1 回 kintone JavaScript API のイジりかた を参考にしてください。

サンプルコードを試す

サンプルコードを作成して kintone 上で動作することを確認しましょう。
JSEdit の詳細については先述の kintone 上でカスタム JS や CSS を編集できるプラグイン「JSEdit for kintone」を使ってみよう を確認ください。

  1. 新しいアプリを作成する。(フィールドは設置なしで大丈夫です)

  2. [設定]→[プラグイン]→[プラグインの追加]→ JSEdit for kintone を追加する。

  3. 新規作成ボタンをクリックし、ファイル名を入力する。

  4. コードを書き、保存する。(初期値に表示されるコードは消していただいても大丈夫です)

  5. レコード一覧画面に戻り、動作を確認する。
    右クリックメニューから「検証」で Developer tools を開きコンソールの表示を確認する。

まとめ

無事に動作しましたでしょうか。
次回は kintone のデータを JavaScript カスタマイズで扱う方法について学びます。