複合グラフプラグインチュートリアル

はじめに

このチュートリアルは、アプリの作成から複合グラフを表示するまでの設定の流れをkintoneのサンプルアプリを利用して説明しています。
初めてkintoneを利用する方や複合グラフの設定を事前に理解して取り組みたい方向けのチュートリアルです。
チュートリアルを実施して、もっと複合グラフの機能を有効活用したいと思った方は、複合グラフプラグイン設定マニュアルをご活用いただければと思います。

チュートリアルの事前準備

複合グラフプラグインの初期設定やチュートリアルを進めるためのサンプルアプリの作成手順を説明します。

プラグインのインストール

注意

プラグインのインストールにはシステム管理権限が必要です。
1. ポータル画面上部の設定アイコンをクリックします。
2. 表示されるメニューから「kintoneシステム管理」をクリックします。kintoneシステム管理画面が開きます。
3. 「その他」の「プラグイン」をクリックします。
4. 画面左上の「読み込む」をクリックします。
5. 「参照」をクリックし、ダウンロードした複合グラフプラグインのファイル「kintone-plugin-graph-prod-vx-x-x.zip」を選択します。
6. 「読み込む」をクリックします。
7. 一覧に「複合グラフプラグイン」が追加されれば完了です。
アプリの作成
今回はkintoneに事前に用意されているサンプルアプリを利用します。
サンプルアプリは、アプリのひな型です。そのまま使うことも、デザインや設定を変更して使うこともできます。
1. ポータル画面上部のオプションアイコンをクリックします。
2. 表示されるメニューから「アプリを作成」をクリックします。アプリストアが開きます。
3. 左上の検索ボックスで「案件管理」と入力します。
4. 「案件管理」というアプリが出たら「このアプリを追加」をクリックします。
5. 「追加」をクリックします。
6. 「アプリが追加されました！」という吹き出しが出たらアプリの作成ができています。
7. 追加した「案件管理」アプリをクリックして開きます。
8. 「案件管理」アプリにサンプルデータが表示されていれば事前準備は完了です。

チュートリアル

チュートリアル事前準備で追加した「案件管理」アプリにプラグインを設定し、可視化できるようになるまでの手順を説明します。
今回のチュートリアルでは、案件の売上と案件数を複合グラフで作成し、案件活動の傾向と効果を可視化していきます。

案件管理アプリへプラグインを追加する
1. アプリ右上の「アプリの設定を変更する」ボタンをクリックします。
2. 設定タブをクリックします。
3. カスタマイズ／サービス連携の「プラグイン」をクリックします。
4. 「追加する」ボタンをクリックします。インストール済みのプラグイン一覧が表示されます。
5. 「複合グラフプラグイン」にチェックを入れます。
6. 右下の「追加」ボタンをクリックします。
7. 画面上部にメッセージが表示されれば、プラグインの追加は完了です。
複合グラフを設定する
kinveni 複合グラフは、1 画面上で複数のグラフを表示できます。
ここでは、「案件一覧」に複合グラフを1つ設定します。
1. プラグイン設定を開きます。
2. 「グラフを設定する一覧を選択してください」をクリックしてください。
3. どの一覧でグラフを表示するかを選択します。ここでは「案件一覧」を選択します。
4. 「新しい設定」ボタンをクリックします。
5. 「設定内容を編集してください」をクリックします。
6. 「グラフタイトル」を入力してください。ここでは「月別売上高/案件数推移」を入力します。
7. 「グラフの設定を編集してください」をクリックします。
8. 「グラフの種類」「グラフの種類（サブタイプ）」を入力してください。ここでは「縦棒グラフ」「集合」を選択します。
9. 「軸」「単位」を入力してください。ここでは軸を「見込み時期」、単位を「月単位」で選択します。
  日付フィールドの場合は、年単位や月単位といった任意の単位で軸を作成できます。
10. 「集計方法」「集計項目」「数値軸ラベル」を入力してください。ここでは集計方法を「合計」、集計項目を「小計」、数値軸ラベルに「売上」を入力します。
11. ここまでの設定で次のようなグラフが作成できます。
  今回は棒グラフに折れ線グラフを追加した複合グラフを作成するので、8～10の手順と同様に折れ線グラフの設定を追加します。
12. グレーのヘッダーまでスクロールして戻ります。「縦棒グラフ」ヘッダーをクリックし、縦棒グラフの設定を折りたたみます。
13. 右端の「+」ボタンをクリックしてグラフの設定を新しく追加してください。
  グラフの設定が追加されると、縦棒グラフ設定の下にグレーのアコーディオンメニューが追加されます。
  「グラフの設定を編集してください」をクリックして、編集を行います。
14. 「グラフの種類」を入力してください。ここでは「折れ線グラフ」を選択します。
15. 「軸」「単位」を入力してください。ここでは軸を「見込み時期」、単位を「月単位」で選択します。
  
  注意
  
  グラフ設定内で一番上の設定（今回は縦棒グラフのデータ）を基準にグラフの軸が作成されます。
  複合グラフを作成する際は、グラフ間で軸データの粒度や値の種類を合わせてください。
  （今回の例）縦棒グラフを日単位にする場合は、折れ線グラフの軸設定も日単位にしてください。
16. 「第二軸に設定する」にチェックを入れてください。
  8 ～ 10 の手順で作成した棒グラフと数値の範囲が異なるため、折れ線グラフは右側の軸でデータをプロットします。
17. 「集計方法」「数値軸ラベル」を入力してください。
  ここでは集計方法を「レコード数」、数値軸ラベルに「案件数」を入力します。
18. これで手順はすべて完了しました。画面下部にある「設定を保存」ボタンをクリックします。
19. 画面左下にメッセージが表示されればプラグインの設定は保存されています。
アプリを更新する
1. 「アプリの設定」をクリックします。アプリの設定画面が表示されます。
2. アプリに変更を適用します。「アプリを更新」ボタンをクリックします。
3. 確認ダイアログが表示されるので、「アプリを更新」ボタンをクリックします。
4. アプリの更新が始まります。完了すると「案件一覧」画面が表示されます。複合グラフが表示されていればプラグインの設定が正しく反映されています。

おわりに

お疲れ様でした。複合グラフプラグインを使って、案件の進捗状況や営業活動の見える化に役立ててください。