Atlassian User Interface のアップグレード

Jira 8.0 には、Atlassian User Interface (AUI) 8.0 が含まれます。当社でアップグレードを実施した際に、アドオンを簡単に更新するためのいくつかのベスト プラクティスを作成しました。

アップグレード ガイド

アップグレード ガイドをご利用いただけます。詳細については、「AUI 8.0 アップグレード ガイド」を参照してください。

変更

アップグレード ガイドに加えて、AUI 8.0 での最も重要な変更点を一覧化しました。当社が Jira 8.0 で AUI のアップグレードを行った際に収集したベスト プラクティスは、次のとおりです。

アイコンの調整

これまで vertical-aligntext-top に設定されていましたが、これが text-bottom に変更されています。

修正方法

アイコンはこの変更内容にかかわらず適切に表示されるようにしていますが、念のため、表示をご確認ください。AUI の縦揃えをオーバーライドしている場合、オーバーライドを削除して、既定の text-bottom を使用します。

.icon-wait

.aui-icon-wait クラスおよびアイコンは削除されました。

修正方法
  1. 代わりに <aui-spinner></aui-spinner> を使用します。

  2. この依存関係を適切な Web リソース直下の atlassian-plugin.xml に追加します。

    <dependency>com.atlassian.auiplugin:aui-spinner</dependency>

グローバル アンダースコア

グローバル アンダースコアは非推奨となったため、使用しないでください。

修正方法
  1. 代わりに次の AMD モジュールをインポートします。require('underscore')

  2. この依存関係適切なWeb リソース直下の atlassian-plugin.xml に追加します。
    • <dependency>jira.webresources:underscore-1.8.3</dependency>
グローバル バックボーン

グローバル バックボーンは非推奨となったため、使用しないでください。

修正方法
  1. *.js ファイルで “Backbone” の使用状況を確認します。

  2. 次の AMD モジュールをインポートします。require('backbone')

  3. これらの依存関係のいずれかを適切なWeb リソース直下の atlassian-plugin.xml に追加します。

    • (推奨) <dependency>jira.webresources:backbone-1.3.3</dependency>

    • <dependency>jira.webresources:ajs-backbone-amd-shim</dependency>

app-header

AUI は AUI アプリケーション ヘッダー コンポーネントを既定では提供しなくなりました。これを使用する場合、明示的にインポートする必要があります。

修正方法
  1. アドオンに AUI ヘッダーが存在するかどうかを確認します。

    • soy 内: call aui.page.header

    • css 内: class aui-header

    • html 内: nav.aui-header

  2. 必要に応じて、次の依存関係を追加します。

    • com.atlassian.auiadd-on:aui-header (旧: aui-header-async)

    • com.atlassian.auiadd-on:aui-header-unresponsive (静的ヘッダー)

jquery-ui

jQuery UI コンポーネントを明示的にインポートする必要があります。

修正方法

基本的な jQuery UI

Jira はAUI を介して基本的な jQuery UI を引き続き提供します。これで要件が満たされる場合、次の依存関係を追加することで使用できます。

<dependency>jira.webresources:jquery-ui</dependency>

その他の機能

アドオンに jQuery UI のほかの機能を追加する必要がある場合は、次の Web リソース キーを見つけ、関連する依存関係を追加します。

Web リソース キー 追加する依存関係

$(selector).draggable(...)

jira.webresources:jquery-ui-draggable

$(selector).droppable(...)

jira.webresources:jquery-ui-droppable

$(selector).mouse(...)

jira.webresources:jquery-ui-mouse

$(selector).position( { ... } )

jira.webresources:jquery-ui-position

$(selector).resizable(...)

jira.webresources:jquery-ui-resizable

$(selector).selectable(...)

jira.webresources:jquery-ui-selectable

$(selector).sortable(...)

jira.webresources:jquery-ui-sortable

inline-dialog1

InlineDialog1 は廃止され、既定では提供されなくなりました。

修正方法

これを修正する方法は 2 つあります。

  • 代わりに aui-inline-dialog2 を使用します。

  • 次の依存関係を追加して現在のコードを動作させます。com.atlassian.auiplugin:inline-dialog


dialog1

dialog1 は廃止され、既定では提供されなくなりました。

修正方法

これを修正する方法は 2 つあります。

  • 代わりに aui-dialog2 を使用します。

  • 次の依存関係を追加して現在のコードを動作させます。com.atlassian.auiplugin:dialog

dropdown1

dropdown1 は廃止され、既定では提供されなくなりました。

修正方法

これを修正する方法は 2 つあります。

  • 代わりに aui-dropdown2 を使用します。

  • 次の依存関係を追加して現在のコードを動作させます。com.atlassian.auiplugin:dropdown

AJS()

