文字サイズ「小・中・大」と配色「A・B・C」変更ボタンはつけてはいけない

公共系のウェブサイトでこのようなボタンを目にする機会は多い。

しかしながらこのようなボタンは意図通りに機能することはなく、むしろ必要な人には気づかれず、不要な人には目障りなものだ。つけてはいけない。

文字の大きさや配色は OS で変更している

その理由は実際に目の悪い人がどのように PC を使用しているか想像してみればすぐに分かる。

Windows では20年も前の Windows 95 (1995年発売) の頃から、画面の文字を一括で大きくしたり、配色を変更する機能がついている。視力の低い人の間ではこのような機能を使用するのは常識と考えるのが普通ではないだろうか。

参考までに、ここに一個人の例ではあるが詳細に記述された貴重な記事がある。

文字を大きくしても、ハイコントラストモードでも見やすいか?

そのような利用者にとっては、文字サイズや配色の変更ボタンが不要なこと以上に、そのボタンの存在が必要な情報への到達を阻害する可能性すらある。

たとえば現在の Windows にはハイコントラストモードというものがあり、ウェブサイトの配色も一括で黒地に白文字にできる。その状態で石川県ホームページを表示した画面がこちら。

はたして文字サイズや配所の変更ボタンはどう見えるだろうか。

アクセシビリティのためにつけているとしたら、早くそんなものを取っ払うことを奨めたい。

制作者ができること

大きな文字サイズに対応する

文字サイズを大きくすると画面の仮想的な幅(情報が入る量)が小さくなる。つまり、情報の内容としては小さな画面で見ているのと同じことになる。

ここで現在のブラウザは、表示を拡大したとき、小さな画面を拡大したものとして表示する。CSS のメディアクエリもそれに従うので、レスポンシブデザインのページは表示を拡大していくとそれに応じてレイアウトも変化するはずだ。

すなわち正しく設計されたレスポンシブデザインのウェブページは、視力が低くて文字を拡大している利用者にもやさしい。

ハイコントラストモードに最適化する

Windows のハイコントラストモードを使用してウェブサイトを閲覧すると、背景が黒、文字と枠線 (border) は白、背景画像は無効となり、画像は色が反転される。

いくつかのサイトを見てみると、適切に枠線が使われたページは見やすいと感じる。見出しなどの意味の区切りとなるところでは border を使うのが望ましい。もし通常の表示で視覚的に不要なら、背景と同色にしたり、透明にすることもできる。

また、Internet Explorer 10-11 や Edge では CSS のメディアクエリ -ms-high-contrast を使うことで、ハイコントラストモードでの表示を制御することができる。標準化はされていないが、ブラウザのシェアの大きさを考えると有効だろう。

@media (-ms-high-contrast: active) {
    h1 {
        color: #f00;
    }
}

JavaScript のモジュール管理

JavaScript のモジュール管理について、個人的メモ。

モジュール管理ライブラリ

JavaScriptECMAScript 2015 (ECMAScript 6) になるまで、他のスクリプトを参照する機能は言語機能として提供されてこなかった。しかしながらサーバサイドで動作する node.js が生まれた頃からその必要性に駆られ、さまざまなモジュール管理ライブラリが登場した。
現在メジャーなモジュール管理ライブラリは次の二つ。

  • Asynchronous Module Design (AMD)
  • CommonJS (CJS)

ECMAScript 2015 の登場

ECMAScript 2015 では言語機能として import 文および export 文が追加された。

Babel

現在 import 文および export 文 をサポートするブラウザはないが、Babel というツール (トランスパイラ) を使うと現在のブラウザが実行できる形に変換できる。

Babel は npm からインストールすることができる。ローカルインストールが推奨されている。

% npm install --save-dev babel-cli babel-preset-es2015

実行する前に設定ファイル .babelrc を作成する。

{
    "presets": ["es2015"]
}

src.js を dest.js にコンパイル

% babel src.js --output dest.js

Webpack

Webpack は JavaScript だけでなく CSS や画像も含めて管理することができるツール。TypeScript や CoffeeScript で書かれたスクリプトや、Sass や Less で書かれたスタイルシートも、最終的に実行できる形に変換してくれる。

Windows で npm run が動かない場合

WindowsError: Cannot find module '…\webpack.config.js;' と言われ動かない場合、複数のコマンドを続けて実行するときのセミコロンが原因。Windows では ; の代わりに & を使わないといけない。

xyzzy で Less CSS を編集するための less-mode

xyzzy でも快適に Less を書きたかったので less-mode を作った。ベースは c-mode。

導入は簡単。GitHub からダウンロードして適宜 etc/Less, site-lisp/less-mode.l を配置する。
そして、 .xyzzy に次の 2 行を追加する。

