ざんねんな行動予定表をGaroonポータルに移行してみた

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

Index

• はじめに
• 完成イメージ
• 前提条件と注意事項
• ファイルの準備
• 行動予定表ポートレットの作成
• おわりに

はじめに

ざんねんな情報共有ずかんでも紹介された、ホワイトボードを使って共有している行動予定表を、
Garoonのポートレット機能を使用して、Garoonポータルに作成します。

完成イメージ

現在より後の外出に関する予定が表示される行動予定表を作成していきます。
「帰社予定時刻」や「現在の予定」も表示されるようになっています。

前提条件と注意事項

• 「帰社予定時刻」を表示するためには、「帰社」という名前の予定メニューを追加する必要があります。
• 「現在の予定」には現在の時刻に該当する予定が表示されます。
• 組織が設定されていないと行動予定表は表示されません。
• このカスタマイズには、クラウド版 Garoon の環境が必要です。
• サンプルでは一部の機能でGaroonがサポートしないDOM操作を行っています。Garoonのアップデートにより、機能が利用できなくなる可能性があります。
• サンプルプログラムは、その動作を保証するものではありません。
• サンプルプログラムの技術的なサポート等は行っていません。

ファイルの準備

whiteBoard.js

以下のサンプルコードを作成し、ファイル名を「whiteBoard.js」、文字コードを「UTF-8」で保存します。

whiteBoard.css

以下のサンプルコードを作成し、ファイル名を「whiteBoard.css」、文字コードを「UTF-8」で保存します。

行動予定表ポートレットの作成

sample.html

以下のサンプルコードをコピーします。

システム管理（各アプリケーション） > ポータル > HTMLポートレット > HTMLポートレットの追加

上記のように遷移し、「ポートレットの内容」に先ほどコピーした内容を入力してください。

JavaScript / CSSによるカスタマイズ

2019年2月版のGaroonより、ポートレット毎にJavaScript / CSSによるカスタマイズが可能になりました。

ポートレットの詳細から下図のようにJavaScript / CSSによるカスタマイズを適用してください。

「カスタマイズ」は「適用する」を選択してください。

JavaScriptカスタマイズ

• moment.js（Cybozu CDN）
  https://js.cybozu.com/momentjs/2.24.0/moment-with-locales.min.js
• lodash.js（Cybozu CDN）
  https://js.cybozu.com/lodash/4.17.11/lodash.min.js
• jQuery（Cybozu CDN）
  https://js.cybozu.com/jquery/3.4.1/jquery.min.js
• whiteBoard.js

CSSカスタマイズ

• whiteBoard.css

以上でポートレットの作成は終了です。

作成したポートレットを使用して、ポータルを作成してください。
ポータルの作成については、Garoonヘルプサイトのポータル作成の流れをご確認ください。

おわりに

ホワイトボードなどで管理している行動予定表をGaroon上に表示させてみました。
閲覧や予定の編集など、Garoon上で可能なので、スピーディかつ簡単に予定の共有ができようになりました。

2019年2月版アップデートにより一層カスタマイズしやすくなったHTMLポートレットで、様々な業務改善ポータルを作成できるかと思います。

2019年2月アップデート

• garoon.api()の実装
• HTMLポートレットに対し個別にJavaScriptとCSSの適用が可能 ※製品サイト

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