Gmail連携 - kintoneからGmailの送受信をしよう！！ – cybozu developer network

Index

はじめに
概要
kintoneアプリの作成
Google APIの認証情報の設定
プログラムの説明
動作確認

はじめに

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

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

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

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

概要

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

kintoneからGoogleのクライアントIDをもとにOAuth認証
kintoneからGoogleのアクセストークン取得
アクセストークンを利用してGoogle APIを実行
レスポンスを 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

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

Google APIの認証情報の設定

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

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

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

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

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

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

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

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

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

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

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

プログラムの説明

今回使用するプログラム

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でカスタマイズ」下に配置します。

プログラムの解説

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

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

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

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

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

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

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

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

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

認証処理

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

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

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

動作確認

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

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

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

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

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

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

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

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

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

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

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

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