入力値チェックプラグイン作成例

はじめに

kintone プラグイン開発手順 では、プラグイン開発に必要なファイルやプラグインファイルをパッケージングする手順を紹介しました。

この記事では、サンプルカテゴリに掲載している「顧客リストの郵便番号、TEL、メールの入力をチェックする」のJavaScriptサンプルを例に、実際にプラグインファイルを作成してみましょう。

手順0. プラグイン用アプリの準備

kintone アプリストア にある「顧客リスト」アプリを利用します。

手順1. プラグイン作成に必要なファイルの準備

kintone プラグイン開発手順 にしたがって、ファイルを作成します。

アイコンファイル

下記のようなアイコンファイルをペイントで作成しました。
ファイル名は「check.png」とします。

PC用JavaScriptファイル

サンプルを参考に、PC用JavaScriptファイルを作成します。

ポイント

• 入力値をチェックするフィールド情報は、ユーザーが設定画面で保存するプラグインの設定情報を利用しています。
• プラグインの設定情報は、kintone.plugin.app.getConfig() で取得します。

ファイルが作成できたので、「check_sample.js」という名前をつけ、文字コードをUTF-8にして保存します。

PC用CSSファイル

今回は作成しません。

スマートフォン用JavaScriptファイル

今回は作成しません。

設定画面用 HTML ファイル

設定画面用 HTML ファイルを作成します。

このプラグインでは、郵便番号、電話番号、FAX番号、メールアドレスの入力値をチェックできます。
設定画面では、これら4つのチェックをどのフィールドに対して行うのかを、それぞれドロップダウンで設定できるようにします。
ドロップダウンの値候補は、のちほど作成する設定画面用の JavaScript ファイルで表示させることを想定しています。

ポイント

• 設定画面用 HTML は body の内容だけでかまいません。

ブラウザで表示させると、以下のように表示されます。

ファイルを作成したら、名前を付けて保存します。文字コードは UTF-8 を指定してください。
今回は、「check_config.html」という名前をつけました。

設定画面用 JavaScript ファイル

設定画面用 JavaScript ファイルを作成します。

このプラグインの設定画面では、以下の処理を行います。

• プラグインの設定情報が設定済みの場合、フィールドに値を設定する。
• アプリのフィールド情報を取得し、ドロップダウンの値候補としてセットする。
• 「保存する」ボタンが押されたとき、空欄のフィールドがあれば警告を出す。
• 「保存する」ボタンが押されたとき、この画面で入力された情報をプラグインの設定情報として保存する。
• 「キャンセル」ボタンが押されたとき、前の画面へ戻る。

ポイント

• kintone.plugin.app.getConfig() で、プラグインの設定情報を取得しています。
• kintone.plugin.app.setConfig() で、この画面で入力された情報をプラグインの設定情報に保存しています。
• アプリのフォームに配置してあるフィールド情報は、アプリのフォーム設計情報を取得できるライブラリ「kintone-config-helper」（kintone-config-helper.js）を利用して取得しています。
  ライブラリの詳細は、kintone-config-helper についてをご参照ください。
• このプラグインでは、JQuery の関数を利用しています。
• 他プラグインや他 JavaScript カスタマイズとの競合を避けるため、jQuery.noConflict(); を記述することを推奨します。

ファイルが作成できたので、「config.js」という名前をつけ、文字コードを UTF-8 にして保存します。

設定画面用CSSファイル

設定画面用のCSSファイルを作成します。

このプラグインでは、設定画面の各項目の間隔を調整します。
ボタンやラベルの装飾には、kintone デザインと調和させるために「51-modern-default.css」のクラスを利用しています。詳しくは、スタイルシートの利用をご参照ください。

ファイルが作成できたので、「check_config.css」という名前をつけ、文字コードを UTF-8 にして保存します。

手順2. マニフェストファイルの作成

マニフェストファイルを作成します。

