そのカスタマイズ大丈夫？ アップデートの影響を受けにくいカスタマイズ Tips の Garoon 編です。 Garoon API ドキュメント に記載していない方法で Garoon カスタマイズを行うと、アップデートの影響を受けて動かなくなるリスクがあります。
また Garoon の仕様上、カスタマイズで注意すべき点がいくつかあります。

この記事では、アップデートで動かなくなるリスクがある Garoon カスタマイズの例や、Garoon 特有でカスタマイズ時に注意すべきことを紹介します。

以下に紹介する内容は、アップデートの影響を受けて動かなくなるリスクのあるカスタマイズ方法です。
これらの例を通じて、アップデートの影響を受けにくいカスタマイズについて考えていきましょう。

HTML要素の参照

Garoon カスタマイズでは、Garoon の画面上に、独自の HTML 要素（ボタンなど）を表示できます。

その場合、 予定の詳細／登録／変更画面のヘッダー部分の要素を取得する などの API で取得した要素に、独自のHTML要素を追加しましょう。
API を使って要素を取得できる画面や要素の位置は、 Garoon JavaScript API 一覧 の「情報の取得・設定」の「要素の取得」に記載しています。
また、ポートレットカスタマイズの場合は、HTML ポートレットの「ポートレットの内容」に記載した DOM 要素を使ってください。

1
2
3
4
5
6
7

// アップデートの影響を受けにくい
const newDiv = document.createElement('div');
const newContent = document.createTextNode('Hello');
newDiv.appendChild(newContent);

const element = garoon.schedule.event.getHeaderSpaceElement();
element.appendChild(newDiv);

反対に、ID 名や Class 名を指定して取得した要素に、独自の HTML 要素を追加すると動かなくなるリスクがあります。
以下の例の場合、クラス名の detail_title_grn は変更される可能性があるためです。

1
2
3
4
5
6
7

// !! アップデートの影響を受けて動かなくなる可能性がある !!
const newDiv = document.createElement('div');
const newContent = document.createTextNode('Hello');
newDiv.appendChild(newContent);

const currentDiv = document.getElementsByClassName('detail_title_grn')[0];
currentDiv.appendChild(newDiv);

jQuery を使って jQuery('.detail_title_grn') のように指定するのも、同様に動かなくなるリスクがあります。
つまり、API で取得できる場所以外に要素を追加すると、アップデートの影響を受ける可能性があります。

position を使った要素の配置

先ほど紹介したように、API で取得した空白要素に HTML 要素を追加することは、API ドキュメントに準じた方法です。
しかし、この空白要素に position プロパティを利用して位置を指定した HTML 要素を追加すると、動かなくなるリスクがあります。
親要素のスタイルは変更になる可能性があるためです。

1
2
3

// !! アップデートの影響を受けて動かなくなる可能性がある !!
const element = garoon.schedule.event.getHeaderSpaceElement();
jQuery(element).append('<div>Hello</div>').css({position: 'fixed', top: '80%', left: '50%'}); // 推奨しません

URL の参照

Garoon の URL を使ったカスタマイズは、動かなくなる可能性があります。 Garoon の URL は変更になる可能性があるためです。

たとえば、JavaScript イベントのないメールのプレビュー画面にカスタマイズが当たるように、Garoon URL を使ってカスタマイズすると、 Garoon の URL が変更になった場合、カスタマイズが動かなくなります。

URLの指定

同様に、以下のように Garoon の URL を生成してリンク先に指定するといったカスタマイズも動かなくなるリスクがあります。

1
2
3
4

// !! アップデートの影響を受けて動かなくなる可能性がある !!
// グループ予定のURLを取得する(Moment.js の週始まりを利用)
const startOfWeek = moment().startOf('isoWeek').format('YYYY-MM-DD');
const url = window.location.origin + '/g/schedule/index.csp?event=&bdate=' + startOfWeek;

cybozu developer network でも、 Garoon メールの内容を読み取って Garoon スケジュールに予定を登録しよう などで、直接 URL を指定したカスタマイズをしています。

URLパラメーター（クエリ文字列）を利用する

Garoon の画面を開くときに URL パラメーターを使うと、外部から Garoon にデータを渡せますが、動かなくなるリスクがあります。
外部のデータを利用するには、スケジュールの登録などのイベントで、REST API などで取得したデータを設定してください。

Garoon カスタマイズで jQuery を利用するときは、カスタマイズごとに次の 2 つを行ってください。

（1） カスタマイズ設定で、jQuery を読み込む

1. https://github.com/jquery/jquery/tags から任意のバージョンの zip ファイルをダウンロードします。
2. ダウンロードした zip ファイルを解凍します。
3. 解凍したファイルの「dist」フォルダー以下の jQuery.min.js を利用します。
4. jQuery.min.js をカスタマイズを設定する画面にアップロードします（参照： ヘルプサイト - JavaScript / CSSによるカスタマイズ ）

   

（2） jQuery.noConflict（true） を使って、カスタマイズ設定で適用した jQuery を利用する

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

(function($) {
  'use strict';
  // この即時関数の中では、カスタマイズで適用した jQuery が使われます
  garoon.events.on('schedule.event.detail.show', (event) => {
    const $spaceEl = $(garoon.schedule.event.getHeaderSpaceElement());
    const $btn = $(
      '<button type="button" id="confirmBtn" class="button_normal_sub_grn_kit">確認する</button>'
    );
    // 「確認する」ボタンをクリックすると、jQuery のバージョンを開発者コンソールに出力する
    $btn.click(() => {
      const jQueryVersion = $().jquery;
      console.log(jQueryVersion);
    });
    $spaceEl.append($btn);
    return event;
  });
})(jQuery.noConflict(true));

Garoon カスタマイズで SweetAlert または SweetAlert2 を利用するときは、スタイル調整の css（sweetalert_button_grn.css）も同時に適用してください。
SweetAlert のモーダルのレイアウト崩れを防ぐことができます。

スタイル調整の css（sweetalert_button_grn.css）の入手方法

1. https://github.com/garoon/css-for-SweetAlert にアクセスします。
2. [Clone or download]ボタンをクリックして、「Download ZIP」を選択します。
3. ダウンロードした zip ファイルを解凍します。
4. 解凍したファイルの「css」フォルダー以下の「sweetalert_button_grn.css」を利用します。

カスタム項目（additionalItems）は、クラウド版およびパッケージ版 Garoon 6.0 以降で廃止済みのプロパティです。
詳細は 廃止のスケジュール を確認してください。

予定ごとに紐づく付加情報を保存する場合は、「予定のカスタム項目（Schedule datastore）」を利用してください。

• REST API の例
  • 予定のカスタム項目（Schedule datastore）を取得する
• JavaScript API の例
  • カスタム項目（Schedule datastore）の値を取得する

Garoon スケジュールには、予定ごとに紐づく付加情報を保存できる カスタム項目（additionalItems) があります。
カスタム項目を利用する場合、同じようにカスタム項目を利用する別のカスタマイズは、同時に適用できません。
他のカスタマイズにより、上書きされてしまう可能性があります。

Garoon のアップデートで影響を受ける可能性がある実装方法について、イメージがつかめる内容になっていれば幸いです。
また、カスタマイズを行う際は Garoon セキュアコーディングガイドライン なども確認し、これらについても配慮してコーディングしてください。

Garoon カスタマイズを始める際は、Garoon カスタマイズの基本を学べる こちらの記事 を参照してください！