kintoneを触ってみた

### はじめに
テレビCMで流れていたkintoneに触れる環境ができたので、少し触ってみました。
本記事はkintone初心者がアプリを3つ作成した様子、
kintoneを触れての感じたことを記載したものになります。

## 所感
アプリを作成した様子が長々と続くので先に所感を記載します。
・ドラッグアンドドロップで部品を配置するだけでアプリを簡単に作成できた。
 
・アプリに入力したデータのエクスポート機能、
　アプリに入力するデータのインポート機能が
　備わっているのでデータのやり取りも行いやすいと思いました。

・エクスポートできるファイルの形式がcsvなのでxlsxに変換するのが少し面倒。

・ローコードツールなので簡単なことを行う際にはプログラミングが不要。
　複雑なことを行う際にはJavaScritpやCSSの知識やプラグインが必要になるかと思われます。

### 今回作成したアプリのイメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2127851/440f6018-a941-4202-9171-54ff7d2a731c.png)

・商品マスタ_TEST：商品コードをキーに商品、単価を管理するマスタ。
・店舗マスタ_TEST：店舗コードをキーに店舗名を管理するマスタ。
・売上明細_TEST：日ごとに店舗で売れた商品を登録し、売上を管理するアプリ。

### kintoneにアプリを作成
アプリを作成時に参考したマニュアル(kintoneの公式サイト)
https://kintone.cybozu.co.jp/material/

まずは商品マスタ_TESTのアプリを作成。
kintone上である程度、アプリのテンプレートが用意されていたり、
ExcelやCSVを読み込んでアプリが作成できるようでした。
今回は1から作ってみようと思ったので「はじめから作成」を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2127851/cbfed391-09f4-4a71-9bee-f27f07ade4e5.png)

こちらが開発画面でアプリ名を設定したり、
アプリ上に配置できる部品(テキストボックスやボタンなど)が準備されている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2127851/c97ce429-4deb-4f56-ad9e-ac3cd07aa9d9.png)

アプリ名を変更し、部品を左側のエリアから右側のエリアへドラッグアンドドロップで配置。
簡単にテキストボックスが作成できた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2127851/6754eb8e-0ff7-41cd-bceb-6b0d5da9022e.png)

部品の上にマウスカーソルを移動させて表示される、設定の方で部品のプロパティの変更が可能。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2127851/d6da660f-a76a-4620-ab67-01d0bd913fd5.png)

設定では、部品ごとに名前や制御(入力桁数など)、フィールドコード(項目を計算に使用する際の名前)の設定が可能でした。
この部品を計算式で利用する場合は、フィールドコードをフィールド名と一緒することで、項目を迷わず選択することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2127851/7b5d6d3a-b198-466b-b2ae-d36666110fb0.png)

先ほど設定のフィールド名した商品コードと必須項目を示す「*」が反映された。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2127851/1811a435-aae2-40bc-8b5c-5460dece455a.png)

同様に他の項目も作成。単価は計算を行う必要があるため、数値の部品を利用。
数値の部品の設定では、入力できる数値の範囲などが設定が可能でした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2127851/99387cac-3803-414d-bd16-7eb38c0264ed.png)

アプリが作成できたので、アプリを公開。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2127851/96ebfd86-8582-4954-b218-8a6a32429334.png)

作成したアプリにデータを追加。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2127851/9589854c-cb7d-4dc2-92d6-4867c5cb9a27.png)

アプリを作成する際に設定した項目の入力値制限がアプリ上に表記されていた。
それぞれの項目を入力し、データを保存。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2127851/c87f52f3-454b-45c7-9a49-2a53bf9b1901.png)

アプリにデータが登録できたことを確認。
アプリに登録するデータが多い場合は、＋ボタンからExcelやCSVのファイルインポートが可能でした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2127851/eed28b7b-f6b4-41d0-a5cd-6dc778c4021d.png)

同様に店舗マスタ_TESTも作成し、それぞれのマスタは下記の通り。
・商品マスタ_TEST
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2127851/7bdef291-ad79-4587-9109-5db679db5463.png)

