FoxReplaceで情報を見やすくカスタマイズ~Firefoxを使っているならHTMLを自動置換して便利に表示させる事が出来る

今年は台風の影響を受ける回数が多いです。ウチの実家は昔は台風の通り道だと言われていましたが、もう長年台風被害がなく油断していたみたいなのですが、今年は直撃って事が多いそうです。

私は知らなかったのですが身内からWebの事でって前置きで相談を受けました。県が提供する防災情報が見づらいのだそうです。

避難勧告等情報(詳細) /防災情報

避難勧告(避難を勧めるレベル)や避難指示(避難しなさいというレベル)を地域ごとに出している公式情報らしいです。この情報が全部文字で見ていかなくてはならず、非常に見づらいので色で分けるとかしてパッと見で判別出来るように工夫出来ないかな?って弟から相談がありました。

まずWebブラウザでソースを読んでみます。一つだけ課題というかソースを読んだ時点で気になったことはあるのですが、ソースを置換出来るプラグイン(FoxReplace :: Add-ons for Firefox)を使えば多分出来るなっていうことが分かりました。FoxReplaceはテキストを加工したり、HTMLソースを加工したり出来る便利な機能拡張です。

もちろんHTML(XHTML)とCSS的な事の知識は必要になるのですが、さほど難しいことではありませんので、目的がハッキリしていてそれを実現したいという人なら少し努力するだけで実現出来るのではないかと思います。

今回は、「避難準備情報」と「避難勧告」と「避難指示」に応じて色を変えるだけのシンプルな対処で済みそうです。気になっている点は一つ、ソースを見れば分かるのですが、「避難指示」という文字がHTMLソースでは

避難指示

となっています。これは漢字をコードで指定する方法なので(システムが書き出す情報サイトには比較的多い)人間にはわかりにくいですが、やってる事さえ把握出来れば気にすることはありません。

避難指示

実際、HTMLソースではこういう事になっていましたが、Firefoxに付属しているFireBugで調べると「避難指示」になっている事が確認 できましたので、気にせずそのまFoxReplaceで置換してみます。FoxReplaceのルールにこの様な定義をしてみました。

対象URL
http://kouhou.bousai.pref.kochi.lg.jp/KH722.html

置換ルール1
対象:<td>避難指示</td>
置換:<td style=”background-color:#ff6699;”>避難指示</td>

置換ルール2
対象:<td>避難勧告</td>
置換:<td style=”background-color:#ffff66;”>避難勧告</td>

これで対象URLにアクセスした時に、<td>避難指示</td>というシンプルな表の情報を背景色付きに書き換えることが出来ます。色が付くだけで非常に見やすくなります。

本当は色で表現する部分はCSSで定義したいのですが、保守性を考えるとインラインでstyleを強制定期に書き換える方が便利だろうと思います。

どことは言わず市や県が提供する情報は、往々にしてこういう見づらさやわかりづらさがあります。役所の仕事だからまぁ仕方ないとして(システム的な改修は予算を取って翌年対応なんて事が実情らしいので)コチラ側で対処するしか無いのが現実的なものらしいです。

仮 に県や市の職員でこういう知識を持っている人がいるとしても、勝手にシステムを変更する事は許されないと思うので、受け手側で対処するしか無いというのが 私の見解です。要望と具体的な改善案を上げればどんどん改良してくれる様な行政なら住民の積極的な声を上げても良いと思いますけどね。

何はともあれ、今回相談された要件は容易にクリアできました。確かに着色するだけで全然見やすさが違います。うちの弟も簡単に出来たと喜んでくれました。特別なプログラミングスキルは必要無く、置換ルールを増やすだけで多くの情報にも応用出来るのでオススメです。

f:id:sasapurin:20151028224911p:plain

コメント

タイトルとURLをコピーしました