【初心者必見】kintone JavaScript 入門！概要から準備まで網羅的に解説

社内でkintoneの利用が進むと、より便利に使うためのカスタマイズの要望が出てくることはありませんか？標準機能でのカスタマイズでは物足りなかったところも、拡張機能を使いこなすことで運用の幅を広げることができます。

中でもJavaScriptは、kintoneをブラッシュアップしていく上で重要な知識であり、kintoneの運用を加速させるものです。ただし、初心者にはやや難易度が高く注意すべき点もあるため、しっかりとJavaScrip開発を行わない理解した上で行わないとトラブル発生の原因にもなりかねません。

そこで本記事では、JavaScript開発の基本的な情報から注意点、学習方法までこれからJavaScript開発に挑戦する方もわかるように網羅的に解説していきます。本記事を読むことで、kintoneのJavaScriptカスタマイズに関する基礎的な知識やスキルが身に付き、運用をスムーズに進めることができるでしょう。

🔳この記事でわかること
　・kintoneのJavaScript開発について
　・JavaScript開発でカスタマイズを行なうための準備や注意点
　・JavaScript開発を自力で学ぶ方法
　・JavaScript開発を有効に行う方法

🔳こんな人におすすめの記事です
　・kintoneのJavascript開発をおこなってみたい方
　・kintoneのカスタマイズのスキルを高めたい方
　・カスタマイズ全般を知りたい方

kintoneでカスタマイズを行なう方法

拡張性の高いkintoneですが、カスタマイズをおこなうことで例えば「設定した条件毎に背景色や文字サイズを変更する」「カスタマイズした機能で複雑な計算を自動化する」「任意のレコードの合計値を出力する」などが可能です。

これらを実現するためには下記の方法でカスタマイズする必要があります。

• JavaScript開発
• プラグイン
• 外部サービス連携

自社の業務や状況・目的に合わせて効果的に組み合わせ、より効率的なkintoneの運用を目指すため、それぞれのカスタマイズの特徴を把握していきましょう。

①JavaScript開発

kintoneはJavaScriptを使用したカスタマイズができるようになっています。kintoneにプログラムをアップロードすることによって、標準機能では表現できなかったカスタマイズが可能になります。JavaScript開発ができれば、条件によってフィールドの色を変えたり、関数を使ったりとkintoneの視認性や利便性がアップし、ユーザーが使いやすくなるというメリットがあります。

ただし、JavaScriptは専門性の高いスキルを必要とするため、プログラミングの知識や経験がない人にとっては、むしろ手間になってしまうでしょう。便利な機能を実装できても、機能の変更や不具合改修時にコードを見直す必要があるため、kintoneの運用を難しくしてしまうかもしれません。

一方で、ITエンジニアとしてシステム開発に携わっている人や、プログラミング言語を理解している人であれば、さらに効果的なkintoneの活用ができる可能性が高まります。運用においての担当の役割や環境に合わせて、JavaScript開発を取り入れるべきかを検討しましょう。

②プラグイン

「プラグイン」とはkintoneだけの専門用語ではなく、一般的に様々なソフトウェアで使われている拡張機能のことです。元々ある機能に、さらなる機能を追加することで使い勝手を良くするためのプログラムを指します。

カスタマイズの方法は、kintoneにプラグインをインストールするだけ。プログラミングの知識がない非エンジニアの人でも、取り入れたかった機能を簡単に実装することができます。アプリの中で色々な機能を組み合わせて使いたい場合でも、1つのアプリに20個までプラグインをインストールできるので、機能性も使いやすさもアップする可能性が広がります。

プラグインを導入するには、kintoneをスタンダードコース（1,500円／1ユーザ）で利用する必要があります。ライトコース（780円／1ユーザ）で利用している場合はコースを変更しなければならないため、注意が必要です。

kintoneには200種類以上ものプラグインが存在し、kintoneを開発しているサイボウズ社とは別のベンダー企業やシステム開発企業がほとんどを開発しています。無料のものと有料のものがあり、有料のものは買い切り型やサブスク型と様々です。