・店舗マスタ_TEST
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2127851/0167f996-2ec5-4b97-8015-45d886a6d9b4.png)


最後に売上明細のアプリを作成。
このアプリでは日付、店舗マスタ_TESTと商品マスタ_TESTのコードを入力し、
それぞれの名称、しょうひんおなどを表示させるルックアップ(Excelの関数「vlookup」)と、
項目同士を計算して金額算出させます。

・ルックアップ(他のアプリから値を取得する)
店舗マスタ_TESTから検索する店舗コード以外を作成。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2127851/7a17fb93-e372-4cea-8e06-103150da9601.png)

ルックアップの部品をアプリ上に配置。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2127851/63c0a175-f889-4a92-bf5e-d3414714a9fe.png)


ルックアップの部品の設定。
・関連付けるアプリで、どのアプリのどの項目を参照させるか。
→店舗マスタの店舗コードを検索し、取得したいので関連付けるアプリは「店舗マスタ」、コピー元のフィールドは店舗コードを設定。

・ほかのフィールドのコピーで、関連付けるアプリの項目をこのアプリのどの項目にコピーさせるか。
→売上明細アプリの店舗名に店舗マスタの店舗名もコピーさせたいので、ほかのフィールドのコピーに店舗名と[店舗マスタ]店舗名を設定。

・コピー元のレコードの選択時に表示するフィールドでは、ルックアップボタンを押下時に表示させる項目を選択することができます。
→店舗名を選択画面に表示させたいので、コピー元のレコードの選択時に表示するフィールドに店舗名を設定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2127851/5f4e2db4-09c9-440f-a0ff-e9f7c678a7aa.png)

同様に商品コードにもルックアップの設定を実施し、商品マスタ_TESTから商品名と単価を取得できるように設定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2127851/f32973ad-0b87-4113-b08e-e3acd576c6e3.png)

・計算(アプリ内の項目同士を計算する)
商品マスタ_TESTから取得した単価と売上明細の数量を掛け算して金額を算出させるために計算という部品を利用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2127851/1c91ee47-e242-4a87-9e71-393f48d1ab1b.png)

計算の部品の設定。
計算式欄に計算式や関数を記述します。
その際にはフィールドコード(部品の設定画面に表示されている項目)で任意に名前を設定できます。
部品のフィールドコードが分からなくても、フィールドコードを挿入するをクリックすることで、
このアプリ上のフィールドコードが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2127851/5c49e731-23bd-42d2-bf36-06150912240d.png)

計算式を設定しましたが、フィールドコードを初期値のまましていたので見づらいです。
そのため、フィールドコードの名称はパッと見て分かりやすい名称にすることをお勧めします。
なお、計算式で利用できる演算子と関数は下記のURLを参照してください。
kintoneのサイト
https://jp.cybozu.help/k/ja/app/form/autocalc/basic_error/example_operators.html?from=calcTooltip&kin=d&utm_source=product&utm_medium=tooltip
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2127851/ed0e401a-7a91-4843-ba90-94ecf211be9f.png)

計算式を設定すると部品上に設定した計算式が表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2127851/b1aa8642-ec16-4267-8a3f-8af47d6dd2c1.png)

これでアプリが完成したので公開し、データを入力したいと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2127851/7988b028-483b-463e-b512-6feb4c12940a.png)

店舗コードの取得をクリックすると店舗マスタ_TESTが一覧で表示されました。
店舗コードの左側の選択をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2127851/7aeadacc-7261-401b-aeb3-c5e7a1d9182d.png)

売上明細の店舗名に値が設定されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2127851/32ba6352-6696-440a-8cc7-330e90906e3e.png)

同様に商品コードも商品マスタ_TESTから取得し、商品名と単価が設定されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2127851/d046b326-f04c-4e64-b4a0-701232f716db.png)

数量を入力すると単価×数量が金額に設定できので、保存。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2127851/5eab2bdd-1127-4bc8-bc9b-045aa3595d34.png)

データが登録できたいことを確認し、アプリの動作検証完了。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2127851/b540e64a-c440-4053-ac07-f130eb18eb78.png)

最後まで読んでいただき、ありがとうございました。