Atlassian User Interface のアップグレード ガイド
Confluence 7.0 には、AUI (Atlassian User Interface) の AUI 8.3.x へのメジャー アップグレードが含まれます。AUI 8 アップグレード ガイドに加え、アプリのアップグレードを支援するいくつかのベスト プラクティスを作成しました。
アトラシアンでは作業の進捗にともない、このページを毎週更新します。
変更
AJS.indexOf
AJS.indexOf |
---|
このメソッドは使用できなくなりました。 |
Backbone
AUI プラグインの Backbone ライブラリがアップグレードされましたが、Confluence コードベースは引き続き 1.0.0 を使用します。
Backbone 1.0.0 を使用する必要がある場合、次の依存関係を宣言します。
<dependency>confluence.web.resources:backbone</dependency>
また、提供された AMD モジュールを使用する必要があります。
define('my-module', [
'backbone'
], function(
Backbone
) {
// Your module code
});
Backbone 1.3.3 を使用したい場合、jslibs から工場出荷時の AMD モジュールとして取得できます。
<dependency>confluence.web.resources:underscore</dependency>
<dependency>confluence.web.resources:jquery</dependency>
<dependency>com.atlassian.plugin.jslibs:backbone-1.3.3-factory</dependency>
次に、Backbone インスタンスを構築します。
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 バージョンを直接要求しないようにします。
<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 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 特有の機能を削除しました。
$.cookie
をAJS.cookie
に置き換えました。$.visible()
を削除しました。代わりに$.filter(":visible").length
をご利用ください。
Mobile CSS ヘルパー クラスの削除
class="platform-android" and
や class="platform-ios"
などの、プラットフォーム固有の Mobile CCS ヘルパー クラスをすべて削除しました。