kintoneのカスタマイズ｜初心者向けの方法は？

kintoneは標準機能だけでも十分便利な業務システムですが、業務内容によっては実現できないケースもあります。
例えば、「画面表示を変更したい」「外部サービスと連携させたい」という場合は、標準設定からkintoneをカスタマイズしなければなりません。
kintoneの機能をカスタマイズすることで、できることが格段に増えます。

そこで本記事では、初心者の方にもおすすめなkintoneのカスタマイズ方法について、解説します。

kintoneの基本的な使い方については、下記記事をご参考ください。
▼kintoneの基本機能や使い方を紹介

kintoneは標準機能だけでも多くの処理ができますが、各機能の動作や画面表示などを用途に合わせてJavaScript・CSSなどをカスタマイズすれば、さらに利便性が高まります。

「フィールドの自動入力」「テーブルのカテゴリ別集計」など、標準機能ではできなかったことがカスタマイズで実行できます。kintoneのカスタマイズを行う最大のメリットは、自社独自の業務に沿った処理を行え、生産性の向上がさらに期待できることです。

一方でデメリットもあります。
kintoneを一度カスタマイズすると、次回以降の管理が複雑になりやすく、また新たにカスタマイズする場合は、以前使用したコードやプラグインを理解した上で行う必要があります。新たなカスタマイズが適切にできなかった場合、kintoneがうまく動作しなくなる可能性も考えられます。

そのため、kintoneのカスタマイズは内容を把握し、引き継ぎが確実にできることを条件に、慎重に行う必要があるのです。

kintoneのカスタマイズ方法は、主に4つあります。

• ポータルの設定／変更
• JavaScript開発
• プラグイン
• 外部サービス連携

いずれの方法もメリットとデメリットがあり、内容によっては特定の方法でなければ実現できない場合があります。
人的リソースや予算などを勘案して、どの方法を採るかを検討しましょう。

次項より、それぞれの方法について解説します。

kintoneのトップページは「ポータル」と呼ばれています。kintoneの入り口・初期画面にあたるページで、たくさんのユーザーがアクセスする画面です。

初期設定では、ポータルに次の情報が表示されます。

• お知らせ掲示板
• 通知
• 未処理
• スペース
• アプリ

ポータルの設定を変更できるのは、kintoneのシステム管理を持つユーザーとcybozu.com共通管理者です。

ポータルの名称を変更したり、「お知らせ掲示板」や「アプリ」などの各エリアを必要に応じて非表示にできたり、「お知らせ掲示板」に掲示する内容を編集できたりと、様々な設定を変更できます。

ポータル名やカバー画像、ポータルに何を表示するかは、ポータル画面右上のオプションボタン「・・・」から設定できます。設定手順を説明いたします。

1. 画面右上のオプションボタン「・・・」をクリックし、［ポータルの設定］を選択

   

   出典：「ポータルの設定／変更」kintoneヘルプ
   https://jp.cybozu.help/k/ja/admin/portal/customize_portal.html

2. ［ポータル名］［ポータルに表示するコンテンツ］など、必要な項目を設定

   

   出典：「ポータルの設定／変更」kintoneヘルプ
   https://jp.cybozu.help/k/ja/admin/portal/customize_portal.html

3. 右下に表示されている［保存］ボタンをクリック

また、「Kintone Portal Designer」というツール（Google拡張）を使用すれば、HTML／CSSを編集して、kintoneのポータルを自由にデザインすることが可能です。
複数のテンプレートやアイコンがあらかじめ用意されているため、テンプレートの一部を書き換えるだけで、ポータルをデザインできます。

さらに、JavaScriptを組み合わせることで、HTMLやCSSだけでは実現できない複雑な動きを組み込むことも可能です。
HTMLやCSSの基礎的な知識があれば、ユーザーが使いやすく、各企業の用途に沿ったポータルを作成できるでしょう。

Kintone Portal Designerのダウンロードはこちらから。

ポータルの設定／変更によるカスタマイズのメリットは、次の2つです。

