kintone ポータルに Google Workspace 新着メール一覧とスケジュール情報を表示しよう

Moment.js はメンテナンスモードになり、日付処理できる代替ライブラリへの移行が推奨されています。
代替ライブラリのひとつ Luxon については、kintone カスタマイズでの導入方法の紹介記事があります。

Index

はじめに
必要なもの
完成イメージ
システム構成
注意事項
Google Cloud Platform の設定
kintone の設定
サンプルコード
動作確認
おわりに

はじめに

この記事では、Google Workspace に紐づく Google アカウントの直近のスケジュール情報や Gmail で受信した新着メールの一覧を表示するポータルカスタマイズをご紹介します。

Gmail や Google カレンダーのページを開いて確認するところを、kintone を開くだけで最新情報を確認できて便利なカスタマイズです。

必要なもの

kintone アカウント
kintone 環境をお持ちでない方は、developer network のメンバー登録（[ログイン]ボタンからお申込みください）をした後、1年間無料の開発者向けライセンスを利用できます。
Google アカウント

完成イメージ

直近のスケジュール表示

ポータルの左側に、直近のスケジュールをカレンダーごとに最大 10 件表示します※1
カレンダーの切り替えボタンで、複数のカレンダーを切り替え表示できます。
スケジュール一覧をクリックすると、Google カレンダーのページに遷移します※2

システム構成

kinotne ポータルから Google API を実行し、Gmail や Google カレンダーの情報を取得します。
- kintone から API を実行するため、Google Cloud Platform より認証情報を取得します。
- Google API は、Google JavaScript クライアントライブラリを使って実行します。

注意事項

タイトル部分のアイコン（メールやカレンダー）は、kintone 製品のアイコンを使用しています。
製品のアップデートにより、通知アイコンが正常に表示されなくなる場合があります。

Google Cloud Platform の設定

Google API を利用できるよう、Google Cloud Platform でプロジェクトを作成します。

Google API Console に Google Workspace 管理者アカウトでログインします。
[プロジェクトの選択]をクリックします。
[新しいプロジェクト]をクリックします。
プロジェクト名を入力し、[作成]ボタンをクリックします。この記事では「kintone-portal」としています。
プロジェクトが作成されると、作成したプロジェクトのダッシュボードに自動で移動します。
[API とサービスを有効化]をクリックします。
「API とサービスを検索」ボックスに「Gmail」と入力します。「Gmail API」が表示されるので選択します。
[有効にする]ボタンをクリックします。サービスが有効化されると、Gmail API の概要ページに自動で遷移します。
[認証情報を作成]ボタンをクリックします。

次の内容を入力します。入力が終わったら、[必要な認証情報]ボタンをクリックします。

項目	値
使用する API	「Gmail API」を選択します。
API を呼び出す場所	「ウェブブラウザ（JavaScript）」を選択します。
アクセスするデータの種類	「ユーザーデータ」を選択します。

「OAuth 同意画面の表示」モーダルが表示されます。[同意画面を設定]をクリックします。

次の内容を入力します。入力が終わったら、[保存]ボタンをクリックします。

※必要最低限の設定項目を記載しています。その他の設定項目は、任意に設定してください。

項目	値
アプリケーション名	任意の値を入力します。この記事では「kintone-portal」としています。
サポートメール	メールアドレスを選択します。
承認済みドメイン	「cybozu.com」を入力します。

認証情報ページに自動で遷移します。[認証情報を作成]ボタンをクリックし、「OAuth クライアント ID」を選択します。

次の内容を入力します。入力が終わったら、[作成]ボタンをクリックします。

項目	値
アプリケーションの種類	「ウェブアプリケーション」を選択します。
名前	任意の値を入力します。この記事では「kintone-portal」としています。
承認済みの JavaScript 生成元	「https://SUBDOMAIN.cybozu.com」を入力します。 ※ SUBDOMAIN はご利用の kintone 環境に合わせて変更してください。

OAuth クライアント ID が生成され、クライアント ID が表示されます。
※ クライアント ID は kintone に適用するカスタマイズファイルに利用します。メモして控えておいてください。
[完了]ボタンをクリックします。

