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 コミュニティをご活用ください。
お手数をおかけいたしますが、どうぞよろしくお願いいたします。