kintoneで名刺管理アプリを作ってみよう

# はじめに
簡単な名刺管理アプリを、はじめから作ってみましょう。
kintoneでは、「kintone アプリストア」にさまざまなアプリがあらかじめ用意されていて、ストアから選ぶだけでもアプリを追加できます。ただし、アプリを業務で使うためには、実際の業務に合わせたカスタマイズが必要です。ここでは、簡単な名刺管理アプリをはじめから作成し、アプリの設定の流れと基本的な操作を学習しましょう。


# これから作るアプリ
頂戴した名刺を管理するためのアプリを作成します。名刺画像と合わせて管理できるのが特徴です。

<img width="480" alt="スクリーンショット 2016-11-07 9.58.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/77079/e7d5e594-7134-8d0c-e286-8a4c193a68ae.png">



# アプリ作成の流れ
Step 1：アプリに必要な項目を検討する
↓
Step 2：アプリを作成する
↓
Step 3：アプリの動作を確認する
↓
Step 4：運用を開始する 


# Step1 アプリに必要な項目を検討する
## 必要な項目をリストアップする
名刺管理アプリに必要な項目を検討します。今回作成するアプリでは、次の6つの項目を作成することにします。

* 名刺画像
* 名前
* 会社名
* 所在地
* 印象
* 投稿者

# Step2 アプリを作成する
## アプリを作成する
アプリを作成し、アプリ名を設定します。

1. kintoneのポータルの「アプリ」欄にある「+」をクリックします。
<img width="480" alt="スクリーンショット 2016-11-07 11.31.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/77079/882188aa-3968-9fea-b37e-91869008b43b.png">

2. [はじめから作成]をクリックして、空のアプリを作成します。
<img width="480" alt="スクリーンショット 2016-11-07 11.32.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/77079/0b8dfc4e-83ee-da9c-0a73-01ab5654d1c2.png">

3. アプリ名を「名刺管理」と入力します。
<img width="480" alt="スクリーンショット 2016-11-07 11.34.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/77079/22cd1e29-d7ee-44aa-298c-10db27646f53.png">


## 一般設定をする
アプリの用途に合ったアイコン、デザインテーマ*、アプリグループなどを設定します。
*デザインテーマの設定は、kintoneを旧デザインで使用している場合のみ適用されます。

1. [設定]->[一般設定]->[アイコンと説明]をクリックして、次の項目を設定します。
2. 「アイコン」で、用途に合ったアイコンを選択します。 
3. 「アプリグループ」で、「Public」を選択します。 
4. 画面左上の[保存]をクリックして、設定を保存します。

<img width="480" alt="スクリーンショット 2016-11-07 11.52.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/77079/47992609-e68b-2d99-489e-e9919f7de25b.png">


## 入力フォームを設定する
データの入力フォームを作ります。kintoneでは、フォームにフィールド（入力項目）をドラッグアンドドロップするだけで、フィールドの配置や並び順を設定できます。

1. [フォーム]をクリックします。
2. フィールドをドラッグアンドドロップで配置します。 上から順に次の6つのフィールドを配置します。
 * 添付ファイル
 * 文字列(一行)
 * 文字列(一行)
 * 文字列(一行)
 * 文字列(複数行)
 * 文字列(一行)
