2022-12-14

WAI-ARIAウェイウェイ会

WAI-ARIA 1.2 日本語訳や ARIA Authoring Practices Guide に公開されている実装の例を眺めつつ、基礎知識や最近の業務で実装に取り入れたところを共有する社内勉強会を開催した。もともとは自分の知識のなさから調べなきゃな〜とずっと思っていて、この機会に資料を用意することで勉強できたらいいなぐらいに思って企画した会だったけど、関心を持ってる社内のデザイナーやエンジニアがけっこう参加してくれてうれしかった。

せっかくみんなでやってるのだから、おのおの調べて実装しないで全社でベストプラクティスを共有するほうがいいなと改めて思ったし、テーマを絞って集まって勉強会とか読書会をやることで興味や関心が可視化されるのはいいなと感じた。もともと社内のSlackのアクセシビリティに関するチャンネルで活発に投稿していたり、こういう企画をやりやすい環境をつくってくれていたメンバーにも感謝したい気持ちでいっぱい。楽しかった〜。

2022-12-01

Let's EncryptでワイルドカードのSSL証明書を発行する

このあいだConoHa VPSでつくったUbuntu 22.04が動くサーバーに独自ドメイン dev.shikakun.com でアクセスできるようにしてLet's EncryptでSSL証明書を発行したのだけど、サブドメイン以下のワイルドカード証明書というのはないらしく、サブドメインを用意するたびにSSL証明書を発行しないといけないし、それぞれ3ヶ月ごとに更新しないといけないのはめんどう。そこで、ルートドメインとして新たに shikakun.dev を取得して、ワイルドカード証明書ひとつで運用できるようにしたい。

これまでのあらすじは以下の記事を参照ください。

ドメインの取得・ネームサーバーの設定

今回はドメインをムームードメインで取得して、ネームサーバーはCloudflareを利用しました。

ムームードメインで取得完了後にDNSを利用しない選択肢を選び、Cloudflareにログインして「サイトを追加」から shikakun.dev を追加、表示される案内に従ってムームードメインの管理画面でネームサーバーの設定を abby.ns.cloudflare.com phil.ns.cloudflare.com へ差し替える。しばらくするとCloudflareから、確認できたよ〜というメールが届いた。

ドメインでアクセスできるようにする

sudo mkdir /var/www/shikakun.dev
sudo chown -R $USER:$USER /var/www/shikakun.dev
sudo vim /etc/apache2/sites-available/shikakun.dev.conf

<VirtualHost *:80>
  ServerName shikakun.dev
  ServerAdmin webmaster@localhost
  DocumentRoot /var/www/shikakun.dev
  ErrorLog ${APACHE_LOG_DIR}/error.log
  CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

sudo a2ensite shikakun.dev
systemctl reload apache2

これで http://shikakun.dev/ でアクセスできるようになった（なお、 .dev や .app のTLDはChromeからアクセスしようとするとhttpsへリダイレクトされるが、まだSSL証明書を発行していないのでアクセスできない。FirefoxなどChrome以外のブラウザで確認しました）。

certbotでLet's EncryptのSSL証明書を発行し、apache2の設定ファイルを書き換える。

sudo certbot certonly --webroot --webroot-path /var/www/shikakun.dev -d shikakun.dev -m {メールアドレス}
sudo vim /etc/apache2/sites-available/shikakun.dev.conf

<VirtualHost *:443>
  ServerName shikakun.dev
  ServerAdmin webmaster@localhost
  DocumentRoot /var/www/shikakun.dev
  ErrorLog ${APACHE_LOG_DIR}/error.log
  CustomLog ${APACHE_LOG_DIR}/access.log combined
  SSLCertificateFile /etc/letsencrypt/live/shikakun.dev/cert.pem
  SSLCertificateKeyFile /etc/letsencrypt/live/shikakun.dev/privkey.pem
  SSLCertificateChainFile /etc/letsencrypt/live/shikakun.dev/chain.pem
</VirtualHost>

sudo systemctl reload apache2

これで https://shikakun.dev/ でアクセスできるようになった！

ワイルドカード証明書に差し替える

いよいよLet's Encryptでワイルドカード証明書を発行して、さきほど発行した証明書から差し替える。

sudo certbot certonly --manual \
    --preferred-challenges dns-01 \
    --server https://acme-v02.api.letsencrypt.org/directory \
    -m {メールアドレス} \
    -d shikakun.dev \
    -d *.shikakun.dev

上書きするか尋ねられるので Expand の E を入力。

ワイルドカード証明書はDNS認証をする必要があるらしく、案内されたとおりにCloudflareのDNSの設定でTXTレコードに指定の値を入力。反映されたかな〜くらい待ってEnterを押すと、無事に差し替えられた！

3ヶ月に1度の更新が必要で、上記のcertbotのコマンドを実行すればいいらしい。また、更新にあたってTXTレコードの値を差し替える必要があるとのこと。めんどくさい！けど、たぶんきっと調べればなんかいい方法あるでしょう。

2022-11-30

VSCodeの設定を見直す

ここ数年ほど増改築を繰り返しながらポリシーなく育ってきてしまっていた手元の環境を見直したい！ということで、まずはエディタから見直すことに。いったんVSCodeの設定ファイルをぜんぶ消してみて、必要な設定を戻したり、べつに設定しなくてもいいものはそのままにしたり。とりあえず以下のようになった。

{
  "editor.defaultFormatter": "svipas.prettier-plus",
  "editor.detectIndentation": false,
  "editor.fontSize": 14,
  "editor.formatOnSave": true,
  "editor.renderWhitespace": "boundary",
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "files.associations": {
    "*.html.erb": "erb",
    "*.uiflow": "uiflow"
  },
  "files.autoSave": "onWindowChange",
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true,
  "security.workspace.trust.untrustedFiles": "open",
  "vscode-erb-beautify.keepBlankLines": 1,
  "workbench.colorTheme": "Iceberg",
  "workbench.editor.untitled.hint": "hidden",
  "workbench.startupEditor": "newUntitledFile",
  // Hide hover documentation and references
  "css.hover.documentation": false,
  "css.hover.references": false,
  "html.hover.documentation": false,
  "html.hover.references": false,
  "scss.hover.documentation": false,
  "scss.hover.references": false,
  // Language specific settings
  "[erb]": {
    "editor.formatOnSave": false,
    "editor.defaultFormatter": "aliariff.vscode-erb-beautify"
  },
  "[html]": {
    "editor.formatOnSave": false
  },
  "[markdown]": {
    "editor.formatOnSave": false,
    "files.trimTrailingWhitespace": false
  }
}

知らないあいだにGitHubアカウントでログインしたら別のマシンと設定を同期できる機能がついていてべんり。ずっと前からあったのかな…。あわせて拡張機能もdeprecatedなものは削除するなど整理した。

工夫ポイント

UIをデザインするときに、 UI flows と呼ばれる、ユーザーが「見るもの」と「すること」を整理した図を書く機会があって、この図をテキストデータで書けるVSCodeのプラグインが便利すぎる。つくってくれた人、ありがとう。テキストデータなのでGitで管理できるし。とくに拡張子など決まりはないのだけど、 *.uiflow ってテキストファイルを開いたときはこのプラグインが有効になるように設定してます。

あとは地味だけどHTML要素やCSSのプロパティにマウスカーソルを重ねるとMDNのリファレンスが表示されるやつは知ってるよ！ってことで非表示にしたり、Markdownのときは改行を意味する行末の半角スペースを削除しないようにしたり。ここからまた育てていくぞ！