kintoneでJavaScriptを活用し、さらなる業務改善へ！

サイボウズ社のkintoneはJavaScript言語を利用して、プリセット（標準機能）だけでは難しい機能や複雑な画面表示なども、カスタマイズで実現できます。カスタマイズでできることを理解していないと、せっかくの便利な機能を無駄にしてしまっているかもしれません。

そこで今回は、kintoneのカスタマイズ全般について解説します。kintoneで始めるJavaScript入門、プラグイン導入によるカスタマイズ方法などを紹介します。JavaScriptをまったく触ったこともない方も、ぜひお役立てください。

関連記事をご用意しております。
▼kintoneを自社で開発するメリット・デメリットについて解説
▼kintoneルックアップを自動取得！ JavaScriptをカスタマイズしよう

kintoneは使える機能が多い業務改善プラットフォームです。kintoneの機能拡張を使用したり、標準機能をさらに使いやすくカスタマイズしたりすれば、活用できる範囲が広がります。

例えば、kintoneはJavaScriptプログラムを作成することでカスタマイズでき、ブラウザ上で実現可能なことのほとんどが実装可能となります。フォームの設置やイベント（ウェブページ上で発生するあらゆるアクションの総称）の処理など、複雑なこともカスタマイズで実現できます。
カスタマイズにより、業務のさらなる改善や効率化が期待できるでしょう。

参考に、kintoneのカスタマイズ例を紹介します。

• 条件を設定し、背景色や文字サイズを変更する
• 複雑な計算をカスタマイズ機能を使って自動計算させる
• 任意のレコードに対して、合計値を出力する

kintoneのカスタマイズについて、関連記事をご用意しております。併せてご参考にしてください。
▼kintoneのExcel連携方法は？ 事例や拡張機能をご紹介
▼kintoneのAPI機能で外部システムと連携する
▼kintoneのスペースをカスタマイズする方法とは？

kintoneのカスタマイズ方法には2種類あります。

• JavaScriptを利用する
• サイボウズ社やベンダー企業による「プラグイン」を利用する

JavaScriptによるカスタマイズは、JavaScript言語を利用します。JavaScriptを利用することで、ユーザー自身による自由なカスタマイズを可能にし、またベンダー企業も、JavaScriptを用いて作った拡張機能・プラグインを自由にWeb上に公開できるのです。

「プラグイン」とは、世の中に出回っている多くのソフトウェアで利用されている、後発の追加機能のことです。プリセットのベースシステムに対し、機能を追加できるプラグインをメーカーやその他のベンダーが多く公開しています。

kintoneの場合は、メーカーであるサイボウズ社はもちろん、その他のベンダー企業やシステム開発会社などがプラグインを作成しています。プラグインの種類や機能の充実度によって、無料版と有料版があり、求める機能によっては有料版を選択した方がよいケースもあるでしょう。

改めて説明すると、プラグインとは追加機能のこと。JavaScriptによるカスタマイズでは、アプリケーションに対してJavaScriptファイルの記述が必要で、プログラム言語に対する知識がない場合はカスタマイズが難しいという側面があります。

しかし、プラグインの利用によって、JavaScriptカスタマイズと同様の拡張機能の追加や、他サービスとの連携が容易になります。なぜなら、kintoneプラグインはJavaScriptカスタマイズで作成したJavaScriptやCSSのファイルをパッケージングしたものだからです。プラグインの中身を見ると、機能拡張のためのJavaScriptが梱包されています。

中身が同じとはいえ、プログラミング知識のない人にとっては断然扱いやすいのがプラグインです。プラグインには設定画面があるため、導入も簡単で利用しやすいという特徴があります。
また、プラグインに一定の機能が設定・整備されているため、ユーザーが安心して利用できる仕組みになっています。

JavaScriptでカスタマイズできることは、kintoneの大きな特徴のひとつです。ベンダー企業による拡張機能の開発などはもちろん、ユーザー自身による特別な機能追加も自由にカスタマイズできます。

また、比較的簡易なプログラム言語であるJavaScriptでカスタマイズできることは「kintoneを作るための高度な専用プログラム言語を学ぶ必要がない」ということです。JavaScriptに精通しているエンジニアが1人いれば、拡張機能の使用が可能となります。
例えば、kintoneに特殊な計算機能がほしいとき、社内にエンジニアがいればJavaScriptですぐに自社開発にかかれるでしょう。
JavaScriptでのカスタマイズが可能であるということは、kintoneの自由な拡張性が担保されているのです。

