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

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

■

ポリシー

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

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

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

暗号ライブラリを使うついでなので、コメントの暗号化も実装した。暗号はココログのシステムでは、入力した「メールアドレス」は常に非表示だが、管理者にはそれがメールで届くことを利用し、暗号化パスワードを常に管理者が知るようにした。もちろん、暗号化後のデータがずっとネットに公開されたままになるし、「パスワード」が平文でメールサーバー間を渡っていくわけで、暗号といっても強固なものではない。

それでも意味があると私が考えたのは、上の「削除」の理由に似たもの、すなわち、これは「他の人に見せたくない」という意思表示としては有用なものだろうということである。その返信には、おそらく管理者の側がユーザーのパスワードを使って暗号化して書き込むことになる。これは、管理者の側がウェブに証拠を残すという点で、メールよりも少しユーザーに有利という面も出せる。

計算機をぶんまわしての暗号解読については、当然、システムとして「盗聴」を封じれるわけがない。常識的に考えれば、そこまでやる相手には逆らわないのが吉である。しかし、解読されたものを読む人がいてこそ意味があると考えたとき、私はソーシャルハック的な「盗聴」探知策を思いついた。

それは暗号化するとき、ユーザーの入力した文の最後に、ランダムにことわざやニュースを付け足すというものである。もし暗号の鍵がバラまかれるようなことが起きているなら、そこに同時に表示されることわざやニュースが人々の口にのぼるようになる、そこまでの影響力がないとしても、はっきりとは言えない立場のものが、盗聴があるのをそれとなくほのめかすのに使えるようになる…と夢想した。

システムを造る際にソーシャルな要素を考慮に入れるとは、個人情報を PC に入力させその支配を高らかにうたう「帝国趣味」的な SNS の拡大をはかることではなく、これまでの社会に存在する自由の限界にネットを使う人々が触れ考える機会を作ることこそ本道ではないか、それこそが Openness ではないか、と夢想した。

■

仕組み

まず、ココログには「メールアドレス」は他人に知らせない機能があり、それはコメント送信時に管理者に平文で送られてくる。これを暗号化パスワードとして使う。これが、本当のメールアドレスである必要はないが、管理者まで中継するプロバイダ等が、その「パスワード」を知ってしまうことが前提にある。

コメント暗号化の際は、暗号化(Base64でテキスト化)したものを、適当な BEGIN と END でくくってサーバーに書き込み、サーバーから読み出すとき、 JavaScript でそれを発見して、暗号解除用の HTML ウィジェットに置き換える。

コメント削除のルーチンはもう少し手順が必要で、次のようにする。

● ユーザーの「メールアドレス」を「パスワード」として使うところは、暗号化と共用。 ● コメントが書かれたとき、コメントごとに二つの乱数列を生成する。例えば、1234 と 5678 がそれだとする。1234 は「コメント識別子」として使う。5678 は「削除キー」として使う。 ● コメントの最後に［omit-info 1234 abcd efgh］と付け足す。ここで、 abcd は 1234 を「削除キー」5678 で暗号化したことで得られた文字列、 efgh は 5678 を「メールアドレス」で暗号化したことで得られた文字列。

…ここでサーバーに書かれ、しばらくして別の機会にそのユーザーが読み出したとする。 ● そのコメントで削除ボタンを押すと「メールアドレス」の入力が求められる。 ● 「メールアドレス」により、efgh を複号化し、「削除キー」 5678 を得る。そのコメント番号が 100 番とすると、コメントとして、「omit: 100 1234 5678」をサーバーに書き込む。

…別のユーザーが訪れ、読み出しをする。

● 最後から読んでいって、「omit 100 1234 5678」を見つけると、100 番より前のコメントで 1234 の識別子を持つもので、1234 を 5678 で暗号化した abcd が omit-info にあるものを非表示にする。成功した omit を含むコメントも消す。

なお、1234 から abcd を得るのは複号の必要がないのでハッシュで良く、実装では HMAC-SHA1 を使っている。暗号は AES。「コメント識別子」は 4 ケタの数字、「削除キー」は16バイトのバイナリ列。適宜、Base64 にエンコードしている。

暗号ライブラリを使う際の注意点として、文字コードの問題がある。今回使った Crpto-JS はデフォルトでは、String はすべて漢字等を含む文字列、すなわち、8bit バイナリではない文字列として考え、渡されたあと、UTF8 のエンコードの処理をしてしまう。これは、データだけでなくキーに関してもそうである。

