カテゴリー内の他の記事

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で確認したものになります。

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

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
ここっこ

お世話になります。

この対応にてkintoneとGmailとの連携を作成していましたが、

2020年になってから画面起動時にLoading中で止まってしまい。

コンソールに

apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.ja.uQzJwfe92tg.O/m=auth2,client/rt=j/sv=1/d=1/ed=1/am=wQE/rs=AGLTcCPxWNxboFRiXQNj_4ftRhMeese8uQ/cb=gapi.loaded_0:1 Failed to load resource: the server responded with a status of 404 ()

のエラーメッセージが出るようになってしまいました。

google.comの何かのファイルが無いのかと思いますが、対処法はあるのでしょうか?

よろしくお願いします。

Avatar
cybozu Development team

ここっこ様

お世話になっております。

こちらで改めて動作確認を行いましたが、エラーなく正常に動作しました。
ご連絡いただいたエラーの再現ができておりません。

恐れ入りますが、Google APIのダッシュボードや認証情報のところで何かエラーが出ていないかご確認いただき、
エラーが出ているようでしたら詳細のご確認をお願いいたします。
https://console.developers.google.com/apis/dashboard

そちらを確認いただいてもエラーの原因がわからない場合、
別のアプリを作成してGoogle側にも新しい認証情報を作成いただき、正常に動作するかをご確認いただけないでしょうか。

Avatar
ここっこ

cybozu Development team様

お世話になります。

別のアプリ、新しい認証情報を作成して実施してみましたが、同じ現象にて動作できませんでした。

Googleの設定も手順通りやってはいますが変わらずです。

OAuth同意画面の設定部分が本ページではよくわからないのですが、詳しい手順はありますでしょうか?

よろしくお願いします。

Avatar
cybozu Development team

ここっこ様

OAuthによる認証を許可する画面は以下のようになります。

 

また、その前に、「Gmailにログイン」を押した後、以下の画面も出ておりました。(ブラウザがChromeの場合です)

以下も追加で確認させていただけますでしょうか。

1. 別のアプリで検証された際、どの時点で現象が起きましたでしょうか。

(「Gmailにログイン」のボタンは出ている状況でしょうか)

2. 最後に動作したのはいつ頃でしょうか。

3. 開発環境など、他の環境で行った場合も結果は同じでしょうか。

4. PCとブラウザの環境を教えてくださいますでしょうか。

 

お手数をおかけしますがご確認をよろしくお願いいたします。

Avatar
ここっこ

cybozu Development team様

お世話になります。

Loadingが終わらないのでOAuthによる認証を許可する画面までたどり着かない状況でした。

色々と調べていく中で、「google-api.min.js」の部分を「https://apis.google.com/js/api.js」に変更したところ、

Loadingが終わり、ログインボタン押下時にご連絡いただいた画面を確認することができ、

現象は改善することができました。

調査、回答いただきありがとうございました。

 

Avatar
fitataka0606

kintone初心者&jsも初心者です。

Gmailが受信できるプラグインがあればそちらを選択したいところですが見当たらず・・苦手なJavaScript / CSSでカスタマイズの設定をいじっています。

記事を読み進みそのまま設定をしたのですが進めないところがありお助けください。

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

→こちらが変わらない状態のままです。

 「GMailにログイン」ボタンは表示され、GMailのアカウントもいれて認証が通った画面を遷移したのですが・・表示が変わらない。

 どこらへんをチェックすればよいかアドバイスいただけると助かります。

GMailのセキュリティ設定かとおもい「安全性の低いアプリ」も使える状態にしましたが特に変化なく・・。

Avatar
cybozu Development team

fitataka0606 様

お世話になっております。

こちらで改めて動作確認を行いましたが、エラーなく正常に動作しました。
ご連絡いただいた不具合の再現ができておりません。

動かない?そんな時はデバッグをしてみよう!入門編などの記事を参考にし、
コンソール上にどのようなエラーが表示されているかご確認いただけますでしょうか?

お手数ですが、よろしくお願いいたします。

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