作成したJavaScriptカスタマイズは、JavaScriptのプログラムをアップロードするだけで、簡単に追加できます。JavaScriptカスタマイズを加えることにより、専門的な計算をするプラグインがなくても自社解決が可能で、効率的な業務改善ができるでしょう。

まず、開発を行うためには、JavaScriptによるカスタマイズ対象のアプリをkintoneのアプリストアから取得しなければなりません。そのために、以下の条件のどちらか一方を満たしている必要があり、取得後に初めてカスタマイズ対象のアプリをダウンロードできます。

• kintoneを所持するため、cybozu.comのサービスを購入する
• 5ユーザーで1年無償になるkintone開発者ライセンスに申し込む
  （メンバー登録が必須です。メンバー登録方法はこちらから）

この条件を満たしていれば、JavaScriptによるカスタマイズができます。
では実際のJavaScriptによる開発手順として、次の2つの機能をカスタマイズする方法について解説します。

• JavaScriptを利用したアプリ一覧表示時の警告通知のカスタマイズ
• JavaScript APIを利用したレコードの取得・操作に関するカスタマイズ

上記の1つ目は、業務アプリの場合、社内の共通規約の表示、データ変更の場合に規約確認のアラートを表示するなど社内ガイドラインに沿った機能をつけたいときに役立ちます。

2つ目は、実際のデータのレコードに対して、条件を満たしているレコードの文字色を変化させるなどの機能です。業務管理で便利に使えるため、コードを理解しておくとよいでしょう。

まずはアプリ一覧表示時の警告通知について、「案件管理」アプリを使って実際のJavaScriptのコードを交えて解説していきます。（環境は既に整っているものとします）

1. カスタマイズ対象となるアプリをkintoneストアから取得するため、kintoneにログインする
2. kintoneにログインしたら、「アプリの作成」を押下すると、アプリの作成画面が表示
3. 「アプリストアから選ぶ」を選択し「案件管理」の「このアプリを追加」を選択
4. 確認画面が表示されたら「追加」を選択して、題材となる案件管理のアプリが追加されたことを確認
5. 案件管理アプリが追加されたらデータを登録し、ここで初めてJavaScriptファイルを実装する
6. 文字コード「utf-8」で作成されたjsが作成できたら、アプリの右上の歯車アイコンを選択

7. 選択タブから「JavaScript／CSSでカスタマイズ」を選択し「PC用のJavaScriptファイル」を選択

   

   出典：「JavaScriptやCSSでアプリをカスタマイズする」kintone ヘルプ
   https://jp.cybozu.help/k/ja/user/app_settings/js_customize.html

8. 「アップロードして追加」ボタンから下のjsファイルを選択し、保存する
9. 管理画面に戻るため「アプリを更新」ボタンをクリックし、確認ダイアログの「OK」を選択
10. 一覧画面に遷移した際に、jsファイルで設定した警告文が表示されればカスタマイズ成功

sample.js 
------------------------------------------------------------------------
/*
 *サンプルカスタマイズ
 *Copyright(c)2014 Cybozu
 *
 *Licensed under the MIT License
 */
(function(){
    "use strict";
    alert("警告：社内共通ルールを確認の上、作業を行うこと。");
})();
------------------------------------------------------------------------

続いて、JavaScript APIを利用したレコードの取得・操作に関するカスタマイズです。

「JavaScript API」は、kintoneアプリの画面そのものをカスタマイズできる機能です。JavaScript APIを利用して、使用中のアプリの様々なイベントを取得し、ハンドラーをひも付けします。
登録手順はルール例①で記載した手順1～10の項目とほぼ同様です。違う点はJavaScriptのソースコードと、登録された実装ファイルを先に削除するのみとなっており、再度登録することで、同じ手順でより高度なレコード操作を実現できます。

今回は、登録されたデータの中にある「確度」がBの会社の「会社名」の文字色を青にしてみましょう。sample.jsを以下のように更新して、手順1～9を行ってください。
手順1～9まで完了したら、案件一覧画面を確認し、色が変わっていればカスタマイズは成功です。

sample.js 
------------------------------------------------------------------------
/*
 *サンプルカスタマイズ
 *Copyright(c)2014 Cybozu
 *
 *Licensed under the MIT License
 */
(function(){
    "use strict";

    //レコード一覧イベントを取得
    kintone.events.on('app.record.index.show',function(event){
        //文字色の設定値
        var fontColorBlue = "#0000ff";

        //「会社名」と「確度」の要素を取得
        var elCustomer = kintone.app.getFieldElements('文字列＿1行_');    //会社名
        var elAccuracy = kintone.app.getFieldElements('ラジオボタン');    //確度

        for (var i = 0; i < elAccuracy.length; i++){
            //レコード情報を取得
            var record = event.records[i];

            //「確度」が”B”の場合「会社名」の文字色を変更する。
            if (record['ラジオボタン']['value'] == "B"){
                elCustomer[i].style.color = fontColorBlue;
            }
        }
    });
})(); 
------------------------------------------------------------------------