しかし、上のランダムに生成された削除キーなどは、バイナリとして解釈されたほうが有利で、さんざん日本語の文字コードに苦しめられてきたせいか、文字コードをアプリケーションプログラマ側が責任をもって変換して、バイナリで受け渡すほうが私の趣味にあうので、そうなるようなラッパーコードを挟んで実装している。

■

導入方法

ココログプロで導入するのにテンプレートをいじる必要がある。これを自動化するわけにもいかず、煩雑な手作業が必要になる。まず要点のみ書く。

1. 必要なライブラリをダウンロードし、自分のココログサイトに置く。 2. テンプレートの Individual Archives のコメント入力欄をいじる。 3. CSS を設定する。 4. コメント確認画面に対応できるよう「サブタイトル」の設定に script 文を入れ、ライブラリをロードできるようにする。(←これがミソ)

まず、1 の「必要なライブラリをダウンロードし、自分のココログサイトに置く」こと。JavaScript なので、ライブラリを直接、配布サイトから引っぱることも可能だが、他のまともなサイトと違って、私は私のためにスクリプトをいじってしまうことがしょっちゅうあるので、そこでバージョン違いのスクリプトを引っぱって来ないように、また、殊勝にも、サイトへの負荷を軽減するために、自分のところに置いたほうがよい。

必要なライブラリは次の通りである。

● Crypto-JS。暗号ライブラリ。下のものはサイズを小さくするための「難読化」がされているが、配布されている zip には読めるソースが入っている。下はそのソースの crypto.js と sha1.js と hmac.js と pbkdf2.js と blockmodes.js と aes.js を連結したものに相当するようで、Base64 とかもこのファイルだけで使えるようになる。 http://crypto-js.googlecode.com/files/2.5.3-crypto-sha1-hmac-pbkdf2-blockmodes-aes.js ● ことわざ集。下のは私が本などをもとに選びながら入力したものである。ことわざ自体は伝統的なもので、そこに著作権が生じるとは考えにくいが、ただ、データベースに著作権がある昨今なので、もしかすると、問題にする向きもあるかもしれない。 http://jrf.cocolog-nifty.com/archive/lib/proverbs.js ● マジックナンバー生成ツール。これは《電子署名の替わりに Loaded Magic》に書いたようにソースそのものではなく、これをロードして使うことに意味がある。よって、これについては私のサイトのものを使ってもよいだろう。 http://jrf.cocolog-nifty.com/archive/javascript/summoner.js ● 今回の JavaScript プログラム本体。 http://jrf.cocolog-nifty.com/archive/javascript/jrf_crypt_comment.js

(最初のバージョンのころは、「ランダムことわざ」の下に、「今日のネットの話題」として、はてなブックマーク の社会のホットエントリからタイトルと URL を拾っていた。しかし、そこで使っていた Google Feed API が 2016年12月にサービス終了したため、その部分のコードを削除した。)

次に、2 の「テンプレートの Individual Archives のコメント入力欄をいじる」わけだが、JavaScript が使えないときのことも多少考慮するため、複雑になっている。具体的には、同じことわざやニュースが表示されるのも芸がないので、《Wings-Winds Scripts［SSI］ - ランダム表示》を参考に SSI の機能で、最低限のランダムさを取り入れたりしている。

コメント入力部の class が comment-form である div について下記のようにする。(自分のコードにコピペできるように長く引用している。コードのあとで順に要点を説明する。)

<div class="comment-form">
<h2><$MTTrans phrase="Post a comment"$></h2>

<div id="comment-form-data">
<form onsubmit="handleSubmit(this)" method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />
<input type="hidden" name="user_id" value="<$MTUserID>" />

<div id="comment-data">
<p id="comment-name"><label for="author"><$MTTrans phrase="Name:"$></label><br />
<input onchange="handleChange(this)" tabindex="1" id="author" name="author" /></p>

<p id="comment-email"><label for="email">暗号化パスワード：</label><br />
<span class="comment-form-note" style="display:inline">(メールアドレス形式)</span><br />
<input onchange="handleChange(this)" tabindex="2" id="email" name="email" /></p>

<p id="comment-url"><label for="url"><$MTTrans phrase="URL:"$></label><br />
<input onchange="handleChange(this)" tabindex="3" id="url" name="url" /></p>
</div>

