「JavaScript」カテゴリ内の記事 このカテゴリをはてなブックマークに追加 このカテゴリを含むはてなブックマーク (初公開日順)

2014年3月20日 (木)

Cocolog_Pro_Analyzer:ココログプロ用アクセス解析補助 Greasemonkey

ココログの新しいアクセス解析が 2013年12月に導入され、2014年2月に完全に切り換わった。基本的には便利になって、要望の多いらしい生ログなども将来的に対応していくそうだから、私は大きな不満はない。

ただ、ココログプロを使っていて複数のブログを扱っていると、ブログを横断したデータの閲覧性が低下した点は気になる。そういうのは、前は Perl などで robot を書けば、なんとかなったんだが、今回のアクセス解析は JavaScript がメインの動的なページのため、それが難しい。そのあたりを補うための Greasemonkey スクリプトを書いてみた。

配布物

Cocolog_Pro_Analyzer.user.js。メイン配布物。

count_access.pl。上記をページビューに関して使って生成した JSON の後処理として計数する Perl スクリプトの例。というか私のアクセス解析報告で使う(予定の)スクリプト。

count_access_2.pl。JSON の取得がうまくいかないことがある。そういうときは、手作業でコピペしたテキストを用意するしかない。タイトルのところで改行が入るので、二行ずつで一データのテキストを得てそれを処理する。

続きを読む "Cocolog_Pro_Analyzer:ココログプロ用アクセス解析補助 Greasemonkey"

2014-03-20 03:46:54 (JST) in JavaScript, ウェブログ・ココログ関連 | | コメント (5) | トラックバック (0)

2014年3月11日 (火)

JRF Flag Semaphore for NES Emulator を作った

私は『Monty Python』(日本版)の VHS ビデオを持っている。そのコントの中に大小さまざまな手旗で、会話というかストーリー(『嵐ヶ丘』)を紡ぐというものがあった。

大学時代、ブラウザは xmosaic か最新の netscape かというころ、ウェブのウィジェットを作るネタを考えていて、ふとそのコントを思い出した。そのころの知り合いが、入力された文字列を元に 3D で文字を表示できるようにしたりしたと聞いていた。私は、そういう技術面でのすごさを出せなくても、ネタ的にクスッと笑えるようなものとして、「手旗フォント」みたいなものを作りたいと思った。

続きを読む "JRF Flag Semaphore for NES Emulator を作った"

2014-03-11 08:00:00 (JST) in JavaScript, JRF 作成ソフトウェア, Perl, ハード | | コメント (11) | トラックバック (0)

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)

2012年2月16日 (木)

ユーザーによるコメント「削除」をココログプロで実現する

Web 掲示板の中には、ユーザーがコメントを入力するとき「削除パスワード」を同時に入力させ、ユーザーが後から自分でコメントの削除をできるようにしている実装がある。MovableType, TypePad をもとにしているココログ(プロ)にはそのような機能はないが、JavaScript で書かれた暗号技術を用い、「削除」に相当する機能を実装してみた。


ポリシー


JavaScript を用いてサーバーの内容を変更するわけではない「削除」だから、当然、サーバーから送られるデータの削除になるわけではなく、JavaScript を使っているユーザーに「非表示」になるだけである。サーバー管理者などの立場からすれば、一見、無意味だがソーシャルな面を考えると必しもそうではない。すなわち…

ユーザーが削除の意思を実効を伴って表示できる。

…ことに価値があるのである。人と人とのコミュニケーションはあいまいなもので、消してくれと口ではいいつつ、本当は消して欲しくないの…といったクネクネした反応がありうる。これは削除申請の様式を決めたからと言って済む話ではなく、少し対応が遅れると、消えてない前例があるので、消えないと思った…などという「クネクネ」を許すことになる。消えている実例がすぐに発効しているとなることで、これをかなり封じることができる。

続きを読む "ユーザーによるコメント「削除」をココログプロで実現する"

2012-02-16 12:03:53 (JST) in JavaScript, ウェブログ・ココログ関連, セキュリティ | | コメント (15) | トラックバック (0)

2011年6月 3日 (金)

Statuses_Editor_Proxy.CGI - XMLRPC と OAuth を組み合わせた「ひとことサイト」ソリューション

このアプリケーションは何?


ユーザーとして MovableTyle の機能を XMLRPC から使い、Twitter.com やはてな社が実装する OAuth をユーザー認証に用いることで、CGI のサーバーにリソース・セキュリティが乏しい場合でも、ユーザー追加型の「ひとこと」サイトを一般ユーザーが比較的安心して運用できる Web アプリケーションです。

MovableType のテンプレート、そのサーバーに置く Javascript、ユーザー側で起動する Greasemonkey JavaScript(Google Chrome の UserScript にも対応)、(ローカルで起動する) httpd で使う CGI Perl スクリプトから構成されます。

当初は、アバウトミーの「ひとこと」をココログプロへ移転するツールとして作られたため、その変換のための Perl スクリプトも添付されています。

配布される MovableType のテンプレートは「ココログプロ」用に調整されていますが、SSI が使える MovableType 環境に対応させるのは困難ではないでしょう。

続きを読む "Statuses_Editor_Proxy.CGI - XMLRPC と OAuth を組み合わせた「ひとことサイト」ソリューション"

2011-06-03 05:28:30 (JST) in JavaScript, JRF 作成ソフトウェア, Perl, ウェブログ・ココログ関連 | | コメント (4) | トラックバック (2)

2011年5月 7日 (土)

電子署名の替わりに Loaded Magic

今、私は「ひとこと」を書くためのウェブ上のエディタを MovableType、SSI、 Javascript を使って作っている。追加的な機能として「ひとこと」に電子署名のようなものを付けて、その偽造がないことを証明できたらカッコイイだろうなぁと考えた。

しかし、ウェブの標準的で本格的な電子署名技術を、上記の枠組みだけから使うことは不可能だろうし、例えば、コメントのハッシュを付すにしても、そのハッシュの偽造もコメントの偽造とほぼ同程度の容易さと考えるべきだから、逆に変な信用を与えて、話をややこしくしてもいけない。

続きを読む "電子署名の替わりに Loaded Magic"

2011-05-07 22:32:13 (JST) in JavaScript, セキュリティ | | コメント (8) | トラックバック (0)

2011年4月23日 (土)

aboutme2cocolog: アバウトミーの「ひとこと」をココログプロへ移転するツール

2011年6月30日終了したアバウトミー(aboutme.jp)から、「ひとこと」のデータをココログプロに移転するために作ったツールです。このドキュメントは、移行の手順を示すものです。

あくまで私個人用に作ったもので、あまり多くの人が使うことを想定していません。よってツール類も個人的嗜好と私の労力削減に重きを置いたものになっています。移行まで時間もなく人数が少ないことが想定されるのでそうしていますが、逆に少ないからこそ、要望等にはかなり融通を[]かせることができると思います。要望・質問等はお気軽にお知らせください。

私の「ひとこと」はこのツールを使って↓に移行しました。「正式なオープン」は 2011年6月1日に決めてましたが、それまでに順次、移行は終っており、すでに Google で検索できるような公開の仕方をしていました。

なお、更新情報は現在ご覧の↓のページでご確認ください。

配布ツールをダウンロードするためのリンクは一番下のほうにあります。

続きを読む "aboutme2cocolog: アバウトミーの「ひとこと」をココログプロへ移転するツール"

2011-04-23 08:56:02 (JST) in HTML/XML/CSS, JavaScript, JRF 作成ソフトウェア, Perl, ウェブログ・ココログ関連 | | コメント (35) | トラックバック (4)