3. 配置したフィールドの名前とフィールドコードを変更します。 
配置した「文字列（1行）」フィールドの右上にマウスを乗せ、<i class="fa fa-cog" aria-hidden="true"></i>が表示されたら、[設定]をクリックします。
その後、「フィールド名」と[フィールドコード」を次のように変更します。

|   | フィールド名  | フィールドコード  |
|---|---|---|
| 添付ファイル  | 名刺画像  | image  |
| 文字列(一行)  | 名前  | name  |
| 文字列(一行)  | 会社名  | company  |
| 文字列(一行)  | 所在地  | location  |
| 文字列(複数行)  | 印象  | impression  |
| 文字列(一行)  | 投稿者  | submitter  |

4.画面左上の[フォームを保存]をクリックして、フォームを保存します。
<img width="480" alt="スクリーンショット 2016-11-07 12.08.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/77079/4271c0ed-ff9e-4582-54c0-fcaa992ae520.png">



## 一覧を追加する
「一覧」では、レコードの一覧画面の表示形式を設定します。
ここではすべての項目を表形式で表示するように設定します。

1. [一覧の追加]をクリックします。
2. 「一覧名」に「名刺情報の一覧」と入力します。
3. 「レコード一覧の表示形式」で、「表形式」を選択します。
4. 「名刺画像」「名前」「会社名」「所在地」「印象」「投稿者」フィールドをドラッグアンドドロップして、左から順に並べます。
5. 画面左上の[保存]をクリックして、設定を保存します。
<img width="480" alt="スクリーンショット 2016-11-07 12.23.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/77079/467aa22c-43c5-fd42-688b-9f76aebe6ab5.png">


# Step3 アプリの動作を確認する
作成したアプリの動作を確認します。

## レコードを追加する
1. アプリの設定画面の下から2番目にある[アプリの動作テスト]をクリックします。 アプリの動作を確認するためのテスト環境が起動します。テスト環境で入力したデータは、テスト環境だけに保存されます。
<img width="480" alt="スクリーンショット 2016-11-07 12.30.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/77079/c288c065-a6c4-c8bf-7c9a-6bbb0281e265.png">

2. レコードを登録するため、[+] アイコン をクリックします。 
<img width="480" alt="スクリーンショット 2016-11-07 12.33.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/77079/4a88abb3-56b5-93bb-d1ff-ce7f364bd419.png">

3. 各項目を入力し、[保存]をクリックします。 レコードが保存されます。
<img width="439" alt="スクリーンショット 2016-11-07 12.31.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/77079/a57debba-5aa8-da87-5bb8-5f21b84d018f.png">



## 登録したレコードを確認する
アプリの一覧で、登録したレコードを確認します。

1. 画面の左上の「名刺管理」をクリックします。 登録したレコードが表示されます。
2. [アプリの設定に戻る]をクリックして、「アプリの設定」画面に戻ります。
3. [アプリを公開]をクリックし、[OK]をクリックします。 アプリの運用が開始され、自動的にポータルに移動します。ポータルの「すべてのアプリ」欄に、作成したアプリが表示されています。

# 他のサービスから連携するために
他のサービスから連携するために、アプリのAPIトークンを取得し、ドメイン名、アプリIDをメモしておきます。

## APIトークンを取得する
1. アプリの設定画面の[カスタマイズ]から[APIトークン]をクリックします。
2. [生成する]ボタンをクリックしてAPIトークンを生成します。生成したトークンはメモしておいてください。
3. アクセス権を設定します。「閲覧」「追加」「編集」「削除」をONにして左上の保存をクリックします。
<img width="480" alt="スクリーンショット 2016-11-07 12.45.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/77079/3ef5d72f-c792-3c0a-9e21-4265ed16f2cc.png">

**<font color="red">APIトークンは絶対に他人に漏れないようにしておいてください。</font>**


## ドメイン名とアプリIDをメモする
公開したアプリのURLを見ると以下のようになっています。

* https://ドメイン名.cybozu.com/k/アプリID/

このうちドメイン名とアプリIDをメモしておきます。

# おわりに
どうでしたでしょうか？簡単にアプリを作れたのではないでしょうか？
以下の点はチェックしておいて下さい:

* フィールドは6つ用意したか
* フィールドコード名が間違っていないか
* APIトークン、ドメイン名、アプリIDをメモしたか


次はGoogleのVision APIとNatural Language APIを組み合わせて名刺から情報抽出を行います。
以下の記事へ進んでください。

* [Vision APIとNatural Language APIを組み合わせて名刺から情報抽出する](http://qiita.com/Hironsan/items/166515acec35658986b2)

# 記事まとめ
今回のハンズオンの内容は３つの記事にまとめています。

* [kintoneで名刺管理アプリを作ってみよう](http://qiita.com/Hironsan/items/be3497972fb3517cb2b2)
* [Vision APIとNatural Language APIを組み合わせて名刺から情報抽出する](http://qiita.com/Hironsan/items/166515acec35658986b2)
* [名刺から情報を抽出するSlackBotを作る](http://qiita.com/Hironsan/items/9bfba01c37e9fcd7b8af)


事前準備は以下の記事からお願いします。

* [kintone x 機械学習で実現する簡単名刺管理@kintone Café](http://qiita.com/Hironsan/items/a81eef912881b1051de5)

# 参考

* [kintoneチュートリアル](https://help.cybozu.com/ja/k/user/tutorial.html)