はじめようJavaScript第11回 kintone JavaScriptカスタマイズをする – cybozu developer network

（著者：kintone エバンジェリスト村濱一樹）

ここまでで基本的なJavaScriptの機能は学習してきました。ここからは徐々に実際にkintoneを使っていきたいと思います。
kintoneをJavaScriptでカスタマイズできることはご存知だと思いますが、実際にどんなことができるか、おさらいしながらサンプルコードを動かすところまでやりましょう。

kintone JavaScript カスタマイズとは

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

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

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

kintoneとJavaScriptカスタマイズのイメージ

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

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

kintoneを閲覧するためのブラウザ
- 普段お使いのブラウザで問題ありませんが、当シリーズではChromeで統一します。
kintoneのアカウント
- ぜひ無料の開発者アカウントをご利用ください。(※メンバー登録してからサインインが必要です。)
  https://developer.cybozu.io/hc/ja/articles/200720464
JavaScriptを書くためのエディタ
- 当シリーズではkintone上でJavaScriptを編集できるプラグイン「JSEdit」を利用します。（詳細は後述）
- そのほか、Sublime Text や Atom, 秀丸エディタを使っても問題ありません。ただし、その場合は編集の際kintoneにJavaScriptファイルをアップロードする必要があります。

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

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

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