[kintone Café 大阪ハンズオン向け]kintoneに条件書式プラグインを組み込もう

# 概要
本コンテンツは、[kintone Café 大阪主催のハンズオン](https://kintonecafe-osaka.doorkeeper.jp/events/42313)向けに作成したものです。
下図の通り、IoTデバイス(RaspberryPi)でセンシングしたデータを可視化することが目標です。
通信にはWi-Fiまたは3Gを利用します。
可視化にはkintone標準のグラフ機能、およびサイボウズスタートアップスのkViewerを使います。

![Qiita.png](https://qiita-image-store.s3.amazonaws.com/0/30557/85e6ec23-d4f4-677e-9a3b-ccd6c323c0af.png)

本記事では、 **7.条件書式プラグインの設定** 部分について説明します。

## 7.条件書式プラグインの設定
### 7-a.プラグインのダウンロード
[条件書式プラグイン 2.0](https://cybozudev.zendesk.com/hc/ja/articles/208236353)のページの下部に、**パッケージングしたサンプル**と書かれたzipファイルのリンクがあるので、ここから**conditionformat_v2.1.0.zip**をダウンロードします。
<font color="red">**※ダウンロードしたzipファイルは展開しないで下さい。**</font>
<img width="456" alt="31.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/9409238a-65f1-f500-6e46-695f0feb3efe.png">
<img width="260" alt="32.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/17c19d8d-96cc-8d3d-e093-0cfc19489dd2.png">

### 7-b.kintoneへのプラグインのインストール
kintoneのポータル画面右上の**歯車印**から**「kintoneシステム管理」**を選択します。
<img width="465" alt="33.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/3f01ee10-ae8a-6fc7-6d3f-ae09a31aaacb.png">

**kintoneシステム管理画面**の「その他」の項目の**「プラグイン」**を選択します。
<img width="216" alt="34.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/dd9559df-6078-d3b6-8c28-87b36420cc1e.png">

プラグイン画面で**「読み込む」**をクリックします。
<img width="689" alt="35.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/819b38dd-1593-96ef-f4b4-e748b6fd2a69.png">

**「プラグインの読み込み」**画面で先ほどダウンロードした**conditionformat_v2.1.0.zip**を選択して「読み込む」をクリックして下さい。
<img width="682" alt="37.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/5b9ed69a-6c4a-6a82-fba2-b1b97077bf7d.png">

**条件書式プラグイン**が表示されていればOKです。
<img width="681" alt="38.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/1dbc0840-d461-7033-b98e-684449f3d581.png">

### 7-c.kintoneアプリでプラグインを有効化する
この状態では、kintoneにプラグインはインストールしましたが、まだアプリで利用できる状態にはなっていません。kintoneアプリで利用出来る状態にします。

照度データ蓄積アプリを開きます。
<img width="605" alt="39.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/75b14556-f3bd-d2f1-ef20-7d46b1c69775.png">

アプリの設定画面を開くため、右上の**「・・・」印**をクリックし**「アプリの設定を変更」**を選択します。
<img width="604" alt="40.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/cfe0228a-d5db-20ce-73c4-2ad4d05c22fd.png">

画面下に**「詳細設定」**のプルダウンがあるので、こちらをクリックします。
<img width="683" alt="41.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/49dc933d-8110-c1ea-b23e-86335ac6aa52.png">

すると、**「プラグイン」**メニューが出てきますので、こちらをクリックします。
<img width="575" alt="42.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/a64f6757-0ce9-7c59-c4d2-791120fc4b14.png">

**「プラグインの追加」**をクリックします。
<img width="690" alt="43.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/f3ee44ec-e996-31c2-5309-20f04ba6cb9f.png">

**「条件書式プラグイン」**が表示されますので、チェックボックスにチェックを入れ、「追加」をクリックして下さい。
<img width="541" alt="45.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/3ef7a2dd-d725-2db2-7c70-89c378dd8f5f.png">

プラグインを追加した後は、アプリの「設定完了」ボタンのクリックが必要です。
リンクからアプリ設定画面に移動します。
<img width="688" alt="46.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/65fb6f31-9487-8d55-938a-2b6d29dd44fb.png">


「設定完了」ボタンを押して、「運用環境に適用」のボタンをクリックすると、プラグインがアプリで有効となります。
<img width="598" alt="47.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/f39023d0-e5fd-8f4d-6aac-707df7f76d02.png">

### 7-d.プラグインを実際に設定してみよう
[条件書式プラグイン 2.0  | STEP3:プラグインを設定する](https://cybozudev.zendesk.com/hc/ja/articles/208236353) を参考にしながら、条件式を設定して、特定の条件に対してフィールドに色を付けてみましょう。

**例：照度が20となっているフィールドの背景色を変更** 
<img width="682" alt="59.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/48e3c556-9d36-4a03-2032-32547fc00fb2.png">

この例の条件設定では、下記のようになります。
<img width="441" alt="60.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/f6611d95-0617-b953-d763-524c4f00ae16.png">