AJS はオブジェクトになり、関数ではなくなりました。このため、次の影響があります。

  • AJS は DOM 要素の作成をサポートしなくなりました。
  • AJS を、document オブジェクトのプロキシとして使用することはできません。たとえば、イベントのトリガー時やリスニング時には次のようになります。
    • $(AJS).trigger
    • $(AJS).bind 
修正方法
  1. AJS() が関数として実行されている箇所を見つけます。

  2. 次のいずれかを使用してコードを書き直します。

    • ネイティブな DOM 関数

    • jQuery

例:

  • AJS("div")document.createElement、または jQuery("<div></div>")、または他のテンプレート ソリューションに変更します。
  • AJS.$(AJS).trigger('abcd')$(document).trigger('abcd') に変更します。
  • AJS.$(AJS).bind('abcd')$(document).on('abcd') に変更します。
async

Promise/A+ と jQuery3 の互換性により、AUI 8 では多くの内容が既定で async です。AJS.toInit が async の方式で実装されていることを確認します。

AJS.Cookie

AJS.Cookie は非推奨になりました。

修正方法

Cookie に関連するコードは jslibs に含まれているため、次のように再使用できます。

  • AMD モジュール: atlassian/libs/cookie-1.0.0

  • XML 依存関係: com.atlassian.plugin.jslibs:cookie-1.0.0

なお、AJS.Cookie は非推奨の Web リソースとして引き続き AUI 8 に同梱されています。

  • XML 依存関係: com.atlassian.auiplugin:cookie

jQuery アドオン

いくつかの jQuery アドオンと jQuery ウィジェットが AUI に同梱されなくなりました。以下のセクションを展開して、完全な一覧と利用可能な代替手段をご確認ください。

修正方法
アドオン / ウィジェット 代替手段

aop

このアドオンは削除されましたが、これを使用していたのは toggle-block のみであると考えています。異なる事例の場合、<resource> を巻き上げて再使用します。

jQuery form アドオン

次の依存関係を追加します。

jira.webresources:jquery

.fn.progressBar

次の依存関係を追加します。

jira.webresources:jquery-progressbar

.fn.throbber

次の依存関係を追加します。

jira.webresources:jquery-throbber

.fn.spin

.fn.stopSpin

  • 次の依存関係を追加します。jira.webresources:jquery-spin

  • または、代わりに <aui-spinner> を使用します。

.fn.selection

.fn.selectionRange

.fn.wrapSelection

アドオンがこれを使用している場合、次の依存関係を追加します。

jira.webresources:jquery-selection

ajs-zepto

ajs-zepto は AUI から削除されました。ただしこれは、アドオンのモバイル バージョンがある場合にのみ使用します。 

修正方法
  1. アドオンで Zepto を見つけます。

  2. 次のソリューションのいずれかを使用します。

    • プロジェクトに Zepto をインポート

    • 代わりに jQuery を使用

aui-message-classes

次の AUI メッセージ クラスは削除され、aui-message プレフィクス: successhintwarning, info、および error が必要になりました。

修正方法

ソース コード (java、js、soy、jsp、vm) で aui-message クラスを検索します。

  1. successhintwarninginfo、および error のなどクラスを確認します。

  2. aui-message プレフィクスをそれぞれのクラスに追加します。例:

    • infoaui-message-info

    • erroraui-message-error

CSS クラス

古い "messages" および "gadgets" アイコンの CSS クラスが削除されました。完全な一覧を表示するには、以下のセクションを展開してください。

削除された messages アイコン...
  • .aui-icon-success
  • .aui-icon-warning
  • .aui-icon-info
  • .aui-icon-error
  • .aui-icon-hint
  • .aui-icon-generic
  • .icon-generic
  • .icon-error
  • .icon-hint
  • .icon-info
  • .icon-success
  • .icon-warning

代替方法:

代替方法として iconfont を使用できます。

削除された gadgets アイコン...
  • .icon-dropdown
  • .icon-dropdown-active
  • .icon-dropdown-active-d
  • .icon-maximize
  • .icon-maximize-d
  • .icon-minimize
  • .icon-minimize-d
  • .icon-move
  • .icon-move-d

代替方法:

代替方法として iconfont を使用できます。

その他の CSS クラス...

以下のクラスは削除され、AUI 8 での代替方法は提供されていません。

  • .aui-dropdown-icon
  • .aui-box-shadow
  • .vertical-tabs-aui-legacystyle2011
  • .aui-nav-current
  • .aui-zebra
  • ヘッダー サイズの -hero および -marketing 変数
最終更新日 2019 年 8 月 13 日

この内容はお役に立ちましたか?

はい
いいえ
この記事についてのフィードバックを送信する
Powered by Confluence and Scroll Viewport.