JavaScriptカスタマイズを利用して得られるメリットは、次のように様々あります。

• テキストエディタで作成したJavaScriptファイル（jsファイル）を適用するだけでよい
• プラグイン化するまでもないカスタマイズに対して素早く対応できる
• プラグイン化のための開発ツールのインストールや複雑なコマンドの実行が不要になる

JavaScriptは、HTMLやCSSなどのファイルと同様に、通常のテキストエディタで作成可能です。

例えば、アプリを至急カスタマイズしたいとき、即座にテキストエディタでJavaScriptファイルを作成してアップロードするだけで、適用されます。
また、プラグイン化するまでもないような軽微なカスタマイズには素早い適用を期待できます。このようにJavaScriptカスタマイズは、スピードカスタマイズできるメリットがあります。

自社開発でもプラグイン化は可能ですが、開発ツールのインストールやコマンドの実行などプログラミングに関する専門的な知識と環境が必要です。単純なカスタマイズなら、JavaScriptカスタマイズを選択するのがよいでしょう。

JavaScriptカスタマイズよりも、プラグインの方が向いているケースもあります。

スピードカスタマイズが可能なのがメリットでしたが、変化の激しいカスタマイズでは、JavaScriptカスタマイズは対応が遅れるというデメリットが考えられます。その他にも以下のようなデメリットがあります。

• 設定画面がJavaScriptなどのプログラム言語である
• 変更があるとすべてのアプリケーションに対して適用し直す必要がある

JavaScriptカスタマイズは、当然のことながらプログラムの中で設定が行われるため、プログラミング知識が乏しい場合は設定が難しいでしょう。ネット上に掲載されているサンプルコードはたくさんありますが、自分で作成したJavaScriptファイルの中身を把握してないと、エラーや不具合を起こしかねません。記述したコードがどんな動作をするのかしっかり理解する必要があります。

また、複数のアプリケーションを利用している場合、カスタマイズに変更があると、そのすべてのアプリケーションでJavaScriptファイルをアップロードし直さなければなりません。

プラグインにすることで、そのような手戻りを解消できる他、設定もマウスで直感的に操作可能になります。その他にもプラグインの元データさえ管理しておけば、カスタマイズした情報を元に戻すことも容易で、変更に対しても既に作成されているプラグインのバージョンを管理するだけでよいというメリットがあります。

便利なプラグインについて、下記記事で紹介しています。ぜひ、こちらも参考にしてみてください。
▼kintoneでガントチャートをプラグイン｜設定方法と使用例
▼kintoneで名刺管理｜アプリやプラグイン連携を紹介
▼kintoneのカレンダー表示機能｜便利なプラグインも紹介

JavaScriptカスタマイズには以下のような開発環境が必要です。

• kintone
• Webブラウザ
• テキストエディタ

JavaScriptカスタマイズを行うためには、先述した通りカスタマイズ対象のアプリケーションを要するため、cybozu.comでkintoneサービスを購入したり、kintone 開発者ライセンスに申し込んだりする必要があります。

続いてWebブラウザですが、デスクトップ用のブラウザが必要です。OSで分けると以下のブラウザが利用可能です。

さらにJavaScriptが編集可能であるテキストエディタがそろえば、必要な環境が整備された状態となります。

プリセットのままでも便利なkintoneですが、カスタマイズを使用してさらなる業務改善を図ってみましょう。JavaScriptカスタマイズもプラグインの利用も、使い方や活用場所次第で効果を発揮します。JavaScriptカスタマイズも効果的ですが、プログラミングの知識がある方であれば、プラグインを構成し、他の方の業務効率を上げる手助けもできるでしょう。

今回紹介したコーディング例などを参考にJavaScriptカスタマイズを有効利用してみてはいかがでしょうか。プラグインの導入、あるいは自作でもkintoneの機能は広がります。
また、kintoneでは外部の開発担当者同士がコメントし課題を解決し合えるオープンなコミュニティである「cybozu developer network」サイトが用意されており、カスタマイズの際のヒントやチュートリアルなどを参照可能です。

kintoneに関してはこちらの記事でも詳しく紹介しています。ぜひ、ご覧ください。
▼kintoneの評判や口コミは？ メリットや特徴を類似製品と比較

※本記事の内容は2021年3月時点のものです。kintoneの仕様や利用環境は変更する場合があります。