旧デザイン版 条件書式プラグイン

新デザイン対応及び機能拡張を行った「新デザイン版 条件書式プラグイン」が公開されました。
新規に条件書式プラグインを利用する場合は「新デザイン版 条件書式プラグイン」の利用を推奨します。

Index

• 注意事項
• 概要
• サンプルプラグイン
• 制限事項
• 利用している OSS のライセンス情報

注意事項

• サンプルプラグインは、その動作を保証するものではありません。
• サンプルプラグインの技術的なサポート等は行っていません。
• kintoneプラグインはスタンダードコースでのみご利用いただけます。ライトコースではご利用いただけませんのでご注意ください。

概要

サンプルで公開している 「レコード一覧で条件書式を設定する」 のJavaScriptプログラムをプラグインにする手順を紹介します。
作業の詳細は kintone プラグイン開発手順 をご確認ください。
2016/02/26：本プラグインの新デザイン対応及び機能拡張を行った「新デザイン対応版条件書式プラグイン」が公開されました。

完成イメージ

このプラグインを利用したアプリのイメージです。

アプリ

設定画面

サンプルプラグイン

GitHubにアクセスしてフォルダごとダウンロードしてください。そのフォルダ内の「examples/conditionformat」に、今回のファイル群があります。
「conditionformat」 配下のファイル構成は次のとおりです。

conditionformat/
   css/
   -51-jp-default.css
   -config.css
   html/
   -config.html
 image/
   -icon.png
 js/
   -config.js
   -cpick.js
   -desktop.js
 manifest.json

プラグインファイルの構成

フォルダ：css

• 51-jp-default.css
  サイボウズが提供しているプラグイン設定画面のスタイルです。
• config.css
  プラグイン設定画面調整用のスタイルです。

フォルダ：html

• config.html
  プラグイン設定画面のHTMLです。
  

  条件書式を表示するために次のフィールドを設定する画面にしています。

  • 書式条件フィールド
  • 条件式
  • 条件値
  • 書式編集対象フィールド
  • 色
  • サイズ
  • 一覧背景色

フォルダ：img

• icon.png
  プラグインのアイコンです
  

フォルダ：js

• config.js
  プラグイン設定画面のプログラムです。ここでは、次の処理を行っています。
  • 「保存」ボタンが押された時に、未入力項目がある場合警告を表示する。
  • 「保存」ボタンが押された時に、設定した値をプラグインの変数に代入する。
  • 「キャンセル」ボタンが押された時に、前の画面へ戻る。
  • 既にプラグインの変数が設定されている場合は、各フィールドに値を設定する。
• cpick.js
  プラグイン設定画面のカラーパレット用プログラムです。
• desktop.js
  条件書式のプログラムです。（PC用のみ）

フォルダ：manifest.json

プラグインのマニュフェストファイルです。

• Cybozu CDN のjQueryを利用しています。

パッケージング

こちらの手順を参考にパッケージングします。

パッケージングしたサンプル

プラグイン開発のためのサンプルであり、サポート対象外であることをご理解の上、ダウンロードしてください。

SAMPLE_conditionformat1_plugin.zip

インポートと設定

1. 設定画面より、ダウンロードした「plugin.zip」をkintoneシステム管理画面より読み込みます。
2. 適用するアプリの設定画面より、プラグインをインストールします。
3. プラグインの設定画面より、条件書式を設定するフィールドを設定します。

「入力値チェックプラグイン」のチュートリアル にプラグインの適用方法と動作確認を紹介していますのでご参考下さい。

制限事項

• スマートフォン用のブラウザには対応していません。
• こちらのプラグインは旧デザイン用であり、新デザインでは動作が保証されません。新デザイン版の条件書式プラグインはこちら

利用している OSS のライセンス情報

このプラグインで利用している OSS のライセンスは次のとおりです。

• cpick.js - Apache License 2.0
• jQuery - MIT License