cybozu developer network

Enhanced by Google

カテゴリー内の他の記事

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

作成日
更新日

Index

はじめに

そのカスタマイズ大丈夫？ アップデートの影響を受けにくいカスタマイズ Tips の Garoon 編です。

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

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

 

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

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

DOM操作

HTML要素の参照

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

その場合、garoon.schedule.event.getHeaderSpaceElement() などの API で取得した要素に、独自のHTML要素を追加しましょう。
API を使って要素を取得できる画面や要素の位置は、Garoon JavaScript API 一覧の「情報の取得・設定」の「要素の取得」に記載しています。
また、ポートレットカスタマイズの場合は、HTMLポートレットの「ポートレットの内容」に記載した DOM 要素を使ってください。

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

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

position を使った要素の配置

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

URL の利用

URL の参照

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

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

URLの指定

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

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

URLパラメーター（クエリーストリング）を利用する

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

Garoon カスタマイズ特有で注意すべきこと

jQuery

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によるカスタマイズ）。jquery.png

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

SweetAlert

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」を利用します。

スケジュールのカスタム項目

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

おわりに

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

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

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

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

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