Index
はじめに
Gmailがkintone上で送受信できるサンプルです。
メールをkintoneに取り込むことで、他のkintoneアプリとの連携がしやすくなります。
概要
連携の流れは以下となっています。
- 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の認証情報の設定
1. プロジェクトの作成
Google APIを利用するためにGoogle APIの認証情報を設定します。
まず、Google APIのデベロッパーコンソールにログインします。
画面が表示されたら、「プロジェクトを選択」をクリックします。
※既に作成したプロジェクトがある場合は前回設定したプロジェクト名が表示されています。
右上の「新しいプロジェクト」をクリックして、新規プロジェクトを作成します。
プロジェクト名を入力し、「作成」ボタンをクリックすると、新規プロジェクトが作成されます。ここではプロジェクト名を「kintone-Gmail」にします。
2. Gmail APIの有効化
「APIの概要に移動」をクリックします。
次に左サイドメニューより、「有効なAPIとサービス」を選択し、「✙ APIとサービスの有効化」を選択します。
「Gmail API」で検索し、検索結果からGmail APIを選択します。
「有効にする」をクリックして、Gmail API を有効にします。
3. 認証情報の作成
「認証情報を作成」をクリックします。
使用するAPIに「Gmail API」を選択し、アクセスするデータの種類に「ユーザーデータ」を選択し、「次へ」をクリックします。
「User Type」を指定し、「作成」ボタンをクリックします。
※今回は検証用として「外部」を選択します。利用状況に応じて適切に選択してください。
アプリケーション名を入力します。ここでは「kintone-Gmail」にします。
ユーザーサポートメールをログインユーザーのメールアドレスにし、デベロッパーの連絡先情報を入力して「保存して次へ」ボタンをクリックします。
※他の項目は利用状況に応じて適切に設定してください。
「スコープ」と「テストユーザー」画面で必要な情報を入力して「保存して次へ」をクリックします。
※今回は検証用として何も入力せずに「保存して次へ」クリックします。利用状況に応じて適切に設定してください。
4. クライアントIDの作成
「アプリケーションの種類」に「ウェブアプリケーション」を指定し、名前を自由に入力、「承認済みのJavaScript 生成元」にお使いのkintoneのURLを入力し、「作成」ボタンをクリックしてクライアントIDを生成します。
クライアントIDが作成されます（のちほどプログラムに記述します）。「完了」をクリックします。
5. APIキーの作成
次に「認証情報」から「✙ 認証情報を作成」をクリックし、「APIキー」をクリックします。
しばらく待つと、APIキーが作成されます（プログラムに記述します）。「閉じる」をクリックします。
最後に「OAuth同意画面」から「アプリを公開」をクリックし、「確認」ボタンをクリックしてテスト環境から本番環境へ切り替えます。
プログラム
今回使用するプログラム
URL指定で追加
- https://apis.google.com/js/api.js
- https://accounts.google.com/gsi/client
- https://js.cybozu.com/spinjs/2.3.2/spin.min.js
- https://js.cybozu.com/encodingjs/2.0.0/encoding.min.js
- https://js.cybozu.com/kintone-rest-api-client/3.1.9/KintoneRestAPIClient.min.js
アップロードして追加
-
kintone-gmail.js
Google APIの認証情報の設定を記述している為、環境に合わせて修正する部分があります（後述）
プログラムの修正
kintone-gmail.js にGoogle APIの認証情報の設定でメモしておいたクライアントIDとAPIキーを記述します。
プログラムの配置
これらのプログラムを「アプリの設定>JavaScript/CSSでカスタマイズ」下に配置します。
動作確認
メール受信
kintoneアプリのレコード一覧画面に『Gmailにログイン』というボタンが表示されるので、ボタンをクリックします。
OAuth認証画面が表示されるので、 Google APIの認証情報の設定で準備したGoogleアカウントでログインします。
ログインに成功した場合、先ほどまで『Gmailにログイン』だけだったボタンは『Refresh』『Gmailログアウト』『メール受信』の3つのボタンに変わります。
『メール受信』ボタンをクリックすることで、メールデータをkintoneのレコードに登録します。
Gmailのメールがkintoneに登録されます。
※すでに取得済み（kintoneに登録済み）のメールは登録されません。
メール送信
kintoneのレコード追加を選択し、必要なフィールドに記入します。
※本文はkintoneのリッチエディターフィールドを利用しているので、文字色や文字サイズの変更などもできます。
レコード保存後、メール受信の場合と同様にGmailにログインすると、レコード詳細画面の上部に『メール送信』ボタンが表示されます。『メール送信』ボタンをクリックすればメールを送信できます。
メールが送信できたことが確認できます。
このTipsは、2022年9月版 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 コミュニティをご活用ください。
よろしくお願い致します。
cybozu Development team様
いつもお世話になっております。
長くなりますが、一応記事の手順通りに進めて出たエラーやそれに対して試した事も記事に対するフィードバックに分類されるのではないかと思い、こちらで質問させていただきます。
この度はこちらの記事に沿ってkintoneでgmailの連携を試みました。
記事の手順に従い「Gmailにログイン」ボタンを表示させ、OAuth同意画面でのログインも「cybozu.com（安全でないページ）に移動」までクリックするところまで再現できました。しかし、その後一瞬ほどのローディングを挟んでも何も変わらず、ボタンも相変わらず「Gmailにログイン」のままでした。Chrome、Safari、Firefoxで試し、全て同じ現象でした。
Chrome・Safari・Firefox全ブラウザのコンソールによるとエラーはidpiframe_initialization_failedで、このエラーは上記のjsファイル3つと、CSSファイル１つ適応されたアプリページにアクセスした時点で表示されるので、ログインアクションには関係ないかもしれません。
とのことで、使用されているライブラリがじきにデプリシエイトしてしまうとのことでした。このエラーに関して少々調べたところ、クッキーを削除すれば解決すると出てきましたが、クッキーを削除しても変わらず同じエラーが出ました。
また、SafariやFirefoxでは
などの警告も表示されていました。
Google APIのダッシュボードではエラーは報告されていませんでした。
アップロードしたjs・cssファイルで手を加えたのはkintone-connect-gamil.jsのappClientID部分だけです。
既に試したこと：
・クッキーの削除やシークレットモードでの試行
・google-api.min.jsファイルをリンクに変更
・ブラウザの設定でポップアップを許可
・GmailAPI部分の手順を最初からやり直す
ボタンの表示が変わらないと言うことはログインに成功していない、ということなのでこれからその周辺の処理箇所にコンソール出力をさせて調べて見ますが、cybozu Development team様の方で何か原因や解決の心当たりがあれば是非お聞かせ願いたく存じます。
長々と失礼いたしました。
よろしくお願います。
上記の自分のコメントで進展があったので報告させていただきます。
サンプルコードkintone-connect-gmail.jsの945行目のsignin処理のcatch部分でエラーをコンソール出力させるようにしたら、"popup_closed_by_user"というエラーが表示されました。
ブラウザの設定でポップアップなどを許可したり、キャッシュ削除やシークレットモードでも解決しませんでした。
今回の現象はサンプルコードが古いライブラリを使用している事と、新しく作られたClientIDを使うという条件が揃ったら再現するそうです。下記の参照先によると2022年７月２９日以前に作成されたものClientIDは使用できるそうです。古いClientIDを代わりにセットしたら先に進めました。stackoverflowのリンクではありますが、こちらを参考にしました：https://stackoverflow.com/a/72323640
解決策といたしましては古いClientIDを使用するか、なければサンプルコードで古いライブラリを使っている部分を新しいものに置き換えるか、ですね。飽くまでサンプルコードなので可能であれば新しいライブラリを使用した方がいいと思われます。
間違いや補足などがありましたらご指摘ください。
＜追記＞
2022年７月２９日という期日のソースはグーグルのページに書いてありました。和訳はされていませんが、下記のページ上部に記載されています。
https://developers.google.com/identity/sign-in/web/sign-in
hamakou様
お世話になっております。cybozu developer network 運営でございます。
詳細な情報を共有いただきありがとうございました。
こちらで状況を確認した上、後日対応状況を共有させていだだきます。
引き続き、cybozu developer network よろしくお願いします。