【業務効率化の事例紹介】kintone と Googleカレンダーを連携させる（その２）

2020年12月13日IT活用支援G Suite,Google API,IT,ITツール紹介,kintone,業務改善

ITが専門の中小企業診断士・ITコンサルタントとして、中小企業の業務改善・効率化をサポートしています。
その中でも面白いトピックとなる支援事例について、紹介していきたいと思います。

今回は、GoogleカレンダーAPIの活用として、予定の色の変更などのオプション機能を紹介します。

この記事は、こんな疑問や悩みを解決するヒントが欲しい方に適しています。

【業務効率化の事例紹介】kintone と Googleカレンダーを連携させる

ITが専門の中小企業診断士・ITコンサルタントとして、中小企業の業務改善・効率化をサポートしています ...

 https://rmcblog.tency.co.jp/cases-kintone-googlecalendar-con...

kintoneのGoogleカレンダー連携をカスタマイズするよ

前回の記事同様に、Javasriptによるカスタマイズを実施していきます。
今回のカスタマイズ事例は、「Googleカレンダーの予定の色をkintoneで設定した上で、予定を登録する」機能です。

Googleカレンダー連携における予定の色指定を実現する

引き続き、editプラグインを使いながらカスタマイズしていきます。
（Javascript開発環境が無い方は、これが一番カンタン）

kintone 用のスクリプト作成が大変だと思ったら

こんにちは、ITで業務改善を支援する中小企業診断士　髙仲です。 最近、暇を見てkintone を弄っていま ...

 https://rmcblog.tency.co.jp/kintone-plugin-scripteditor/

色の指定をできるようにしよう！カラーピッカー（色選択パレット）ライブラリを組み込む

早速、Googleカレンダー連携を組み込んでいきます。
まずは、搭載するにあたって必要となるライブラリを組み込んでいきます。

今回活用するライブラリは、spectrum.js です。
カラーピッカー機能を提供する定番のライブラリです。

早速、こちらのサイトの右上にあるダウンロードボタンから、JSファイルをダウンロードしましょう。

図のように、spectrum.js を利用するライブラリに追加します。

Googleカレンダー連携における色指定の実装①色テーブルの準備

JS側も実装していきます。まずは、Googleカレンダーの予定の色コードとIDの対応テーブルを準備します。
ちなみに、Googleカレンダーの予定のカラーコードは、Developer Toolを使えば調べられます。

let colIdList = {
    "#7a86cb" : "1",
    "#33b679" : "2",
    "#8e24aa" : "3",
    "#e67c73" : "4",
    "#f6bf25" : "5",
    "#f4521d" : "6",
    "#039be5" : "7",
    "#616161" : "8",
    "#3f51b5" : "9",
    "#0a8043" : "10",
    "#d50001" : "11"
  }

こちらの値を予定登録／変更のAPIで指定することで、予定の色を変更することができます。

Googleカレンダー連携における色指定の実装②APIに色を指定する処理

var params = {
  // イベントのタイトル
  'summary': record.文字列__1行_.value,
  'colorId': colIdList[curColor.toHexString()],
  'start': {
    'dateTime': record.日時.value,
    'timeZone': 'America/Los_Angeles'
  },
  'end': {
    'dateTime': end.format(end._f),
    'timeZone': 'America/Los_Angeles'
  },
  'location': record.文字列__1行__3.value,
  'description': record.Detail.value
};

var request = gapi.client.calendar.events.update({
  'calendarId': CALENDAR_ID,
  'eventId': record.event_id.value,
  'resource': params
});

細かい説明は割愛しますが、フォーム上に設けたカラーピッカーボタンで選択された色のIDから、Calendar API を呼び出すときにパラメータを生成し、設定するだけのシンプルなものです。

Googleカレンダー連携における色指定の実装③カラーピッカー

こちらは、前回の記事でも説明しています。具体的なコードを紹介します。

// カラーピッカー
var colPick = document.createElement('input');
colPick.id = 'showPicker';
	colPick.setAttribute("type","text"); 
colPick.style = 'margin-top: 30px; margin-left: 10px;';
kintone.app.record.getSpaceElement('col_pick').style.padding = '30px';
kintone.app.record.getSpaceElement('col_pick').appendChild(colPick);
var initColor = event.record.color_id.value == "" ? "#7a86cb" : Object.keys(colIdList)[parseInt(event.record.color_id.value)-1];
curColor = tinycolor(initColor);
$("#showPicker").spectrum({
  showPaletteOnly: true,
  showPalette:true,
  color: initColor,
  palette: Object.keys(colIdList),
  hideAfterPaletteSelect: true,
  change: function(color) { curColor = color; }
});

こんな感じで、フォームにボタンとテキストが追加されればＯＫです。

その他のカレンダーの予定追加におけるパラメータ設定も、同様の処理で実現ができます。
今回の実装は一日以内に終わる予定でしたが、終日イベントや複数日にまたがるイベントも登録が可能です。

色々と実現できるようになると、より業務の効率化に繋がりますね。

kintoneとGoogleカレンダー連携のまとめ　その２

kintoneのカスタマイズ能力はやはり強力です。kintoneが導入されている会社で、長期的な付き合いが確定している取引先であれば、正直なんでもkintoneで実現できると思います。ですが、保守が難しい部分があるので、エクセルマクロが散乱するちょっと前によくある問題が形を変えて再発する可能性もあります。

私としては、長いお付き合いになる会社様であれば積極的に提案していきたいシステムではあります。