Axe DevTools LinterとSonarQubeの連携

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

Not for use with personal data

Axe DevTools LinterをSonarQubeと統合することで、コードのアクセシビリティの問題を監視できます。ここにあるアイデアを使って、CI/CDシステムをSonarQubeと統合することが可能です。SonarQubeのドキュメントでは、概要を参照し、GitLab CI/CD、GitHub Actions、Azure Pipelines、またはBitbucket Pipelinesの使用に関する情報を確認してください。

SonarQube統合の概要

SonarQubeと統合するためのキーポイントはコマンドラインツール、 Axe DevTools Linter Connectorです。このツールはファイルをスキャンし、SonarScanner CLIツールを介してSonarQubeにアップロードされるレポートを作成します。詳細な手順は以下の通りです：

ローカルディレクトリ内のファイルをスキャンする。
Axe DevTools Linter Serverにファイルを送信してリントを行う、またはローカルでファイルをリントする。
リントの結果を、SonarQubeに互換性のあるJSONレポートとして収集する。
SonarScanner CLIを実行して、このレポートの問題を外部問題としてSonarQubeに送る。この場合、SonarScannerツールはファイルを実際にスキャンすることはなく、Axe DevTools Linterが発見した問題を単に 外部問題として報告します。

最初の3つのステップはAxe DevTools Connectorによって行われ、最後のステップはSonarScanner CLIによって行われます。

カスタムCI/CD統合では、次のアクションを行う必要があります：

適切なコマンドライン引数を使用してAxe DevTools Linter Connectorを起動し、プロジェクトのファイルをスキャンしてSonarQubeとの互換性のあるJSONレポートを生成します。
SonarScanner CLIを起動して、リントの結果をSonarQubeに送信します。

要件

Axe DevTools Linter Connector：設定と使用方法の詳細は Axe DevTools Linter Connectorの使用を参照してください。
SonarQube：この統合はSonarQube Community Build 26.4でテストされています。SonarQubeはバージョン10.3で汎用問題インポート形式を変更しており、将来のバージョンでは更新された形式が必要になる場合があります。インポートに関する警告や問題が発生した場合は、Axe DevTools Linter ConnectorとSonarQubeのバージョンが互換性があることを確認してください。
SonarScanner CLI：このツールのダウンロードに関する詳しい情報は SonarScanner CLI を参照してください。

SonarQubeの設定

SonarQubeを設定するには、プロファイルを作成し、重複するルールを削除して無効化します（SonarQubeで新しく作成されたプロファイルの一部のルールは、Axe DevTools Linterでチェックされるルールと重複し、重複したエラーを引き起こします）。SonarQubeの管理インターフェースで重複するルールを削除することができます。以下のセクションでは、その方法について説明します。

新しい品質プロファイルを作成

ルールを変更するには、SonarQube管理サイトのトップにある 品質プロファイル をクリックします。その後、 プロファイルをフィルタリング： ドロップダウンをクリックし、 HTMLを選択します。これで、組み込みのSonarQube HTMLプロファイルが表示されます。プロファイルの右側にある歯車のドロップダウンをクリックし、 コピーを選択してプロファイルを複製する必要があります。SonarQubeは、新たにコピーされたプロファイルに名前を付けるように促します。新しいプロファイルの名前を Axe Linter にし、 コピー ボタンをクリックします。

新しいHTML品質プロファイルが作成されました。名前は Axe Linterです。「 Axe Linter 」プロファイルのギアドロップダウンを選択し、「 デフォルトに設定 」を選択して、このプロファイルをすべてのHTMLファイルのチェックに使用できるようにします。

冗長なルールの削除

次のステップは、作成した Axe Linter 品質プロファイルから冗長なルールを削除することです。HTMLのルール一覧には、2つのプロファイルがあります。 Axe Linter プロファイルと Sonar way プロファイルです。「 Axe Linter 」プロファイルをクリックして、プロファイル設定ページに移動します。画面左側に、プロファイル内の異なるルールの種類のリストが表示されます。「合計」の右上の数字をクリックし、「 アクティブ 」列を編集して、アクティブなルールを編集します。

画面の右側には、 Axe Linter HTMLプロファイルで有効になっているルールのリストがあります。以下の冗長なルールを無効にします:

