日本語化して、ダッシュボードへのベーシック認証を追加した Pa11y Dashboard を作ってみた

特定の Web ページの Web アクセシビリティ状況を監視するような用途で使える 「Pa11y Dashboard」 の UI やレポートを日本語化し、ついでにダッシュボードにベーシック認証を追加した 「Pa11y Dashboard 日本語版」 を作ってみましたので簡単なインストール方法と合わせて公開します。

ひとつ前の記事で、特定の Web ページの Web アクセシビリティ状況を監視するような用途で使える 「Pa11y Dashboard」 をクラウドサービス 「DigitalOcean」 を利用して短時間でとりあえず立ち上げる方法について書きました。

で、上記の記事でも書いてるんですが、少し改造してダッシュボード画面にベーシック認証機能を付けたりとか 「Pa11y Dashboard」 のソースコードに手を入れたりして遊んでたんですが、その流れで UI を日本語化してみようかなと思い立ちまして、とりあえず可能な範囲で対応してみたので公開します。

日本語化した Pa11y Dashboard は下記のような感じになります。デザインはいじってないので (日本語に合わせて少しフォントサイズを調整したりくらいはしましたが) 英語だった部分がそのまま日本語になったというだけですが。

Pa11y Dashboard 日本語版 ダッシュボード画面

上記がダッシュボード画面、下記が実際のテスト結果画面ですね。

Pa11y Dashboard 日本語版 試験結果(リザルト)画面

レポート自体も日本語で出力されるようにカスタマイズして Build した HTML_CodeSniffer を同梱していますので、基本的にほぼすべて日本語で利用できるようになっています。

下記の GitHub リポジトリにソースコードは上げています。使い方わかる方は README.md を確認していただいてセットアップしていただければ。

Ubuntu 20.04 + nginx で立ち上げる場合

Node.js や MongoDB のセットアップみたいな動作環境の構築に関しては冒頭で紹介したひとつ前の記事を参照していただければ。

上記の記事だと IP アドレスでとりあえずアクセスできればいいっていう状態までの解説でしたが、所有しているドメインでアクセスできるようにしたいという場合は nginx を使用するのが楽だと思いますので、その辺の方法を下記に簡単にまとめておきます。

まず、nginx をインストールしますね。

apt install nginx

次に ufw (Uncomplicated Firewall) で nginx に対してポート 80 とポート 443 の使用を許可しますが、

ufw app list

nginx をインストールすると ufw app list に nginx が登録されていることがわかります。

Available applications:
  Nginx Full
  Nginx HTTP
  Nginx HTTPS
  OpenSSH

下記のコマンドでポート 80 とポート 443、両方の使用を許可します。

ufw allow 'Nginx Full'

状態を確認してみましょう。

ufw status

下記のように Nginx FullAllow になっていれば許可されています。

To                         Action      From
--                         ------      ----
OpenSSH                    ALLOW       Anywhere
Nginx Full                 ALLOW       Anywhere
OpenSSH (v6)               ALLOW       Anywhere (v6) 
Nginx Full (v6)            ALLOW       Anywhere (v6) 

nginx はデフォルトで /var/www/html がドキュメントルートになると思いますが、今回は Pa11y Dashboard 用に pa11y.example.com というドメインを使う前提でディレクトリを切ってみましょう。

mkdir -p /var/www/pa11y.example.com/html

新しく作ったディレクトリに対する権限などは適時設定します。

chown -R $USER:$USER /var/www/pa11y.example.com/html
chmod -R 755 /var/www/pa11y.example.com

次に今回使用する pa11y.example.com 用の設定ファイルを作成し、

vim /etc/nginx/sites-available/pa11y.example.com

下記のように、リバースプロキシの設定を書いて Node.js アプリを公開可能にします。

server {
        listen 80;
        listen [::]:80;

        root /var/www/pa11y.example.com/html;
        index index.html index.htm index.nginx-debian.html;

        server_name pa11y.example.com;

        location / {
          proxy_pass http://localhost:4000;
          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection 'upgrade';
          proxy_set_header Host $host;
          proxy_cache_bypass $http_upgrade;
        }
}