• カスタマイズが比較的簡単
• 使いやすいポータルを独自で作成可能

ポータルの初期設定から、不要なコンテンツを非表示にしたり、「お知らせ掲示板」に掲示する内容を更新できたりと、設定は容易にできるため、ITに苦手意識がある方でもカスタマイズできるといえます。

また、ポータルのデザインも変更が可能なため、企業独自のポータルを作成でき、好みや使用用途によって使いやすくカスタマイズできます。

一方、デメリットも存在します。

• HTML／CSSの基礎知識がないと、デザインを変更できない
• 複雑な動きを実現するにはJavaScriptの知識も必要

HTMLやCSSは他のプログラム言語に比べ比較的容易でなじみのある言語ですが、基礎知識がなければHTMLやCSSの編集は難しいのではないでしょうか。そうなると、ポータルのデザイン変更は不可能となります。

また、より高度な使いやすいポータルを求めたときに、複雑な動きや仕様を設定するには、JavaScriptが必要となります。こちらも専門知識を要するため、知識がまったくない方はカスタマイズが困難だといえるでしょう。

ポータル画面のカスタマイズについて、下記記事でも詳細を解説していますので、ご参考ください。
▼kintoneポータル画面のカスタマイズ方法を解説！

kintoneのカスタマイズ方法のうち、「JavaScript開発」によって、次のような業務を実現できます。

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

また、「kintone JavaScript API」を利用した開発では、上記以外にも保存や印刷に関するイベント処理もできます。ちなみに、APIは「kintone REST API」なども用意されています。

JavaScriptによるカスタマイズの手順は、次の流れで進めます。

まずはカスタマイズ対象となるアプリを追加します。

1. kintoneにログイン
2. トッページの［アプリ作成］をクリック
3. ［アプリストアから選ぶ］をクリック
4. カスタマイズしたい内容のアプリの［追加］をクリック
5. 追加したアプリにデータを登録（サンプルでも可）

次に、JavaScriptファイルを実装します。

1. JavaScriptファイルを用意する（文字コードはutf-8）
2. カスタマイズするアプリの一覧の画面右側にある「歯車アイコン」をクリック
3. 「設定タブ」の［JavaScript／CSSでカスタマイズ］をクリック

4. PCかスマホのファイルを選び［アップロードして追加］をクリック

   

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

5. アップロードするJavaScriptファイルを選択し、［保存］をクリック
6. 管理画面に戻り、［アプリ更新］をクリック
7. ［OK］をクリックし、カスタマイズした内容が反映されていることを確認
8. 完了

すべてのカスタマイズがこの手順通りとは限りませんが、多くは上記の流れです。

JavaScript開発によるカスタマイズのメリットは、次の2つです。

• カスタマイズしやすい
• できることが多い

JavaScriptによるカスタマイズは、カスタマイズ対象となるアプリと、JavaScriptファイルを追加すれば完了します。JavaScriptに慣れている人であれば問題なく行えるでしょう。

また、できることが多いのもメリットです。
例えば「フォームボタンの設置」「クリック後の動作」「データの計算処理」など、ブラウザ上の通常の動きはほとんどJavaScriptで実現できます。
JavaScriptが扱えるエンジニアやWebコーダーであれば、簡単に使いこなせるのではないでしょうか。

しかし、求める機能を幅広く実装できるJavaScript開発のカスタマイズですが、デメリットもあります。次の2つです。

• JavaScriptの知識がない人には難しい
• 一定の時間がかかる

JavaScriptは、この後に解説する「プラグイン」でのカスタマイズとは異なり、コーディングを行う必要があります。

そして、ソースコード、アップロード後の動き、不具合の有無まで確認しなければならないため、カスタマイズ完了までに一定時間が必要となります。時間を惜しんで確認を行わないシステムには、リスクがあるため避けるべきです。
JavaScript開発によるカスタマイズは慎重に行いましょう。

実現できる幅が広いことはJavaScript開発のメリットですが、JavaScriptを扱えない方には難しい点がデメリットです。初心者がJavaScriptの学習をしながらカスタマイズを行うとしても、少なからずリスクは生じるでしょう。

