Atlassian User Interface のアップグレード ガイド

このページの内容

お困りですか?

アトラシアン コミュニティをご利用ください。

コミュニティに質問

Confluence 7.0 には、AUI (Atlassian User Interface) の AUI 8.3.x へのメジャー アップグレードが含まれます。AUI 8 アップグレード ガイドに加え、アプリのアップグレードを支援するいくつかのベスト プラクティスを作成しました。

アトラシアンでは作業の進捗にともない、このページを毎週更新します。

変更

AJS.indexOf

AJS.indexOf
このメソッドは使用できなくなりました。
修正方法

[].indexOf[].includes などのネイティブ配列メソッドを使用してください。


Backbone

AUI プラグインの Backbone ライブラリがアップグレードされましたが、Confluence コードベースは引き続き 1.0.0 を使用します。

Backbone 1.0.0 を使用する必要がある場合、次の依存関係を宣言します。 

Confluence の Backbone 1.0.0
<dependency>confluence.web.resources:backbone</dependency>

また、提供された AMD モジュールを使用する必要があります。

Backbone 1.0.0 の使用
define('my-module', [
    'backbone'
], function(
    Backbone
) {
    // Your module code
});

Backbone 1.3.3 を使用したい場合、jslibs から工場出荷時の AMD モジュールとして取得できます。

Backbone 1.3.3
<dependency>confluence.web.resources:underscore</dependency>
<dependency>confluence.web.resources:jquery</dependency>
<dependency>com.atlassian.plugin.jslibs:backbone-1.3.3-factory</dependency>

次に、Backbone インスタンスを構築します。

Backbone 1.3.3 の使用
define('my-module', [
    'confluence.web.resources:underscore',
    'jquery',
    'atlassian/libs/factories/backbone-1.3.3'
], function(
    _,
    $,
    BackboneFactory
) {
    const Backbone = BackboneFactory(_, $);
    // Your module code
});

これは Confluence が提供するグローバル Backbone と競合するため、AUI プラグインから Backbone バージョンを直接要求しないようにします。

AUI プラグインの Backbone 1.3.0
<dependency>com.atlassian.auiplugin:ajs-backbone</dependency>


jQuery 1.7.2 から 2.2.4 へのアップグレード

現在、Confluence は jQuery 2.2.4 のみを提供しています。関連するアップグレード ガイド、特に重要な変更の大部分を網羅している「jQuery 1.9」 をご確認ください。

提供方法は、以前の Confluence リリースと同じです。

  • jQuery web-resource で依存関係を宣言します。 
<dependency>confluence.web.resources:jquery</dependency>
  • Javascript で、jquery AMD モジュールを要求します。
const $ = require('jquery');
 
// or
 
define('my-module', ['jquery'], function($) {
});
  • 複数の Deferred オブジェクトが $.when(). に渡される際に、コンテキスト オブジェクトを保存します。詳細については jQuery チケット 11749 を参照してください。
  • $.fn.enable() および $.fn.disable() は現在非推奨となっており、正常に動作しない可能性があります。AMD モジュール confluence/form-state-control の新しいメソッド disableElement および enableElement のご使用をおすすめします。web-resource にはキー com.atlassian.confluence.plugins.confluence-frontend:form-state-control があります。


//declare dependency in atlassian-plugin.xml
<dependency>com.atlassian.confluence.plugins.confluence-frontend:form-state-control</dependency>
//in JS file
define('moduleA', ['confluence/form-state-control'], function(FormStateControl) {
    FormStateControl.disableElement(element);
    FormStateControl.enableElement(element);
})


グローバル変数 $ 経由での使用は推奨されません。この変数は他のすべてのグローバル変数と同様に、将来的には無効になる予定です。

Confluence 7.0 には、一部の古い jQuery API の提供に使用されている jquery-migrate プラグインがありましたが、これは将来的に削除される予定です。プラグインは、最初の 7.0 バージョン以降で提供される 1.x API に依存しないようにします。

AUI jQuery フォーム

$.ajaxForm() および $.ajaxSubmit() には明示的な依存関係が必要になりました。

<dependency>com.atlassian.auiplugin:jquery-form</dependency>


AUI メッセージの更新

AUI メッセージ スタイルが更新されました。 

更新内容を確認

これらのスクリーンショットは、AUI 8.3.2 へのアップグレード前後の AUI メッセージの外観を示します。

AUI のアップグレード前


AUI のアップグレード後


AUI message クラス

従来の AUI message CSS クラス (success, warning,  および error など ) は Confluence 7.0 で削除されます。

修正方法

アプリが Javascript で AUI message の動作を制御する必要がある場合、新しいクラス (aui-messageプレフィックス付き) で要素をクエリする必要があります。

アイコン

AUI message がアイコンを自動的にレンダリングするようになりました。古いテンプレートで追加のアイコンが非表示になることはありません。これにより、以下のように不要なアイコンや空白行が発生する可能性があります。

修正方法

この問題を修正するには、追加のアイコンの HTML マークアップを削除します。

Before

<div class="aui-message warning">
	<span class="aui-icon icon-info"></span>
	Message Body.
</div>

現バージョン

<div class="aui-message warning">
	Message Body.
</div>


Confluence モバイル 

現在、Confluence Mobile Webでは Zepto.js 0.8 ではなく jQuery 2.2.4 を使用しています。このため、Confluence Mobile Web Plugin は、グローバル $ 変数に影響を与えることなく、Confluence または AUI プラグインから任意の依存関係を取得できます。

Mobile Web ビューでは、Backbone 0.9.2 を使用しています。Backbone ビュー拡張メソッドは、要素プロパティとしての jQuery オブジェクトをサポートしません。

Backbone.View.extend({
    // ...
    el: $(".css-selector")[0] // native dom only for Backbone 0.9.2
    // ...
}


削除された Zepto 固有の機能

この作業の一環として、次の Zepto 特有の機能を削除しました。

  • $.cookieAJS.cookie に置き換えました。
  • $.visible() を削除しました。代わりに $.filter(":visible").length をご利用ください。

Mobile CSS ヘルパー クラスの削除

class="platform-android" andclass="platform-ios" などの、プラットフォーム固有の Mobile CCS ヘルパー クラスをすべて削除しました。

最終更新日 2019 年 8 月 2 日

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

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