目的に合わせて手軽に活用できるのがプラグイン。必要な機能を備えたプラグインを探してみましょう。

③外部サービス連携

kintoneはたくさんのAPI機能が備わっています。外部サービスと連携することで、レコードの情報の取得や更新、追加ができるようになります。kintoneにある入力データを有効活用することができるので、kintoneだけでは構築することのできなかった仕組みをつくることが可能です。

外部サービスは100社以上ありますが、例えば会計ソフトの『freee』と連携すると、kintoneのレコード情報をもとに、見積書や請求書を作成することができるようになります。便利な外部サービス連携ですが、連携にはREST APIを利用する必要があり、JavaScriptの知識が求められます。

プログラミング知識や経験が無い場合、APIを使った外部連携サービスは難易度の高いカスタマイズ方法と言えるでしょう。

JavaScript開発のメリット・デメリット

kintoneでカスタマイズする手段は理解できたかと思います。それでは、JavaScript開発のメリット・デメリットについてより詳しく解説します。

JavaScript開発のメリット

JavaScript開発のメリットは以下のものが挙げられます。

• テキストエディタで作成したJavaScriptファイルを適用するだけでOK
• プラグイン化に必要な開発ツールや複雑なコマンド実行が不要
• プラグイン化する必要のないカスタマイズに早急に対応

これらのメリットはJavaScript開発がHTMLやCSSなどのファイルと同様に通常のテキストエディタで作成できることで得られます。

単純かつスピードが求められる場面では、JavaScriptカスタマイズを選択するのがメリットが大きいと言えるでしょう。

JavaScript開発のデメリット

kintoneの機能を拡張できるJavaScript開発ですが、カスタマイズを進める上で注意が必要です。以下に注意すべきデメリットを3つあげました。

• kintoneのアップデートによってアプリが動かなくなる危険性がある
• コピペでのJavaScript開発は高リスク
• 初心者にはやや難易度が高い

JavaScriptでのカスタマイズはkintoneのアップデートに対応していません。そのため、アップデートされるたびに更新が必要になる点は負担が大きいでしょう。

また、JavaScriptの開発コードはcybozu developer networkで多く公開されています。しかし、内容を理解しないままコピペで利用すると後々トラブルに陥るリスクが非常に高いです。カスタマイズを行なうのであれば、どういう場合にどのような動作をするのか、コードの意味を理解してから行ないましょう。

このように、JavaScript開発は初心者にはやや難易度が高いといえます。なので基本的には標準機能かプラグインで対応するのをおすすめしています。

それでもやはりJavaScriptでカスタマイズしたい、という場合には以下の注意点を守りながら進めるようにしましょう。

• kintoneセキュアコーディングガイドラインに従ったプログラム作成を行なう
• ガイドラインの意味が1つでもわからなければ、本番環境へJavaScriptは入れない
• コピペしたコード1行1行の意味が分からなければ、使用を控える
• 作成したプログラムは必ず開発環境で試す

JavaScript開発に適してるカスタマイズは？

ではJavaScript開発に適しているカスタマイズとはどのようなパターンなのでしょうか？

比較されるプラグインですが、そもそもプラグインとJavaScriptは技術的な中身は一緒です。プラグイン＝「JavaScriptで開発したものをパッケージ化して使いやすくしたもの」といえるので、本質的にはどちらも同じです。

ということでどちらを選択すべきかですが、JavaScript開発を選択する方が適しているのは「標準機能やプラグインだけでは作れなかった機能を実現させたい！」という場面になります。より自社の業務に合わせたカスタマイズをしたい方は検討すると良いかもしれません。

逆にそこまで細かい仕様を求めない場合には、手軽さと長期的な運用面で標準機能かプラグインを利用するのをおすすめします。

kintoneのJavaScript開発でできること｜事例紹介

JavaScript開発について、特徴やメリット・デメリットがイメージできたでしょうか。