特に、業務の基幹システムとしてkintoneを利用している場合、カスタマイズによって不具合が発生すれば、影響範囲は計り知れません。
JavaScriptの知識がない人は、実務経験がある人と複数でカスタマイズを行うか、一定のスキルを身に付けるステップを経て行うことをおすすめします。

また、下記記事でもkintoneのJavaScriptカスタマイズについて詳しく解説しています。ぜひご参考ください。
▼kintoneでJavaScriptを活用し、さらなる業務改善へ！

kintoneは、「プラグイン」をインストールすれば機能を拡張できます。プラグインを利用すると、例えば次のことが実現可能です。

• テーブルデータの一括転送
• 他サービスとの連携
• 各種データの一括変換
• 関数の追加

無料公開されているプラグインや、有料販売されているプラグインなどがあります。プラグインによるカスタマイズの手順は、以下の通りです。

ファイルからプラグインを読み込みする場合

1. システム管理画面を開く
2. 「その他」の［プラグイン］をクリック
3. 画面左上の［読み込む］をクリック
4. ［参照］をクリックし、読み込むプラグインのファイル「zip」を選択
5. ［読み込む］をクリック
6. 「読み込んだプラグイン」としてプラグイン名が表示されていれば完了

プラグインストアからプラグインを追加する場合

1. システム管理画面を開く
2. 「その他」の［プラグイン］をクリック

3. インストールするプラグインの［インストール］をクリック

   

   出典：「プラグインを追加／削除する（システム管理）」kintoneヘルプ
   https://jp.cybozu.help/k/ja/admin/add_plugin/plugin.html

4. ［OK］をクリック
5. プラグインのステータスが「インストール済み」になっていることを確認

いずれもプラグインファイルを読み込むだけなので、インストール自体は難しい作業ではありません。

プラグインによるカスタマイズのメリットは、次の2つです。

• プログラミングが不要
• コストを大幅にカット

プラグインによるカスタマイズは、プログラミングをする必要がありません。プログラミングする必要があるJavaScript開発よりも簡単で、プラグインを読み込むだけで完了します。

また、コストや導入時間を大幅にカットできるのもメリットです。公開しているプラグインはそれぞれパッケージ化されているため、開発期間やコストをかけずに導入できるメリットがあります。すぐに適用できる手軽さも魅力的な点でしょう。

簡単に導入できるプラグインによるカスタマイズですが、デメリットが2つあります。

• JavaScriptよりもできることが少ない
• 無料プラグインはサポートがない

求める機能がプラグインとして公開されていれば問題ありませんが、公開されていない場合はプラグインの活用ができず、自身でプログラミングを行わなければなりません。また、JavaScript開発に比べると、追加できる機能の数は少なくなってしまいます。
これを解決する方法として、一部機能はプラグインで実現し、それ以外のカスタマイズはJavaScriptでカスタマイズするなど、工夫してもいいでしょう。

また、無料プラグインの場合、サポートがない点がデメリットです。kintoneのプラグインには有料と無料がありますが、有料プラグインでは不具合があった際、提供会社からのサポートがあり、機能に制約が少ない点が特長です。

一方、無料プラグインはサンプルプラグインで提供されていることが多く、動作の保証やサポートがありません。
そのため、無料プラグインで問題が発生した場合は自己責任となります。

プラグイン開発について、下記記事にて紹介しております。ぜひご参考ください。
▼kintoneのプラグイン開発｜必要なファイル、開発手順を紹介

kintoneは、外部サービスとの連携が可能です。よく使用されている連携サービスを挙げます。

• Amazon製品全般
• Slack
• Chatwork
• LINE
• Google製品全般
• Microsoft Azure
• SmartHR

上記以外にも連携できるサービスやアプリは数多くあります。これらのサービスと連携すれば、サービス上にあるデータをkintoneから参照できたり、データをkintone上に保存できたりします。

外部連携サービスとの連携手順を紹介します。
ここでは、Slackとkintoneを連携する場合の手順を例としています。