1. 作成した各ファイルを下図のように配置してみましょう。
   ※ ファイル名やフォルダー構成は自由なので、下図は一例です。
   
   
   • kintone-config-helper.js の入手方法
     • GitHub にアクセスし、「Clone or download」ボタンから zip ファイルをダウンロードします。
       zip ファイルを解凍後、dist フォルダー下の「kintone-config-helper.js」を利用します。
   • 51-modern-default.css の入手方法
     • GitHub にアクセスし、「Clone or download」ボタンから zip ファイルをダウンロードします。
       zip ファイル解凍後、stylesheet フォルダー下の「51-modern-default.css」を利用します。
2. マニフェストファイルを作成しましょう。
   • マニフェストファイルに記述するファイルパスは、1. で配置した各ファイルの階層と合わせてください。
   • このプラグインでは、jQuery を利用しているため、jQueryファイルの読み込みが必要です。
     今回は、Cybozu CDN を利用して jQuery ファイルを読み込むので、マニフェストファイルにURLを記載しています。
3. 作成したファイルは「manifest.json」という名前をつけ、文字コードをUTF-8にして保存します。
   今回の保存先は、check_plugin ディレクトリ直下とします。
   

手順3. パッケージング

plugin-packer を利用して、パッケージングします。
plugin-packer のインストール方法やツールの詳細は、plugin-packerを使ってプラグインファイルをパッケージングしよう！をご参照ください。

1. plugin-packer をインストールしていない場合は、以下のコマンドを実行します。
2. check_plugin ディレクトリのひとつ上のディレクトリに移動します。上図の配置の場合、「work」に移動します。
3. 下記のコマンドを実行すると、自動でパッケージングが開始されます。 実行に成功すると、成功メッセージが表示されます。
4. check_plugin ディレクトリに、プラグインファイル (plugin.zip) と秘密鍵ファイル (ppkファイル) が生成されます。
   秘密鍵ファイルのファイル名である「hkfgjeehkaajnbmfojmpbgcpfalbfhjn」はプラグインIDです。この値はプラグインによってランダムに一意な値が割り振られます。
   

手順4. インストール＆動作確認

作成したプラグインファイルを、手順0.で作成した「顧客リスト」アプリに適用してみましょう。

1. プラグインファイルを kintone にインストールします。
   「kintone システム管理」から「プラグイン」を開きます。
2. 「読み込む」ボタンを押下します。
   
3. 作成した plugin.zip を指定し、「読み込む」ボタンを押下します。
   作成したプラグインが kintone にインストールされます。
   
4. インストールしたプラグインを「顧客リスト」アプリに適用します。
   「顧客リスト」アプリで、「アプリの設定」から「プラグイン」を開きます。
5. 「プラグインの追加」ボタンを押下します。
   
6. 「入力値チェックプラグイン」横のチェックをつけ、「追加」ボタンを押下します。
   入力値チェックプラグインが、「顧客リスト」アプリに適用されます。
   
7. 設定画面でプラグインの設定を行います。
   歯車マークを押下します。入力値チェックプラグインの設定画面が表示されます。
   
8. 入力値をチェックしたいフィールドを設定します。
   設定が完了したら、「保存」ボタンを押下して設定を完了します。
   
9. アプリの動作確認をしてみましょう。
   「顧客リストの郵便番号、TEL、メールの入力をチェックする」の JavaScript サンプルと同じ動きをしているでしょうか？
   

サンプルプラグイン

今回作成した「入力値チェック」プラグインは、下記リンク先にて公開しています。

入力値チェックプラグイン(サンプル)

おわりに

今回は「顧客リストの郵便番号、TEL、メールの入力をチェックする」の JavaScript サンプルを例に、実際にプラグインを作成しました。

今回作成したプラグインの重要なポイントは、以下のとおりです。

• 設定画面では、
  • アプリフォーム設計情報取得ライブラリ（kintone-config-helper）を利用して、入力値をチェックしたいフォームのフィールド情報を取得する。
  • この画面で入力された入力値をチェックするフィールドの設定を、プラグインの設定情報として保存する。
• カスタマイズファイル（今回はPC用JavaScript ファイル）では、プラグインの設定情報を読み込んで利用する。

この記事で確認した内容を応用して、ぜひ Tips にあるサンプルコードのプラグイン化やオリジナルプラグインを作ってみてください。

この記事の内容は、2019年2月版 kintoneで確認したものになります。