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で確認したものになります。
記事に関するフィードバック
直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。