ではkintone活用場面において、JavaScript開発は実際にどのように活用できるのか、わたしたち伴走ナビが行なったJavaScript開発事例を紹介していきます。

kintoneのJavaScriptではどんなカスタマイズが可能？

kintoneのJavaScript開発ではどんなカスタマイズができるのでしょうか？

cybozu developer networkで紹介されている例を見てみると、

• フィールドの編集可／不可切り替え
• フィールドの自動入力
• フィールドの表示／非表示切り替え
• グループフィールドの開／閉切り替え
• フィールドの入力規則
• フィールドの条件書式
• テーブルのカテゴリ別集計
• 関連レコードのカテゴリ別集計
• レコードの自動採番
• 自動ルックアップ

が挙げられています。

下記のページにそれぞれのカスタマイズ例が記事として紹介されているので興味ある内容はぜひチェックしてみてくださいね。
kintoneカスタマイズでできること – cybozu developer network　

開発事例：kintone日付フィールドの年度更新を自動化

とある行政書士のお客様。士業の方は許認可手続きやそれにかかる準備など、タスク管理において「日付の把握」が非常に重要なポイントです。

この行政書士のお客様は、お取引しているお客様ごとに、必要なタスクが必要なタイミングでリマインド通知がくるような機能を求めていました。それには、入力された決算日から逆算してワークフローを発動させる必要がありますが、悩みがあったのです。

＜お悩み＞
毎年お客様の決算日を更新するのが面倒

＜ポイント＞

• 更新はすべて手動で行なっている
• お客様ごとに決算日が異なる
• kintoneの標準機能を駆使してリマインド通知を受け取っている

標準機能だけでこなそうとすると、ルックアップ機能を使って、参照関係のあるページひとつひとつを更新して、と手間がかかり、管理のための管理業務が発生してしまいます。

伴走ナビでは、そんなお悩みを解決するため、JavaScriptを使って業務に集中できるよう、支援させて頂きました。

指定した日付フィールドに「今日が決算日以降なら、自動で1年後の日付を入れる」という設定を組んだことで、すべてのお客様情報に対して自動で決算日が更新され、スムーズにリマインド通知を受け取れるようになったのです。

参考：kintone日付フィールドの年度更新を自動化してみた【動画】｜伴走ナビ

開発事例のメリット・デメリット

今回の事例では、JavaScript開発によって士業のお客様の管理にかかる業務の負担が軽減されました。さて、ここではこの事例から考えられるメリット・デメリットにはどんなものがあるか見ていきましょう。

＜メリット＞
日付の更新もリマインド通知も自動化され、更新のミスや負担がなくなる。

＜デメリット＞
kintoneの毎月のアップデートや他のプラグインによって、せっかく作った機能が動作しなくなる可能性がある。

今回のお客様の場合は、krewdataなどのプラグインでも対応できる内容ではありました。しかしながら、プラグインを導入する場合には費用が発生することもあり、JavaScript開発が必要なボリュームによって費用対効果が異なります。

そのため、メリット・デメリットや費用面を総合的に検討した上で、JavaScript開発とプラグインのどちらが良いか判断する必要があるでしょう。

kintone JavaScript開発でカスタマイズを行なうための準備

JavaScriptを使って開発した事例をご覧いただき、より実践的な理解が深まったところかと思います。いよいよ実際に、「JavaScript開発をやってみよう」と思うものの、「まず何から始めたらよいのだろう」と戸惑う方も少なくないのではないでしょうか。ここでは、JavaScript開発でカスタマイズするために必要な準備を解説していきます。

結論から言うと、

• 開発者ライセンスを申し込む
• エディタを準備する
• コーディングガイドラインの確認
• エラー原因やコードチェックの方法を知る

この4つをクリアすれば準備完了です。

よく理解しないままカスタマイズを進めて「うまく動作しない」ということにならないよう、しっかり確認してからカスタマイズを始めましょう。

1.　開発者ライセンスを申し込む

