こんにちは、kikuです。サイボウズのkintoneを使用したアプリ開発、プラグイン開発、業務改善のサポートを行っています。
キントーンでは標準機能では満たせないちょっとしたことは、JavaScriptを利用したカスタマイズにより機能拡張することが出来ます。やろうと思えば色々と出来きますが、キントーンでの開発をこれから始めようという方やどんなことが出来るのかわからない方にとっては、どこから手をつければよいのか、どうやって調べればよいのか迷うことが多いです。
そんな時に有効なのが、Cybozu Developer Networkです。このサイトを私もよく参照し、解決策を見つけるヒントをいただいています。とはいえ、Cybozu Developer Networkを利用し始めた当初は慣れていないため、多くの記事の中から欲しい情報を探すのに一苦労した経験があります。
今回はCybozu Developer Networkから、kintoneのカスタマイズをやり始めた際に役に立った記事を厳選してご紹介します。少しでも開発のお役に立てていただければと思っています。
目次
cybozu Developer Networkとは
「cybozu developer network」 は、開発者同士が課題を解決し合えるオープンなコミュニティのことです。API ドキュメントを調べたり、Tipsやサンプルプログラムなどに質問したり、コミュニティを通じて他のデベロッパーに質問することができます。主にkintoneとGaroonのTipsが多いです。
開発者ライセンスを取得することもココからできますので、開発用環境を無償で利用することが出来るようになります。キントーンにカスタマイズして機能を追加したいような方は是非開発者ライセンスを取得しましょう。
以下から、kintone開発初心者にお勧めな記事です。
kintone上でJavaScriptやCSSを編集できるプラグイン
kintoneでカスタマイズするには、処理を書いたファイルをkintoneにアップロードする必要があります。ファイルの修正の度にアップロードするのは非常に手間がかかります。ちょっとしたカスタマイズを入れたいというときに、ブラウザで手軽にJavaScriptを触れたら・・・
そんな声から出来たkintoneのプラグインが「JSEdit for kintone」のようです。
特別なエディターを使用せずにブラウザでJavaScriptやCSSファイルの編集・更新が出来るようになりますので、アップロードの手間が軽減されてとても便利です。詳しくは以下から。
kintone上でカスタムJSやCSSを編集できるプラグイン「JSEdit for kintone」を使ってみよう
利用時のちょっとしたポイントとしては、「編集を入れたいアプリ画面」と「プラグインの画面」を別タブで両方表示しておくことです。「JSEdit for kintone」で保存後、アプリ画面を更新すれば処理内容が反映されますので、編集した点の動きをすぐに確認することが出来るようになります。
Chrome開発者ツール（デベロッパーツール）の便利な使い方
JavaScriptでロジックを書いた後は、動作確認をして意図したとおりに動くかを確認する必要があります。ロジックを入れてアプリを動かしてみても、思ったとおりに動いていない。。
そんな時の確認に便利なのが、Chrome開発者ツール（デベロッパーツール）を使うことです。この機能を利用することでデバッグ作業が捗ります。
Chrome開発者ツール（デベロッパーツール）の便利な使い方
このChrome開発者ツールを使うことで、次のようなことをすることが出来ます。
- Console.log(‘xxxx’);を埋め込んで処理が通っているかやパラメータの内容を確認する
- エラーが発生していないか、エラーの内容を確認する
- REST APIのサンプルを実行する
その他、CSSやHTML回りのカスタマイズをする際は、対象箇所にカーソルを合わせて右クリック→検証 をすることで要素が見えるようになるので地味に便利です。
イベントのPC/スマートフォン対応早見表
kintone JavaScript APIでは、レコード一覧画面表示後やレコード追加画面の保存実行前のイベントなど、様々なイベントが用意されています。しかし、イベント毎に
- PC用のみで対応できるイベント
- スマートフォン用（モバイル用）のみで対応できるイベント
- PC用/スマートフォン用の両方で対応しているイベント
というのが分かれているため、モバイルでの利用を検討している場合は注意が必要です。イベント毎にどれに対応しているのかを分かりやすくまとまっているのが次の記事です。
ちなみに、スマートフォン用というのは、スマホアプリ「kintone」起動時に表示される画面のことを指しています。PC用比べるとモバイル用イベントは対応していないものが多いのが残念な点です。
まとめ
今回は、kintoneのカスタマイズをやり始めた初心者向けの参考記事をご紹介しました。どれも使ってみると便利ですので、知らなかった場合は是非使ってみてください！
また、弊社でもカスタマイズ開発に対応しておりますので、お悩みがある場合は是非ご相談ください。
