「e-Gov」の法令文を劇的に読みやすくする「Stylish」拡張用テーマを作ってみた

f:id:align_centre:20140611111949p:plain

日本の法律の原文を読みたいときは、総務省が提供している「e-Gov」の法令検索ページで検索し、読むことができます。

電子政府の総合窓口e-Gov［イーガブ］

法令データ提供システム

しかし、誰がどう見ても、この原文がとにかく読みづらいのです。
例えば「著作権法」をご覧ください。

文字がウィンドウ幅いっぱいに満たされ、行間も狭く、インデント（字下げ）が通常の文書のアウトラインと逆になっていて、タイトルが本文よりも右にインデントされていたり…と、問題点を挙げればキリがありません。

そこで、これを誰もが読みやすいであろう、階層レイアウトに補正するスタイルシート(CSS)を作成し、Firefox、Google Chrome、Safari の拡張機能「Stylish」のテーマとして公開しました。

これを使うと、次のようになります。印刷してもそのままのレイアウトで印刷されるので、印刷する場合にも便利です。

今回は「Stylish」って何？という方のためにも、順を追って解説したいと思います。

Webブラウザ拡張機能「Stylish」のインストール方法

利用したいブラウザで、下記サイトの＋無料ボタンや追加、インストールなどのボタンをクリックすると、そのブラウザに「Stylish」という拡張機能が追加されます。
（残念ながら、現時点では Internet Explorer 用の「Stylish」はありません）

Google Chrome
Chrome ウェブストア - Stylish

Firefox
Stylish | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト

Safari
Apple - Safari - Safari Extensions Gallery

追加後にブラウザの再起動を求められる場合もありますので、その場合は画面の指示に従います。
「Stylish」の追加が完了すると、ブラウザのツールバーに次のようなアイコンが表示されます。

Stylish のインストールはこれで完了です。

公開されている「Stylish用テーマ」をインストールする

「Stylish」は、自分で独自のスタイルシートを記述出来るだけでなく、特定のサイト用に公開された「Stylish テーマをインストール」することで、CSSの知識がなくても簡単に使えるようになっています。

今回作ったテーマ（スタイルシート）は、次のサイトで配布しています。

e-Gov 階層レイアウト化 - Themes and Skins for E-gov - userstyles.org

あとは、このページの＋ Install with Stylish ボタンをクリックすればテーマがインストールされます。ブラウザによっては、インストール時にどのURLが適用対象になるかを表すダイアログが表示されることもありますので、その場合はそのままOKをクリックしてください。

テーマのインストールはこれで完了です。

まず試しに、先ほどの「著作権法」を見てみてください。
おそらく劇的に読みやすくなるのを体感できるのではないでしょうか。

法令ページだけでなく、検索結果や未施行のページのレイアウトも改善

今回作成した「Stylish テーマ」は、法令本文だけでなく、検索結果一覧ページや検索ページにも手を入れ、「法令データ提供システム」のサイト全体の読みやすさを向上させています。

ただ、「e-Gov」の法令HTMLデータは、h要素が全くないなど、マークアップコンテンツとして全く構造化されておらず、条件別CSS セレクタをフル動員してなんとか体裁を整えているので、ひょっとしたら一部表示が崩れるページがあるかもしれません。HTMLを解析しながら、スタイル適用パターンを絞り込むのにかなり苦労しました…