システムの設定変更を本番環境でいきなり始めるのは大変危険です。最悪の場合、システムが動かなくなり、使えなくなってしまうという可能性もゼロではありません。適用させたい設定変更がシステムにどう影響するのか、予め開発環境を使って試すことで、安全な運用を継続させることができます。

kintone開発者ライセンスは、kintone APIを用いた開発を目的として開発環境のみで利用できます。本運用でのライセンス利用はできませんのでご注意ください。

＜kintone開発者ライセンス 概要＞

• 対象コース：スタンダードコース
• ユーザー数上限：５ユーザーまで
• 費用：無償
• 提供期間：１年間
  ※更新手続きを行なえば、さらに１年の延長可
• 申し込み：kintone開発者ライセンス　
  お申し込みフォーム：https://cybozu.dev/ja/kintone/developer-license/registration-form/

2.　エディタを準備する

その際、一旦オフラインのエディタでコーディングを行い、そのファイルをkintoneにアップロードをする必要があります。kintoneで完結せず、修正には都度オフラインのエディタで対応することになるためやや面倒です。

そこで便利なのが「JSEdit for kintone」。JSEdit for kintoneは通常のエディタと異なり、kintone上でJavaScriptやCSSのカスタマイズを行うことができるプラグインです。そのため、JavaScriptで開発したコードのちょっとした編集や修正を手軽に実施できる点がメリットです。

基本的にはこちらを使うのが楽なので、特にこだわりのない初心者などは迷わずJSEdit for kintoneを選択しておけばよいでしょう。

もちろんその他のエディタも使用可能なので、代表的なモノをいくつかご紹介します。

『Brackets』
Adobe社が提供。オープンソースであること、作業の全体像が見渡せるプレビューなど多数の機能が使えることが特長です。

『Sublime Text』
Web制作者に人気のある、海外製のフリーテキストエディタ。他のエディタにはない機能も多く、WindowsだけでなくMacやLinuxでも利用できます。

『Visual Studio Code』
Microsoft社が提供。早くて軽いなど、開発を効率化できる拡張機能が充実しています。サイボウズが主催のカスタマイズ勉強会「devCamp」でも利用しているエディタです。

これら以外にも様々なエディタが存在するので、自分に適したエディタを探してみるとよいでしょう。

3.　コーディングガイドラインの確認

プログラミング言語を用いるカスタマイズは、システムの規格に沿って進めることが必須です。

「毎月行なわれるアップデートで、せっかく作った機能が動かなくなってしまった」「セキュリティ事故が発生してしまった」ということが無いよう、トラブルを防ぐために事前にガイドラインを読み込み、カスタマイズしましょう。

kintone JavaScriptコーディングガイドライン
「アップデートに影響しないコードの書き方」「外部システムとの連携で注意すべき点」など、kintoneならではのコーディングについて記載されたガイドラインです。

kintoneセキュアコーディングガイドライン
「脆弱性のあるコード例と対策」「認証情報の取り扱い」など、セキュリティを守る上で気をつけるべきコーディングについてのガイドラインです。

4.　エラー原因やコードチェックの方法を知る

システム開発をしていると、「コードを書いたけれどもエラーが出てしまう」「思った通りに動かない」ということはよくあるでしょう。コードとにらめっこしていて、あっという間に時間が過ぎてしまうのは非効率で時間がもったいないですよね。

エラーの原因を調べる際に有効な事例集や、JavaScriptのコードチェッカーがあることを覚えておくと、いざという時に役に立つかもしれません。

動かない？そんな時はデバッグをしてみよう！入門編
kintoneカスタマイズにおけるデバッグ方法を紹介しています。JavaScriptが動かないときにどうするか、注意点は何かの判断材料になります。

JavaScriptコードチェッカー『ESLint』
開発後、アプリに機能を適用させる前にコードレビューを行なえると安心です。自動レビューツールを有効活用して、快適な本番運用に備えましょう。

JavaScript開発を自力で学ぶ方法

ここまで、思わぬトラブルにならないためのJavaScript開発時の注意点について解説してきました。安全な運用をしていくには、カスタマイズ担当者がkintoneにおけるJavaScript開発の理解やスキルを深めることが必須です。

