Jira 課題コレクターの高度利用

課題コレクターの利用

このページの内容

お困りですか?

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

コミュニティに質問

Jira 課題コレクターのカスタマイズ

Jira 課題コレクターは、Jira 課題コレクター管理画面で生成される 1 行の他には JavaScript を追加することなく使用できます。しかし、いくつか他の方法を使って Jira 課題コレクターをカスタマイズすることもできます。

  • パッケージ化されたトリガーで提供されるものとは別のリンクやボタンからフィードバック フォームを起動するように、カスタム・トリガーを設定します。
  • ユーザーの便宜のため、JavaScript を使用して、フィールドの既定値を設定します。  
  • フィードバック フォームに表示されない、課題のフィールド値を指定します。

このページでは、すでに 課題コレクターの使用 に習熟しているユーザーを前提にしています。

(warning)警告: 課題コレクターによって公開された JavaScript は安定した API とはみなされず、新しい Jira のリリースによって変更されることがあります。

On this page:

カスタムトリガーの設定

コレクターを設定して、カスタムトリガーを使用する

別のトリガーやボタンを使用して、ウェブサイト上で課題コレクターを起動する場合は、以下の説明のように、課題コレクターを設定します。

  1. 新しい課題コレクターを追加するか、既存の課題コレクターを編集します。
  2. トリガーのセクションまで下にスクロールし、「カスタム」オプションを選択します。
  3. トリガー テキストはカスタム トリガーによって上書きされるため、設定する必要はありません

カスタム トリガー用の課題コレクター スクリプトの追加

Creating and debugging custom scripts are outside of the scope of Atlassian Support. For assistance, please post any questions on Atlassian community

カスタム トリガーの追加用に Jira で生成される課題コレクター スクリプトは、カスタムトリガー向けの JavaScript 機能が含まれているため、標準のトリガー用に生成されたスクリプトとは若干異なります。

課題コレクターのカスタマイズは、グローバルオブジェクト ATL_JQ_PAGE_PROPS の作成または拡張によって行います。これによって、カスタムトリガーの追加、フィールド既定値の設定、その他が可能になります。

Note: In Jira 5.1 (and version 1.1 of the Issue Collector plugin), the issue collector administrative interface let you define the custom trigger function , and you did not need to include it in the JavaScript on the page.  In version 1.2 of the Issue Collector, the custom trigger JavaScript is a part of the generated JavaScript that you should copy and paste into your web page.

The code snippet below shows a sample page with the generated issue collector JavaScript.

In the example below, we've added a simple button in , and made that button launch the issue collector. This is done simply by replacing 'myCustomTrigger' in the generated JavaScript with the id of the button ('feedback-button')

<head>
	<!-- We pasted the generated code from the Issue Collector here, after choosing a custom trigger -->

	<!-- This is the script for the issue collector feedback form -->

	<script type="text/javascript" src="<Jira URL>/s/en_US-ydn9lh-418945332/803/1088/1.2/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector.js?collectorId=d03d7bd1"></script>
 
	<!-- This is the script for specifying the custom trigger.  We've replaced 'myCustomTrigger' with 'feedback-button' -->

	<script type="text/javascript">
		window.ATL_JQ_PAGE_PROPS =  {
			"triggerFunction": function(showCollectorDialog) {
				//Requries that jQuery is available! 
				jQuery("#feedback-button").click(function(e) {
					e.preventDefault();
					showCollectorDialog();
				});
			}
		};
	</script>


</head>
 
<body>

	<h2>Jira Issue Collector Demo</h2>
	<a href="#" id="feedback-button" class='btn btn-primary btn-large'>Report feedback</a>

</body>


手動によるカスタム トリガー機能の追加

カスタム トリガー JavaScript は課題コレクターによって生成される JavaScript に含まれています。しかし、このセクションでは、生成される JavaScript に追加行を貼り付けることなく、カスタム トリガー機能を追加する方法について説明します。

