カテゴリー内の他の記事

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

フォローする

Index

はじめに

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

完成イメージ

fixed.png

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

前提条件と注意事項

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

ファイルの準備

whiteBoard.js

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

whiteBoard.css

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

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

sample.html

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

 

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

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

portal001.png

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

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

portal002.png

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

portal003.png

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

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
  • whiteBoard.js

CSSカスタマイズ

  • whiteBoard.css

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

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

おわりに

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

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

2019年2月アップデート

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

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

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
Eriko

いつも大変お世話になっております。

こちらは現時点(2019/2/8)では利用できないのでしょうか?

以上です、よろしくお願いします。

Avatar
cybozu Development team

Eriko様

こちらの記事に掲載している2019年2月アップデートの内容は、2019/02/10の定期メンテナンス以降、利用できるようになります。

アップデートされる機能につきてましては、こちらをご覧ください。

https://garoon.cybozu.co.jp/support/update/cloud/190210.html

今後ともcybozu developer networkをよろしくお願いいたします。

Avatar
t-yamada

ポートレットのJavaScript / CSS利用可はかなり嬉しいです、ありがとうございます。

こちらのプログラムについて質問させてください。
行動予定表に反映されるのは、外出、出張、休み だけでしょうか。他の予定メニュー(未記入も含む)も表示させるにはどのようにしたらよいでしょうか。

Avatar
cybozu Development team

t-yamada 様

whiteBoard.jsの111~114行目を変更していただくことで他の予定メニューも表示させることが可能です。
また、同様に81~91行目を変更頂くことで、色の変更が可能です。

なお、記事のコメント欄は当記事に関するフィードバックのみ受け付けております。
以後、技術的なご質問はコミュニティをご活用いただけますと幸いです。

今度ともcybozu developer networkをよろしくお願い致します。

Avatar
y-eto

ご質問させていただきます。

ユーザーの表示優先度順にソートしたいのですが、どの部分をいじったらよいかわからず困っております。

初歩的な質問で大変恐縮ですが、ご回答いただけると幸いです。ご確認のほどよろしくお願いいたします。

 

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