cybozu developer network

カテゴリー内の他の記事

kintoneプラグイン開発でつまずきやすいポイント

(著者:武井 琢治)

Index

 

ここでは、kintoneでプラグインを開発する際、
よくつまずいてしまうポイントや、プラグイン開発において避けては通れない道など、
あるあるネタを中心としたTipsをまとめていきたいと思います。

なお、基本的な開発手順につきましては、こちらの記事を参照してください。

①既に設定値がある場合は、プラグイン設定画面表示時に設定値をセットする

せっかくプラグイン設定画面で規定値をセットしてもらっても、
プラグイン設定画面再表示時に、何を設定していたか表示してあげないと不親切ですね。
(例:プラグイン設定で「埼玉県」を選択したのに、再びプラグイン設定画面を開いた時にデフォルトの「北海道」に戻ってしまう)

これはプラグインのプラグイン設定画面に対するJavaScriptの中に、以下のような記述をすることで解決できます。

この場合、保存時にconf['elm']をsetConfigで保存しておき、
それが入っていれば、これは2度目以降のアクセスなのだということが分かります。
従って、$('#element')は入力必須であるか、必須でない場合は保存時にconf['elm']にデフォルト値を入れてあげる必要があります。

※jQueryライブラリを読み込む必要があります。
※上記は文字列フィールド等の場合で、プルダウンやチェックボックス等の場合にはデータの授受方法がやや異なります。

②プラグインで使用するフィールドを自動的に追加する

既存のアプリではなく、新規アプリを作成してもらうことを前提としたプラグインというものがよくあります。
その場合、フィールドまで作ってもらうのは少々気が引けます。

そこで、以下のコードを書くことで、プラグインで使用するフィールドを自動的に追加してしまいましょう。

この例では「名前」という文字列フィールドと、
「ID」という数値フィールドを追加しています。

なお、追加処理終了後にリロードしているのは、
次の章段で説明するような、作ったフィールドをすぐにプラグイン設定画面で使用したいためです。
もし「フィールドは作るだけで、別にプラグイン設定画面では使わないよ」ということであれば、リロードは不要です。

③プラグインで使用するフィールドコードを直接入力させず、存在するフィールドの中からプルダウンで選択させる

これはすなわち下図のようなUIです。

フィールドコードを直接入力させると、開発者側は楽なのですが、
ユーザー側としては「フィールドコードを確認して入力する」という手間が発生してしまいます。

これは以下のようなHTML、コードにて実現可能です。

HTML

プラグイン設定画面のJavaScript

少々ややこしいですが、概ね以下のような処理をしています。

1.フォーム情報を取得。
2.フィールドの数だけ回す。
3.そのプルダウンで表示したいフィールドタイプ(上記例の場合、文字列と日付)のものだけプルダウンに追加する。
4.ただし、既に規定値がある(以前に保存したことがある=confがある)場合は、規定値が最上位に来るようにする。

また、プラグイン設定画面の表示上は「フィールド名」にしたいため、
optionタグのテキストはフィールド名を挿入し、name属性にフィールドコードを挿入しています。
これは、後のカスタマイズでこのフィールドコードを使用するためです。

プラグイン設定保存時にプルダウンで選択された選択肢のname属性をsetConfig関数で保存しておくことで、
後のカスタマイズでそのフィールドコードを使用することが可能になります。

※「51-modern-default.css」が必要です。

おまけ

 kintone-config-helper や kintone-ui-component を使うと、上記の処理をより楽に実装できます。

  • アプリのフォーム情報を取得するライブラリ kintone-config-helper
    指定したフィールドタイプを持つフィールドだけに絞って、フィールド情報を取得できます。
  • kintone に調和する UI を生成できるライブラリ kintone-ui-component
    JavaScript 内で HTML の要素や属性を書くことなく kintone に調和する UI を生成できます。

④プラグインで使用するカスタマイズビューを自動的に追加する

プラグインでカスタマイズビューを使用することがありませんか?
私はよくあります。

そこで、以下のようにカスタマイズビューを自動的に用意してあげたら、ユーザーは楽チンですね
カスタマイズビューを自動で追加する方法は、「プラグインの設定でカスタムビューを作成する方法」でも紹介しているので、参考にしてみてください。

終わりに

プラグイン開発のあるあるTipsをお送りしましたが、いかがでしたでしょうか。
概ねどれもプラグインを作ろうと思うと通る道だったのではないかと思います。

皆様の素晴らしいkintoneプラグイン開発ライフの一助になれたら幸いでございます。

このTipsは、2016年10月版 kintoneで確認したものになります。

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

サインインしてコメントを残してください。