そのカスタマイズ大丈夫？ アップデートの影響を受けにくいカスタマイズ 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カスタマイズの基本を学べる こちらの記事を参照してください！