第 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カスタマイズで扱う方法について学びます。