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行） |
message_id |
|
mailAccount |
文字列（1行） |
email_account |
|
attachFile |
添付ファイル |
attachment |
|
owner |
ユーザー選択 |
owner |
|
labels |
文字列（1行） |
labels_id |
|
threadID |
文字列（1行） |
thread_id |
こちらがアプリの配置したフィールドのフォーム画面です。
Google APIの認証情報の設定
Google APIを利用するためにGoogle APIの認証情報を設定します。
まず、Google APIのデベロッパーコンソールにログインします。
画面が表示されたら、「プロジェクトを選択」をクリックします。
右上の「新しいプロジェクト」をクリックして、新規プロジェクトを作成します。
プロジェクト名を入力し、「作成」ボタンをクリックすると、新規プロジェクトが作成されます。ここではプロジェクト名を「kintone-Gmail」にします。
再び、プロジェクト選択の画面を開き、新規作成したプロジェクトを開きます。
次に左サイドメニューより、「ダッシュボード」を選択し、「✙ APIとサービスの有効化」を選択します。
「Gmail API」で検索し、検索結果からGmail APIを選択します。
「有効にする」をクリックして、Gmail API を有効にします。
「認証情報を作成」をクリックします。
使用するAPIに「Gmail API」を選択し、APIを呼び出す場所に「ウェブブラウザ（JavaScript）」、アクセスするデータの種類に「ユーザーデータ」を選択し、「必要な認証情報」をクリックします。
「OAuth 同意画面の設定」画面が表示されるので、「同意画面を設定」ボタンをクリックします。
「User Type」を指定し、「作成」ボタンをクリックします。
※今回は検証用として「外部」を選択します。利用状況に応じて適切に選択してください。
アプリケーション名を入力します。ここでは「kintone-Gmail」にします。
ユーザーサポートメールをログインユーザーのメールアドレスにし、デベロッパーの連絡先情報を入力して「保存して次へ」ボタンをクリックします。
※他の項目は利用状況に応じて適切に設定してください。
「スコープ」と「テストユーザー」画面で必要な情報を入力して「保存して次へ」をクリックします。
※今回は検証用として何も入力せずに「保存して次へ」クリックします。利用状況に応じて適切に設定してください。
左サイトメニューから「認証情報」を選択し、左側の画面から「✙認証情報を作成」をクリックしてドロップメニューから「OAuth クライアントID」を選択します。
「アプリケーションの種類」に「ウェブアプリケーション」を指定し、名前を自由に入力、「承認済みのJavaScript 生成元」にお使いのkintoneのURLを入力し、「作成」ボタンをクリックしてクライアントIDを生成します。
クライアントIDとクライアントシークレットが作成されますので。（のちほどプログラムに記述します。）
最後に「OAuth同意画面」から「アプリを公開」をクリックし、「確認」ボタンをクリックしてテスト環境から本番環境へ切り替えます。
プログラムの説明
今回使用するプログラム
JavaScript
- SAMPLE-kintone-connect-gmail
- google-api.min.js
- kintoneからOAuth認証でアクセストークンを取得するプログラムです。上記リンク先のREADMEから入手できます。
- 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 様
お世話になっております。
こちらで改めて動作確認を行いましたが、エラーなく正常に動作しました。
ご連絡いただいた不具合の再現ができておりません。
動かない？そんな時はデバッグをしてみよう！入門編などの記事を参考にし、
コンソール上にどのようなエラーが表示されているかご確認いただけますでしょうか？
お手数ですが、よろしくお願いいたします。
お世話になっています。
kintoneアプリの作成 にて設定しているフィールドコードと、
kintone-connect-gmail.jsにて宣言しているフィールドコードが食い違っています。
以上2件、どちらかに統一すべきと思います。
ご確認をお願いします。
Lam 様
お世話になっております。
cybozu developer network 運営局です。
記述に誤りがあり、大変申し訳ございませんでした。
アプリ側のフィールドコードを下記に統一しました。
ご指摘いただき、ありがとうございました。
今後ともよろしくお願い申し上げます。
諸々設定したのですが
CB-VA01
というエラーが出てしまいます。
こちらの要因は分かりますでしょうか？
上村様
1. 「プログラムの説明 > プログラムの配置」の箇所で、
「google-api.min.js」の部分を「https://apis.google.com/js/api.js」に変更したところ、エラーなく動作することが報告されています。
こちら試していただくことは可能でしょうか。
2. 問題が改善しない場合、「記事のフィードバックガイド」の「エラー情報」「再現条件」の欄を参照いただき情報をいただけますでしょうか。
（エラーコードだけでなく、手順のどこで、どの画面に出たのかなどの情報をいただければ幸いです。）
よろしくお願いいたします。
cybozu Development team
「google-api.min.js」の部分を削除し、代わりに「https://apis.google.com/js/api.js」のコードをai.jsファイルとして生成し設置しました。
しかし、アプリが起動しなくなってしまいました。
アプリ起動後、読み込み中のような画面になってしまいました。
画面も触れなくなってしまいましたが、アプリ起動後、間髪入れずに設定画面をクリックしたら、画面遷移できたので、ファイルは削除しました。
エラー情報
ログイン出来ている状態になっています。
3種JSファイルとCSSファイル設置し、Gmail送信は一応出来るようになりました。
受信に関しては、登録項目は手順通りに設置しておりますが、メールを受信というボタン押下した後、しばらくクルクルアイコンが表示されたのち、「・入力内容が正しくありません CB-VA01」というエラーが表示されます。
再現条件
メールを受信というボタン押下した後、しばらくクルクルアイコンが表示されたのち、「・入力内容が正しくありません CB-VA01」というエラーが表示されます。
ご確認お願い致します。
上村様
ご返信をありがとうございます。
いただいた情報をもとに、再現を試みましたが、正常に動作し再現できませんでした。
受信メールの少ない別のテスト用のGoogle アカウント、別の端末やブラウザ等、お試しいただけますでしょうか。
問題の特定にはデバッグも有効です。
動かない？そんな時はデバッグをしてみよう！入門編などの記事も参考にしてください。
お世話になっております。
ログインしたGmailアカウントで送受信できることは確認できましたが、そのアカウントに送受信を許可している別のアカウント（@gmail.comでないもの）についても、送受信可能でしょうか？
もし可能であれば、サンプルコードなどご提示いただけたら大変うれしいです。
お忙しいところ申し訳ございませんが、よろしくお願いいたします。
Hirabayashi Y さま
お世話になっております。cybozu developer network 運営でございます。
恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問などは cybozu developer コミュニティをご活用ください。
お手数をおかけいたしますが、どうぞよろしくお願いいたします。
お世話になっております。
Outlookから送信されたメールを受信した場合、本文が空白になった状態で受信されます。
仕様なのか、設定ミスなのか分からず、お教えいただけますと幸いです。
状況は下記のとおりです。
本アプリで利用したいメールアカウント：A, 他のメールアカウント：B とします。
また、Outlookの他、Gmailでも検証済みです。
■OK
・本アプリ(A)からのメール送信
・Outlook（B）またはGmail（B）→A宛のメール受信
・Gmail（A）→A宛のメール受信（To,CC,BCCなどにAを含める）
※Gmail(A)からA宛BCC送信した際、本アプリ読み込み時BCCにAの記載があったことから、
受信メールというより、送信メールの内容を読み込んでいるようにも思います。
labelsは「SENT, INBOX」となっていました。
■NG
・Outlook（A）→A宛のメール受信（To,CC,BCCなどにAを含める）
■NG内容
本文が空の状態でメールが受信される。
（日時、件名、送信元、送信先、MassageID,メールアカウント、labels,スレッドIDなどは入っている状態。）
※このとき、labelsは「SENT, INBOX」と表記有り
※コンソールではエラーは出ていませんでした。
よろしくお願いいたします。
(2021.11.26追記)
・Outlook（A）→A宛のメール受信（To,CC,BCCなどにAを含める）
について、OutolookやGmailでは本文が適切に見れていることを確認済みです。
本記事の通り作成したkintoneアプリのみ、本文が空白になります。
hanazawa 様
お世話になっております。cybozu developer network 運営でございます。
メールが送れているパターンがあるのを考慮すると、コードや本件に関する設定は問題ないように見受けられます。
また、恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているおり、
お客様の固有の環境や、他メーラー由来など、
派生した技術的なご質問はcybozu developer コミュニティをご活用ください。
よろしくお願い致します。
cybozu Development team様
遅くなりましたが、ご返信頂きありがとうございました。
送信が成功していればコードは問題ないとのこと、ご確認ありがとうございました。
Outlookに起因する問題ですかね。。
別途記事のあるkintone×Outlookの連携も検証してみます。
cybozu Development team様
いつもお世話になります。
まず、Gmailでの連携の方法を詳しく記事にしていただきありがとうございます。
そこでひとつ質問なのですが、Gmailの機能で別のメールアカウント（OCN等）を追加できるかと思いますが、そちらをGmail連携で送信することはKintone上からは可能なのでしょうか？
Gmailからは、追加したメールアカウントからメールを送信できております。
以上お手数ですが、ご回答いただければ幸いです。
tech2 様
Gmail の API でデータ連携する際に、他社メールアカウントで受信したメールが例外となるという情報は確認できませんでした。
そのためおそらく可能と考えますが、Gmail の API の仕様に関係しますので、より正確な情報は、上記の情報があるか、 Google 社にお問い合わせください。
または、開発環境等で、実際に試していただくことをおすすめいたします。
cybozu Development team様
お世話になっております。
gmail連携を設定したのですが、
メール受信のボタンをおすと
このように表示され受信することができません。
対処法をご教授頂けると幸いです。
よろしくお願い致します。
cybozu Development team 様
ご返事ありがとうございます。返事が遅れてしまい申し訳ございません。
実際に開発環境で試してみて、送れなかったため質問にいたりました。
少し調べてみると、Googleworkspaceを契約してプライマリドメインをすると送れるかもしれないとの事でした。
また、そちらが確認できましたら、情報共有のためこちらにコメントさせていただきます。
K 様
お世話になっております。cybozu developer network 事務局です。
あらためて動作確認を行いましたが、エラーなく正常に動作しました。
ご連絡いただいたエラーの再現ができておりません。
動かない？そんな時はデバッグをしてみよう！入門編などの記事を参考にし、
コンソール上にどのようなエラーが表示されているかご確認ください。
また、ご確認いただいた内容を「記事のフィードバックガイド」の「エラー情報」「再現条件」の欄を参照いただき
情報をいただけますでしょうか。
お手数ですが、よろしくお願いいたします。
1点ご質問失礼致します。
上記手順で無事設置、ログイン、メールの取り込みまで確認できました、ありがとうございます。
「FROM」に宛名や（）などが含まれるのを回避することは可能でしょうか？
例 s.kato@example.town（s.kato@example.town）
メールアドレスのみをFROMに取得し、他アプリから関連レコードで参照して受信履歴をとりたいと考えております。
よろしくお願い致します。
加藤慎也 様
お世話になっております。cybozu developer network 運営でございます。
リファレンスによればRFCに沿った内容を返却しているように見受けられます。
取得した後、メールアドレスのみ取得するような文字列操作が必要そうです。
その他Gmailの仕様についてはGmailのリファレンスをご確認ください。
また、恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
試してみてわからないなど記事から派生した技術的なご質問はcybozu developer コミュニティをご活用ください。
よろしくお願い致します。
https://developer.cybozu.io/hc/ja/articles/360000821483/comments/5487821861017
cybozu Development team様
ご回答ありがとうございました。
google api
に問題があり下記を【URL指定で追加】したところ動作いたしました。
https://apis.google.com/js/api.js
下記メールを受信した際にレコード内にメール本文（contents）が取得されません。
回避方法があればお教え頂けると幸いです。
このメールにはご注意ください
Gmail では、このメールが本当に ＊＊＊ から送信されたものであることを確認できませんでした。メールに含まれるリンクのクリックや添付ファイルのダウンロード、または返信に個人情報を記載することは避けてください。
K 様
お世話になっております。cybozu developer network 運営でございます。
コード上の誤りがみられず、そのようになっている場合はGmail側のなにかしらの制限があるのかもしれません。
少しリファレンスを参照してみましたが、当方では詳細の情報を見つけることができませんでした。
Gmail APIに関する詳細は、ご自身にてヘルプをご確認して対処していただければと存じます。
恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問はcybozu developer コミュニティをご活用ください。
よろしくお願い致します。