アップデートの影響を受けにくいカスタマイズ＆カスタマイズ時に注意すること Tips 〜Garoon編〜

Garoon 開発 Tips

アップデートの影響を受けにくいカスタマイズ＆カスタマイズ時に注意すること Tips 〜Garoon編〜

はじめに

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

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

アップデートの影響で動かなくなるリスクのあるカスタマイズ例

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

DOM操作

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 の利用

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

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

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

https://github.com/jquery/jquery/tags から任意のバージョンの zip ファイルをダウンロードします。
ダウンロードした zip ファイルを解凍します。
解凍したファイルの「dist」フォルダー以下の jQuery.min.js を利用します。
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));

SweetAlert

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

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

https://github.com/garoon/css-for-SweetAlert にアクセスします。
[Clone or download]ボタンをクリックして、「Download ZIP」を選択します。
ダウンロードした zip ファイルを解凍します。
解凍したファイルの「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 カスタマイズの基本を学べるこちらの記事を参照してください！

Garoon 開発 Tips