カスタム トリガーを追加するには、グローバル オブジェクト ATL_JQ_PAGE_PROPS に triggerFunction プロパティを追加します。triggerFunction は関数として定義し、課題コレクターを表示する関数を示す引数を 1 つ取る必要があります。

You can invoke the issue collector from any element on your page by adding a click handler in triggerFunction as shown below. In this example, we will be calling the issue collector from our #feedback-button anchor tag defined in the above markup.  You can assign multiple triggers for the same issue collector by adding more click handlers.

window.ATL_JQ_PAGE_PROPS = $.extend(window.ATL_JQ_PAGE_PROPS, {


	// ==== custom trigger function ====
	triggerFunction : function( showCollectorDialog ) {
		$('#feedback-button').on( 'click', function(e) {
			e.preventDefault();
			showCollectorDialog();
		});
 
		// add any other custom triggers for the issue collector here
	}

});

triggerFunction は、$(document).ready() 部分の後で、課題コレクターによって呼び出されます

JavaScript からフィールド値を設定する

フィールド値の設定

The issue collector gives you the option to set field values for any of the fields on the issue type.  This is done by adding the property fieldValues in the global object ATL_JQ_PAGE_PROPS. There are different methods for setting default values for different field types. The code samples below show a visual representation of a field in Jira and its relevant markup, and how to set a default value for that field type. Use a DOM inspection tool such as Firebug in the Jira Issue Create Screen to extract the field names and values relevant to your issue collector. Please note that the Issue Collector is not supposed to be a replacement for the Jira API. If you require a more customized solution, make use of the Jira API to create Jira issues from external websites. The Jira Travel App is a good example of how you can build a front end interface with Jira as the back end.

可視フィールド(既定のフィールド値の設定)

課題コレクターのフィードバック フォーム上に表示されるフィールドの値を設定すると、フォームが開いたときに、フィールドにはすでにその値が入力されています。  

非表示フィールド

課題コレクターでフィールドを実際に表示しないで、フィールド値を設定したい場合があります。この場合は、上記と同様の方法で、JavaScript を使用して、フィールド値を設定するだけですみます。そのフィールドはフォーム テンプレートに追加されていないため、表示されませんが、フィールド値は課題コレクターによって作成された課題に含まれます。

フィールド値を設定する JavaScript

フィールド値を設定するには、window.ATL_JQ_PAGE_PROPS の "FieldValues" ​​ブロック内のフィールド名とフィールド値のペアを指定します。すでにカスタム トリガーを定義している場合は、以下の例のように、window.ATL_JQ_PAGE_PROPS の定義に追加するだけですみます。

フィールドの名前は常に Jira 課題作成画面のフィールド名であり、課題コレクター フォームで与えられる上書き名ではないことに注意してください。

window.ATL_JQ_PAGE_PROPS = $.extend(window.ATL_JQ_PAGE_PROPS, {

	// ==== custom trigger function ====
	triggerFunction : function( showCollectorDialog ) {
		$('#feedback-button').on( 'click', function(e) {
			e.preventDefault();
			showCollectorDialog();
		}); 
	},
	// ==== we add the code below to set the field values ====
	fieldValues: {
 		summary : 'Feedback for new website designs',
		description : 'The font doesn\'t quite look right',
 		priority : '2'
	}					
});

特定のフィールド タイプを設定する方法の例 

テキスト フ​​ィールドの例

課題サマリのような、テキスト フ​​ィールドの値を設定するのは簡単です。以下は、課題コレクターのサマリなど、テキスト フ​​ィールドのマークアップです。(これは課題コレクターに含まれる表現を表示しているだけなので、追加する必要はありません。)。


<div class="field-group">
	...
	<input class="text long-field" id="summary" name="summary" type="text" value="">
	...
</div>

そして、次は JavaScript でフィールドの値を設定する方法です。

fieldValues : {
	summary : 'This is the default summary value'
}

課題優先度の選択リストの例