ここではその方法について、3つの例を紹介していきます。

• cybozu developer networkのチュートリアル
• cybozu developer networkのコミュニティを活用
• kintoneカスタマイズスペシャリスト認定資格の取得

cybozu developer networkのチュートリアル

kintoneでのJavaScript開発が初めての方向けの「入門用」として、サイボウズ社が用意した学習コンテンツです。JavaScript自体の知識がある方もない方も、まずはこのチュートリアルを読むことでkintoneにおけるシステム開発の概要が掴めます。

このチュートリアル自体を活用していく方法についても丁寧なガイドがあるので、カスタマイズ初心者の場合はその通りに進めることで、より理解が深まるでしょう。

条件分岐や関数、イベントなど、項目ごとでもわかりやすく解説されており、各分野の基礎知識も学ぶことができます。

サイボウズ公式：チュートリアル－cybozu developer network

cybozu developer networkのコミュニティを活用

JavaScript開発を始めると、うまくいかず行き詰ってしまうこともあると思います。cybozu developer networkには、チュートリアルだけでなく開発者同士のコミュニティがありますので、そんな開発者の悩みを解決するのに非常に有益です。

同じ壁にぶつかった開発者のサンプルが閲覧でき、解決のヒントが見つからなければここで相談をすることもできます。自社でJavaScript開発を担当するのが自分一人で心細くても、共通の仲間がいて相談しあえる場があることは、開発者にとって心強いのではないでしょうか。

サイボウズ公式：cybozu developer community

kintoneカスタマイズスペシャリスト認定資格の取得

kintoneでは様々な認定資格が用意されています。「kintone認定カスタマイズスペシャリスト」もその一つ。kintone APIやcybozu.comの仕様・設定についての基礎的な知識、プログラミングを用いたkintoneシステム開発のスキルがあることが証明される資格です。JavaScript開発に慣れてきたら、業務と並行しながら資格取得を目指してみることもおすすめします。

kintoneを提供しているサイボウズ社による公式資格なので、資格を取得できるとカスタマイズを行なうのに必要なスキルがあることを社内にアピールすることができるでしょう。受験するためには、まず「kintone認定アソシエイト」に合格している必要があります。

ここでkintoneの基礎知識を理解できるので、入門編としてkintone認定アソシエイトの勉強から始めると、質の高いkintone運用を行なう上でより一層効果的です。

JavaScript開発をより簡単に実現できるプラグインを紹介｜gusuku Customine（グスク カスタマイン）

これまでの解説で、「JavaScript開発は行ないたいけれどリスクや知識・スキル面、委託コストなどに不安が残る」という場合には、アールスリーインスティテュート社の『gusuku Customine』がおすすめです。

gusuku CustomineはJavaScriptの命令を文章にしたプラグインなので、JavaScriptの知識やスキルがなくてもブラウザ上で簡単にカスタマイズできます。つまり、kintoneの標準機能でカスタマイズしているかのように、JavaScript開発でしかできないようなカスタマイズができるということです。

できることとして、以下のような事例があります。

• 予実管理
• QRコード・バーコード読み取り
• 自動採番
• 見積書・請求書・納品書の出力
• 郵便番号から住所検索をしてGoogleマップを表示させる

この他にもたくさんの「できること」がありますので、詳しくは以下参照リンクから確認してみてください。

参照：gusuku Customine　

伴走ナビが考えるkintoneのJavaScript開発について

JavaScriptはkintoneをカスタマイズする上で重要な知識であり、kintoneの機能を充実させるものです。しかし同時に、リスクについても理解する必要があります。

わたしたち伴走ナビとしては、kintoneをカスタマイズする上での優先順位は
標準機能＞＞プラグイン＞＞＞＞＞＞＞JavaScript開発
と考えています。その理由について、以下に解説していきます。

JavaScript開発の優先度が低い理由

JavaScript開発の優先度が低いと考えられる理由は3つあります。
よく検討した上で、JavaScript開発を行ないましょう。

