Merge pull request #20 from ttsukagoshi/add-settings-file

user-settings.jsonによってユーザ設定を調整可能とする (Closes #19)
ttsukagoshi · Feb 2, 2022 · d9705e9 · d9705e9
2 parents 5968941 + 7a7e2d4
commit d9705e9
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 54 deletions.
diff --git a/README.md b/README.md
@@ -43,26 +43,35 @@ node .
 
 <img width="1294" alt="「axe-test.js」によって出力されたテスト結果 (.csv) のイメージ" src="https://user-images.githubusercontent.com/55706659/151901139-a87e171b-c37d-4938-867d-14183982eb1d.png">
 
-### テスト基準の設定変更
+### オプション設定
 
-「[./src/axe-test.js](https://github.com/ttsukagoshi/axe-test/blob/main/src/axe-test.js)」では、冒頭のユーザ設定で、テスト基準を設定しています。
+作業フォルダ直下にある `user-settings.json` を編集することで、初期設定を変更できます。
 
-```javascript
-const axeCoreTags = ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'];
-```
+#### 設定できる値
 
-WCAG 2.1 (および 2.0) の、達成基準レベル A と AA に相当するテストルールを適用して、テストを実行する設定ということです。必要に応じて上記 1 行の記述を変更することで、テスト基準の設定を変更することができます。ここに記述可能なタグについては、[axe API Documentation の 「Axe-core Tags」のセクション](https://www.deque.com/axe/core-documentation/api-documentation/#user-content-axe-core-tags) をご参照ください。
+<!-- prettier-ignore -->
+| 変数名 | データ型 | 意味 | 初期値 |
+| --- | --- | --- | --- |
+| `axeCoreTags` | *Array* | テストの基準となるアクセシビリティ水準を指定します。初期値は、WCAG 2.1 (および 2.0) の、達成基準レベル A と AA に相当するテストルールを適用して、テストを実行する設定となっています。ここに記述可能な水準については、[axe API Documentation の 「Axe-core Tags」のセクション](https://www.deque.com/axe/core-documentation/api-documentation/#user-content-axe-core-tags) をご参照ください。 | `["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"]` |
+| `resultTypes` | *Array*  | 出力する結果の種類を指定します。 `inapplicable`: 判定対象外の基準/`incomplete`: 適合しているか判断できなかった基準/ `passes`: 適合している判断とされた基準/ `violations`: 適合していないと判断された基準。詳細は公式ドキュメントをご参照ください: https://www.deque.com/axe/core-documentation/api-documentation/#options-parameter | `["incomplete", "violations"]` |
+| `inputPath` | *String*  | URL一覧のテキストファイルのファイルパス | `./urls.txt` |
+| `inputEncode` | *String*  | URL一覧のテキストファイルの文字エンコード。サポートされている形式については公式ドキュメントを参照: https://nodejs.org/api/buffer.html#buffers-and-character-encodings | `utf8` |
+| `outputPath` | *String*  | 出力するCSVのファイルパス | `./axe-results.csv` |
+| `outputEncode` | *String*  | 出力するCSVファイルの文字エンコード。サポートされている形式については公式ドキュメントを参照: https://nodejs.org/api/buffer.html#buffers-and-character-encodings | `utf8` |
 
-### テスト結果として出力する項目の調整
+#### `user-settings.json` の例
 
-「[./src/axe-test.js](https://github.com/ttsukagoshi/axe-test/blob/main/src/axe-test.js)」では、冒頭のユーザ設定で、テスト結果として出力する項目を定義しています。
+変更した項目だけ残して、残りは削除しても問題ありません。削除した項目では自動的に初期値が適用されます。
 
-```javascript
-const resultTypes = ['incomplete', 'violations'];
+```json
+{
+  "axeCoreTags": ["wcag2a", "wcag2aa"],
+  "resultTypes": ["violations"],
+  "inputPath": "./private/urls.txt",
+  "inputEncode": "utf16le"
+}
 ```
 
-現状では `incomplete` （適合しているか判断できなかった基準）と `violations` （適合していないと判断された基準）を返す設定となっています。
-
 ### コマンドラインへの出力
 
 実行コマンドに `--cli` とつけることで、ファイル出力の代わりにコマンドライン出力できます。

diff --git a/src/axe-test.js b/src/axe-test.js
@@ -1,38 +1,25 @@
-/* --------------------------------------------------- */
-// ユーザ設定
-
-// @axe-core/puppeteerのwithTagsで、テスト基準を選択的に設定できる。
-// withTagsの設定オプションの詳細は公式ドキュメントを参照：
-// https://www.deque.com/axe/core-documentation/api-documentation/#user-content-axe-core-tags
-const AXE_CORE_TAGS = ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'];
-
-// 出力する結果の種類を指定。詳細は公式ドキュメントを参照：
-// https://www.deque.com/axe/core-documentation/api-documentation/#options-parameter
-// inapplicable: 判定対象外の基準
-// incomplete: 適合しているか判断できなかった基準
-// passes: 適合している判断とされた基準
-// violations: 適合していないと判断された基準
-const RESULT_TYPES = ['incomplete', 'violations'];
-
-// 入力するURL一覧のフォルダ・ファイル名と文字コード
-const INPUT_PATH = './urls.txt';
-const INPUT_ENCODE = 'utf8';
-
-// 出力するフォルダ・ファイル名
-const OUTPUT_PATH = './axe-results.csv';
-const OUTPUT_ENCODE = 'utf8';
-
-/* --------------------------------------------------- */
-
+const fs = require('fs');
 const { AxePuppeteer } = require('@axe-core/puppeteer');
 const puppeteer = require('puppeteer');
 const AXE_LOCALE_JA = require('axe-core/locales/ja.json');
 const config = {
   locale: AXE_LOCALE_JA, // テスト結果を日本語で出力するように設定する。
 };
 
+// 初期設定。詳細はREADMEを参照:
+// https://github.com/ttsukagoshi/axe-test/blob/main-ops/README.md
+const DEFAULT_SETTINGS = {
+  axeCoreTags: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'],
+  resultTypes: ['incomplete', 'violations'],
+  inputPath: './urls.txt',
+  inputEncode: 'utf8',
+  outputPath: './axe-results.csv',
+  outputEncode: 'utf8',
+};
+// ユーザ設定ファイルのファイルパス
+const USER_SETTINGS_FILE_PATH = './user-settings.json';
 // 出力されるテスト結果のフィールド名（ヘッダ行）
-const reportHeader = [
+const REPORT_HEADER = [
   'URL',
   'Rule Type', // rule ID
   'Result Type', // inapplicable, incomplete, passes, or violations
@@ -45,33 +32,45 @@ const reportHeader = [
   'Help URL',
 ];
 
-// テスト対象の URL を、外部テキストファイルから読み込んで、配列に整形する。
-const fs = require('fs');
-let urls_list = fs.readFileSync(INPUT_PATH, { encoding: INPUT_ENCODE });
-urls_list = urls_list.replace(/\r?\n/g, ',');
-urls_list = urls_list.split(',');
-
 (async () => {
   try {
     let cliMode = false; // デフォルトではファイル出力する
     let outputText = ''; // ファイル出力用のテキスト
     if (process.argv[2]) {
+      // 引数を受け取った場合の処理
       if (process.argv[2] === '--cli') {
-        // CLI出力
-        cliMode = true;
+        cliMode = true; // CLI出力
       } else {
         throw new Error(
           `${process.argv[2]} は無効な引数です。「--cli」とすることで、結果をファイル出力する代わりにコマンドラインで返します。`
         );
       }
     }
 
-    const urls = urls_list;
+    // ユーザ設定を取得
+    let userSettings = JSON.parse(
+      await fs.promises.readFile(USER_SETTINGS_FILE_PATH)
+    );
+    // ユーザ設定で指定されていない項目には初期値を適用
+    Object.keys(DEFAULT_SETTINGS).forEach((key) => {
+      if (!userSettings[key]) {
+        userSettings[key] = DEFAULT_SETTINGS[key];
+      }
+    });
+
+    // テスト対象の URL を、外部テキストファイルから読み込んで、配列に整形する。
+    const urls = fs
+      .readFileSync(userSettings.inputPath, {
+        encoding: userSettings.inputEncode,
+      })
+      .replace(/\r?\n/g, ',')
+      .split(',');
+
     const browser = await puppeteer.launch();
 
     for (let i = 0; i < urls.length; i++) {
       if (i === 0) {
-        const outputHeader = reportHeader.join(); // 出力1行目としてヘッダ行を追加
+        const outputHeader = REPORT_HEADER.join(); // 出力1行目としてヘッダ行を追加
         if (cliMode) {
           console.log(outputHeader);
         } else {
@@ -95,11 +94,11 @@ urls_list = urls_list.split(',');
       // テストを実行
       const results = await new AxePuppeteer(page)
         .configure(config)
-        .withTags(AXE_CORE_TAGS)
+        .withTags(userSettings.axeCoreTags)
         .analyze();
 
       // テスト結果をCSVとして出力できるように整形
-      RESULT_TYPES.forEach((resultType) => {
+      userSettings.resultTypes.forEach((resultType) => {
         results[resultType].forEach((resultItem) => {
           resultItem.nodes.forEach((node) => {
             node.any.forEach((a) => {
@@ -108,7 +107,7 @@ urls_list = urls_list.split(',');
                 resultItem.id,
                 resultType,
                 resultItem.tags
-                  .filter((tag) => AXE_CORE_TAGS.includes(tag))
+                  .filter((tag) => userSettings.axeCoreTags.includes(tag))
                   .join(),
                 resultItem.impact,
                 a.message,
@@ -136,9 +135,15 @@ urls_list = urls_list.split(',');
     }
     await browser.close();
     if (!cliMode) {
-      fs.writeFileSync(OUTPUT_PATH, outputText, { encoding: OUTPUT_ENCODE });
+      fs.writeFileSync(userSettings.outputPath, outputText, {
+        encoding: userSettings.outputEncode,
+      });
     }
-    console.info('アクセシビリティ検査が完了しました。');
+    console.info(
+      `アクセシビリティ検査が完了しました。${
+        cliMode ? '' : userSettings.outputPath + ' に結果が出力されています。'
+      }`
+    );
   } catch (error) {
     console.error(error);
   }

diff --git a/user-settings.json b/user-settings.json
@@ -0,0 +1,8 @@
+{
+  "axeCoreTags": ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"],
+  "resultTypes": ["incomplete", "violations"],
+  "inputPath": "./urls.txt",
+  "inputEncode": "utf8",
+  "outputPath": "./axe-results.csv",
+  "outputEncode": "utf8"
+}