hide_img.js：画像のクラス指定に順って閲覧を要クリック化する
暴力表現や性的表現を含むような画像で、「18禁」まではいかないが、「見たくないものを見ない権利」に多少配慮して、何か<ruby><rb>覆</rb><rt>おお</rt></ruby>いはかけておきたいといったことがある。本サイトではそういうとき、img タグの class に sexual や violence を指定してやると、あとから JavaScript が要クリックの覆いをかけるようになっている。パスワードによる「閲覧制限」まではしない。
例としては《壁紙化：「moecco vol.31」 その１》だと、おとなしめなので覆いを(モデル活動を知らない家族以外の)誰が外してもそれほどの不快がないはず。私の、覆いをかける基準とか哲学みたいなのは、今のところ《デスクトップ壁紙公開についてのこのサイトのポリシー》のコメント欄が参照先になる。
使い方は、次をページ(ブログテンプレートとか)で CSS や JavaScript をロードしてる部分に足すだけ。ただし、私は下のように書かず、CSS はブログ全体のスタイルシートから @import するようにしている。
<style type="text/css">
@import url('http://jrf.cocolog-nifty.com/archive/lib/hide_img.css');
</style>
<script type="text/javascript" src="http://jrf.cocolog-nifty.com/archive/lib/hide_img.js"></script>
もちろん、hide_img.js と hide_img.css はダウンロードして自分のサイトに置いて使ったほうがいい。難しいことはやってないので、ソースを読めるなら、sexual や violence を指定したときの表示等も簡単に変えられるはず。
そして、ブログ記事等を書くときは、img タグに class="sexual" とするか、すでに class="nantoka kantoka" ってのがあれば class="nantoka kantoka sexual"みたいにスペースを開けて sexual を足すだけで機能するはず。このあたりは、自作の「電子小切手」的な広告非表示ツール No_Ad_URL と相性がいい。
ただ、このスクリプト、置き換えた要素の CSS 周りが難しくて、 vertical-align とか float 等のからみで相性良くないページとかはありそうで要注意。このスクリプトのひとことでの紹介は [cocolog:78822199] なんだけど、そこでは float がらみでハマった経験を書いている。
スクリプトのブラウザ対応状況に関しても注意が必要で、スクリプト自体は IE 6 でも動くんだけど、古い IE は CSS の opacity に対応してない。このスクリプトでは、画像を隠すのに CSS で opacity をまず 0.0 して、表示するときに、それを 1.0 にするというトリックを使う。JavaScript を OFF にしてると、opacity が 0.0 で画像が見れなくなり、IE 6 みたいに opacity が効かないと、覆うまでの時間差でチラっと見えちゃう。だから、私のサイトではその辺りの注意書きとして次のようなことをしている。
<style type="text/css">
#nonjs-warning { font-size: x-small; }
#opa-warning { font-size: x-small; opacity: 0.0; }
</style>
(…中略…)
<!-- 下をサブタイトル部分などに挿入 -->
<noscript><span id="nonjs-warning">JavaScript が OFF のため、機能が制限されています。画像が見えなかったり、要クリックの画像がいきなり見えたりする可能性があります。</span></noscript>
<script type="text/javascript">
<!--
document.write('<span id="opa-warning">本サイトには閲覧者が成人であることを前提にした画像があります。御不快、御寛恕願います。</span>');
-->
</script>
(…略…)
「素人」が自分のサイトで使うために作っただけなので、コード品質は「良い」とは言えないと思う。ただ、その程度なのでパブリックドメインが著者たる私の意志。商用だろうが改造しようが、お好きに使っていただいても私は文句言いません。
とはいえ、上で書いたように使う上で注意すべきことが多くて正直、他のサイトでは使いにくいと思う。普及させようとして設定する人と使う人が違うと、導入よりも class 指定のほうが敷居が高いかもしれず、もっと広く、大手がちゃんとした機能として導入するなら、「素人」の私のソースは使わないだろうし。機能の実現性を聞かれたときとかにプレゼンで使うにはいいかも…といったぐらいか。
更新：2014-02-08,2014-02-12
初公開：2014年02月08日 17:22:44
最新版：2014年07月25日 11:16:35
Comments:
[E:basketball] 更新：hide_img-20140212.js。バージョン 0.05。
ほとんど変更はなく、将来に向けて２重読み込みなどで hide_img_hide_all がもう一度呼ばれても大丈夫なようにしたのと、あとはシンタックス関連で気になったところを改善したぐらい。
投稿: JRF | 2014-02-12 00:39:35 (JST)
[E:noodle] 更新：hide_img-20140212_2.js。バージョン 0.06。
正規表現がらみでちょっち失敗してたのを、0.05 アップのあとすぐに気付いたので修正。
投稿: JRF | 2014-02-12 01:28:15 (JST)
[E:diamond] typo 「御寛如」→「御寛恕」。
投稿: JRF | 2014-07-25 11:19:01 (JST)
Links:
パスワードによる「閲覧制限」: http://allabout.co.jp/gm/gc/23839/ (hbm)
壁紙化：「moecco vol.31」 その１: http://jrf.cocolog-nifty.com/column/2014/02/post.html
デスクトップ壁紙公開についてのこのサイトのポリシー: http://jrf.cocolog-nifty.com/column/2013/09/post.html
hide_img.js: http://jrf.cocolog-nifty.com/archive/lib/hide_img.js
hide_img.css: http://jrf.cocolog-nifty.com/archive/lib/hide_img.css
「電子小切手」: http://jrf.cocolog-nifty.com/society/2006/09/post.html
No_Ad_URL: http://jrf.cocolog-nifty.com/statuses/jumpbytitle.html?q=cocolog%3A76692463
古い IE は CSS の opacity に対応してない: http://blog1.erp2py.com/2011/04/cssopacityie.html (hbm)
hide_img-20140212.js: http://jrf.cocolog-nifty.com/archive/javascript/hide_img-20140212.js
hide_img-20140212_2.js: http://jrf.cocolog-nifty.com/archive/javascript/hide_img-20140212_2.js