Setting the value for a select list field, such as the issue priority, requires a little more effort, because you need to know the element id for the choice you want to select.  Here's the markup for the Priority field in the issue collector (you do not need to add this, this is simply to show the representation that the issue collector contains):

<div class="field-group">
	...
	<input id="priority-field" class="text aui-ss-field ajs-dirty-warning-exempt" autocomplete="off">
	...
	<select class="select" id="priority" name="priority" style="display: none; " multiple="multiple">
		<option class="imagebacked" data-icon="/images/icons/priority_blocker.gif" value="1">Blocker</option>
		<option class="imagebacked" data-icon="/images/icons/priority_critical.gif" value="2">Critical</option>
		...
	</select>
	...
</div>

そして、次は JavaScript でフィールドの値を設定する方法です。

fieldValues : {
	'priority' : '2'
}

複数選択またはチェックボックスの例

複数選択(ブラウザのフィールドなど)またはチェックボックスの値を設定するには、値の配列を入力する必要があります。選択リストと同様に、課題作成画面のマークアップを見て、設定する値を知っている必要があります。

<div class="field-group">
	...
	<select class="select" id="customfield_10110" multiple="multiple" name="customfield_10110" size="5">
		<option value="-1" selected="selected">None</option>
        	<option value="10039">All Browsers</option>
		<option value="10037">Chrome</option>
		...
	</select>
	...
</div>

そして、次は JavaScript でフィールド値を設定する方法です。フィールド値が 1 つだけの場合でも、値の配列として設定する必要があります。

fieldValues : {
	'customfield_10110' : [ '10039', '10037' ]
}

カスタム フィールド

Setting a value for a custom field is exactly the same as any other field in Jira. Since multiple custom fields can share the same name, custom fields will be referenced by "customfield_" + the Id of the custom field in Jira. This ID can be seen in the markup for the Create Issue Screen in Jira, but can also be determine by looking at the URLs on the custom fields screen in Jira administration. Here's what the JavaScript would look like for setting a custom field whose id in Jira was 11111:

fieldValues : {
	'customfield_11111'   : 'San Francisco'
}

カスケード選択

カスケード選択の設定は 2 つの手順で行います。親値用の手順と子値用の手順です。以下は、カスケード選択フィールドの値を設定する例です。

fieldValues : {
	'customfield_12345'   : 'Australia',
	'customfield_12345:1' : 'Sydney'
}

特殊なフィールド

環境フィールド

既定では、課題コレクターは、URL、ユーザー エージェント、画面解像度などのユーザー コンテキストを環境フィールドに置いています。環境フィールドにもっと多くの情報を含めたい場合があります。この場合は、グローバル オブジェクト ATL_JQ_PAGE_PROPS に environment プロパティを追加します。これによって、JIRA 課題の環境フィールドに表示されるキー値のペアを追加できます。

window.ATL_JQ_PAGE_PROPS = $.extend(window.ATL_JQ_PAGE_PROPS, {
	// ==== custom trigger function ====
	triggerFunction : function( showIssueCollector ) {
		...
	}, 
	// ==== default field values ====
	fieldValues : {
		...
	}, 
	// ==== Special field config for environment ====
	environment : {
		'Custom env variable'  : $('#build-no').text(),
		'Another env variable' : '#007'
	}
});

制限付きフィールド

Jira へのログインを必要とするフィールドがあり、その設定には JavaScript を使用できません。担当者は、JavaScript を使用した設定ができないフィールドの例です。

動的関数

Environment and fieldValues properties can also be a function returning a object that will be executed immediately when the collector trigger is shown (not just before opening the collector form). This might come in handy when you might wish to capture contextual information relevant to the user.

