« gengou.js:日付を後付けで元号表示にする | トップページ | Perl で unpack_bits »

2014年2月 8日 (土)

hide_img.js:画像のクラス指定に順って閲覧を要クリック化する

暴力表現や性的表現を含むような画像で、「18禁」まではいかないが、「見たくないものを見ない権利」に多少配慮して、何か[おお]いはかけておきたいといったことがある。本サイトではそういうとき、img タグの class に sexual や violence を指定してやると、あとから JavaScript が要クリックの覆いをかけるようになっている。パスワードによる「閲覧制限」まではしない。

例としては《壁紙化:「moecco vol.31」 その1》だと、おとなしめなので覆いを(モデル活動を知らない家族以外の)誰が外してもそれほどの不快がないはず。私の、覆いをかける基準とか哲学みたいなのは、今のところ《デスクトップ壁紙公開についてのこのサイトのポリシー》のコメント欄が参照先になる。

使い方は、次をページ(ブログテンプレートとか)で 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.jshide_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

2014-02-08 17:22:42 (JST) in JavaScript, JRF 作成ソフトウェア | | コメント (3) | トラックバック (0)

JavaScript」カテゴリ内の最近の記事

JRF 作成ソフトウェア」カテゴリ内の最近の記事

批評や挨拶のためのネットコミュニティ

  • はてなブックマーク(って何?) このエントリーをはてなブックマークに追加 このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク
  • Twitter (って何?)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/93568/59093712

トラックバックのポリシー

他サイトなどからこの記事に自薦された関連記事(トラックバック)はまだありません。
» JRF のソフトウェア Tips:hide_img.js:画像のクラス指定に順って閲覧を要クリック化する (この記事)

コメント

basketball 更新:hide_img-20140212.js。バージョン 0.05。

ほとんど変更はなく、将来に向けて2重読み込みなどで hide_img_hide_all がもう一度呼ばれても大丈夫なようにしたのと、あとはシンタックス関連で気になったところを改善したぐらい。

投稿: JRF | 2014-02-12 00:39:35 (JST)

noodle 更新:hide_img-20140212_2.js。バージョン 0.06。

正規表現がらみでちょっち失敗してたのを、0.05 アップのあとすぐに気付いたので修正。

投稿: JRF | 2014-02-12 01:28:15 (JST)

diamond typo 「御寛如」→「御寛恕」。

投稿: JRF | 2014-07-25 11:19:01 (JST)

コメントを書く



(メールアドレス形式)


※匿名投稿を許可しています。ゆるめのコメント管理のポリシーを持っています。この記事にまったく関係のないコメントはこのリンク先で受け付けています。
※暗号化パスワードを設定すれば、後に「削除」、すなわち JavaScript で非表示に設定できます。暗号解読者を気にしないならメールアドレスでもかまいません。この設定は平文のメールで管理者に届きます。
※コメントを書くために<b>ボールド</b>、<pre>詩文やソースコード</pre>、<a href="">リンク</a>、その他のHTMLタグが使えます。また、漢字[かんじ]でルビが、[google: キーワード] で検索指定が使えます。


ランダムことわざ: 身から出た錆。