新しいサービス【AwesomeQR】

【たった5分】kintoneのセルに色をつけてみた!【無料】

2 min 9,272 views

ゴール

はじめに、今回の最終イメージをご覧ください。

今回は、Excelのように、ある条件によって、セルに色を付けてみたり、文字に装飾をしてみたりできるやり方をシェアします。

はじめに

実は「kintone 色付け」などで、ググると以下のサイトでやり方が書いてあります。

ですが、Githubからデータダウンロードして、kintoneへアップロードするまでが、この記事だけですといまいちわからなかったので、個人的なメモとしてシェアします。

準備

今回、必要なものを以下にあげます。

  • ウェブブラウザ(Google chromeなど)
  • kintoneアカウント
  • Githubアカウント

実装

それでは、やり方を解説していきます。

  1. STEP

    Githubにアクセスする

    まず、Githubのアカウントを登録されてない方は、以下の記事を参考に登録してください。

    その後、以下のサイトにアクセスしましょう。

    アクセスしたら、以下の画像のように、「code」をクリックして、「Download ZIP」をクリックして、ZIPファイルをダウンロードしましょう。

  2. STEP

    ZIPファイルの作成

    続いて、プラグインとしてアップロードできるようにZIPファイルを作成していきます。

    まずは、ダウンロードしたZIPファイルを展開します。

    展開した後に、今回必要なプラグインのファイル(conditionformat2)を以下のサイトにドラッグアンドドロップしてプラグイン用のZIPファイルを作成します。

    ファイルは、下図のように「plugin-samples-master」>「plugin-samples-master」>「examples」内の「conditionformat2」を使用します。

    上記のように、左の枠のところに、「conditionformat2」のファイルをドラッグアンドドロップして、「Create」ボダンをクリックすると、プラグイン用のZIPファイルを自動で作成してくれますので、こちらをクリックしてダウンロードしておきます。

  3. STEP

    kintoneにアップロード

    続いて、kintoneにプラグイン用のZIPファイルをアップロードしていきます。

    下図のように、kintoneシステム管理の画面から、プラグインをクリックします。

    プラグインの画面の左上あたりにある読み込むボタンをクリックします。

    上図ではすでに「条件式書式プラグイン」が入っておりますが、まだ入れてない場合はこちらは入っておりません。

    Step2でダウンロードしたファイルを選択して、読み込むボタンをクリックします。

    これで、プラグインをシステム内に読み込むことに成功しました。

  4. STEP

    アプリにプラグインを設定する

    最後に、入れたいアプリにプラグインを設定します。

    アプリの設定画面の設定プラグインをクリックします。

    プラグインの画面の左上あたりのプラグインの追加をクリックします。

    プラグインの追加の画面から、Step3で追加したプラグインに✅をつけて、追加ボタンをクリックします。

    以上で、プラグイン追加の設定は終わりです。所要時間としてはだいたい5分くらいではないかと思います。

テスト

プラグインを入れてみましてので、サンプルで試してみたいと思います。

アプリの設定画面のプラグインから、設定ののマークをクリックします。

下図のように、赤枠の部分に条件式を設定して、青枠のところに、実際に色や文字の装飾をしたいセルへの設定をします。

すると、下図のように、なります。

一列ごとに色付けされているのは、個別のCSSで設定しております。

さいごに

いかがだったでしょうか。今後も、kintoneのTipsについてシェアできたらと思います。

関連記事