kintoneのカスタマイズビューにGoogleカレンダーを表示する。

こんにちは。
Three Hands Worksの小林です。
本日はkintoneと外部サービスとの連携第二弾としてGoogleカレンダーとの連携について考えたいと思います。

 

Googleカレンダーと連携する必要ってあるの?

まず、どうして連携をすることになったのか経緯を話そうと思います。
手っ取り早く方法だけ知りたい方は、今回のポイントからどうぞ。
そもそもkintoneアプリも一覧でカレンダー表示できるのにどうして連携する必要があるのでしょう。
答えはシンプルです。
社内のスケジュールの管理をGoogleカレンダーで行っているというお客様がいるからです。
もはや文句のつけようの無いくらいシンプルな回答ですいません。
僕らはお客様の要望をなるべく実現することを第一と考えていますので、どうしても無視ができないのです。
では具体的にどのように使われるのでしょうか?
案件管理アプリを例に考えてみましょう。
kintoneアプリストアでも人気の案件管理アプリ。
フィールドに活動履歴というテーブルがあるのはご存知かと思います。
この活動履歴ですが、履歴として完了した事項をまとめていくのも重要ですが、次のアクション(予定)を管理したいと思うのは僕だけではないはず。
電話での対応時に「では◯◯日に見積もりをお持ちします」というように、必ず次の予定を立てるものじゃないですか。
この次の予定を案件管理アプリでもっているだけでは、閉じた情報になってしまいます。
ですが、社内のスケジュールを管理しているカレンダーに登録したら、他のスタッフも確認出来てより便利。
また、次の予定を入れるときにアプリとカレンダーを確認する必要がなくなり、ひとつのカレンダーを見れば自分のスケジュールがわかる。
なお便利ですね。
これは皆が幸せになれる予感・・・。
問題は1つ、誰がGoogleカレンダーにデータを入力してくれるのか?ってことだけです。
kintoneの案件管理アプリに営業活動を入力し、Googleカレンダーに次の予定を登録するなんて面倒でしかありません。
こんなことではどうしてシステムを導入したのかわからないと言われてしまいます。
そこでGoogleのCalendar APIを利用してkintone側からカレンダー登録を一度にしてしまおうというわけです。
前段階だというのに話しが長くなり申し訳ありません。
反省。

気を取り直しまして。
やりたい事は「kintoneアプリからGoogleカレンダーへスケジュールの登録」ということです。
今回はその準備として、スケジュール登録の確認をするために必要なGoogleカレンダーをアプリの一覧に表示したいと思います。
まあ、Googleカレンダーを表示すればいいじゃないって話しなのですが、せっかくなので機能は使ってみたいじゃないですか。
では今日のポイントです。

 

今回のポイント

説明が長くなったので、作業は短くいきます。

  • Googleカレンダーの埋め込み用タグを用意する。
  • アプリのカスタムビューの利用

これだけです。

 

Googleカレンダーの埋め込み用タグを用意する。

カレンダーの埋め込みタグを取得するには本家Googleのヘルプを参照しましょう。

Google カレンダーをウェブサイトに追加する
ヘルプ内の「カレンダーをウェブサイトに埋め込む」というセクションの5(iframeコードのコピー)までやってもらえば結構です。
Googleカレンダー埋め込みタグ取得
カレンダーのカスタマイズをしたいという方は、以下の記事を御覧ください。

Googleカレンダーのデザインをカスタマイズして埋め込む方法

 

アプリのカスタムビューの利用

タグが取得出来たら、次はkintoneアプリの作成です。
今回の目的はカスタマイズビューへのGoogleカレンダー表示ですので、アプリはどのような作り方でも構いません。
フォームの編集まで進めてください。

フォームの編集が済んだら、一覧の追加で「レコード一覧の表示形式」の項目を「カスタマイズ」にします。
表示された「HTML」の項目に先ほどコピーした埋め込みタグをペーストしてください。
カスタマイズビュー編集
貼り付け終わったら保存してアプリの設定を完了しましょう。
設定完了

 

表示確認

さて、最後に埋め込んだタグの表示を確認して終わりましょう。
kintoneアプリを開き、作成した一覧を選択してください。
通常のデータリストではなくGoogleのカレンダーが表示されていれば終了です。
Googleカレンダー表示成功
カレンダーを作成したユーザー以外で一覧を表示した時に「カレンダーの表示権限がないため、予定を表示できません。」と表示されることがあります。
これはカレンダーの共有がされていないために起こります。
カレンダーが共有されていない場合
この場合はカレンダーの埋め込みタグを取得した画面を開き、「このカレンダーを共有」タグからカレンダーの共有を行ってください。
カレンダーの共有設定

次回はCalendar APIをkintoneアプリから利用するためのクライアントIDの発行をしてみたいと思います。