作成した設定ファイルのシンボリックリンクを nginx が起動時に読み取る sites-enabled ディレクトリに作成することで設定が有効になります。

ln -s /etc/nginx/sites-available/pa11y.example.com /etc/nginx/sites-enabled/

あと、nginx.conf を編集して、

vim /etc/nginx/nginx.conf

下記の server_names_hash_bucket_size 設定項目のコメントアウトを外しておきましょう。

- # server_names_hash_bucket_size 64;
+ server_names_hash_bucket_size 64;

nginx 設定ファイルの書式にエラーがないかを一応確認して、

nginx -t

nginx を再起動します。

systemctl reload nginx

Let's Encrypt でサーバ証明書を取得

ついでに HTTPS でもアクセスできるようにしましょう。certbot をインストール。

apt install certbot python3-certbot-nginx

証明書を取得します。チュートリアルに従っていくだけ。先ほど作った pa11y.example.com 用の設定ファイルにポート 443 関連の設定も自動で追記されます。

certbot --nginx -d pa11y.example.com

certbot の自動更新設定が有効になっているかを確認。

systemctl status certbot.timer

動作していれば設定完了です。超簡単ですね。

● certbot.timer - Run certbot twice daily
     Loaded: loaded (/lib/systemd/system/certbot.timer; enabled; vendor preset: enabled)
     Active: active (waiting) since Sun 2021-12-12 01:49:50 UTC; 5min ago
    Trigger: Sun 2021-12-12 15:41:46 UTC; 13h left
   Triggers: ● certbot.service

Pa11y Dashboard 日本語版をインストール

ここまできたら Pa11y Dashboard をインストールします。まずは先ほど作った pa11y.example.com 用のドキュメントルートに移動します。

cd /var/www/pa11y.example.com/html

Pa11y Dashboard 日本語版を GitHub リポジトリから git clone してきて、パッケージをインストールします。

git clone https://github.com/burnworks/burnworks-pa11y-dashboard.git
cd burnworks-pa11y-dashboard
npm install

本番環境で使用するなら、本番環境用の設定ファイルを有効化。

cp config/production.sample.json config/production.json

設定ファイルを編集します。

vim config/production.json

設定ファイルの初期値は下記のようになっていますので、

{
	"port": 4000,
	"noindex": true,
	"readonly": false,
	"username": "user",
	"password": "pass",

	"webservice": {
		"database": "mongodb://localhost/pa11y-webservice",
		"host": "0.0.0.0",
		"port": 3000,
		"cron": "0 30 0 * * *",
		"chromeLaunchConfig": { "args": [ "--no-sandbox" ] }
	}
}

下記の部分だけ書き換えてください。これがダッシュボード画面へのベーシック認証で使用するユーザー名とパスワードになります。

"username": "user",
"password": "pass",

次に、同梱してある日本語化 (レポートの日本語訳も足りていなかった部分を追加しています) した HTMLCS.jsnode_modules 内のファイルに上書きします。

cp ja/HTML_CodeSniffer/build/HTMLCS.js node_modules/html_codesniffer/build/HTMLCS.js

あとは依存関係のライブラリをインストールし、

apt install -y libnss3 libgconf-2-4 libatk1.0-0 libatk-bridge2.0-0 libgbm1 libcups2 libxkbcommon0 libxdamage1 libgtk-3-0

Node.js アプリの実行状態を永続化したり、ログを管理したりするための PM2 をインストール。

npm install pm2 -g

アプリ (Pa11y Dashboard) を起動します。

NODE_ENV=production pm2 start index.js

PM2 のステータス画面

上記のようにきちんと Node.js アプリが立ち上がったら、ドメインにブラウザでアクセスすれば、Pa11y Dashboard の初期画面が表示されるはずです (ベーシック認証は先に設定したユーザー名とパスワードで認証しましょう)。

あとは URL を登録して、初回のテストを実行すれば運用開始です。

関連リンク

記事をここまで御覧頂きありがとうございます。
この記事が気に入ったらサポートしてみませんか?