数値実態参照というのは、HTMLやXMLで直接記述できない文字を記述するための方法です。HTMLを書いた事のある方は、一度は「&」とか「<」とか見たことがあるんじゃないでしょうか。これらはHTMLのいわゆる”タグ”を表記したりするのに使うので、直接書くとタグの一部なのかどうか区別が付かなくなっちゃいます。だから、このように迂回して書くことで混同されるのを避けます。

HTMLやXMLには「&」を「&」と表すだけでなく、「&」と数字で表すこともでき、前者を文字実体参照、後者を数値文字参照と呼びます。前者の文字実体参照では表せる文字は限られますが、後者の数字文字参照ではUNICODEで表せる文字ならどんな文字でも表すことができます。

今回はこの文字と数値文字参照の相互変換、つまり「☆」を「☆」に変換したり、逆に「♡」を「♡」に変換したりしてくれるスクリプトです。たまに使う、かつありそうで無いスクリプトだったので昔作ったやつを公開します。

• 文字列⇔数値文字参照相互変換

　「UFO大好き霊子さん」をRails2.x系から3.x系に移植するに当たってぶち当たった問題のひとつです。かなり汎用性のある内容と思われるので、今回こちらにメモしておきます。

　めんどくさい人は最後だけ見てね。

■rails2系でのお手軽Ajax

　Rails2系では、こんなヘルパを書くことで簡単なAjax通信ができます。

<%= link_to_remote 'イイネ!', :url => {:controller => 'votes', :action => 'create', :moderate => 'yes', :post_id => @post.id}, :update => "post_voting_#{@post.id}" %>

　こうすることで、’イイネ！’というリンクが現れます。これをクリックすると、VotesコントローラのCreateアクションがpost_idとmoderate=yesというパラメータで呼ばれ、その結果が”post_voting_#{@post.id}”というIDを持つ要素のinnerHTMLに書きこまれます。殆どJavaScriptを意識すること無く書けるので、とても便利で楽でした。

■rails3系では”:remote=>true”で出来ると言うものの…

　rails3系では「link_to_remote」が廃止され、代わりに「link_to」に:remote=>trueというオプションが加わりました。が、完全互換ではなく、:updateオプションはありません。

　rails3.x系で正攻法で今までと同じことをするには、ビューの元の部分を

<%= link_to 'イイネ!', {:controller => 'votes', :action => 'create', :moderate => 'yes', :post_id => @post.id}, :remote=>true %>

　と書き換え、さらにこの上でVotes#createがJavaScriptをrenderして返さなければなりません。たとえば、”view/votes/create.js.erb”を作って、

Element.update($("post_voting_<%= @post.id %>"),'投票ありがとう！');

　みたいな感じですね。正直めんどくさい。

■移植のため、Prototype.jsだけで機械的になんとか移植するには！

　正直めんどくさいので、最小の手順でなんとかしましょう。Rails3系では、JavaScriptとHTML部分が完全に分離され、上記のlink_toで:remote=>trueをしても出力されたHTMLにはこのようにJavaScriptは一切含まれていません。こんな出力です：

<a href="/votes?moderate=true&amp;post_id=1" data-remote="true" rel="nofollow">イイネ！</a>

　ではどうやってJavaScriptで通信してるのかというと、rails.jsを見ればわかりますが、”data-remote”が指定されてる要素に対して”click”イベントハンドラを追加することで処理しています。こんな感じ：

document.on("click", "a[data-remote]", function(event, element) {
if (event.stopped) return;
handleRemote(element);
event.stop();
});

　で、Ajax通信がとりあえず終わったらajax:competeイベント、成功するとajax:successイベントが、失敗するとajax:failureイベントが投げられます。rails.jsのイカの部分でゲソ：

function handleRemote(element) {
（略）
new Ajax.Request(url, {
method: method,
parameters: params,
evalScripts: true,
onComplete:    function(request) { element.fire("ajax:complete", request); },
onSuccess:     function(request) { element.fire("ajax:success",  request); },
onFailure:     function(request) { element.fire("ajax:failure",  request); }
});
（略）
}

　じゃ、このイベントを活用すれば良いんじゃなイカ？というわけで、イベントを追加して結果を流しこめばおｋ。こんなのをapplication.jsにでも追加しましょう：

document.on("ajax:success", "a[data-remote]", function(event, element) {
alert(event.memo.responseText); //結果が出てくる
});

　あれ？結果を書きこむ先は？

　link_toでは任意の属性を出力される要素に追加することができるので、これを使いましょう。また、createはpostメソッドなので、それも指定します。

<%= link_to_remote 'イイネ!', {:controller => 'votes', :action => 'create', :moderate => 'yes', :post_id => @post.id}, :remote=>true, 'data-update'=>"post_voting_#{@post.id}", 'data-method'=>:post %>

　application.jsではこのようにして結果を書き込みます：

document.on("ajax:success", "a[data-update]", function(event, element) {
Element.update($(element.readAttribute('data-update')), event.memo.responseText);
});

　これで目的は達成されました。

■手順まとめ

■１：link_to_remoteは廃止されたので、link_toに書き換えて:remote=>trueを追加する。

　URLオプションの渡し方も微妙に変わってるので注意†1。:updateは’data-update’に変更し、アクションがpostの場合は’data-method’=>’post’も末尾に追加。

<%= link_to_remote 'イイネ!', :url => {:controller => 'votes', :action => 'create', :moderate => 'yes', :post_id => @post.id}, :update => "post_voting_#{@post.id}" %>

を、次のように変更します。

↓

<%= link_to 'イイネ!', {:controller => 'votes', :action => 'create', :moderate => 'yes', :post_id => @post.id}, :remote=>true, 'data-update'=>"post_voting_#{@post.id}", 'data-method'=>:post %>

■２：application.jsにこんな内容を追加する。

document.on("ajax:success", "a[data-update]", function(event, element) {
Element.update($(element.readAttribute('data-update')), event.memo.responseText);
});

以上です。Rails3のAjaxでHTMLを返してjQueryで処理する – とはえ領域を参考にしつつ、jQueryを使わない方法を模索しました。

• †1: link_toが三つ引数を取るようになり、その二つ目がurlオプション