JIRAはMail.Ruグループで広く使用されています。現在、このシステムはプロジェクト管理とエラーの追跡だけでなく、採用、契約交渉、出張など、さまざまな運用プロセスの編成にも使用されています。多くのビジネスプロセスがJIRAの課題モデルに完全に適合するため、これは一方で非常に便利です。ただし、当社が特別に作成したプラグインを使用して実装される特定の機能も必要になることがよくあります。

数年前、私たちはシンプルなサードパーティのJSスクリプトと汎用プラグインに満足していました。時間が経つにつれて、JIRAはそれぞれ運用プロセスに深く浸透し、これらのプロセスに特化した機能の要件が大きくなりました。現在、JIRAとConfluence用にカスタマイズされた機能を開発することをタスクとする別の部門があります。その一環として、優れた専門知識が蓄積されています。

現在、多くのサードパーティJIRAプラグインは高品質のインターフェースを誇っていません。これは、一部の有料プラグインにも適用されます。ただし、便利で美しいインターフェイスを迅速に開発するためのすべてのツールがあります。この記事では、そのうちの1つであるAUIフレームワーク（アトラシアンユーザーインターフェイスフレームワーク）について説明します。

読者は原則としてプラグインの作成方法に精通していることが前提となります。そうでない場合は、たとえばここでそれについて読むことができます。

1. AUIフレームワークとは何ですか？

AUIフレームワークは、一連のスクリプト、スタイルシート、テンプレート、およびインターフェイスの作成に使用されるその他のリソースで構成されています。アトラシアンによって開発および保守されています。一般に、AUIフレームワークでは、Bootstrapのような他のフレームワークとほぼ同じものを見つけることができます。ただし、AUIフレームワークをページに追加で埋め込み、ロードする必要はありません。また、すべてのコンポーネントのスタイルはJIRA自体とまったく同じです-それは彼らの助けを借りて構築されています。したがって、結果のプラグインは見栄えがよく、システムで動作します。

ライブラリを使用してインターフェイスを開発する方がはるかに高速である可能性があり、結果を使用することは喜びです。開発した機能を使用する従業員は非常に満足しています。

2.フレームワークの主要コンポーネント

1つの記事のフレームワーク内のすべてのコンポーネントを検討することは不可能であり、必要ではありません。これに関するドキュメントがあります。代わりに、最も便利なものを以下に説明します-私たちの生活をできるだけ簡単にし、ほぼすべてのプロジェクトで使用されているものです。

2.1ページのレイアウトとデコレータ

たとえば、設定を管理するためにプラグインにページが必要な場合は、それを構成する必要があります。これには2つのアプローチがあります。

最初の方法は、このページをゼロから作成することですが、ページコンポーネントを使用して標準ページの設計を完全に繰り返すようにします。この場合、ページのヘッダーとフッターは必要に応じて変更できます。

これらの変更が不要な場合は、デコレータを使用して別のアプローチを選択することをお勧めします。これは、標準スタイルの1つに従ってページを自動的にフレーミングするためのツールの名前です。

一般的なタスクは、たとえば、管理領域でページをすばやく作成することです。これは、 admin

デコレータを使用して非常に簡単に実行できます。スクリーンショットで紫色で強調表示されているコンテンツのみがレイアウトに必要です。さらに、適切なメタタグを使用して、ページが属するセクションとそれに対応するタブを指定できます。

このページに対応するHTMLコードは次のとおりです。

 <html> <head> <title>$i18n.getText( "ru.mail.jira.plugins.recruitment.configuration.title" )</title> <meta name="decorator" content="admin" /> <meta name="admin.active.section" content="admin_plugins_menu/recruitment-admin-section"> <meta name="admin.active.tab" content="ru.mail.jira.plugins.recruitment:configuration-link"> </head> <body> <!--,   ,  --> </body> </html>

可能なデコレータの完全なリストはここにあります。

2.2ダイアログ

たとえば、ダイアログを使用して、ユーザーがAJAXリクエストを使用してテーブルのエントリを作成または変更できるようにします。一方では、これはユーザーにとって便利であり、他方では、別のページを使用するよりも速く実装されます。

フレームワークには、 DialogとDialog 2の2つのバージョンのモーダルダイアログがあります。ダイアログ2は新しいコンポーネントであり、柔軟性が向上していますが、実験段階にあります。これは、フレームワークの新しいバージョンでAPIを変更する可能性があることを意味します。それにもかかわらず、私たちはそれを使用します。

2.3 AUI Select2

このコンポーネントは、Atlassian Design Guidelinesに従ってスタイル設定されたjQuery Select2プラグインです。値による検索、オプションのAJAXロード、オプションのカスタム表示などの優れた機能を提供します。

オプションを選択しやすくするためによく使用します。

2.4ボタン

他の多くのフレームワークと同様に、さまざまなボタンスタイルがサポートされています。

2.5設計要素

ページを明るく、読みやすくするために利用できるさまざまなツールがあります。それらの1つはアイコンです。テキストで直接使用するか、リンクやボタンに挿入できます。

JIRAでGravatarを設定しました。これは、イントラネット上のプロファイルから画像をアップロードします。したがって、ユーザー名の横にアバターを表示することは理にかなっています。次のようになります。

強調表示されたラベルの形式でステータスを発行できます。これにより、ユーザーはしばらくしてからテキストを読み取らず、色のみに注意を払うことができます。

