Atlassian User Interface upgrade

Jira 8.0 will include Atlassian User Interface (AUI) 8.0. While doing the upgrade ourselves, we've created some best practices to make it easier for you to update your add-ons.

アップグレードガイド

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

変更

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

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

.icon-wait
`.aui-icon-wait` クラスおよびアイコンは削除されました。
修正方法代わりに `<aui-spinner></aui-spinner>` を使用します。この依存関係を適切な Web リソース直下の `atlassian-plugin.xml` に追加します。 `<dependency>com.atlassian.auiplugin:aui-spinner</dependency>`

グローバルアンダースコア
グローバルアンダースコアは非推奨となったため、使用しないでください。
修正方法代わりに次の AMD モジュールをインポートします。`require('underscore')` この依存関係を適切なWeb リソース直下の `atlassian-plugin.xml` に追加します。 `<dependency>jira.webresources:underscore-1.8.3</dependency>`

グローバルバックボーン

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

修正方法

*.js ファイルで “Backbone” の使用状況を確認します。
次の AMD モジュールをインポートします。require('backbone')
これらの依存関係のいずれかを適切なWeb リソース直下の atlassian-plugin.xml に追加します。
- (推奨) <dependency>jira.webresources:backbone-1.3.3</dependency>
- <dependency>jira.webresources:ajs-backbone-amd-shim</dependency>

app-header
AUI は AUI アプリケーションヘッダーコンポーネントを既定では提供しなくなりました。これを使用する場合、明示的にインポートする必要があります。
修正方法アドオンに AUI ヘッダーが存在するかどうかを確認します。 soy 内: `call aui.page.header` css 内: `class aui-header` html 内: `nav.aui-header` 必要に応じて、次の依存関係を追加します。 `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

修正方法

AJS() が関数として実行されている箇所を見つけます。
次のいずれかを使用してコードを書き直します。
- ネイティブな 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 から削除されました。ただしこれは、アドオンのモバイルバージョンがある場合にのみ使用します。
修正方法アドオンで Zepto を見つけます。次のソリューションのいずれかを使用します。プロジェクトに Zepto をインポート代わりに jQuery を使用

aui-message-classes
次の AUI メッセージクラスは削除され、`aui-message` プレフィクス: `success`、`hint`、`warning`, `info`、および `error` が必要になりました。
修正方法ソースコード (java、js、soy、jsp、vm) で `aui-message` クラスを検索します。 `success`、`hint`、`warning`、`info`、および `error` のなどクラスを確認します。 `aui-message` プレフィクスをそれぞれのクラスに追加します。例: `info` → `aui-message-info` `error` → `aui-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 変数

製品

Jira Software

Jira Service Management

Jira Work Management

Confluence

Bitbucket

リソース

関連ドキュメント

コミュニティ

システムステータス

提案とバグ

Marketplace

請求とライセンス情報

Atlassian User Interface upgrade

Jira 8.0 への準備

このページの内容

お困りですか?

アップグレードガイド

変更

ページ

Viewport

Confluence

Atlassian User Interface upgrade

Jira 8.0 への準備

このページの内容

関連コンテンツ

お困りですか?

アップグレード ガイド

変更

関連コンテンツ

アップグレードガイド