ド素人が始めたkintoneカスタマイズ （ドシキンカス）〜初心者がはじめの一歩を踏み出すための虎の巻〜
★この記事は「kintone Advent Calendar 2018」の９日目の記事です。
みなさんこんにちは。プロジェクト・アスノートの松田です。
これを読んでいる方の中には驚かれる方もいると思います。数年前には「kintoneは標準機能だ！」「カスタマイズ禁止！」などと豪語していたわたしがなんと、カスタマイズについて語っているのです。
もちろん、まずは標準機能を徹底的に活用するべきだ、という考えは今も変わりません。
ところが、実際にkintoneを使って業務改善を推進していく過程の中では、どうしてもカスタマイズやプラグインを使わざるを得ないことがあります。
私も１年ちょっと前ぐらいまでは、developer networkからサンプルのJavaScriptをコピーしてきて、フィールドコードだけは修正しますが、あとはなかなか思うように動かない・・・と、日々悩んでいる人でした。
今回は、非エンジニアの私が、初歩的なkintoneカスタマイズであれば自分で作れるようになり、カスタマイズやプラグイン開発のプロデュースをしたり、cybozu developer networkのコミュニティーでコメントをしたりすることができるようになったこの１年と数ヶ月を振り返りました。そしてそこで得られた、kintoneカスタマイズの学習ノウハウをお届けしたいと思います。
名付けて「ドシキンカス」（ド素人が始めたkintoneカスタマイズ
歴史から読み解く、kintoneの開発思想
このサイトで、リリースからこれまでの機能アップデートの全てがわかります。
これまでの歴史から読み解くことができる、kintoneの開発思想は次のようなものだろうと予想しています。
標準機能はなるべくシンプルに
- ビジネスユーザーの敷居を下げるために、機能は必要最小限
- 機能の複雑化は行わなず、汎用性の高い機能だけに絞っている
実際使っていると、追加してほしい機能はいろいろとありますが、その機能を実装することによって、汎用性を持たせようとすると設定が複雑化してしまう恐れもあり、そのような機能は頑なに実装されていません。
上記の思想が相当強い意志で貫かれている印象です。
でも、実際にとことん標準機能を使いこなしてみるとわかりますが、機能を組み合わせたり、運用を工夫することで、実にさまざまなことが実現できるように、非常によく考えられた仕組みだと思います。
汎用性は低いが必要な機能はカスタマイズで対応できるようにする
- カスタマイズによる機能拡張を前提とした、APIの整備・拡張
- システムとしての整合性確保
最近のアップデートでは、PC版とモバイル版の差をなくすためのJavaScript APIのイベント拡充であったり、他のクラウドサービスとの連携を行うための基本的な仕組みを整備する等の、カスタマイズを行うことを大前提とした機能整備が行われている印象です。
結論：kintoneの活用にはカスタマイズを知ることは不可欠
上記の２点から言えること。それは、もはやkintoneを活用していくときには、カスタマイズを知ることは不可欠であるということ。
ここで勘違いしないでほしいのは、私たち（非エンジニアの人）はプログラマーを目指しているわけではない、ということ。上でもカスタマイズを「知る」と書いているのはそういう意味もあります。
すなわち、私たちが目指すのは、プログラミングやシステム開発ができるようになることではなく、次のようなことではないでしょうか。
- （前提として）kintoneを理解し使いこなして、標準機能の活用法と限界を知る
- 業務改善の目的を達成し、業務改善の効果を最大化するためには、何をどうカスタマイズすればいいのかがわかるようになる
- 自分の学習レベルに応じた、簡単なカスタマイズは自分で作れるようになる
- プロにカスタマイズを頼む場合でも、カスタマイズをプロデュースできるようになる
開発のプロではないからこそ目指せる世界もある！
kintoneで業務改善を行うために必要な知識と必要なスキルの中に、業務の知識、改善スキル、kintoneの機能を使いこなすスキルがあると思いますが、これに加えて、カスタマイズの基本知識も身につける、ということを目指してみても良いのではないかと思います。
そうです。われわれが目指すのは、「業務改善ができるプログラマー」ではなく、
「自分に合った最低限のカスタマイズスキルも身につけた、業務改善のプロ」だと思うのです。
前置きが長くなりましたね。さて、これから紹介するのは、私がこの１年間の間で、実際に経験しながら整理してきた、kintoneカスタマイズの基本を身につけるための学習のノウハウです。
これからkintoneカスタマイズを始めようとする人や、すでにチャレンジしているけどなかなか基本的なことが理解できなくて苦しんでいる人たちの虎の巻として、少しでも役に立つことができたら、すごく嬉しいです。
カスタマイズを始める前によく知っておいてほしいことを動画にまとめました。
JavaScriptを勉強しはじめる前に、もっと大切なことがある、という問いかけです。こちらもぜひ御覧ください！
ヒントはすべてdeveloper networkにある（が）
kintoneの開発関係の情報が集まった場所として、cybozu developer network があります。
ここにすべての技術情報のドキュメントが掲載されています。
要は必要なことはここに全て書いてある、ということなのでしょうが、ひとつ問題があります。それは、
「ドキュメントは、わかっている人のために書かれている」という事。
すでに基本的なスキルを身につけた人にとっては、このドキュメントを参考にしながら、カスタマイズを進めていくことができるようになっています。しかし、これから始めようとしている、まだ必要な基本スキルを持っていない人にとっては、書いてあることはチンプンカンプンです。
なので、まずはドキュメントに書かれている、kintoneカスタマイズを始めるための基本的な知識を理解するための助けとなるように、ドキュメントを読んでいくときの、いくつかの基本的な事をザックリ理解しておくための説明をします。
ここで気をつけなければならないことは、今はまだザックリとした理解でもいい、という事です。学習を進めていく中で、自分で手を動かして経験を積み上げていく中で、後から「ああ、あの時読んだあれはこういう事だったのか！」と気づかされることも多くあります。
システムとしてみたkintoneの動くしくみ
kintoneの画面を使うときはあまり意識することはありませんが、カスタマイズをするという事は、何らかのプログラムが実行された結果、画面の見た目が変化したり、データが書き換えられたりするわけです。これを扱うために、少しだけコンピューターの気持ちになって、システムの中でkintoneの操作やデータがどういう形で扱われているか、ということを少しだけ知っておきましょう。
レコードのデータの仕組みをザックリと理解する
アプリに保存してあるレコードのデータは、画面で見ると、アプリのフォームの形であったり、一覧のリストの形、ファイル出力するとCSVなどの形で目にすることができます。
これらは人間が見たときに理解しやすい形にして表示されているわけです。
では、システムから見た時にはどうなっているでしょうか。
このページに、kintoneのフィールド毎のデータがどのような形式になっているかが整理されています。
カスタムフィールドの表の中から「文字列（１行）」を見つけてみましょう。
"<フィールドコード>": {
"type": "SINGLE_LINE_TEXT",
"value": "テストです。"
}
フィールドコード、type、valueというキーワードが出てきますね。
フィールドコードは、アプリのフォームにフィールドを設置して設定画面を開いた時に、一番下で設定するコードです。システムの中ではフィールド名ではなく、フィールドコードによって、各フィールドが識別されていることが分かりますね。
typeは、そのフィールドの種類ですね。
文字列（１行）は、SINGLE_LINE_TEXTです。
そして、フィールドに入力した値は、valueというところに入っているようです。
ここではまず、あるフィールドコードのフィールドには、フィールドタイプと値がこんな形でありますよ、ということを表しているんだ、というぐらいの理解でオッケーです。上のフィールド形式のページには、各フィールドによって持っているデータの形式が違っていることがわかります。
これからカスタマイズを学んでいく中で、このフィールド形式のページは、何度も訪れることになります。すぐにここを開けるように、developer networkのサイトからの行き方を覚えておくか、ブックマークしておいてもいいかもしれません。
JSON形式
このようなデータの形式のことを、JSONと言います。
- https://dev.classmethod.jp/etc/concrete-example-of-json/
- https://qiita.com/SotaSuzuki/items/c3b46c4e24c1ca9b4d37
「JSONとは」でググってみると、色々と説明が見つかります。詳しい説明を読みたい方は上のリンク先を参考にしてみてください。ここでは、まずはJSONは「ジェイソン」と読むということと、上の例のように単なるデータの羅列ではなく、type, valueのようなそのデータの種類を表す項目も入ったデータ形式であるということをイメージしておきましょう。
カスタマイズが動くことができるタイミング（イベント）
kintoneのイベントについて分かりやすく説明した動画を作りました。こちらもぜひご覧になってください。
イベントオブジェクト
developer networkの、レコード追加画面が表示された時のイベントのページを開いてみると、次のようなことが書かれています。
イベントタイプ
まず、関数というところに、PC用とモバイル用で違うイベントタイプが書かれています。
- PC用： app.record.create.show
- モバイル用： mobile.app.record.create.show
プログラムの中でイベントを指定するときには、このイベントタイプを指定する必要があります。
eventオブジェクトのプロパティ
次に、eventオブジェクトのプロパティとして、次のような表が書かれています。これがこのイベントが発生したときに取り扱うことができるデータということになります。
| プロパティ名 | 型 | 説明 |
|---|---|---|
| appId | 数値 | アプリID |
| reuse | 真偽値 | 再利用の場合は true。通常の追加画面は false。 |
| record | オブジェクト | レコード登録画面表示時のデータ（フォームの初期値）を保持したレコードオブジェクト。 |
このイベント、すなわち新規レコードの追加画面を開いたときには、上の表のようなデータが用意されます。このデータから、アプリIDを知ることができたり、通常の＋ボタンから開かれた画面なのか、既存のレコードの再利用ボタンから開かれた画面なのかを見分けることもできるようです。
eventオブジェクトというところには、レコード登録画面を開いたときのデータが入っているようです。このeventオブジェクトのデータの形式が、上で説明した、JSON形式になっているんですね！詳しくは別の機会に説明していきます。
図のような、文字列１行フィールドが２つあるだけのシンプルなアプリのeventオブジェクトは次のようになっています。
{
"type": "app.record.create.show",
"appId": 26,
"record": {
"fieldCode": {
"type": "SINGLE_LINE_TEXT",
"value": "初期値"
},
"文字列_1行": {
"type": "SINGLE_LINE_TEXT",
"value": "初期値"
}
},
"reuse": false
}
この書き方は先ほどあったJSONという形式っぽいですね。
そして、上の表にあったような情報が格納されています。”record”: というところに、アプリのフィールドの情報が入っています。上のフィールド形式で確認したように、フィールドコードと、type, valueという順番でデータが入っていることがわかります。（valueには、わかりやすくするために初期値という値を入れています）
フィールドの情報以外にも、イベントの関数：app.record.create.show、アプリID、そして再利用かどうかを表す”reuse”にもfalseが入っていることがわかりますね。
フィールドの値に応じた制御
次に、「フィールドの値に応じた制御」というところに、このイベント発生時にカスタマイズでできることが書かれています。
- フィールドの値を書き換える
- フィールドの編集可／不可を設定する
- フィールドにエラーを表示する
- 画面の上部にエラーを表示する
- ルックアップの取得を自動で行う
- フィールドの表示／非表示を切り替える
それでは、この中から一つ例として、「フィールドの編集可／不可を設定する」というのを見てみましょう。
次のように書かれています。
ハンドラーが record オブジェクトのフィールドの disabled に true/falseを代入して event オブジェクトを return した場合は、そのフィールドは編集不可／可になります。
初めは何を書いてあるのか、さっぱりわからないと思います。実はこの１文が、カスタマイズのプログラムの書き方の説明になっているんですね。
それでは、実際のプログラムをチラッと見てみましょう。
kintone.events.on('app.record.create.show', function(event) {
var record = event.record;
record['文字列_1行']['disabled'] = true;
return event;
});
このままでは非常にわかりにくいので、それぞれの処理が何をしているのか、コメントを入れてみましょう。
// app.record.create.show のイベントが発生したときの処理
// eventオブジェクトは"event"という名前
kintone.events.on('app.record.create.show', function(event) {
// eventオブジェクトのrecordを、recordという変数に代入する
var record = event.record;
// recordの中の文字列_1行フィールドのdisabledにtrueを代入する
record['文字列_1行']['disabled'] = true;
// eventオブジェクト(event)をリターン(return)する
return event;
});
//で始まっている文はコメントになります。
こうしてプログラムを見ていくと、きちんと上の書き方にしたがった処理が順番に書かれていることがわかります。詳しい書き方はあとから学ぶとして、こうやってコメントと合わせて読んでみると、初めて見たときよりは少しだけとっつきやすくなったのではないでしょうか。
もちろん、プログラムの書き方やさまざまな命令はJavaScriptの知識が必要になります。しかし、ここでJavaScriptの勉強を基礎から始める必要はありません。kintoneのカスタマイズを学ぶのを通して、必要なJavaScriptの知識を少しずつ身につけていけばいいと思います。
kintoneカスタマイズを通してJavaScriptを学ぶためのコンテンツとして、developer networkにも学びやすいコンテンツが用意されています。
カスタマイズのレベル分けと必要な知識・スキル
これからカスタマイズを学ぶ人にとっては、道しるべが必要だと思います。
何を知り、どんなスキルを身につけたら何ができるようになるのか。学習はどんな順番に進めていけばいいのか。
ここでは自分の経験から、kintoneカスタマイズの学習ステップ（レベル分け）と、そこに必要なスキルや知識を整理していきます。みなさんそれぞれ、さまざまなバックグラウンドを持っていると思いますので、これが当てはまらない人もいると思いますが、１つの道しるべとして参考になるのではないでしょうか。
レベル１：イベントオブジェクトベースのカスタマイズ①
レベル１ まず最初に取り組むものは、先ほどちらっと説明したような、eventオブジェクトをリターンする、というパターンです。各イベントのドキュメントの中に記載されている、「フィールドの値に応じた制御」に書いているものの中で、JavaScriptの知識をあまり必要としないもの。すなわち処理がパターン化されているため、コピペでもなんとかなってしまう、というものです。
- フィールドの編集可／不可を設定する
- フィールドの表示／非表示を切り替える
ただし、実際はこのレベルのカスタマイズを単体で使うケースはあまり多くはありません。次に出てくるレベル２との組み合わせで使うケースが多いです。しかし、最初にkintoneカスタマイズを学ぶ素材としては最適なので、ぜひ試してみてください。
- kintoneイベントの理解
- JavaScriptのソースを書くための超基本の知識
カッコの使い方や、セミコロンの使い方などの、プログラムを書くうえで必要な基本的な文法
レベル２：イベントオブジェクトベースのカスタマイズ②
次のレベル２も、eventオブジェクトをリターンするというパターンです。各イベントのドキュメントの中に記載されている、「フィールドの値に応じた制御」に書いているものの中で、レベル１よりはもう少し基本的なJavaScriptの知識が必要となるものです。
- フィールドの値を書き換える
フィールドのデータを更新することを中心としますが、そのためには各フィールドの特性を理解する必要があります。
そして多くの場合、条件分岐や演算等の処理を行う必要がありますので、そのためのJavaScriptの書き方の知識や慣れが必要になります。ということは逆に、このレベル２でできることは非常に多くなるということでもあります。
- kintoneイベントの理解
各イベントで扱うことができるeventオブジェクトと、それをreturnして更新できる範囲を把握しておく必要があります。都度ドキュメントを確認しながら進めるといいでしょう。 - フィールド形式の理解
フィールド形式 – developer network - 配列やオブジェクト、JSONの取り扱い
- JavaScriptの条件式等の基本
この値が○○の場合は何をする等の条件分岐などの、やりたいカスタマイズによって必要になる基本知識。
はじめようJavaScript – cybozu developer networkにも詳しく説明されています。
レベル３：REST APIの活用
レベル２までは、各イベントで扱うことができるeventオブジェクトを使った処理を行うカスタマイズでした。次の段階では、eventオブジェクトでは取得や更新ができないkintone内のデータを取り扱うことができる、REST API（レストAPIと読みます）を使ったカスタマイズになります。
今操作しているレコード以外のレコードや、別のアプリのレコードの情報を取得したり、更新・追加ができるようになります。
できることが複雑になるに従って、それらの処理を記述するためのJavaScriptの知識も必要になってきます。developer networkのフォーラムでも毎回おなじみの、kintone Promiseを使った処理もREST APIを活用したカスタマイズを作るためには必要になってきます。
- kintone REST APIの知識
- 高度なJavaScriptの知識
- 非同期処理とPromise
レベル４：高度な見た目カスタマイズ、外部サービス連携
レベル４はレベル１から３以外全部になりますが、代表的なものとしては、高度な画面のカスタマイズであったり、外部サービスとの連携等があります。今回はほぼ対象外なので、詳細は記載しません。
カスタマイズを学ぶのに大切なこと
kintoneカスタマイズの学習を進めていくうえで、大切なことがいくつかありますので紹介しておきます。
適切な道具を使う
カスタマイズを行うためには、何らかの形でJavaScriptのプログラムを作成し、それをkintoneに適用（アップロード）して動作を確認する。多くの場合、一発では動かないので、動作の状況やエラーを確認しながら、プログラムを修正し、それを再度kintoneで確認・・・というサイクルを繰り返すことになります。
使用する道具（エディターなどの環境）によって、この工程をスムーズに行えるかどうかが、大きく変わってきます。開発の環境については、人それぞれ好みの環境があるとは思いますが、私の経験からおすすめしたいと思うものをいくつか紹介します。
Visual Studio Code（エディター）
まずエディター環境はマイクロソフト社が出している無料アプリ、Visual Studio Codeを使っています。VSCodeと呼ばれていて、以下のサイトから無料でダウンロードすることができます。
https://code.visualstudio.com/
何も知らなかった一番最初は、Windowsのメモ帳を使っていたこともありましたが、専用のアプリの便利機能には驚かされます。
このアプリを使うメリットが説明されたサイトはたくさんありますが、私が感じているのは次のような点です。
- 見た目のカスタマイズを自分の好みでいろいろ設定できる
- プログラムをわかりやすく書くために必要な、インデント（行頭に段差をつけて揃えること）がわかりやすい。
- 自動でインデントを揃えてくれる。
developer network等でコピーしてきたソースは、インデントが無くなっていて分かりづらくなっていることが多いけど、インデントを自動で整えてくれる機能がある。 - カッコや変数などの自動補填機能が充実している。
１つ目のカッコを入力したら、自動的に閉じカッコも生成される。
kintoneカスタマイズで使っているエディターについて詳しく説明した動画です。初心者の方はぜひこちらも見てくだいね！
JSEdit（kintoneプラグイン）
通常のカスタマイズ開発は、次のよう手順が必要になります。場合によっては３，４のステップを何回も繰り返すことになります。
- エディター等でJavaScriptを作成してファイルに保存
- kintoneのアプリの設定画面からアップロードし、動作確認
- エラーがある場合はエディターに戻って内容を修正し、再度ファイル保存
- kintoneに再度アップロードし直す
このJSEditは、kintoneのプラグインです。アプリにこのプラグインを入れると、上記の手順がkintoneの中だけで完結します。kintoneの画面の中でプログラムを書いたり修正し、保存ボタンを押すと直接kintoneに反映される、という開発工程の圧倒的シンプルさは感動ものです。
下のdeveloper networkのサイトでその使い方が詳しく説明されています。このプラグインも必ずインストールしておきましょう。
カスタマイズを作るプロセス
特に初心者は、一つ一つ確認しながら積み上げていく
少し複雑な複数の処理を含む長いプログラムを書いて、いきなり動作確認を行い、エラーで動かないとき、エラーとなっている箇所を探し出すことはかなり大変です。特に初心者の頃は、すべての書き方に自信が持てないので、なるべく小さい範囲をまず作ってみて、「ここまでは思ったとおりに動いている」ことを確認しながら、機能を積み上げていくという作り方をオススメします。
この方法は大きな手間がかかるように感じますが、内容を理解しながら作り上げていく過程を経験するのは、非常に学びの大きいプロセスではないかと考えています。
段階的に確認を行うためのテクニック
- コメントアウト
プログラムの一部を一時的に動作しないようにして、動作範囲を絞るテクニック。下記のサイトで詳しく説明されています。 - アラート表示
変数の内容や、プログラムがどういう動作をしているかを知るために、ウィンドウにアラートを表示させる方法があります。
ブラウザーのデベロッパーツールと仲良くなる（Chrome）
ブラウザーにはそれぞれ、デベロッパーツールというものが用意されています。これを使うことでJavaScriptを実行したときのエラーを確認したり、プログラムを途中で止めながら実行させたり、状況をログで確認するといった、開発時には必ずといっていいほど使う機能があります。
どのブラウザーも用意されている機能ではあるものの、ネット上の情報の充実さもあって、私はChromeをいつも使っています。
デベロッパーツールの活用方法については、以下に詳しく説明されています。kintoneカスタマイズを行うときは、必ず使いましょう！
developer network は学習ネタの宝庫
最後に、学習の進め方についてもう一度振り返ってみましょう。
われわれにはdeveloper networkがあります。ここにはさまざまなカスタマイズのサンプルがありますし、コミュニティではカスタマイズに悩んでいる人の相談に、有志のアドバイスやアイデアが詰まっています。
私はここに投稿される書き込みがあれば、通知を受け取るようにして、いつも必ず目を通すようにしています。そして自分ができそうな課題がそこにあるようなら、自分のkintone開発環境の中に検証用のアプリを作って、実際にカスタマイズを試してみます。
動かなくて悩んでいるプログラムが公開されている場合は、それを実際にアプリに適用してみて、何がおかしいのかデバッグをしてみたり、別のアイデアを検証してみたりします。
もっと学びたい人はドリルにチャレンジ！
kintoneアプリを使うときによくあるカスタマイズシーンを題材として、kintoneカスタマイズを段階的に学んでいくという、初心者向けの学習コンテンツを、YouTube動画と連動する形で作成しています。
JavaScriptだけではなく、アプリを実際に利用するシーンで出てくる課題を、どのように考えてkintoneカスタマイズを作っていくか、段階的に学べるような講座を目指しています。こちらもぜひご活用ください。
インプットから、アウトプットへ
こうやっていろいろな人の課題や悩みを追体験していくと、これまでに説明してきたレベル１や２のカスタマイズを行うための基本的な知識やスキルで悩んでいる人が意外と多いことに気付かされます。
それとともに、始めは自分が必要なカスタマイズを自分で作れるようになりたいと、漠然と思っていたことに変化が起こり始めました。
はじめに話したとおり、kintoneの標準機能はシンプルなもの。これは今後もきっと変わらないと予想します。そうなると、使う側によって標準機能の独自のことをやりたい場合は、多かれ少なかれカスタマイズを扱わざるを得ないと思っています。このように必要性にかられて、いわゆるプロのエンジニア・プログラマーではない人（私を含めて）が、kintoneカスタマイズにチャレンジをするケースはこれからもっとkintoneが普及していくにつれて多くなってくると予想されます。
自分が作れるようになる、から「作れるようになるまでの過程をもう少し体系化して、広めていきたい」と思うようになってきました。
最近は、kintone Caféのコミュニティでもそういうテーマについて話をさせていただく機会もできてきました。プロジェクト・アスノートの活動でやりたいことがもう一つできました。それは「kintoneカスタマイズもできる業務改善職」を増やすこと！
同じような志を持っている人は、ぜひ一緒にやりませんか？
この記事がみなさまのステップアップのための参考になれば幸いです。メリークリスマス！
最近のプレゼンの資料はこちら
https://speakerdeck.com/shokun1108
★この記事は「kintone Advent Calendar 2018」の９日目の記事です。
kintone導入・活用のご相談はこちら！
◇ kintone導入がなかなか進まない
◇ アプリが思ったような動きをしてくれない・・・
◇ カスタマイズやプラグインをどう選んだらいいの？？
◇ 業務改善の進め方がよくわからない
サイボウズ公認 kintone エバンジェリストの 松田正太郎があなたの相談相手になります。
保有しているkintone認定資格：
・kintone認定アソシエイト（2017）
・kintone認定アプリデザインスペシャリスト（2017）
・kintone認定カスタマイズスペシャリスト（2020）
★業務改善アドバイス、kintone構築支援
★連携サービス・プラグイン選定支援、カスタマイズ
★詳細ヒアリングの上、御社に最適なプランを提案します
★初回打合せ（2時間程度）は無料。まずはお問い合わせください！（WebミーティングOK）