<fieldset> タグには <legend>
リンクは直接画像をターゲットにすべきではありません
画像、エリア、およびボタンには画像タグがあり、「alt」属性が必要です
<th> タグには id または scope 属性が必要です
表のセルはその見出しを参照する必要があります
<object> タグは代替コンテンツを提供する必要があります
<strong> および <em> タグを使用する必要があります
<table> タグには説明が必要です
動画には字幕が必要です
サーバーサイドのイメージマップ（ismap 属性）は使用してはいけません
<html> 要素には言語属性が必要です
<frames> には title 属性が必要です
HTML <table> はレイアウト目的で使用してはいけません
レイアウトに使用されるテーブルにはセマンティックマークアップを含めるべきではありません
aria-label または aria-labelledby 属性は類似の要素を区別するために使用されるべきです
テーブルにはヘッダーが必要です

これらのルールは、このDequeサポート記事。

important

Dequeのアカウントが必要です。冗長なルールを含むサポート記事にアクセスするためには、こちらのアカウントが必要です。詳細はこの記事をご覧ください。ヘルプセンターやアカウント取得についての情報が記載されています。

SonarQubeの設定ファイルを作成する

SonarQubeのSonarScanner CLI用の設定ファイルを作成する必要があります。以下は設定ファイルの例です、 **sonar-project.properties**です。

sonar.projectKey=Test-Deque
sonar.externalIssuesReportPaths=axe-linter-report.json

この **sonar.projectKey** は、SonarScannerが結果を報告する先のSonarQubeプロジェクト名です。

SonarQubeのセキュリティトークンを生成する

SonarQubeスキャナが結果を報告するためにSonarQubeに接続できる必要があります。これを行うには、SonarQubeの管理ウェブインターフェイスでログイントークンを作成します。

ログイントークンを作成するには、SonarQubeの管理ウェブインターフェイスの画面上部中央にある **管理** をクリックします。次に、画面上部付近にある **セキュリティ** ドロップダウンをクリックし、 **ユーザー**を選択します。SonarQubeへの結果報告を行うユーザーを選択し、 **トークン** の下にあるアイコンをクリックして、そのユーザーのセキュリティトークンを作成します。 **トークンの生成** というポップアップウィンドウでトークンの名前を入力し、 **生成**をクリックします。このトークンの値（32ビットの16進文字列）を保存してください。ウィンドウを閉じた後では再表示する方法がないためです。 **トークン** ウィンドウ。（ただし、いつでも新しいトークンを生成できます。）

SonarScanner CLIでは、このトークンを使用してサーバーに結果を報告します。このトークンは SONAR_TOKEN 環境変数に設定してください。

統合を実行する

SonarQubeのルールを設定し、設定ファイルを作成し、セキュリティトークンを生成したら、統合を実行できます。プロセスは二段階です：

Axe DevTools Linter Connectorを実行して、プロジェクトファイルをスキャンし、SonarQube互換のレポートを生成します。
SonarScanner CLIを起動して、レポートをSonarQubeにアップロードします。

リンターレポートを生成する

同じディレクトリから Axe DevTools Linter Connector を実行してください。 **sonar-project.properties** ファイル：

axe-linter-connector -s . -d .

これにより、現在のディレクトリに **axe-linter-report.json** が生成されます。サーバー、認証、およびその他のコマンドラインオプションについては、 Axe DevTools Linter Connectorの使用を参照してください。

important

コネクタは、SonarScannerのプロジェクトベースディレクトリから実行される必要があり、レポートのファイルパスがSonarQubeが期待するファイルと一致するようにします。

レポートをSonarQubeにアップロードする

SONAR_TOKEN 環境変数を先に生成したセキュリティトークンに設定し、SonarScanner CLIを実行します：

export SONAR_TOKEN=<your-sonarqube-token>
sonar-scanner -Dsonar.host.url=<sonarqube-server-url>

置き換えます <sonarqube-server-url> あなたのSonarQubeサーバーのURLで (例: http://localhost:9000)。

SonarScanner CLIは sonar-project.properties ファイルを読み込み、指定されたレポートを sonar.externalIssuesReportPaths見つけ、問題を外部問題としてSonarQubeにアップロードします。

結果の表示

Axe DevTools Linterによって見つけられた問題は、 Issues をプロジェクトのSonarQubeウェブインターフェースでクリックすると表示されます。Axe DevTools Linterの問題は、 AXE-LINTER-MD (Markdownファイル用) と AXE-LINTER-HTML (HTMLファイル用) で識別されます。

レポート

Axe DevTools Linter Connectorは、 SonarQube Generic Issue Import Formatに準拠したJSONレポートを生成します。

Axe DevTools Linter Connectorのコマンドラインオプションを使用して、レポート内のいくつかのオプションを変更できます。詳細は Optional Command-Line Options を参照してください。