カテゴリー内の他の記事

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

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

Index

はじめに

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

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

必要なもの

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

完成イメージ

完成イメージ

直近のスケジュール表示

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

新着メール一覧表示

  • ポータルの右側に、受信トレイから取得した直近の新着メールを5件表示します。
  • 未読メールは太字で表示されます。
  • メール一覧をクリックすると、Gmail でクリックしたメールの詳細画面を表示します ※2

※1:スケジュール表示のみをサポートしています。
スケジュールを修正したい場合は、スケジュール一覧をクリックし、表示される Google カレンダーの画面で編集してください。

※2:G Suite の仕様上、複数アカウントにログインしている場合、一番上のアカウントが使用されます。
kintone ポータルにはポータル表示時にログインしたアカウントの Gmail やスケジュール情報を表示しますが、
一覧をクリックしたときの遷移先のページは、一番上のアカウントとして開かれます。
Gmail の場合は、メールの詳細画面ではなくそのアカウントの受信トレイを表示します。

システム構成

kintoneportalxgsuite.png

  • kinotne ポータルから Google API を実行し、Gmail や Google カレンダーの情報を取得します。

注意事項

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

Google Cloud Platform の設定

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

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

  7. [有効にする]ボタンをクリックします。サービスが有効化されると、Gmail API の概要ページに自動で遷移します。
  8. [認証情報を作成]ボタンをクリックします。
  9. 次の内容を入力します。入力が終わったら、[必要な認証情報]ボタンをクリックします。

    項目
    使用する API 「Gmail API」を選択します。
    API を呼び出す場所 「ウェブブラウザ(JavaScript)」を選択します。
    アクセスするデータの種類 「ユーザー データ」を選択します。
  10. 「OAuth 同意画面の表示」モーダルが表示されます。[同意画面を設定]をクリックします。
  11. 次の内容を入力します。入力が終わったら、[保存]ボタンをクリックします。

    ※必要最低限の設定項目を記載しています。その他の設定項目は、任意に設定してください。
    項目
    アプリケーション名 任意の値を入力します。この記事では「kintone-portal」としています。
    サポートメール メールアドレスを選択します。
    承認済みドメイン 「cybozu.com」を入力します。 
  12. 認証情報ページに自動で遷移します。[認証情報を作成]ボタンをクリックし、「OAuth クライアント ID」を選択します。
  13. 次の内容を入力します。入力が終わったら、[作成]ボタンをクリックします。

    項目
    アプリケーションの種類 「ウェブアプリケーション」を選択します。
    名前 任意の値を入力します。この記事では「kintone-portal」としています。 
    承認済みの JavaScript 生成元 「https://SUBDOMAIN.cybozu.com」を入力します。
    ※ SUBDOMAIN はご利用の kintone 環境に合わせて変更してください。
  14. OAuth クライアント ID が生成され、クライアント ID が表示されます。
    ※ クライアント ID は kintone に適用するカスタマイズファイルに利用します。メモして控えておいてください。
    [完了]ボタンをクリックします。

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

  17. [有効にする]ボタンをクリックします。
  18. [認証情報を作成]ボタンをクリックします。
  19. 次の内容を入力します。入力が終わったら、[必要な認証情報]ボタンをクリックします。
    項目
    使用する API 「Google Calendar API」を選択します。
    API を呼び出す場所 「ウェブブラウザ(JavaScript)」を選択します。
    アクセスするデータの種類 「ユーザー データ」を選択します。
  20. 認証情報は、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全体をカスタマイズする」をご参照ください。

  1. システム管理画面を開きます。
  2. [JavaScriptやCSSでkintone全体をカスタマイズする]をクリックします。
  3. 次の内容を入力します。入力が終わったら、[保存]ボタンをクリックします。
    カスタマイズの適用
    項目
    適用範囲  ポータルを表示させたいユーザーの範囲を選択します。 
    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ファイル 次の順で指定します。

※1 Loaders.css の入手方法

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

kintone の設定は以上です。

サンプルコード

kintone-portal-gsuite.js

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

kintone-portal-gsuite.css

動作確認

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

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

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

おわりに

この記事では、G Suite という外部サービスのデータを kintone ポータルに表示するカスタマイズを紹介しました。

他にもChrome 拡張の Kintone Portal Designer を使ってお手軽にポータルをカスタマイズする  kintone ポータルカスタマイズ例もあるので、ぜひご参照ください。

使用している API

このTipsは、2019年11月版 kintoneで確認したものになります。

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

サインインしてコメントを残してください。