[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)

本記事では、**3.kintoneアプリの作成**部分について説明します。

## 3.kintoneアプリの作成

照度センサーのデータを蓄積するためのアプリを作成します。

### 3-a. kintone環境へのログイン
取得済みのkintoneアカウント（開発者アカウント）でkintoneにログインして下さい。
<img width="469" alt="1.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/e77ddf4b-d195-af8a-908c-19a2f0575d91.png">


ログインした後、 **「kintone」** をクリックします。
<img width="578" alt="2.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/6d0670a4-5a34-241c-6acd-b48728e7b0a8.png">


### 3-b. kintone環境へのスペースの作成
直接ポータル上にアプリを作成しても良いのですが、今回は[スペース](http://qiita.com/ha_ru_ma_ki/private/5d2e443b597e76e1712c#%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9)を作成し、その中にアプリを作成してみます。

#### スペースの種類
スペースには2種類あります。

* **スペース** 
* **ゲストスペース** 

今回はゲストスペースではなく、**通常のスペース**を作成します。
ポータル画面右上の＋印をクリックします。
<img width="338" alt="3.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/f5f7a399-b742-7f07-3014-59f6746c3050.png">

**「はじめから作る」** を選択します。
<img width="328" alt="5.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/1a5cf284-cbc6-2c70-b688-65eceb16f3c4.png">

**スペースの作成画面** の「基本設定」タブでスペース名を入力します。
今回は**「春のIoTリレーハンズオン@関西 -kintone Café 大阪 Vol.7-」**という名前で入力して下さい。
その他は特に変更せず「保存」をクリックします。
<img width="322" alt="6.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/41b80d57-802b-bf91-474a-966e51f59491.png">

すると、ポータル画面上に下記のようなスペースが出来上がります。
<img width="511" alt="8.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/172e1078-e305-1a50-a215-31d5687f2fc7.png">

こちらをクリックしてスペース内に入ります。
<img width="517" alt="7.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/818527df-d58a-bc4a-10c7-ad811edc1b8c.png">

### 3-c.スペース内へのkintoneアプリの作成
作成したスペースに照度センサーデータを蓄積するためのkintoneアプリを作成します。
右上**「・・・」印**をクリックして**「アプリを追加」**を選択します。
<img width="519" alt="9.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/b5727693-67e1-4435-73b8-cf807b4e7413.png">

**アプリの作成画面** で**「はじめから作成」**を選択します。
<img width="382" alt="10.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/911d9830-e462-c6f1-dd98-cfcfe4dd7324.png">

ウィザードに沿ってアプリを作成します。
まずアプリ名を入力します。今回は**「照度データ蓄積アプリ」**とします。
アプリ名を入力したら「保存」して下さい。
<img width="507" alt="11.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/c7c47429-c1f6-0621-4a82-e62d557f130a.png">

「一般設定」をクリックします。
<img width="507" alt="12.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/c1135413-6688-2e34-50a5-f5e5d77244ca.png">

アプリのアイコンやデザインの変更が可能です。
デフォルトのままで「保存」をクリックします。
<img width="500" alt="13.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/0709ac72-1b9e-b70f-b00f-25efe0614a38.png">

「フォームの編集」をクリックします。
<img width="507" alt="14.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/5fe925e4-d6f8-8ad5-1c17-1c4363677078.png">

フォームは、下記のようにD&Dで好きな場所に設置することが可能です。
<img width="300" alt="15.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/cfd8bf71-ea63-d243-98ca-176d041556c4.png">

以下の種類のフォームを設置してみましょう。

* **日時：日時フィールド** 
* **ID　：文字列（1行）フィールド** 
* **照度：数値フィールド** 

設置したら、フィールド名（※表示されている項目の名前）を変更します。
フィールドの上にマウスを持っていくと、歯車印が表示されるので「設定」をクリックします。
<img width="458" alt="16.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/2f5f3572-e529-a1c1-9be3-0295017ee33c.png">

下記のように**フィールド名**と**フィールドコード**を編集します。
<img width="280" alt="17.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/084704a1-1bd1-8dad-3827-2e4fc97ff07f.png">

フィールドコードはJSONデータのオブジェクトのフォーマットに合わせる必要があるので、それぞれ下記のように入力します。

* **日時：time_sensor** 
* **ID　：ID** 
* **照度：brightness**


最終的に下記のようにフィールドが並んでいればOKです。
<img width="446" alt="18.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/65d044ac-d602-4cff-074f-14c3e8570a02.png">

フィールド長は可変なので、長さを調節することが可能です。
適宜調節し、最後に「保存」をクリックします。
<img width="400" alt="19.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/82a6f79b-76d4-fa08-d3d7-c97a3e393510.png">

「一覧の追加」をクリックします。
<img width="506" alt="20.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/6d162ffe-2692-8ea2-c95c-eed52b2ec38c.png">

先ほど設置したフィールドを一覧画面に並べます。
一覧名は「照度データ」とします。
<img width="261" alt="21.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/0227eacb-fe0f-4796-0ed6-a04588ee24f7.png">

最終的には下記のようにフィールドが並ぶようにします。並んだら**「保存」**を押して設定を反映して下さい。
<img width="398" alt="22.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/a5e639ed-44ba-e71c-f402-1655ec5a9110.png">


以上でアプリの設定は完了となるので、**「設定完了」**をクリックします。
<img width="516" alt="23.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/68506815-1708-4e84-275f-61fd6f278039.png">

「アプリの運用を開始します…」と表示されますが、**「OK」**をクリックして下さい。
<img width="311" alt="24.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/2ef1c6b3-e857-e810-797c-b6525c77c109.png">


アプリが追加されました。
<img width="603" alt="25.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/25e91674-086b-89c1-d930-e786a5ae1574.png">

### 3-d.アプリのURLの確認
**<font color="FF0000">※後ほど必要となります。</font>**
アプリIDとお持ちのkintone環境のサブドメインの情報が必要になってくるため、アプリを開いて表示されたURLから各情報を確認します。

<img width="478" alt="51.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/d24b0910-2d4e-6aaf-b24c-210fd51083de.png">


この画面では下記のようになっているので、手元に控えておくようにしましょう。

* サブドメイン（cybozu.comの前につく名称）：　**■の部分**
* アプリID：　<b><font color="FF0000">37</font></b>

### 3-e.APIトークンの生成
**<font color="FF0000">※後ほど必要となります。</font>**
照度データ蓄積アプリを開いた状態で、右上**「・・・」印**をクリックして**「アプリの設定を変更」**を選択します。
<img width="680" alt="52.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/4c8aa759-2573-3bb6-ab61-8416ba6ce14e.png">


アプリ設定画面の**「詳細設定」**のプルダウンをクリックします。
<img width="628" alt="53.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/160cf016-fd7c-88ec-01af-bd7866d01ac4.png">

クリックして表示されたメニューの中の**「APIトークン」**をクリックします。
<img width="498" alt="54.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/6de34041-1650-feb0-3e0a-5ab939db1489.png">

**「生成する」**をクリックします。
<img width="541" alt="55.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/f3a7aac1-5705-0e3d-323a-65d502dd5014.png">


APIトークンが生成されるので、アクセス権で**「レコード追加」**を選択して保存します。
<img width="540" alt="56.png" src="https://qiita-image-store.s3.amazonaws.com/0/73604/a8d0d1b1-8ea0-f803-3cac-eb3c7ea0975e.png">



その後はアプリ作成時と同様、**「設定完了」**ボタンをクリックし設定を反映させ、「アプリの運用を開始します…」と表示されたら**「OK」**をクリックして下さい。
<font color="FF0000">**※この「設定完了」を行わないままAPIを利用しようとすると、APIが有効になりませんのでご注意下さい。**</font>