« 2013年2月17日 - 2013年2月23日 | トップページ | 2014年3月2日 - 2014年3月8日 »

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)

gengou.js:日付を後付けで元号表示にする

ブログ記事の上の日付とかを西暦から元号に変えるための JavaScript。最初の紹介はいちおう [cocolog:78797141] になるが、ほぼ説明してない。このサイトで使ってるので、どういう感じになるかは PC でこのサイトを見てればわかるはず。使い方は、次をページ(ブログテンプレートとか)で JavaScript をロードしてる部分に足すだけ。

<script type="text/javascript" src="http://jrf.cocolog-nifty.com/archive/lib/gengou.js"></script>
<script type="text/javascript">
<!--
add_event_listener_rewrite_gengou("//div[@class='content']/h2");
add_event_listener_rewrite_gengou("//div[@class='sticky-entry']/h2");
-->
</script>


どの日付を換えるかは、上の add_event_listener_rewrite_gengou の引数の XPath で指定してるので、そこを変えればほぼどんなサイトでも使えるはず。

もちろん、gengou.js はダウンロードして自分のサイトに置いて使ったほうがいい。そのときは、内部で古いブラウザ用にここから取ってきた XPath のライブラリを使ってるので、それもいっしょに置いて、ソースの GENGOU_XPATH_JS で指定すること。(どうせならと、XPath 2.0とかを選ぶ人もいるかもしれないけど。)

ただ、このスクリプト、元号は直近の記事分は変わらないようになってて、「その日以降元号にする」という部分は、ソース直書きになる。そこはソース中の↓の "2014-02-12" を最新の日付に更新しさえすればいい。私は(生きてれば)だいたい3ヶ月ごとに更新していくはず。三つ組の最後の部分は終了日で、ネット時代になってからずっと平成なので null のまま、ソースには「ももくり三年」にちなんだ例が載ってて、"平成%(数)G年%(和)m%(数)d日" と指定して「平成二十六年如月十一日」と漢数字化するような例も載ってる。

var Gengou = [
  [null, "2014-02-12", null], 
  ["平成%G年(%Y年) %_m月%_d日", "1989-01-08", null]
];


一番上でリンクしたひとことでも書いたんだけど、私が死んだあと誰かがここを引き継ぐと、デフォルトでは元号の表示が切れるわけで、そこは少し失礼にあたる。ずっと同じ元号のほうが失礼が薄いという考え方もあるのは知ってるが、私の後継者が万一現れたとき、よくわからないまま、この先のすごい高齢化社会において「新しく若い元号」を認めないような形になるのをむしろ避けたかった。

そういうことだから、このスクリプトを自分のとこにおけないと、私の更新が止まれば元号表示が止まっちゃう。こういうスクリプトの提供は政府がやってくれたら便利なんだけどね…。政府だと責任とか小回りの点で難しかったら、神社の団体とか、特定のデカい神社とかがやってくれたらありがたいのに。(いちおう、最新の JavaScript には Intl.DateTimeFormat とかいう機能があるらしいけど…。)

「素人」が自分のサイトで使うために作っただけなので、コード品質は「良い」とは言えないと思う。ただ、その程度なのでパブリックドメインが著者たる私の意志。商用だろうが改造しようが、お好きに使っていただいても私は文句言いません。
更新: 2014-02-08,2014-02-11
初公開: 2014年02月08日 00:37:43
最新版: 2014年02月11日 23:38:13

2014-02-08 00:37:41 (JST) in JavaScript, JRF 作成ソフトウェア | | コメント (2) | トラックバック (0)