cybozu developer network

カテゴリー内の他の記事

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

はじめに

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

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

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

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

203480420-5.jpg

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

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

アイコンファイル

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

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 の内容だけでかまいません。

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

203480420-1.jpg

ファイルを作成したら、名前を付けて保存します。文字コードは 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. 「プラグインの追加」ボタンを押下します。
    kintone_app-add_plugin1.png
  6. 「入力値チェックプラグイン」横のチェックをつけ、「追加」ボタンを押下します。
    入力値チェックプラグインが、「顧客リスト」アプリに適用されます。
    kintone_app-add_plugin2.png
  7. 設定画面でプラグインの設定を行います。
    歯車マークを押下します。入力値チェックプラグインの設定画面が表示されます。
    kintone_app-setting.png
  8. 入力値をチェックしたいフィールドを設定します。
    設定が完了したら、「保存」ボタンを押下して設定を完了します。
  9. アプリの動作確認をしてみましょう。
    顧客リストの郵便番号、TEL、メールの入力をチェックする」の JavaScript サンプルと同じ動きをしているでしょうか?

サンプルプラグイン

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

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

おわりに

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

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

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

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

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

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

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

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をよろしくお願いいたします。

Avatar
Toshi Akazawa

本記事の内容をcopyしてそれぞれファイルを作成し、プラグインもちゃんと生成され、ちゃんと動作することも確認できました。どうもありがとうございました。

さて、記事の趣旨とは異なり、些細なことで恐縮なのですが以下の指摘をさせてください。


(1)conflictのスペル
文書中にあります、「jQuery.noConfilict();」のスペルが間違っているようです。正しくは「jQuery.noConflict();」かと思います。


(2)「※他のプラグインや、・・・jQuery.noConfilict();を記述することを推奨します。」が2箇所ありますが、「PC用JavaScriptファイル」の項に記載の注意書きは必ずしも必要はないように思えます。念のための記載かもしれませんが。


(3)config.jsの14行目
「/'/g, '"'」は「/"/g, '"'」ではないでしょうか。つまり、最初のシングルクォーテーションは、シングルクォーテーションではなくダブルクォーテーションではないかと。

Avatar
cybozu Development team

Toshi Akazawa様

cybozu developer networkをご活用いただき、ありがとうございます。

そしてご丁寧にご指摘いただき、ありがとうございました。確認のうえ、修正させていただきます。

今後ともどうぞよろしくお願いいたします。

Avatar
cybozu Development team

たつ 様

お世話になっております。 cybozu developer network 運営事務局でございます。

こちらのコメント欄は記事シナリオに直接関係のあるフィードバックを受け付けるコメント欄となっております。
ご自身の環境に合わせてカスタマイズを変更する上で発生した疑問点につきましては、
コミュニティ(kintoneのカスタマイズフォーラム)への投稿をご案内しています。

申し訳ございませんが、どうぞよろしくお願いいたします。

Avatar
T.H

文中の
51-modern-default.css の入手方法
のGithubのリンクが間違っているように見えます。
https://github.com/kintone-samples

https://github.com/kintone-samples/plugin-samples

ご確認いただけますでしょうか。
よろしくお願いします。

T.Hにより編集されました
Avatar
cybozu Development team

T.H 様

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

大変失礼いたしました。

ご指摘のとおりでしたので、51-modern-default.css の入手方法のリンク先の修正をいたしました。

フィードバックをありがとうございました。
今後ともcybozu developer networkをよろしくお願いいたします。

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