第 11 回 kintone JavaScript カスタマイズをする
JavaScript 初心者がカスタマイズに必須の知識をより学べるよう、チュートリアルの内容を充実させてリニューアルしました。
リニューアル後のチュートリアルは次のページを参照してください。
はじめよう JavaScript
はじめに
ここまでで基本的な JavaScript の機能は学習してきました。
ここからは徐々に実際に kintone を使っていきたいと思います。
kintone を JavaScript でカスタマイズできることはご存じだと思いますが、実際にどんなことができるか、おさらいしながらサンプルコードを動かすところまでやりましょう。
kintone JavaScript カスタマイズとは
kintone は標準機能でさまざまなことができますが、JavaScript カスタマイズをすることで、標準機能だけでは実現できない以下のようなことも実現できます。
- レコード一覧画面にボタンを設置し、合計値を出力する。
- 条件によって文字や背景の色やサイズを変更する。
- 計算フィールドでは実現できない複雑な計算をする。
JavaScript が実行できるようになるということは、ボタンを設置したりそれを押したときの振る舞いを決めたり、データの計算処理をしたりなど、ブラウザー上でできることはほとんどできるようになるということです。
さらに、kintone API と組み合わせることで、JavaScript を使って任意のレコードを取得したり、更新したり削除したりということもできます。
kintone と JavaScript カスタマイズのイメージは次のとおりです。
kintone JavaScript カスタマイズで必要なもの
ここからは kintone JavaScript カスタマイズを挑戦するために必要なものを見てみましょう。
- kintone を閲覧するためのブラウザー
- 普段お使いのブラウザーで問題ありませんが、当シリーズでは Chrome で統一します。
- kintone のアカウント
- kintone 開発者ライセンス(開発環境) から開発者ライセンスをお申し込みください。
- JavaScript を書くためのエディタ
- 当シリーズでは kintone 上で JavaScript を編集できるプラグイン「JSEdit」を利用します。(詳細は後述)
- そのほか、
Sublime Text
や
秀丸エディタ
、
Visual Studio Code
を使っても問題ありません。
ただし、その場合は編集の際 kintone に JavaScript ファイルをアップロードする必要があります。
kintone JavaScript カスタマイズをする方法
JavaScript カスタマイズをするための方法を 2 つ紹介します。
初学者の方はまずは一番のやり方で大丈夫です。
- JSEdit for kintone を使う。
JavaScript を kintone 上で編集でき、kintone への JavaScript ファイルのアップロードも自動で行ってくれる優れものです。
また、当シリーズでは JSEdit を利用します。使い方とプラグインインストール方法は次の記事を参考にしてください。
kintone 上でカスタム JS や CSS を編集できるプラグイン「JSEdit for kintone」を使ってみよう - 一般的なテキストエディタで JavaScript ファイルを編集し、kintone にアップロードする。
お好みのテキストエディタを使う場合は、手動で kintone に JavaScript ファイルをアップロードする必要があります。
第 1 回 kintone JavaScript API のイジりかた を参考にしてください。
サンプルコードを試す
サンプルコードを作成して kintone 上で動作することを確認しましょう。
JSEdit の詳細については先述の
kintone 上でカスタム JS や CSS を編集できるプラグイン「JSEdit for kintone」を使ってみよう を確認ください。
- 新しいアプリを作成する。(フィールドは設置なしで大丈夫です)
- [設定]→[プラグイン]→[プラグインの追加]→ JSEdit for kintone を追加する。
- 新規作成ボタンをクリックし、ファイル名を入力する。
- コードを書き、保存する。(初期値に表示されるコードは消していただいても大丈夫です)
- レコード一覧画面に戻り、動作を確認する。
右クリックメニューから「検証」で Developer tools を開きコンソールの表示を確認する。
まとめ
無事に動作しましたでしょうか。
次回は kintone のデータを JavaScript カスタマイズで扱う方法について学びます。