kintoneを使うと必ず出会う「カスタマイズ」

今回はJavaScript（以下：JS）によるカスタマイズを書き込み始めるまでの準備部分をまとめました。

はじめに

cybozu社のチュートリアル

kintoneのカスタマイズにはチュートリアルが用意されています。
今回のまとめは「自分で書いてアプリに反映させる」ことを目標としていますので、より親切に順を追う場合はこちらも参考にしてください。

JSを書き込むための設定

カスタマイズをするには、基本的に用意したJSファイルをアプリに読み込んで利用します。
今回はcybozu社で提供されているJSEdit for kintoneというプラグインを利用します。

このプラグインは、本来読み込みを必要とするカスタマイズ用のファイルをプラグイン上で編集することを可能としてくれるプラグインです。

アプリに「JSEdit for kintone」プラグインを読み込む

※JSEdit for kintoneはcybozu社から提供されており、こちらからダウンロードできます。
JSEdit for kintoneの概要はこちらでご確認ください。

・kintoneへのプラグインの読み込みについて
kintoneシステム管理→プラグイン→読み込む　からzipファイルを読み込み

・アプリへのプラグイン追加について
アプリの設定→設定タブ→プラグイン→プラグインの追加　から追加してください

プラグインの設定から、PC用でJSファイルを作成する

※拡張子まで入力して作成してください

すると、kintone用の初期テンプレが挿入済みのファイルが作成されます。

以上で、JSを書き込む為の準備が出来ました。

JSが反映されるか確認

ここまでの設定でJSが反映されるか確認しましょう。

作成したJSファイルを以下のように編集します。


(function() {
  'use strict';
  kintone.events.on('app.record.index.show', function(event) {
    
    alert("一覧画面が表示されています。");
    
  });
})();

内容は、レコード一覧画面が表示されたときにポップアップが表示される。という処理です。

保存して一覧画面を表示してみます。

一覧に切り替わった際にポップアップが表示されました。

ちなみに

JSの書き方については深く触れませんが、
「いつ」「どんな処理をする」というような記述しています。

フィールドコード

カスタマイズではフィールドコードを利用して、各項目（フィールド）に反映させたり、値を取得したりします。

フィールドコードは分かりやすい名前にするのが良いでしょう。

フィールド名とフィールドコードを同じ名前にするのが一般的のようです。

コピペの注意点

今回の設定で書き込む準備ができました。

探せば、無償提供されているkintone用のコードもあるでしょう。
これらをコピペすれば同様の動作が望めます。

しかし、JSの知識が少ない・分からない場合や、コード自体に何が書かれているのか分からない場合のリスクは事前に知っておきましょう。
プログラムには悪意のあるものがないとは言い切れません。コピペをすると、悪意のある部分も利用していしまい、知らないうちに物理的、情報的な被害があるということもゼロではありませんのでコードの内容や提供元には十分注意してください。

まとめ

JSEdit for kintoneというプラグインをアプリに読み込むことで
アプリ上だけでJSカスタマイズの編集が可能になります。

JSカスタマイズを書き込んだり、コピペするにあたり、
いつ、どんな処理をするかの記述に注意してください。

※コピペの際は、内容、提供元に注意

弊社ではカスタマイズを伴った構築も含め、業務改善のお手伝いをしております。お気軽にご相談ください。