レガシーとモダンの間をつなぐ絶妙サービスkintone。
できるだけノンコーディングで済ませたいけど、どうしても背中が痒くなってしまうキントーン。
チームメンバーみんなが個人で使っているGoogleカレンダーをkintoneのメンバーに共有したいという話があったので思い切って 孫の手 APIを使ってみた。
作ったもの
kintoneのアプリ。
一覧の「カレンダー」ビューを選択すると、登録済みのGoogleカレンダーを埋め込みで見られる。
設定
kintoneアプリ設定
フィールド
GoogleカレンダーのID cal_id
カレンダーの表示名 cal_title
この2つだけ。
一覧
カレンダー表示用の一覧を作成し、表示形式をカスタマイズ・ページネーションありとする。
ここで提示された一覧IDはスクリプトの設定に必要なので控えておく。
kintoneカスタマイズファイル（js）
kintoneの公式ドキュメントを参考にしてゴリゴリ書いた。 旧版みたいだけどやけにノリが軽いなこの公式ドキュメント
kintone-customize.js
(()=> {
'use strict';
kintone.events.on('app.record.index.show', (event) => {
const viewId = {一覧ID};
if (event.viewId !== viewId) {
return event;
}
// カレンダー差し込み先となる親要素をつかむ
const divEl = document.getElementById('google-calender-parent');
const records = event.records;
for(let i=0; i<records.length; i++){
const r = records[i];
const t = encodeURI(r.cal_title.value);
const id = r.cal_id.value;
// カスタマイズビューに表示させる内容
divEl.insertAdjacentHTML(
"beforeend",
`<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=2&bgcolor=%23ffffff&ctz=Asia%2FTokyo&title=${t}&mode=WEEK&showPrint=0&showCalendars=0&showNav=1&src=${id}&color=%230B8043" style="border:solid 1px #777" width="800" height="600" frameborder="0" scrolling="no"></iframe>`
)
}
return event;
});
})();
最初が肝心ドキュメント
こういう細かい作成物は書き捨てて放置してしまうことが多かったが、忘れたころに大変な目に遭うというのをようやく学んだのでドキュメントもちゃんと作った。
カレンダー登録マニュアルとスクリプトのリポジトリとREADME。
メンバーのITレベルに開きがあるので、Googleカレンダーの一般公開設定とかそういうのもコミコミで。