Index
はじめに
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の認証情報の設定を記述している為、環境に合わせて修正する部分があります（後述）
- google-api.min.js
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で確認したものになります。
お世話になります。
この対応にて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の何かのファイルが無いのかと思いますが、対処法はあるのでしょうか？
よろしくお願いします。
ここっこ様
お世話になっております。
こちらで改めて動作確認を行いましたが、エラーなく正常に動作しました。
ご連絡いただいたエラーの再現ができておりません。
恐れ入りますが、Google APIのダッシュボードや認証情報のところで何かエラーが出ていないかご確認いただき、
エラーが出ているようでしたら詳細のご確認をお願いいたします。
https://console.developers.google.com/apis/dashboard
そちらを確認いただいてもエラーの原因がわからない場合、
別のアプリを作成してGoogle側にも新しい認証情報を作成いただき、正常に動作するかをご確認いただけないでしょうか。
cybozu Development team様
お世話になります。
別のアプリ、新しい認証情報を作成して実施してみましたが、同じ現象にて動作できませんでした。
Googleの設定も手順通りやってはいますが変わらずです。
OAuth同意画面の設定部分が本ページではよくわからないのですが、詳しい手順はありますでしょうか？
よろしくお願いします。
ここっこ様
OAuthによる認証を許可する画面は以下のようになります。
また、その前に、「Gmailにログイン」を押した後、以下の画面も出ておりました。（ブラウザがChromeの場合です）
以下も追加で確認させていただけますでしょうか。
1. 別のアプリで検証された際、どの時点で現象が起きましたでしょうか。
（「Gmailにログイン」のボタンは出ている状況でしょうか）
2. 最後に動作したのはいつ頃でしょうか。
3. 開発環境など、他の環境で行った場合も結果は同じでしょうか。
4. PCとブラウザの環境を教えてくださいますでしょうか。
お手数をおかけしますがご確認をよろしくお願いいたします。
cybozu Development team様
お世話になります。
Loadingが終わらないのでOAuthによる認証を許可する画面までたどり着かない状況でした。
色々と調べていく中で、「google-api.min.js」の部分を「https://apis.google.com/js/api.js」に変更したところ、
Loadingが終わり、ログインボタン押下時にご連絡いただいた画面を確認することができ、
現象は改善することができました。
調査、回答いただきありがとうございました。
kintone初心者＆jsも初心者です。
Gmailが受信できるプラグインがあればそちらを選択したいところですが見当たらず・・苦手なJavaScript / CSSでカスタマイズの設定をいじっています。
記事を読み進みそのまま設定をしたのですが進めないところがありお助けください。
「ログインに成功した場合、先ほどまで『Gmailにログイン』だったボタンが『メールを受信』『Gmailからログアウト』に変わります。」
→こちらが変わらない状態のままです。
「GMailにログイン」ボタンは表示され、GMailのアカウントもいれて認証が通った画面を遷移したのですが・・表示が変わらない。
どこらへんをチェックすればよいかアドバイスいただけると助かります。
GMailのセキュリティ設定かとおもい「安全性の低いアプリ」も使える状態にしましたが特に変化なく・・。
fitataka0606 様
お世話になっております。
こちらで改めて動作確認を行いましたが、エラーなく正常に動作しました。
ご連絡いただいた不具合の再現ができておりません。
動かない？そんな時はデバッグをしてみよう！入門編などの記事を参考にし、
コンソール上にどのようなエラーが表示されているかご確認いただけますでしょうか？
お手数ですが、よろしくお願いいたします。