1．アップデートで動かなくなる可能性

kintoneは毎月、新機能の追加や操作性の改善を図るアップデートがあります。JavaScriptでカスタマイズしたアプリが、このアップデートと干渉して動作しなくなり、最悪の場合業務が止まってしまう可能性があるのです。

不具合が発生し、自社で独自にJavaScript開発を行なっている場合は、再度コードを改修する必要があるので、そのリスクは把握しておきましょう。

2．属人化しやすい

JavaScript開発はいわゆるプログラミング言語で、専門の知識やスキルを必要とするものです。そのため、カスタマイズする際やトラブル発生時など、何かあった時に対応できるのは、JavaScriptを組んだ人のみという属人的な管理になってしまいます。

また、「他の担当者への引継ぎ時に、後任者が内容を理解できない」「業務の進め方が変わり、アプリの変更が必要になったが変更できない」といった問題が起こりかねません。

3．プラグインで対応できるケースも多い

実現したいカスタマイズは、JavaScriptを使わなくとも「プラグイン」と呼ばれる機能パッケージをインストールすることで可能になる場合もあります。

ただ、プラグインは有料のものもあり、費用対効果があるか、予算内におさまるかの検証が必要です。

リスク許容ができればJavaScript開発も有効

カスタマイズを行なう上での、JavaScript開発による懸念点をお伝えしてきました。デメリットと捉えられる部分もありますが、JavaScript開発には「こんな風にしたい」というイメージをダイレクトに実現できるメリットもあります。イメージをダイレクトに実現できるということは、運用がきちんと回るということ。

ですので、想定されるリスクを許容し対策が出来ればJavaScript開発も有効だと考えます。わたしたち伴走ナビではプログラム内にコメントを多く盛り込み、「このコードは何をしているコードなのか」ということを素人でも分かるようにして、極力属人性をなくすことを意識しているので参考にしてみてくださいね。

kintoneカスタマイズの委託検討も有効｜伴走パートナーの活用

kintoneをカスタマイズする担当者は他の業務と兼任していることも多く、kintoneだけに時間もリソースも割くことはなかなか難しいのではないでしょうか。

kintoneをどのように活用していきたいかは、自社の社員が最も理解しているところ。ですので、基本的にはkintoneの運用は内製化（自社での運用）が理想といえます。

しかしながら、時間や人員のリソースの面ではもちろんですが、技術的にも全てを自社で完結させるのはハードルが高い場合も多いのではないでしょうか？そんなときは、kintoneの構築や運用を支援する、伴走パートナーのサービスを検討されることもおすすめです。

わたしたち伴走ナビも伴走支援を行なっており、お客様と密に定期ミーティングを重ねながら、自社にフィットした運用のお手伝いをしてきた実績があります。

構築はわたしたち伴走パートナーが行いますが、主体はあくまでお客様。お客様がゴールまで完走できるよう、常に隣で支援するのが伴走パートナーであるわたしたち伴走ナビの役目です。

すべてを自社で完結できることも魅力的ではありますが、外部のパートナーと共に運用していくということも有効な手なのではないでしょうか。

まとめ｜kintoneのJavaScript開発について全体像を理解することが重要

本記事ではkintoneのJavaScript開発と注意点として、

• kintoneのJavaScript開発と注意点について
• JavaScript開発の学習方法
• JavaScript開発の実用事例
• おすすめのプラグイン
• 外部パートナーの活用

このような内容で紹介してきました。

JavaScript開発は、kintoneをより自社に適したシステムにカスタマイズできるメリットと共に、難易度や注意点についてのデメリットについても知る必要があることをご理解いただけたかと思います。

改めて、ぺパコミのおすすめのカスタマイズとしては、

標準機能＞＞プラグイン＞＞＞＞＞＞＞JavaScript開発であると考えています。

それらを踏まえて、JavaScript開発をやりたいと思った方はこの記事を参考に自身でチャレンジする、もしくは是非ぺパコミにご相談いただければと思います！