まずは、Slack連携の通知を受け取るメールアドレスを設定します。

1. 画面右上の「設定ボタン」をクリックして、［com共通管理］を開く

   

   出典：「Slack連携を設定／解除する」kintoneヘルプ
   https://jp.cybozu.help/k/ja/user/oauth/slack_integration.html

2. ユーザー管理の「組織／ユーザー」から、メールアドレスを設定するユーザー名の左横の［編集ボタン］をクリック

   

   出典：「Slack連携を設定／解除する」kintoneヘルプ
   https://jp.cybozu.help/k/ja/user/oauth/slack_integration.html

3. メールアドレスを入力し、［保存］をクリック

   

   出典：「Slack連携を設定／解除する」kintoneヘルプ
   https://jp.cybozu.help/k/ja/user/oauth/slack_integration.html

次に、外部連携を有効にします。

1. 画面右上の「設定ボタン」をクリックして、［com共通管理］を開く

   

   出典：「Slack連携を設定／解除する」kintoneヘルプ
   https://jp.cybozu.help/k/ja/user/oauth/slack_integration.html

2. ［外部連携］をクリックして、Slackを「有効」にする

なお、Slackワークスペースとkintoneでは、同じメールアドレスを設定する必要がある点に注意しましょう。

kintoneのAPI機能を使用した外部システムとの連携ついて、下記記事でも解説しています。
▼kintoneのAPI機能で外部システムと連携する

外部サービス連携のメリットは、次の2つです。

• 連携できるサービスが多い
• ノウハウが公開されている

連携できるサービスが多い点は大きなメリットでしょう。
Google製品やAmazon製品を始め、多くのWebサービス・アプリとの連携が可能です。
例えば、多くの現場で利用されている「チャットアプリ」「カレンダー」などもkintoneと連携できます。既存サービスと連携すれば、kintone活用の幅はさらに広がります。

また、連携のノウハウが公開されている点もメリットです。
kintoneはヘルプページが用意されており、外部サービスごとの連携方法やノウハウの具体的な説明があります。主なサービスとの連携方法はほとんど紹介されているため、これを参考にしながらスムーズに進められるでしょう。

また、ヘルプページに紹介がないカスタマイズは、エンジニアによって運営されている「cybozu developer network内のコミュニティ（以下、cybozu developerコミュニティ）」の利用がおすすめです。
ここでは関連コンテンツの他に、質問や疑問を投稿すれば、コミュニティ内の誰かが回答する仕組みが用意されています。
なかなか解決しない問題がある方、専門のエンジニアではない方は、コミュニティを活用してみましょう。

外部サービス連携によるカスタマイズのデメリットは、以下の2つです。

• プログラミングが必要なケースがある
• できないこともある

高度なプログラミングが必要なケースがある点は、デメリットといえるでしょう。外部サービス連携では、クリックベースで連携できるものもありますが、プログラミングが必要な連携もあります。
例えば、kintoneのレコード詳細ページからAmazonの商品データを参照する場合、JavaScriptやAjaxの知識が必要です。カスタマイズは、専門のエンジニアでなければ難しいケースもあると理解しておきましょう。

また、サービスによってはkintoneと連携できない可能性がある点もデメリットとなり得ます。これは、一時的な不具合である場合もありますが、kintoneや連携するサービス自体に原因がある可能性もあります。
この場合、kintoneに問い合わせてアップデートを要請したり、外部のkintone開発会社に相談したり、またはcybozu developerコミュニティで有識者に意見を聞いたりすることをおすすめします。

kintoneには、様々なカスタマイズ方法があり、用途によって最適なものが異なります。カスタマイズを行う上でわからないことがあれば、カスタマイズサービスの無料相談を利用したり、cybozu developerコミュニティで質問したりするのがおすすめです。

また、テクバンはkintoneカスタマイズのスペシャリストが多く在籍しています。kintoneで不明な点や利活用を進めたいなどご要望がありましたら、ぜひお気軽にご相談ください。お客様にとって最適なkintoneを構築いたします。

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