カテゴリー内の他の記事

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

フォローする

はじめに

サンプルカテゴリに掲載している、「顧客リストの郵便番号、TEL、メールの入力をチェックする」のJavaScriptサンプルをプラグイン化する手順を例として紹介します。

プラグイン用アプリを準備する

サンプルと同様の処理をするプラグインを作成するので、アプリもkintone アプリストア  にある「顧客リスト」を使います。

203480420-5.jpg

各ファイルの作成

kintoneプラグイン開発手順に従って、ファイルを作成していきます

アイコンファイル   

今回は下記のようなアイコンファイルをペイントで作成しました。

ファイル名は「check.png」としました。

check.png

設定画面用HTML

今回は、「郵便番号」「TEL」「FAX」「メールアドレス」の4つのフィールドのフィールドコードを設定する設定画面を作成します。設定する部分は、後程作成する設定画面用のJavaScriptでドロップダウンに候補を表示させることを想定して作成します。
尚、設定画面用HTMLはbodyの内容だけ記述で問題ないです。

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

203480420-1.jpg

作成したら、名前を付けて文字コードをUTF-8にして保存をします。今回は「check_config.html」という名前をつけました。

設定画面用JavaScriptファイル 

 今回設定画面で加える処理は、以下の通りです。

  • 既に設定値が設定されている場合は、フィールドに値を設定する。
  • 「保存する」ボタンが押された時に、空欄のフィールドがあれば警告をだす。
  • 「保存する」ボタンが押された時に、設定した値を変数に代入する。
  • 「キャンセル」ボタンが押された時に、前の画面へ戻る。

※jQueryのファイルを同梱させるため、JQueryの関数利用していきます。
※プラグインIDを取得するために、kintone.plugin.app.getConfig()を利用しています
※設定値を保存するために、kintone.plugin.app.setConfig()を利用しています
※他プラグインや、他JavaScriptカスタマイズとの競合を避けるために、jQuery.noConfilict();を記述することを推奨します。

今回は全てインプットボックスで設定値を設定するので必要ないですが、ドロップダウンなどで設定値を設定する際にはこの画面でkintone.apiを実行してフィールド情報を取得するといった処理が必要になります。

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

設定画面用CSSファイル 

設定画面用のCSSファイルを作成します。今回は各項目の間隔を調整するためCSSファイルを作成しました。また、ボタンやラベルの装飾には「51-modern-default.css」のクラスを利用します。詳しくは、スタイルシートの利用をご参照ください。

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

PC用JavaScriptファイル 

サンプルを参考にJavaScriptファイルを作成します。ポイントは、設定画面から取得する値を利用して入力値チェックをする所です。

※他プラグインや、他JavaScriptカスタマイズとの競合を避けるために、jQuery.noConfilict();を記述することを推奨します。

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

PC用CSSファイル 

カスタマイズビューを利用したプラグインなどで重宝しますが、今回は省略します。

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

今回は省略します。

マニフェストファイルの作成

マニフェストファイルの作成の前に以下のような階層でフォルダを作成し、各ファイルを配置しておきます。作成したファイル以外にも、jQueryファイルを読み込ませますが今回はCybozu CDNを利用するため、マニフェストファイルに後程URLを記載します。作成したファイル以外に階層の作り方は制限がないため、自由に作成することができます。

check_plugin/
 image/
-check.png html/
-check_config.html
js/ -check_sample.js
-config.js
css/
-check_config.css
-51-modern-default.css

それでは、マニフェストファイルを作成していきます。

作成したファイルはファイル名「manifest.json」として文字コードをUTF-8にして保存します。
また、check_pluginディレクトリ直下に配置します。

パッケージング

今回はWindows環境で、cygwinを利用してパッケージングしていきます。また、パッケージングツール「package.sh」をcheck_pluginディレクトリ直下に配置します。
今回は、これまでに作った以下のディレクトリをCドライブ直下に配置します。

check_plugin/
package.sh
manifest.json image/
-check.png
html/
-check_config.html js/ -check_sample.js
-config.js
css/
-check_config.css
-51-modern-default.css

cygwinを立ち上げて、check_pluginディレクトリに移動します。

$ cd /cygdrive/c/check_plugin

パッケージングツールを実行します。引数として、manifest.jsonが配置してあるディレクトリを指定します。今回はカレントディレクトリなので./と指定します。

$ sh package.sh ./

成功すると、下記のフォルダ構成で新しくフォルダ及びファイルが作成されます。「hkfgjeehkaajnbmfojmpbgcpfalbfhjn」はプラグインIDであり、プラグインによってランダムで一意な値が割り振られます。

keys/
  - check_plugin.hkfgjeehkaajnbmfojmpbgcpfalbfhjn.ppk //秘密鍵ファイル
plugins/
/hkfgjeehkaajnbmfojmpbgcpfalbfhjn
  - plugin.zip //パッケージファイル

4.インポート&動作確認

 作成した「plugin.zip」を kintoneシステム管理 > プラグイン 画面より読み込みます。

「読み込む」を押下します。

 作成した「plugin.zip」を読み込みます。

始めに作成した、「顧客リスト」アプリに適用します。

203480420-2.jpg

必要項目を設定画面で設定します。

203480420-3.jpg

設定を完了しアプリの動作確認をします。こちらのサンプルと同じ処理が実行できます。

203480420-4.jpg

5.サンプル

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

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

6.終わりに

JavaScriptのライブラリによっては、共存が難しい場合があるため、他のプラグインへの影響を考慮し、READMEなどに利用しているライブラリとバージョンを明記することを推奨します。

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

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
鎌形稔

インストールが失敗します。

プラグイン定義ファイルに指定のファイルが見当たらないといわれます。

上記のマニフェストファイルとパッケージング方法で問題無いのでしょうか?

Avatar
cybozu Development team

鎌形稔 様

お世話になっております。
cybozu developer network 事務局です。

お問い合わせいただいた件につきまして、こちらで確認したところ、
問題なくインストールできました。

ダウンロードしていただいたファイルは
こちらのページにある「checkValue_plugin.zip」ファイルでお間違えないでしょうか?

お手数おかけしますが、念のため、再度ダウンロードをしていただき、
インストールしていただいたけますでしょうか?

よろしくお願い致します。

 

cybozu Development teamにより編集されました
Avatar
鎌形稔

担当者様

そちらのページにあるファイルはインストールしていません。
このページ中に記載の方法でファイル・ディレクトリを手動作成してインストールしています。
ここは手動でのやり方を記載しているものと思っていましたが違うのでしょうか?

このページの「パッケージング」に記載のディレクトリ名とマニフェストファイルの内容が
異なっている為、インストール出来なかったようです。

Avatar
cybozu Development team

鎌形稔 様

お世話になっております。
cybozu developer network 事務局です。

大変失礼いたしました。
こちらの記事は鎌形稔 様のおしゃる通り、
プラグインを一から作成してみる方法の紹介記事でございます。

さきほど手元で試して、現象が再現できましたので、
こちら社内にフィードバックし、修正を進めさせていただきます。

ありがとうございました。
今後ともcybozu developer networkをよろしくお願いいたします。

ログインしてコメントを残してください。
Powered by Zendesk