SPOILER ALERTは画像やテキストの一部にぼかしを加えて閲覧できないようにするライブラリです。

見ちゃダメ、と言われるとなお一層見たくなるのが人の性と言うものです。そんな習性(?)をうまくついたソフトウェアがSPOILER ALERTです。

[![](http://images.moongift.jp/2013/02/Screenshot 2013-02-27 10.18.35_thumb.1361950795.png)](http://images.moongift.jp/2013/02/Screenshot 2013-02-27 10.18.35.1361950795.png)
うぬぬ、見えない!

[![](http://images.moongift.jp/2013/02/Screenshot 2013-02-27 10.18.38_thumb.1361950799.png)](http://images.moongift.jp/2013/02/Screenshot 2013-02-27 10.18.38.1361950799.png)
マウスを載せると…おお、ちょっと見えるぞ!

[![](http://images.moongift.jp/2013/02/Screenshot 2013-02-27 10.18.42_thumb.1361950803.png)](http://images.moongift.jp/2013/02/Screenshot 2013-02-27 10.18.42.1361950803.png)
クリックすると、いやん!

[![](http://images.moongift.jp/2013/02/Screenshot 2013-02-27 10.18.45_thumb.1361950807.png)](http://images.moongift.jp/2013/02/Screenshot 2013-02-27 10.18.45.1361950807.png)
テキストも同様でマウスオーバーでちょっとだけ見えます。

[![](http://images.moongift.jp/2013/02/Screenshot 2013-02-27 10.18.48_thumb.1361950811.png)](http://images.moongift.jp/2013/02/Screenshot 2013-02-27 10.18.48.1361950811.png)
クリックでぼかし解除!

HTMLソース中ではspoilerというタグを使ってぼかしたい部分を指定します。マウスオーバーでちょっと解除、クリックで完全解除というに段階になっています。なおソースには普通に文字が書かれていますので、Webクローラーから見れば普通にインデックスされてしまうのでご注意ください。

SPOILER ALERTはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

MOONGIFTはこう見る

SPOILER ALERTはジョーク的なソフトウェアですが、最近ではGoogleなどのクローラーにはインデックス化されたいが、閲覧時には表示したくないと言ったニーズが多々あります。メディア系の会員向けにしか情報を表示しない系統で良く行われていますが、これはGoogleのポリシーに反するので注意が必要です。

SPOILER ALERTのような手法ではJavaScriptをオフにすると通用しなくなってしまうのが難点です。手法としてはCSS3を使ったぼかし処理を行っていますが、Canvasでもぼかす処理は可能なので、こちらを使った場合はHTML5であればJavaScriptをオフにしても適用されるのでもっと使い勝手が良いかも知れません。

SPOILER ALERT!

joshbuddy/spoiler-alert · GitHub