上記の特殊なコンポーネントに加えて、フレームワークは自動的に見出し、段落、およびリストを作成します。

aui

クラスを追加することにより、テーブルにレイアウトを適用できます。オプションで、 aui-table-rowhover

追加できます。ホバーすると、行全体が自動的に強調表示されます。興味深いことに、この機能はドキュメントに記載されていません。他のいくつかのことと同様に、AUIを使用してJIRAページのレイアウトを分析することで、これについて知ることができます。

2.6ヘルパースクリプト

jQueryライブラリはAUIフレームワークの一部ではありませんが、それでもJIRAに組み込まれています。 AJS.$

を介してアクセスできます。通常、スクリプトは次のようにラップします。

 (function ($) { AJS.toInit(function () { // Script starts here... }); })(AJS.$);

最初のラッパーでは、通常の方法でjQueryにアクセスできます。2番目のラッパーでは、スクリプトの実行を開始するまでに、DOMツリーとAUIがすでに初期化されます。

ホットキーの操作を実装するための特別なコンポーネントがあります。

AJSには、アプリケーションへのフルパスを取得したり、ローカライズされた文字列をロードしたりするなど、いくつかの他の便利なヘルパー関数も含まれています。それらの詳細については、こちらをご覧ください。

3.できることの例

フレームワークで解決された実際のインターフェイスタスクの例をいくつか見てみましょう。

それらの1つは、カウンターパーティの作成と保管でした。いくつかのエンティティは、パラメータの小さなセットです。これらのデータはSAPからインポートされたもので、多くのデータがありました（数万）。問題として保存せずにシステムをオーバーロードするのではなく、Active Objects APIを使用してデータベースに保存することにしました。したがって、取引相手を管理する能力が必要でした。

インターフェイスには、ページング、検索、およびこれらのエンティティを管理する機能が実装されました。同期に関するサービス情報はツールチップに非表示になっており、同期された取引相手に対してのみ表示されます。

もう1つのタスクは、整数データを含むテーブルを表示することで、その一部は編集可能である必要がありました。 AJSにはそのようなコンポーネントはありませんでした。そのため、ソースを把握し、インライン課題編集のレイアウトとスクリプトを調整しました。

最後の例として、リストからユニットを選択してみましょう。通常のSelectで仕事をすることはできますが、選択を簡素化するために、部門長をユーザーに見せたいと考えました。したがって、AUI Select2を使用しました。起こったことは次のとおりです。

4.文書化されていない機能

フレームワークのドキュメントおよびJIRAの組み込みライブラリに記載されていない機能がいくつかあります。 JIRAの将来のバージョンでは、それらが完全に変更または消失する可能性があることは明らかですが、まず第一に、これはほとんどありません。

例として、 aui-table-rowhover

のaui-table-rowhover

cssクラスを引用しましょう。ほとんどすべての標準テーブルで使用されているため、JIRAの次のバージョンでは完全に消えることはありません。

別の例は、ページを暗くしてブロックすることです。説明したカウンターパーティ管理ページで同期を呼び出すときにこれを実行したかったのです。 JIRAソースを見ると、これは既に以下で実装されていることがわかりました。

 AJS.dim(); JIRA.Loading.showLoadingIndicator();

それに応じて

 AJS.undim(); JIRA.Loading.hideLoadingIndicator();

一般に、目的の機能が既にJIRAのどこにあるかを調べ、それがどのように実装されているかをソースで調べることをお勧めします。多くの場合、これにより、目的の結果をより簡単かつ迅速に取得できます。

5.落とし穴

一般に、フレームワークは非常に安定して動作します。開発中に発生した唯一のバグは、インラインダイアログ内の入力をクリックしたときにインラインダイアログが消えることです。繰り返しになりますが、ソースを少し掘り下げて、回避策を見つけることができました-要素をクリックするイベントがダイアログ内に送信されないようにします：

 content.click(function(e) { e.stopPropagation(); });

公式バグトラッカーで既知のすべての問題について調べることができますが、それが必要になるとは思いません。

フレームワークのバージョン（および、それに応じてコンポーネントのセット）は、プラグインが実行されているJIRAのバージョンに依存することも理解しておく必要があります。 JIRAのいくつかのバージョンのサポートが必要な場合は、それらの下でのテストを忘れないでください。内部プラグインを開発する場合、JIRAの現在のバージョンのすぐ下で記述しているため、これを行いません。それでも、JIRAを新しいバージョンにアップグレードする前に、Atlassianから発行されたリリースノートを考慮する必要があります。

6.次は？

AUIフレームワークコンポーネントに関する非常に詳細なホワイトペーパー。
AUIフレームワーク自体の公式ドキュメントは、プロジェクトに実装する方法、開発に参加する方法、および更新の準備方法に関するものです。
コンポーネントを操作して、その外観を確認できるサンドボックス。

7.結論

質の高いインターフェースの開発は唯一ではありませんが、優れたプラグインを作成するための非常に重要なステップです。 AUIフレームワークにより、この開発がより簡単に、より速く、より効率的になります。また、フレームワークのソースコードを分析することを恐れないでください。これにより、フレームワークをよりよく理解し、対話することができます。

インターフェイスに加えて、ユーザーには見えない他の高品質の開発プラクティスがあります。次のいずれかの投稿でそれらについてお話します。

AUIフレームワークを使用した高品質のJIRAプラグインインターフェイス