window.ATL_JQ_PAGE_PROPS = $.extend(window.ATL_JQ_PAGE_PROPS, {
	// ==== custom trigger function ====
	triggerFunction : function( showIssueCollector ) {
		...
	}
	// ==== Special field config for environment ====
	, environment : function() {
		
		var env_info = {};
 
		if ( window.ADDITIONAL_CUSTOM_CONTEXT ) {
			env_info[ 'Additional Context Information' ] = window.ADDITIONAL_CUSTOM_CONTEXT;
		}
 
		return env_info;
	}
	// ==== default field values ====
	, fieldValues : function() {
 
		var values = {};
 		
		var error_message = $('.error_message');
		if ( error_message.length !== 0 ) {
			// record error message from the page context rather than asking the user to enter it
			values[ 'summary' ] = error_message.children('.summary').text();
			values[ 'description' ] = error_message.children('.description').text();
		}
 
		return values;
 
	}
});

複数の課題コレクターの埋め込み

2 つの異なるフォームを同じ Web ページ上に表示したい場合、Jira で 2 つの異なる課題コレクターを作成する必要があります。カスタム トリガーの設定、または課題コレクターのフィールド値の設定を行うには、ページにいくつか変更を加える必要があります。

  1. 課題コレクターのそれぞれに対して生成された JavaScript をページに含めます。
  2. 各コレクタの ID を検索します。これには 2 つの方法があります。
    1. スクリプトのパラメーターは、 "collectorId=<8 character id> です。 それが必要な ID です。
    2. 管理セクションの課題コレクター ページに移動し、埋め込みたい課題コレクターをクリックします。URL から collectorId をコピーします。

https://<Jira_URL>/secure/ViewCollector!default.jspa?projectKey=<PROJECT_KEY>&collectorId=<copy this part here>

次に、ATL_JQ_PAGE_PROPS オブジェクト内に課題コレクターごとの名前空間を別々に作成します。


window.ATL_JQ_PAGE_PROPS = $.extend(window.ATL_JQ_PAGE_PROPS, {
	'<collectorId_1>' : {        
		triggerFunction:
			// define trigger function

		fieldValues: {
			// define field values here       	
		}
	},
	'<collectorId_2>' : {        
		triggerFunction: 
			// define trigger function		
		fieldValues: {
			//define field values here
		}
	}
});

課題コレクターの埋め込み

Confluence サイトへの課題コレクターの埋め込み

The issue collector can be embedded into Confluence using the HTML Macro. Note that using the Macro would require you to embed the issue collector code separately on each page.

以前は、ユーザー マクロを使用して Confluence に課題コレクターを埋め込むことができたため、他の Confluence ユーザーが自身ページに埋め込むことができる再利用可能な課題コレクター マクロを作成できました。このオプションは、以下の既知のバグのため、現在は利用できません: CONF-26104 - 課題詳細を取得中... ステータス

現在、課題コレクターの埋め込みは、Confluence クラウドではサポートされていません。

Jira

The issue collector can be embedded in the announcement banner on a Jira page by embedding the above script and markup for your custom trigger in the announcement banner configuration screen. If you wish to change the location of your custom trigger, this can be easily done via jQuery. The following snippet shows how you can add the custom trigger onto the footer of all Jira pages.

You cannot embed an issue collector in your Jira Cloud site since markup is disabled for the announcement banner.

window.ATL_JQ_PAGE_PROPS = $.extend(window.ATL_JQ_PAGE_PROPS, {
	// ==== custom trigger function ====
	triggerFunction : function( showIssueCollector ) {
		// button markup - relevant css can be added via the style attribute
		var feedbackButton = "<a id='feedback-button'>Got Feedback?</a>";
		// embed the button in the footer
		$('.footer-link').append(feedbackButton);
		
		$('#feedback-button').click(function(e) {
			...
		});
	}

});

Please note that embedding the issue collector requires you to enable markup for the announcement banner.

完全なソースコード

このソースコードは、2 つの異なる課題コレクターをカスタム トリガーとともに同じページに埋め込む方法を示しています。

