WebAbornバージョン14をリリース

WebApp

[話者] WebAborn（ウェブあぼ〜ん）という User JavaScript 作成サイト
http://webaborn.herokuapp.com
を公開してるんだけど、バージョンアップしたので報告だ。


変更点

  • テキストファイルを読み込んだときの扱いを変更。
  • HTMLの中の<script>タグは、NGワード検索対象から外すことにした。<script>タグの中にNGワードが描かれている可能性は少ないと考えたからだ。
  • Opera向け（タイプ2）のWebAbornファイル名を、これまで 'WebAborn.user.js' だったが 'WebAborn_opera.user.js' に変更。

Opera向け（タイプ2）の変更

前回（バージョン13）、WebAbornをOperaでも動作するように、わざわざ「タイプ2」というのを作った。
f:id:itouhiro:20120720134008p:plain


[合いの手] WindowsXP/7のOperaだけじゃなくて、AndroidのOperaMobileでも動くようになったね。


[話者] 動作確認していて気がついたんだが、Firefox/GoogleChromeはローカルにあるHTMLファイル（ハードディスクの中に置いてある、たとえば C:\home\abc.html のようなファイル）にはWebAbornが効かないのだ。

GoogleChromeのスクリーンショット:
f:id:itouhiro:20120720134622g:plain


[合いの手] 同じHTMLファイルでも、ネット上の http://example.com/abc.html ならあぼーんできるのに、いったんダウンロードしてハードディスクに置いた abc.html をFirefoxに読み込ませても、あぼーんできないのか。


[話者] そうなんだよ。ちょっと不便だよね。でもOperaは違った。ローカルにあるファイルを読み込ませてもあぼーんできるのだ。
f:id:itouhiro:20120720134025p:plain


[合いの手] Opera先輩って‥‥なんか違う感じだね‥‥FirefoxやChromeさんと比べて‥‥


[話者] というわけで、Operaにはほかのブラウザと違う用途があるから今後はもっと使うと思う。

そこでOpera向けタイプ2はファイル名を 'WebAborn_opera.user.js' とした。これならタイプ1とファイル名が重ならないのでダウンロードがラクになる。


テキストファイルの扱い


だけど、Opera先輩をローカルファイルビューワーとして使おうとすると、使い勝手悪いところもある。HTMLファイルはNGワードの箇所だけあぼーんできるけど、テキストファイルを読み込ませると、ほら、まるごと消してしまうのだ。
f:id:itouhiro:20120720142022p:plain


[合いの手] まるごとでも 消せるからいいじゃないか。なにか問題でも？


[話者] さすがに全部消すのはやりすぎだと思うのさ。たくさんある文章のうちたった一カ所NGワードを含んでいるなら、そのNGワード近辺だけを消してほしい。


[合いの手] どうすれば納得いくわけ？


[話者] テキストファイルは、Operaに読み込んだとき、こんなDOMツリーになっているんだ。

HTML
  BODY
     PRE
       #テキストノード
     /PRE
  /BODY
/HTML

f:id:itouhiro:20120720141529g:plain


[合いの手] WebAbornは、NGワードが含まれてるテキストノードの中身を「あぼ〜ん」という単語に置き換えるんだったね。


[話者] テキストファイルは、テキストノードを一つだけ含むDOMツリーになってしまうので、そのノードを置換すると文章がまるごと消える羽目になる。


だから、テキストの各行ごとに<br>タグを入れて、テキストノードを複数に分断してやればいいのでは‥‥と考えた。


やってみたら、その考えでよかった。
WebAbornスクリプトの中で、NGワードを探索する前に、「テキストファイルを読み込んだ場合、各行ごとに<br>タグを挿入する」という処理を入れたんだ。
f:id:itouhiro:20120720152248g:plain


[合いの手] へえー。これでローカルにあるHTMLファイルやテキストファイルでも、Operaに読み込ませれば適切にNGワードを消してくれるのか。

[話者] Firefox/GoogleChrome向けWebAbornタイプ1にも同じ機能を載せておいた。Firefox/GoogleChromeはローカルHDDの*.txtファイルを読み込んでもあぼーんできないけど、ネット上にもたまに*.txtファイルがあるからね。

内部処理

テキストファイルかどうかの判定だが、DOMツリーに<pre>タグが1つだけあって、テキストノードが1つだけあるなら、HTMLではなくテキストファイルだと判定してる。


[合いの手] それって、HTMLとして作られてて<pre>タグが1つあるだけのHTMLファイルにも該当してしまうよ。


[話者] それはテキストファイルと同じ扱いにしてよいだろう。

で、テキストファイルの場合、元々のpreタグのテキストノードを取り出し、改行コードで複数パーツに分割して、新しいpreタグに、文章1行ぶんと<br>タグを次々追加、という処理だ。


[合いの手] 上のOperaの画像よく見ると、

  • あぼーんしてないほうは画面端をテキストがはみ出して、横スクロールバーがある。
  • 各行ごとにあぼーんしてるほうは、画面端で改行してるね。


[話者] <pre>タグ のスタイルシート設定で「white-space: pre-wrap」が付与するようにしたんだ。ソースコードとかログファイル読むときは改行しないほうがいいんだけど、小説とか読み物を読むときとかは改行してあるほうが読みやすい。

WebAborn使いたいのは小説とか読み物のほうだからね。改行するようにしてる。




GoogleChromeはこんな設定しなくても、最初から画面端で改行してくれるんだ。だからタイプ1ではその処理はいれてない。