【kintone】表やグラフを使いこなすための第１歩

こんにちは！
今回から何回かに分けて、kintoneの表やグラフの使い方について書いていこうと思います！
kintoneじゃなくても、表やグラフが全然分からないよ～というあたりから書いていこうと思いますので、お気軽に眺めていただけると嬉しいです👀✨✨

# 表？グラフ？

表やグラフはデータを見やすく分かりやすく表現するために使います。

たとえば、下図のように
フルーツが複数種類バラバラに置かれているところを想像します。
これを種類で分けて数を数えて表にまとめてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/23fd18bf-282f-319f-6693-d026edcb493d.png)


これを表で表現するとどうなるでしょうか👀？
バナナが5房、リンゴが6個、みかんが2個、スイカ（切れてるけど）が2個なので
表はこんな感じ

| フルーツ| 個数 |
|:-:|:-:|
|バナナ   | 5 |
|りんご   |  6 |
| みかん  |   2|
| すいか(切れてるけど）  |   2|


グラフはこんな感じが想像できると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/a411a80a-bb7f-a635-f287-cd10d1a70a68.png)

バラバラに置かれていた図と比べると分かりやすいですね。


でもちょっとまってください。
先程はフルーツ別に並べて数えてまとめちゃいました。数えてまとめる、とは集計のことです。
わかりやすく表にする流れで無意識のうちに集計してしまいました。


# 集計していない状態の表？

最初の図、バラバラに置かれていたフルーツの図ですがこれをそのまま表にしたものを考えてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/af8f2b1d-8f5c-8473-74cd-65081b348ea3.png)

1x15の表・・・というか、kintoneでいうところの**レコード**のようなものができます。


| フルーツ |
|:-:|
|  バナナ |
| りんご |
|  バナナ |
|  りんご |
|  りんご |
|  バナナ |
|  みかん |
|  バナナ |
| すいか  |
|  りんご |
|みかん|
|バナナ|
|りんご|
|すいか|
|りんご|


バラバラに置かれていたフルーツの図にどんどんフルーツ追加されていくところを想像してみてください。
↓表の下に追加されたフルーツを追加していくところも想像できますでしょうか！？

| フルーツ |
|:-:|
|  バナナ |
| りんご |
|  バナナ |
|  ～略～|
|  ↓追加されていく↓|
|ぶどう|
|すいか|
|りんご|

これは分かりにくい表ですね。
こうなってくるともはや、この表は**フルーツのデータを並べただけのもの**で、**ただのデータの集まり**です。
ただのデータの集まり、つまり、**データベース**です。

# kintoneはデータベース
ここで、kintoneのアプリの一覧を思い出してください。

kintoneアプリの一覧は

| フルーツ| 個数 |
|:-:|:-:|
|バナナ   | 5 |
|りんご   |  6 |
| みかん  |   2|
| すいか(切れてるけど）  |   2|

のようなまとまった表ではなく、どちらかというと

| フルーツ |
|:-:|
|  バナナ |
| りんご |
|  バナナ |
|  りんご |
|  バナナ |
|  みかん |
|  バナナ |

のような分かりにくい表、ただのデータの集まりだったと思います。

このような、アプリに**集めてきただけの分かりにくいデータの集まり（データベース）**を、
**分かりやすく表やグラフにまとめる（集計する）**というのをやってみたいと思います。

# kintoneで集計してみる

文字列(1行)フィールドだけのアプリを作ってみました。
集計をして、分かりやすい表やグラフにしてみたいと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/7cb547bf-2845-4700-a9d3-389e1eaeb62a.png)


# 表を作成してみる

まずは表を作成してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/492e2ac9-6687-17f6-f62e-ef83a153762f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/e767d069-b93a-a9b2-4a21-644a2e7c3714.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/6ba6c2b6-d820-22fa-a6b3-1cc84a8cbc08.png)

## 分類する項目に「何(what)で仲間分けをしたいか？」を設定する

表を作成するときのミソなのですが、
**何(what)で仲間分けをしたいか？**をまず思い浮かべてください。

その、「**何で仲間分けをするか？**」を設定するのが「**分類する項目**」です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/ac34cc12-9079-30df-3875-a00e1122e02e.png)

右に表示されるプレビューには「作成者ごとに仲間分けをした表」が表示されています。
フルーツごとに集計したいのに・・・、これではどんなフルーツが何個あるのかサッパリわかりませんね。
分類する項目の大項目に「作成者」が入っているので、謎の表やグラフが入ってしまいます👀

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/2f590c65-c923-21df-b8e2-9649a5b755eb.png)


今回は「**フルーツ**」で仲間分けをしたいので、分類する項目に「フルーツ」を指定します。
**大項目**を**フルーツ**にします。
集計方法はレコード数のままでOKです！
※フルーツが何個あるかをレコード数で集計しています。集計方法については、詳しくは次回以降で説明したいと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/ed2d8c40-4639-ff4c-e4d5-4120637a7586.png)

すると、右のプレビューに、念願の表が表示されます。
これだよ！ほしかった表は！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/3f240373-2909-78fc-7500-6cd1f2a21948.png)


できたら、右下の保存するボタンや適用ボタンを押してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/f42e8ec5-6907-889c-a519-9783958576ed.png)


列の幅が変えられないのがもどかしいけど、分かりやすい表ができました＾＾！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/d93727cb-cff2-cbea-f06d-6574d1d7ace4.png)

# 作成した表を元にグラフを表示する

次はグラフですが、ドロップダウンで色々とグラフの種類を選ぶことができるので色々選んでみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/9a6b1c49-7409-6aab-7a6a-48554fc8e996.png)

縦棒グラフを選んでみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/a2f51f52-218e-7aea-b187-569f15662ec0.png)


※試しに、ドリアンを1個追加したらちゃんとグラフにも反映されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/61b01106-3f21-9658-02dd-a2325086ce94.png)

↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/896531d9-ead5-164e-73a5-4e9549c26700.png)



# まとめ
kintoneの一覧はそもそも分かりやすい表ではなくて「データベース」です。
分かりやすい表・グラフは「集計する」で設定をして作成します。

私のオススメは、まず「表」から作成する方法です。
見やすい表を作成するポイントは「分類する項目」では「何(what)で仲間分けをしたいか？」を選択することです。
作成した表に基づくグラフをドロップダウンで選択してかんたんに表示できます。

次回はアプリストアのアプリを使って表やグラフをいじってみたいと思います👀！
次回：[【kintone】日付や時刻でデータを仲間分けして表やグラフにする（分類する項目の〇〇単位）](https://qiita.com/juri_don/items/5bbf3776794352d8fcb0)

※記事中のフルーツの図はScratchで作りました。