(load-library "less-mode")
(pushnew '("\\.less$" . less-mode) *auto-mode-alist*)

インデントを設定する

初期設定でタブ幅 4、インデントにはタブ文字を使わない設定になっている。これ以外のタブ幅を使っている場合や、どうしてもタブ文字を使えない事情がある場合は次のように設定する。

(setq ed::*less-mode-hook*
      '(lambda ()
        ;; タブ幅を 5 に設定する
        (setq c-indent-level 5)
        (setq c-brace-offset -5)
        (setq c-argdecl-indent 5)
        ;; インデントにスペースを使う
        (setq indent-tabs-mode nil)
       ))

キーワードファイルの場所を指定する

xyzzy 本体を更新した場合に、etc ディレクトリの内容が置き換わってしまう場合がある。変更したキーワードファイルを誤って上書きされないようにするには、キーワードファイルの場所を違う場所に設定すればよい。

;; ホームディレクトリの xyzzy/etc をキーワードファイル置き場にする
(setq *keyword-load-path* '("~/xyzzy/etc"))

NHK の受信料収入と契約件数の推移

先日、ワンセグ携帯を所有した場合に NHK の放送契約を結ぶ義務があるかどうか裁判が行われたというニュースがあった。放送法64条の「受信設備を設置」に電話の「携帯」の意味を含めるのは「無理がある」として NHK は敗訴。

NHK(および総務省)が受信料の取り立てを強化したい背景として、都市部の若者を中心に受信料の未払いが増えているという説をよく耳にする。実際のところどうなのか、NHK の公表する決算書から受信料収入と契約数を調べてみた。

すると2001年度から2015年度までの受信料収入は横這いで、契約数は増加している傾向が見て取れた。契約数の増加は衛星契約の増加によるものが大きい(衛星契約を含まない地上契約は減少)。ここ数年に限って見れば、衛星契約の増加とともに受信料収入も増加している。

この結果には、契約数の減少が危機的だという印象があったため驚いた。

調査用に作成したデータ

Windows 上で .htpasswd を生成する

Apache において Basic 認証のユーザ名とパスワードを管理する .htpasswd ファイルは、LinuxFreeBSD, OS X では htpasswd コマンドで実行できるが、実は Windows 版の Apache にも同様のプログラムが含まれている。
そのプログラムは、Apache をインストールしたディレクトリの bin 以下にある。XAMPP でインストールした場合は通常 C:/xampp/apache/bin/htpasswd.exe にある。
使い方は htpasswd コマンドと同じで、たとえば .htpasswd を新規作成する場合は次のコマンドで行える。

> C:\xampp\apache\bin\htpasswd -c \path\to\.htpasswd ユーザ名
New password: ******** (パスワードを入力)
Re-type new password: ******** (同じパスワードを再度入力)
Adding password for user ユーザ名

こうすることで \path\to\.htpasswd にパスワードファイルが生成される。

主な使い方

パスワードファイルを新規作成する (-c)。すでにファイルがある場合は以前の内容は消去される。

htpasswd -c パスワードファイル ユーザ名

既存のパスワードファイルにユーザ名とパスワードの組み合わせを追記する。このとき引数は不要。

htpasswd パスワードファイル ユーザ名2

パスワードをコマンドライン引数として渡す (-b)。バッチ処理の際に使用する。

htpasswd -cb パスワードファイル ユーザ名 パスワード

テストのため、ファイルに書き込まず、標準出力に結果を出力する (-n)。

htpasswd -n パスワードファイル ユーザ名
htpasswd -nb パスワードファイル ユーザ名 パスワード

ハッシュアルゴリズムの指定

パスワードは通常、MD5 アルゴリズムでハッシュされる。変更するには次のオプション引数を指定する。

-m  MD5 アルゴリズムを使用する(デフォルト)
-B  bcrypt アルゴリズムを使用する(より安全)
-d  CRYPT アルゴリズムを使用する
-s  SHA アルゴリズムを使用する
-p  パスワードを平文で保存する

たとえば bcrypt を使用し、パスワードファイルを新規作成する場合は次のようになる。

htpasswd -cB パスワードファイル ユーザ名

Basic 認証の設定

Basic 認証は Apache の設定ファイルに次のように書くことで適用できる。通常 httpd.conf(あるいはそこから読み込まれる設定ファイル) の <Directory>〜</Directory> セクションまたは、Basic 認証を適用したいディレクトリの .htaccess に書く。

AuthUserfile /path/to/.htpasswd
AuthGroupfile /dev/null
AuthName "Please enter your ID and password"
AuthType Basic
require valid-user

.htpasswd のパスはフルパスで書く必要があることに注意。