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

  • 5
    いいね
  • 0
    コメント

はじめに

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

これから作るアプリ

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

スクリーンショット 2016-11-07 9.58.57.png

アプリ作成の流れ

Step 1:アプリに必要な項目を検討する

Step 2:アプリを作成する

Step 3:アプリの動作を確認する

Step 4:運用を開始する

Step1 アプリに必要な項目を検討する

必要な項目をリストアップする

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

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

Step2 アプリを作成する

アプリを作成する

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

  1. kintoneのポータルの「アプリ」欄にある「+」をクリックします。
    スクリーンショット 2016-11-07 11.31.22.png

  2. [はじめから作成]をクリックして、空のアプリを作成します。
    スクリーンショット 2016-11-07 11.32.23.png

  3. アプリ名を「名刺管理」と入力します。
    スクリーンショット 2016-11-07 11.34.52.png

一般設定をする

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

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

スクリーンショット 2016-11-07 11.52.59.png

入力フォームを設定する

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

  1. [フォーム]をクリックします。
  2. フィールドをドラッグアンドドロップで配置します。 上から順に次の6つのフィールドを配置します。
    • 添付ファイル
    • 文字列(一行)
    • 文字列(一行)
    • 文字列(一行)
    • 文字列(複数行)
    • 文字列(一行)
  3. 配置したフィールドの名前とフィールドコードを変更します。 配置した「文字列(1行)」フィールドの右上にマウスを乗せ、が表示されたら、[設定]をクリックします。 その後、「フィールド名」と[フィールドコード」を次のように変更します。
フィールド名 フィールドコード
添付ファイル 名刺画像 image
文字列(一行) 名前 name
文字列(一行) 会社名 company
文字列(一行) 所在地 location
文字列(複数行) 印象 impression
文字列(一行) 投稿者 submitter

4.画面左上の[フォームを保存]をクリックして、フォームを保存します。
スクリーンショット 2016-11-07 12.08.00.png

一覧を追加する

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

  1. [一覧の追加]をクリックします。
  2. 「一覧名」に「名刺情報の一覧」と入力します。
  3. 「レコード一覧の表示形式」で、「表形式」を選択します。
  4. 「名刺画像」「名前」「会社名」「所在地」「印象」「投稿者」フィールドをドラッグアンドドロップして、左から順に並べます。
  5. 画面左上の[保存]をクリックして、設定を保存します。 スクリーンショット 2016-11-07 12.23.19.png

Step3 アプリの動作を確認する

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

レコードを追加する

  1. アプリの設定画面の下から2番目にある[アプリの動作テスト]をクリックします。 アプリの動作を確認するためのテスト環境が起動します。テスト環境で入力したデータは、テスト環境だけに保存されます。
    スクリーンショット 2016-11-07 12.30.30.png

  2. レコードを登録するため、[+] アイコン をクリックします。
    スクリーンショット 2016-11-07 12.33.15.png

  3. 各項目を入力し、[保存]をクリックします。 レコードが保存されます。
    スクリーンショット 2016-11-07 12.31.39.png

登録したレコードを確認する

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

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

他のサービスから連携するために

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

APIトークンを取得する

  1. アプリの設定画面の[カスタマイズ]から[APIトークン]をクリックします。
  2. [生成する]ボタンをクリックしてAPIトークンを生成します。生成したトークンはメモしておいてください。
  3. アクセス権を設定します。「閲覧」「追加」「編集」「削除」をONにして左上の保存をクリックします。 スクリーンショット 2016-11-07 12.45.04.png

APIトークンは絶対に他人に漏れないようにしておいてください。

ドメイン名とアプリIDをメモする

公開したアプリのURLを見ると以下のようになっています。

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

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

おわりに

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

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

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

記事まとめ

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

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

参考