<div id="comment-regist">
<p id="rememberme"><label><input tabindex="5" onclick="handleCheck(this)" type="checkbox" id="bakecookie" name="bakecookie" value="1" /> <$MTTrans phrase="Remember personal info?"$></label></p>
</div>
<div id="comment-help">
※匿名投稿を許可しています。<a href="http://jrf.cocolog-nifty.com/column/2006/02/post_20.html#comment-policy">ゆるめのコメント管理のポリシー</a>を持っています。この記事にまったく関係のないコメントは<a href="http://jrf.cocolog-nifty.com/column/2006/02/post_35.html">このリンク先</a>で受け付けています。<br />
※暗号化パスワードを設定すれば、後に「削除」、すなわち JavaScript で非表示に設定できます。暗号解読者を気にしないならメールアドレスでもかまいません。この設定は平文のメールで管理者に届きます。<br />
※コメントを書くために<b><b>ボールド</b></b>、<pre>詩文やソースコード</pre>、<a href=""><a href="http://support.cocolog-nifty.com/">リンク</a></a>、<a href="http://support.cocolog-nifty.com/howto/2006/03/post_c72b.html#tag">その他のHTMLタグ</a>が使えます。また、漢字[かんじ]でルビが、[google: キーワード] で検索指定が使えます。
</div>
<br id="comment-separator" style="clear: both;" />
<p id="comment-text-field"><label for="comment-text"><$MTTrans phrase="Comments:"$><$MTWeblogIncludeModule module="comment-emoticon"$>←今の気持ちを表す絵文字をコメントの最初に付けるの推奨。</label><br />
<textarea tabindex="4" id="comment-text" name="text" rows="10" cols="50"></textarea></p>

<div id="comment-submit" align="center">
<input id="preview" tabindex="6" type="submit" name="preview" onclick="if (!append_omit_info()) return false; return true;" value=" <$MTTrans phrase="Preview"$> " />
<input id="post" tabindex="7" style="font-weight: bold;"  onclick="if (! append_omit_info()) return false; disableButton(this); return false;" type="submit" name="post" value=" <$MTTrans phrase="_POST_VERB"$> " />
</div>

</form>
</div>

<div id="encrypt-form-data">
<form>
<!--#config timefmt="%S" -->
<!--#set var="sec" value="$DATE_LOCAL" -->
<input type="hidden" id="encrypt-backup" />

<p id="random-proverb">
ランダムことわざ:
<!--#if expr="$sec=/[01]$/" -->
<span id="salt-proverb">身から出た錆。</span>
<!--#elif expr="$sec=/[23]$/" -->
<span id="salt-proverb">猿も木から落ちる。</span>
<!--#elif expr="$sec=/[45]$/" -->
<span id="salt-proverb">鶴は千年、亀は萬年。</span>
<!--#elif expr="$sec=/[67]$/" -->
<span id="salt-proverb">温故知新。</span>
<!--#else -->
<span id="salt-proverb">七転び八起き。</span>
<!--#endif-->
</p>

<div class="crypt-widget" align="center">
<label>パスワードヒント: </label> <input id="email-hint" type="text" tabindex="8" size="30" value="コメンテーターの「メールアドレス」" /><br/>
<noscript>暗号を使うには JavaScript を有効にする必要があります。あなたの家・社の管理者にご相談ください。<br/></noscript>
<input id="encrypt" tabindex="9" onclick="encrypt_textarea();return false;" type="button" name="encrypt" disabled="disabled" value=" 暗号化 " />
<input id="cancel-encrypt" tabindex="10" disabled="disabled" onclick="cancel_encrypt();return false;" type="button" name="cancel-encrypt" disabled="disabled" value=" キャンセル " />
</div>

</form>
</div>

</div>

まず、form が二つに分かれているのは、submit 時に付け足しの部分がサーバーに送られたくないからである。

最初の id が comment-form-data の div の form について。

INPUT SUBMIT の id が preview と post のボタンで、append_omit_info 関数を呼んで、omit-info を comment-text に追加するよう変更している。

あとは、「メールアドレス:(ウェブには掲載されません)」のところを「暗号化パスワード:(メールアドレス形式)」と変え、これまで私のサイトでは表示してきた注意書きを増やしているぐらい。

次の id が encrypt-form-data の div の form について。

ここでは前述のように SSI で一端、ランダムにことわざとニュースを選んでいるが、後で、JavaScript で別のものに差しかえている。

他の掲示板の使い方をならってというか、「パスワードのヒント」を入力させるようにしている(空欄可)。

暗号化ボタンが押されたとき、ブラウザキャッシュが効きやすいよう、INPUT HIDDEN なところに平文を待避させている。

なお、標準のテンプレートにはないが、私のサイトには「最新コメント一覧」等があり、そのテンプレートをいじって、comment-content という class の div を作り、(完全ではないが)なるだけ「削除」が反映されるようにした。さらに最新コメントの RSS もあるのだが、JavaScript が使えない以上、その点については諦めた。