※ クライアントIDは、「API とサービス」で作成プロジェクトを選択し、左ペインから「認証情報」を選択すると、再確認できます。
同様の手順で、Google Calendar API も有効化します。左ペインから「ダッシュボード」を選択します。[API とサービスを有効化]をクリックします。
「API とサービスを検索」ボックスに「Calendar」と入力します。「Google Calendar API」が表示されるので選択します。
[有効にする]ボタンをクリックします。
[認証情報を作成]ボタンをクリックします。

次の内容を入力します。入力が終わったら、[必要な認証情報]ボタンをクリックします。

項目	値
使用する API	「Google Calendar API」を選択します。
API を呼び出す場所	「ウェブブラウザ（JavaScript）」を選択します。
アクセスするデータの種類	「ユーザーデータ」を選択します。

認証情報は、Gmail API の有効化で作成したものと同じ認証情報を使用します。[完了]ボタンをクリックします。

Google Cloud Platform の設定は以上です。

kintone の設定

このカスタマイズでは、次の外部ライブラリを利用しています。

jQuery v3.3.1, ドキュメント
- https://js.cybozu.com/jquery/3.3.1/jquery.min.js
Google JavaScript クライアントライブラリ ドキュメント
Google API を扱うためのライブラリです。
- https://apis.google.com/js/client.js
- https://apis.google.com/js/platform.js
Moment.js v2.24.0, ドキュメント
- https://js.cybozu.com/momentjs/2.24.0/moment.min.js
Loaders.css v0.1.2, ドキュメント
- loaders.css.js
- loaders.min.css

ポータルカスタマイズをするには、kintone 全体にカスタマイズを適用します。
手順の詳細は「JavaScriptやCSSでkintone全体をカスタマイズする」をご参照ください。

システム管理画面を開きます。
[JavaScriptやCSSでkintone全体をカスタマイズする]をクリックします。

次の内容を入力します。入力が終わったら、[保存]ボタンをクリックします。
カスタマイズの適用

項目	値
適用範囲	ポータルを表示させたいユーザーの範囲を選択します。
PC用のJavaScriptファイル	次の順で指定します。 https://js.cybozu.com/jquery/3.1.1/jquery.min.js https://apis.google.com/js/client.js https://apis.google.com/js/platform.js https://js.cybozu.com/momentjs/2.24.0/moment.min.js loaders.css.js ※1 カスタマイズファイル（kintone-portal-gsuite.js）詳細は、後述のサンプルコード（kintone-portal-gsuite.js）をご参照ください。
PC用のCSSファイル	次の順で指定します。 loaders.min.css ※1 カスタマイズファイル（kintone-portal-gsuite.css）詳細は、後述のサンプルコード（kintone-portal-gsuite.css）をご参照ください。

※1 Loaders.css の入手方法

https://github.com/ConnorAtherton/loaders.css/releases/tag/0.1.2 にアクセスします。
Assets の「Source code（zip）」をクリックし、Zip ファイルをダウンロードします。
ダウンロードした Zip ファイルを解凍します。解凍したフォルダーの以下のファイルを利用します。
- loaders.css.js
- loaders.min.css

kintone の設定は以上です。

サンプルコード

kintone-portal-gsuite.js

12行目 GOOGLE_CLIENT_IDの値：Google Cloud Platform の設定でメモしておいたクライアント ID に置き換えてください。

kintone-portal-gsuite.css

動作確認

kintone にログインし、ポータル画面を開きます。
Google アカウントへのログインが求めるポップアップが表示されたら、Google Workspace で利用しているアカウントでログインします。
※ 有効なセッションがある場合は、ログインは要求されずにカレンダー一覧や新着メール一覧が表示されます。
カスタマイズで追加したカレンダー一覧や新着メール一覧がポータルに表示されます。

初回のみ、Google アカウントへのログイン後に権限付与を求めるポップアップが表示されます。
次の手順で、許可します。

「このアプリは確認されていません」ポップアップが表示されます。「詳細」リンクをクリックします。
「cybozu.com（安全ではないページ）に移動」リンクをクリックします。
権限の付与を確認するモーダルが表示されます。以下のすべての権限に対し[許可]ボタンをクリックします。
- メールメッセージと設定の表示
- カレンダーの設定を表示します
- すべてのカレンダーの予定を表示
- カレンダーを表示
「選択内容を確認してください」ポップアップで、[許可]ボタンをクリックします。クリックすると、kintone ポータルにスケジュールとメール一覧が表示されます。