カテゴリー内の他の記事

kintoneとZoho CRMを連携してみよう!

フォローする

(Author : Mamoru Mo Fujinoki)

はじめに

本Tipsでは、kintoneと Zoho CRM との連携方法をサンプルを交えて紹介します。

連携のシナリオ

業務アプリのクラウドサービスで有名な Zohoに、 kintone のデータを連携します。

kintoneでインボイス(請求書)を作成するのではなく、Zoho CRMの商談データより作成することで、Emailでユーザーに直接送信なんてことも可能になります。

1. 開発の流れ

以上の手順で開発して行きたいと思います。

2. kintoneで案件管理アプリの作成、設定

kintone アプリストアより、案件管理アプリを追加します。

zoho01.png

3. kintoneアプリのフォームフィールドの追加・変更

次に案件管理アプリを開き、右端の「…」より、「アプリの設定を変更」を選択します。

zoho02.png

フォームタブを選択し、「案件名」、「ステージ」フィールドとフォーム最下部にボタンを配置するスペースフィールドを追加します。(確度フィールドは削除)
「ステージ」の選択項目は、Zoho側の「ステージ」項目と一致するように設定します。(Zoho側も後ほど変更します。)

zohor01.png

フィールドの種類 フィールド名 フィールドコード 説明 Zoho CRM フィールド
文字列(1行) 案件名 project_name *必須項目 Potential Name
スペース   my_space_field ボタン配置用のスペース  
ドロップダウン ステージ stage *必須項目 (下記を参考に項目を設定) Stage
文字列(1行) 会社名 company_name   Account Name
日付 見込み時期 closing_date *必須項目 Closing Date
ドロップダウン 製品名 product_name   Description
数値 小計 total   Amount

 zohor02.png

フィールドの変更後、「フォームを保存」し、「アプリを更新」します。

zoho04.png

これで、アプリの設定は終了です。

4. Zoho CRMのカスタマイズ

Zoho CRMにログインし、右上の設定アイコンより、「設定」をクリックします。

zohor04.png

「カスタマイズ」カテゴリーより、「タブ&項目」をクリックします。

zohor05.png

プロジェクトのリストより、「商談」にカーソルを合わせるとサブメニューが表示されるので、「ステージと確度の関連付」を選択します。

zohor06.png

下記を参考にステージと確度の設定をし、「保存」します。

zohor07.png

 

5. プログラム(JavaScript)の作成

次のサンプルコードを参考にプログラムを作成します。

Zoho CRM API 認証トークン設定

Zoho CRMのAPIの認証トークンを取得するには、次の手順に従ってください。

  1. Zoho CRMにログイン
  2. トップメニュー右側の設定アイコンより、「設定」を選択します。

    zoho1.png

  3. 拡張機能&APIより、「API」を選択します。

    zoho2.png

  4. 右側の設定アイコンより、「認証トークンの作成」を選択します。

    zoho3.png

  5. アプリケーション名にkintoneと入力し、「作成」ボタンをクリックすると、作成された認証トークンを含むテキストファイルが自動的にダウンロードされます。

    zoho4.png

  6. 作成された認証トークンをサンプルコード4行目の変数tokenに設定します。

  7. Zoho CRM APIのurlは下記のフォーマットに従い値を設定します。

URL Format:
https://crm.zoho.com/crm/private/json/Potentials/insertRecords?authtoken=[作成した認証トークン]&scope=crmapi&xmlData=[送信する XML Data]

詳細は、Zoho CRM APIのヘルプページを参照してください。
https://www.zoho.com/crm/help/api/using-authentication-token.html

備考:今回は省略しましたが、APIを通してZohoの商談担当者なども設定可能です。kintoneのログイン名にEメールアドレスを使用していて、そのEメールアドレスをZohoのアカウントにも利用していた場合、案件担当者のフィールドを利用して設定することができます。(Zoho CRM フィールド:Potential Owner)
kintoneの案件担当者のログイン名(Eメールアドレス)は、rec.record.project_owner.value[0].codeのようにして取得できます。

レコード詳細画面に送信ボタン設置

詳細画面表示イベントの処理内にボタン設置のコードを記述します。
フォームの追加・変更で作成したスペース内にボタンを設定します。

送信ボタンクリック時の処理

送信ボタンクリック時のイベント処理のコードを作成します。

kintoneの案件管理アプリの詳細データを取得します。

送信データの設定

Zoho CRM APIの送信データをXML形式で設定します。
パラメーター形式で送信するので、最後に送信データをエンコードします。

Zoho CRM API送信データのフォーマットにつきましては、こちらのヘルプページを参考にしてください。
https://www.zoho.com/crm/help/api/modules-fields.html#Potentials

サンプル送信リクエスト
https://www.zoho.com/crm/help/api/insertrecords.html#Examples

リクエストの送信

kintoneAPIのproxy関数を利用して、Zoho CRM APIにHTTP リクエストの送信を行います。ちなみにJSONフォーマットでレスポンスが返ってくるので、JSONフォーマットで読み込み結果を処理します。(url内で、/jsonと指定。/xmlに変更するとXML形式でレスポンスが返ってきます。詳細は上記ヘルプページを参照してください。)

作成したコードに適当な名前をつけ、保存します。(例:sample-zoho-crm-potential.js)

以上のコードを「アプリの設定」から、「JavaScript/CSSでカスタマイズ」を選択し、アップロードして、保存します。

設定を「保存」し、「アプリを更新」すれば完成です。

zohor08.png

6. 動作確認

案件管理アプリの詳細画面よりデータを入力し、保存すると画面に「Zoho CRMにデータ送信!」ボタンが表示されるのでクリックするとZoho CRMに商談データが送信されます。

案件管理アプリ

zohor09.png

 

Zoho CRM 商談画面

zoho7.png

 

6. まとめ

kintoneもZohoもどちらもクラウドの業務アプリサービスですが、それぞれ得意な機能や特徴があるので、両方のアカウントをお持ちの方は、連携してそれぞれの特徴を生かして活用してみるといいのではないかと思います。

 

7. 参照サイト

このTipsは、2017年11月版 kintoneで確認したものになります。

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。