<body>

	<h2>Jira Issue Collector Demo</h2>
	<a href="#" id="feedback_button" class='btn btn-primary btn-large'>Report feedback</a><br />
	<a href="#" id="bug_button" class='btn btn-primary btn-large'>Report bug</a>

  	<!-- Jira Issue Collector - append this at the bottom of <body> -->
	<script type="text/javascript" src="https://<Jira URL>/s/en_US-ydn9lh-418945332/803/1088/1.2/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector.js?collectorId=<collectorId_1>"></script>
	<script type="text/javascript" src="https://<Jira URL>/s/en_US-ydn9lh-418945332/803/1088/1.2/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector.js?collectorId=<collectorId_2>"></script> 
 
	<!-- We will customize Jira in the following script tag -->

	<script type="text/javascript">
		// safely use jquery here since the issue collector will load it for you
		$(document).ready(function() {
 
			window.ATL_JQ_PAGE_PROPS = $.extend(window.ATL_JQ_PAGE_PROPS, {
 
				// ==== feedback collector ====
				  '<collectorId_1>' : {
 
					// === custom trigger function ===
					  triggerFunction : function( showCollectorDialog ) {
						$('#feedback_button').click( function(e) {
							e.preventDefault();
							showCollectorDialog();
						});
 					}
 
					// === default and hidden field values ===
					, fieldValues : {
 
						// default values
						  summary : 'Feedback for new website designs'
						, description : 'The font doesn\'t quite look right'
 
						// hidden field value
						, priority : '2'
						
					}
 
				}
 
				// ==== bug collector ====
				, '<collectorId_2>' : {
					// === custom trigger function ===

					  triggerFunction : function( showCollectorDialog ) {
						$('#bug_button').click( function(e) {
							e.preventDefault();
							showCollectorDialog();
						});
 					}


					// === additional environment details ===
					, environment : function() {
		
						var env_info = {};
 
						if ( window.ADDITIONAL_CUSTOM_CONTEXT ) {
							env_info[ 'Additional Context Information' ] = window.ADDITIONAL_CUSTOM_CONTEXT;
						}
 
						return env_info;
					}
					// === default field values ===
					, fieldValues : function() {
 
						var values = {};
 		
						var error_message = $('.error_message');
						if ( error_message.length !== 0 ) {

							// record error message from the page context rather than asking the user to enter it
							values[ 'summary' ] = error_message.children('.summary').text();
							values[ 'description' ] = error_message.children('.description').text();

						}
 
						return values;
 
					}
 
				}
 
			});

		});
	</script>

</body>

課題コレクターのローカライズは可能ですか?

Jira インスタンスの既定の言語に 100%ローカライズされた課題コレクターを作成できます。それ以上に、課題コレクターの完全なローカライズを行うのは不可能です。

課題コレクターの課題コレクター フィードバック フォーム内の​​文字列とテキストは、次の組み合わせになっています。

  1. Jira 管理者が設定した課題コレクター文字列
  2. Jira の既定の言語設定、またはユーザーが Jira にログインしている場合、ユーザーの言語選択のいずれか.
  • フィールドの名前は、Jira 管理者が設定した方法で、すべてのユーザーに表示されます。この表示は Jira の既定の言語に影響を受けることも、ログインした Jira ユーザーの既定の言語に影響を受けることもありません。
  • All users will see the field descriptions as they are set in the Jira Administration .
  • 他のすべての項目の場合:
    • 匿名ユーザーには、他のすべての項目が既定の JIRA 言語で表示されます。
    • ログインしたユーザーには、フィードバック フォーム内の他のすべての項目が Jira プロファイルで指定された言語で表示されます。

以上のことから、すべてがエンドユーザーの使用する言語で表示される課題コレクターを作成することはできません。  

しかし、匿名ユーザーに対して Jira インスタンスの既定の言語で表示される課題コレクターを作成したい場合、次のような方法をとります。

  1. 課題コレクター用のカスタム フィードバック テンプレートを使用します。
  2. Jira のフィールド ラベルおよび名前とメールのラベルを、既定の JIRA 言語で使用したい単語に変更します。

ブラウザの言語設定は、フィードバック フォームのテキストには影響しません。

最終更新日: 2022 年 10 月 12 日

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

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