カテゴリー内の他の記事

Gmail連携 - kintoneからGmailの送受信をしよう!!

フォローする

Index

はじめに

Gmailがkintone上で送受信できるサンプルです。

メリットとしては、メールをkintoneに取り込むことで、他のkintoneアプリとの連携がしやすくなります。
また、kintoneのプロセス管理機能を使用してステータスの管理を行うことができます。

Gmail側への認証にOAuth2.0を利用しています。少し敷居が高く感じられるかもしれませんが、
詳しい手順の解説とサンプルコードを公開しておりますのでぜひ参考にしてください。

サンプルコードは Github上に公開しています。

概要

連携の流れは以下となっています。

  1. kintoneからGoogleのクライアントIDをもとにOAuth認証
  2. kintoneからGoogleのアクセストークン取得
  3. アクセストークンを利用してGoogle APIを実行
  4. レスポンスを kintone のアプリに登録

kintone アプリの作成

kintoneアプリでは以下のフィールドを配置してください。

フィールド名 フィールドタイプ フィールドコード

Date and time

日時

Date_and_time

subject

文字列(1行)

subject

contents

リッチエディター

message

FROM

文字列(1行)

from

TO

文字列(1行)

to

CC

文字列(1行)

cc

BCC

文字列(1行)

bcc

messageId

文字列(1行)

messageId

mailAccount

文字列(1行)

mailAccount

attachFile

添付ファイル

attachment

owner

ユーザー選択

owner

labels

文字列(1行)

labels_id

threadID

文字列(1行)

thread_id

 

こちらがアプリの配置したフィールドのフォーム画面です。

2018-05-28_11h22_23.png

Google APIの認証情報の設定

Google APIを利用するためにGoogle APIの認証情報を設定します。
まず、Google APIのデベロッパーコンソールにログインします。
画面が表示されたら、「プロジェクトを選択」をクリックします。

gs11.png

右上の「+」アイコンをクリックして、新規プロジェクトを作成します。

gs12.png

プロジェクト名を入力し、「作成」ボタンをクリックすると、新規プロジェクトが作成されます。ここではプロジェクト名を「kintone-Gmail」にします。

2018-05-21_18h13_22.png

再び、プロジェクト選択の画面を開き、新規作成したプロジェクトを開きます。

2018-05-21_10h36_55.png

次に左サイドメニューより、「ダッシュボード」を選択し、「Gmail API」を選択します。

2018-05-22_17h45_10.png

「有効にする」をクリックして、Gmail API を有効にします。

2018-05-21_10h59_21.png

右上の「認証情報を作成」をクリックします。

2018-05-21_11h02_14.png

使用するAPIに「Gmail API」を選択し、APIを呼び出す場所に「ウェブブラウザ(JavaScript)」、アクセスするデータの種類に「ユーザーデータ」を選択し、「必要な認証情報」をクリックします。

2018-05-21_11h04_38.png

クライアントID名を入力し、「承認済みのJavaScript 生成元」にお使いのkintoneのURLを入力し、「OAuth クライアントIDの作成」ボタンをクリックして、クライアントIDを生成します。

2018-05-21_11h08_40.png

次にOAuth 2.0同意画面の設定をします。メールアドレスを選択し、サービス名を入力して、「次へ」ボタンをクリックします。

2018-05-21_11h17_37.png

クライアントIDが作成されますので、メモしておきます。(のちほどプログラムに記述します。)

2018-05-21_11h24_04.png

プログラムの説明

今回使用するプログラム

JavaScript

  • SAMPLE-kintone-connect-gmail
    • google-api.min.js
      • kintoneからOAuth認証でアクセストークンを取得するプログラムです。
    • common-js-functions.min.js
      • 共通処理を記述するプログラムです
    • kintone-connect-gmail.js
      • アクセストークンを用いてGmailからメールデータを取得するプログラムです。
      • また、kintoneアプリ/ Google APIの認証情報の設定を記述している為、環境に合わせて修正する部分があります(後述)

CSS

  • kintone-connect-gmail.css
    • 生成するボタンの見た目を記述するプログラムです

プログラムの修正

kintone-connect-gmail.js にkintoneのフィールド情報や Google APIの認証情報の設定でメモしておいたクライアントIDを記述します。

プログラムの配置

これらのプログラムを「アプリの設定>JavaScript/CSSでカスタマイズ」下に配置します。

2018-05-21_11h42_25.png

プログラムの解説

kintoneイベントの処理 ( kintone-connect-gmail.js )

kintoneの各イベント処理は以下となっています。

レコード一覧画面インライン編集時イベント

レコード作成/編集画面表示イベント

レコード一覧画面表示イベント

レコード詳細画面表示イベント

Gmailモジュール ( kintone-connect-gmail.js )

kintoneとGmailのコネクション部分を一部抜粋して説明します。 

認証ライブラリのインスタンス化

認証処理

取得したアクセストークンをメールデータの取得/送信する

GmailAPIをkintone上で叩いてGmailのメールデータを取得しています。

外部APIをkintone上で叩く方法はコチラのAPIドキュメントをご覧ください。

動作確認

kintoneアプリのレコード一覧画面に『Gmailにログイン』というボタンが表示されるので、ボタンをクリックします。

2018-05-21_11h45_24.png

OAuth認証画面が表示されるので、 Google APIの認証情報の設定で準備したGoogleアカウントでログインします。

2018-05-21_11h49_32.png

ログインに成功した場合、先ほどまで『Gmailにログイン』だったボタンが『メールを受信』『Gmailからログアウト』に変わります。

『メールを受信』ボタンをクリックすることで、Gmail APIにリクエストを投げてレスポンス(メールデータ)をkintoneのレコードに登録します。

2018-05-21_15h52_39.png

無事、Gmailのメールがkintoneに登録されました。 

2018-05-21_15h43_38.png

※すでに取得済み(kintoneに登録済み)のメールは登録されません。

 

次に、送信の確認をします。

kintoneのレコード追加を選択し、必要な部分を記入します。

2018-05-21_17h27_22.png

※本文はkintoneのリッチエディターフィールドを利用しているので、文字色や文字サイズの変更などもできます。

 

レコードを保存すると、レコード詳細画面の上部に『送信する』というボタンが表示されるので、ボタンをクリックすればメールを送信することができます。

2018-05-21_17h03_17.png

きちんとメールが送信できたことが確認できます。

2018-05-21_17h14_40.png

 

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

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

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

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