そして 3 の「CSS を設定する」だが、私は、jrf_crypt_comment.css というのを別に作ってそれを読みこむようにしているが、要はどこかに次のような設定を書けばいい。omit-info については、私はコードを作った人なので仕組みに気付かれるよう表示しているが、他の人は display:none で良いと思う。

/* p.omit-info { display: none; } */
p.omit-info { font-size: xx-small; color: gray; }

p.omitted {
  font-size: small;
  color: gray;
  text-align: center;
  border: dashed 2px gray;
  padding: 3px;
  margin: 5px;
}

.popup-container { position: relative; }

.popup-overlay {
   position: absolute;
   top: 10px;
   left: -18em;
   z-index: 10; 
   width: 20em;
   text-align: left;
   padding: 3px;
   font-size: medium;
   color: black;
   background: white;
   border: solid 1px black;
}

.crypted {
  text-align: left;
  border: solid 1px gray;
  padding: 3px;
}

.crypted em {
  color: red;
}

.decrypted-tail {
  color: gray;
  font-size: small;
}

最後に変態的な 4 の「コメント確認画面に対応できるようサブタイトルの設定に script 文を入れる」こと。

お上品には、JavaScript ライブラリは HTML の HEAD で読み込むのが「おやくそく」だが、コメントを「削除」と言ってる手前、コメント確認画面などでスクリプトが読まれず、削除したはずのコメントが表示されるようじゃカッコ悪い。

ココログのコメント確認画面はブログ管理人のサイトから離れたとこにあるが、styles.css は読んでくれる。ただ、スクリプトを読むような機能はなさそうで、普通は、そこでスクリプトを実行しようとするのは「邪道」なのだと思う。

が、不可能というわけでもなくて、確認画面にタイトルとサブタイトルが表示されるのを利用して、どちらかに script タグを仕込んでしまえば目的は達することができる。

ただし、これは当然「想定外」とすべき使い方だから、ココログの管理画面でサブタイトルのところの表示がやたら見にくくなるのは甘受せねばならないようだ。

サブタイトルの設定に入れ込むコードは次のようになる。

サブタイトルをここに書いた上で…。

<script src="http://jrf.cocolog-nifty.com/archive/lib/2.5.3-crypto-sha1-hmac-pbkdf2-blockmodes-aes.js" type="text/javascript"></script>
<script src="http://jrf.cocolog-nifty.com/archive/lib/proverbs.js" type="text/javascript"></script>
<script src="http://jrf.cocolog-nifty.com/archive/javascript/summoner.js" type="text/javascript"></script>
<script src="http://jrf.cocolog-nifty.com/archive/lib/jrf_crypt_comment.js" type="text/javascript"></script>

ここで、jrf.cocolog-nifty.com/archive/lib/ の部分は、自分がダウンロードしたライブラリを置いているところに書き換えていただきたい。

以上の準備をしたうえで、ブログのデザインを再構築すれば、暗号化と削除ができるようになっている…はず。

■

今回の配布物

ライセンス的なことについては、私が作った部分についてはパブリックドメインでいいのだが、ことわざ集は、下記の本や Wikitionary、また電子辞書(広辞苑等)を参考にしており、コメント入力欄は、ココログ標準テンプレートをいじったもので、そのあたりの権利関係は明暸ではない。非商用の個人で使うならいざ知らず、業務で使うようなことが万一あるなら、そういったところに注意する必要があるだろう。

● ことわざ集。 http://jrf.cocolog-nifty.com/archive/lib/proverbs.js ● JavaScript プログラム本体。 http://jrf.cocolog-nifty.com/archive/javascript/jrf_crypt_comment.js

■

参考

下に挙げたもののほか、《aboutme2cocolog》、《易双六》と作ってきた経験、コードが役に立っている。

● Crypto-JS は先に挙げた。試験実装の当初は別の暗号ライブラリ等を使っていたが、結局、Crypto-JS がいろいろ揃っていて便利で、こちらに移行した。 ● 《Wings-Winds Scripts［SSI］ - ランダム表示》も上述。MovableType + SSI のテクニックは私のサイトでは頻出。 ● 『学研まんが事典シリーズ ことわざ大事典』(森久保 安美 監修, 学研, 1986年)。《Wiktionary:四字熟語の一覧 - ウィクショナリー日本語版》。ことわざを入力するときに参考にしたもの。 ● アイデアは最初《ひとこと》で出した。[cocolog:71400198] で削除のアルゴリズムを述べ、[cocolog:71567131] で盗聴の痕跡をソーシャルに残すアイデアを述べている。

更新：	2012-02-16,2017-03-29
初公開：	2012年02月16日 12:03:57
最新版：	2017年03月30日 02:03:03