Rubyで暗号化した文字列をJavaScriptで復号化してみた

Qiitaにある
JavaScriptで暗号化した文字列をRubyで復号化してみた
という記事の逆をやってみたいと思ってみました。

JavaScript側では、CryptJSを使ってRuby側で暗号されたものを
var text = CryptoJS.AES.decrypt(data, "pass").toString(CryptoJS.enc.Utf8);
で複合化をできるようにRuby側で暗号化したいと思います。
Ruby側で暗号化された値が上記のdataに入る感じです。

Ruby側は以下のような感じです。


これを使ってruby側で
enc_data = encrypt(”hogehoge”,"pass")
としてできた、enc_dataの内容をJavascript側のdataに入れてやれば、hogehogeと戻せる感じでした。

javascriptで郵便番号から住所に変換するにはajaxzip3が便利

javascriptで郵便番号から住所に変換するには、ajaxzip3が便利です。

郵便番号から住所に変換するときに面倒なのが郵便番号情報のメンテナンスなのですが、
これをおまかせしておくことができるのがステキなのです。

詳しくは以下を見てください。
https://github.com/ajaxzip3/ajaxzip3.github.io

実装のサンプルも以下にあります。
https://ajaxzip3.github.io/sample-page/

こちらのサンプルのように、郵便番号欄を以下のように書くことだけで実装できるのです。
<input type="text" name="zip01" onkeyup="AjaxZip3.zip2addr(this,'','pref01','addr01');">

これだけでとても簡単です。
上記の例だと郵便番号欄に郵便番号を入れたら住所に反映されます。
しかし、郵便番号をコピーしておいて、マウスで右クリックで貼り付けた場合、keyupのイベントが発生しないので変換されないのです。これを貼り付けでも動作させるには、単純にイベントを変えればOKです。
<input type="text" name="zip01" onchange="AjaxZip3.zip2addr(this,'','pref01','addr01');">

この場合は、フォーカスが他に移れば変換が行われます。
ただしキーボードで入力したとたん変換されなくてフォーカス移動が必要です。

というわけで、両方のイベントに対応する方法です。
jQueryを利用していることが前提ですが、以下のような感じで両方のイベントに対応できます。

$(function() {
  var addr_handler = function(){
    AjaxZip3.zip2addr('zip01', '', 'pref01', 'addr01');
  };
  $("#zip01").change(addr_handler).keyup(addr_handler);
});

追記：
今は、Yubinbangoというのもあるらしいです。
詳細は、以下で
https://github.com/yubinbango/yubinbango

GreasemonkeyスクリプトをChromeに対応させる

図書館サイトを便利にするGreasemonkeyスクリプトである図書ぶらはFirefoxでしか動かなかったのですが、Chromeでも動くようにしてみました。

今回、Chromeで動かすためにやったことは以下のことです。

(1)jQueryの読み込み方法の変更
chromeで動くGresemonkeyスクリプトでｊQueryを利用するを見てください。

(2)クロスドメインでXMLHttpRequestを利用できるようにする
Access-Control-Allow-Originをどこで出力すればよいのか迷ってみたを見てください。

(3)GM_*のラッパー関数を作成
図書ぶらでは、以下のGreasemonkeyで拡張されている関数を利用しています。
GM_setValue
GM_getValue
GM_xmlhttpRequest
これはchromeでは使えないので、以下のような関数を作成しました。
GM_setValue、GM_getValueは以下のような感じです。

function GM_setValue(key,value) {
 localStorage[ key ] = value;
}

function GM_getValue(key,def) {
 if( localStorage[ key ] == undefined && def != undefined ){
  GM_setValue( key , def );
 }
 return localStorage[ key ] ;
}

ここでの注意は、localStorageは文字列しか保存してくれない気配です。
GM_*のときはBooleanはBooleanで保存できていたのですが、localStorageではBooleanを文字列に変換していました。

GM_xmlhttpRequestの方は、完全互換でなくてGM_xmlhttpRequest風な以下のものを用意しました。

function GM_xmlhttpRequest(url,onload){
 var xhr=new XMLHttpRequest();
 xhr.open("get",url);
 onload&&(xhr.onload=function(){onload(this)});
 xhr.send();
}

そんなに使っていないので完全に置き換えてもよかったのですが、なんとなくこんなのを用意してみました。

とりあえずこんな感じでchromeでも動くGreasemonkeyスクリプト(chromeの場合はユーザスクリプトと言った方よいのかな)図書ぶらとなりました。

Access-Control-Allow-Originをどこで出力すればよいのか迷ってみた

今まで、普通のjavaスクリプトで行える通信はjavaスクリプトを読み込んだサイトに対してだけだと思っていました。

以下の図でいうとAから読み込んだHTMLに書かれているjavaスクリプトでXMLHttpRequestを利用して通信できるのはAだけでBとは通信できないという感じです。

|-----|     |-----|
|  A  |     |  B  |
|-----|     |-----|
   |           |
   |           ×
|--------|     |
|ブラウザ|-----|
|--------|

でも、どうやらXMLHttpRequest level2というのではBとも通信できるようになるらしいです。
それもjavaスクリプトの記述の仕方では特に変わったことをする必要はなくAと通信するXMLHttpRequestと同じような書き方でよいそうです。
Bと通信できるようにするには、httpのヘッダーに
Access-Control-Allow-Origin
が出力されればOKとのことです。

で、ここでこのAccess-Control-Allow-Originヘッダを出力するのは、AなのかBなのかよくわからなくなってみましたが、結論としてはBの方でした。

ちなみにGoogle App EngineでAccess-Control-Allow-Originヘッダを出力するには、以下のような感じです。
self.response.headers['Access-Control-Allow-Origin'] = '*'

*の部分は接続を許容する先を記述するところで、*と書くとどこからでもOKということになります。

すべてのブラウザで対応しているわけではなさそうですが、javaスクリプトでできることが増えそうです。

chromeで動くGresemonkeyスクリプトでｊQueryを利用する

jQueryがステキなのでGreasemonkeyスクリプトでもjQueryを利用しています。

Firefoxだけで動くGreasemonkeyスクリプトでは以下のように書いていました。

(function(d, func) {
    var check = function() {
        if (typeof unsafeWindow.jQuery == 'undefined') return false;
        func(unsafeWindow.jQuery); return true;
    }
    if (check()) return;
    var s = d.createElement('script');
    s.type = 'text/javascript';
    s.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js';
    d.getElementsByTagName('head')[0].appendChild(s);
    (function() {
        if (check()) return;
        setTimeout(arguments.callee, 100);
    })();
})(document, function($) {
    //ここに処理を書く
    alert("There are " + $('a').length + " links on this page.");
});

でもこれではChromeでは動かなかったのです。
理由はよくわかりませんが、
unsafeWindow.jQuery
がずっと
undefined
になっているせいのようです。

Chromeでも動くGreasemonkeyスクリプトでjQueryを利用するには以下のように書くとよい感じです。

function addJQuery(callback) {
  var script = document.createElement("script");
  script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
  script.addEventListener('load', function() {
    var script = document.createElement("script");
    script.textContent = "(" + callback.toString() + ")();";
    document.body.appendChild(script);
  }, false);
  document.body.appendChild(script);
}

function main() {
  //ここに処理を書く
  alert("There are " + $('a').length + " links on this page.");
}

addJQuery(main);

こちらは動きました。もちろんFirefoxでも動きます。
最初のFirefoxでしか動かない版だと、すでにjQueryが読み込まれていればjQueryの読み込み処理を行わないっぽいのでよい感じなのですが、FirefoxでもChromeでも動くというのを重視することにしてみました。

「図書ぶら」というのを作ってみました

図書館サイトの検索結果ページに、その本に関連する本のリストとAmazonへのリンクを追加するGreasemonkeyスクリプト「図書ぶら」というのを作ってみました。

私は、図書館をよく利用しています。
探す本がわかっているときはいいのですが、なんとなく本を探したいというときには、図書館サイトはむかないつくりになっています。
amazonさんの場合は本に関連する本を紹介してくれるので、参考にしちゃっています。
なのでそのamazonさんの関連本を図書館サイトの方にも表示させるようにしたら便利かもしれないと思い作ってみたのが「図書ぶら」です。

図書館で本を使う方は使ってみていただけるとうれしいです。

現在は、東京23区だけの対応になっていますがご要望があれば他の図書館にも対応したいと思っています。

ちなみに関連本を表示するためには、
Amazon Product Advertising API
を使っています。
その関連本が、その図書館に存在するかを調べるために
カーリル | 図書館API仕様書
を使っています。
これらのAPIはGoogleAppEngine上に作成したアプリがProxyして要求をかけています。
以下のような感じです。
図書ぶら-->GoogleAppEngine-->Amazon,カーリル

GreasemonkeyスクリプトでGM_getValueをイベントで使おうとしたら

Greasemonkeyスクリプトを最近、いじってあそんでいます。
GM_getValueというデータを永続化しておくことができるGreasemonkeyの関数があるのですが、
これをクリックイベントの中で使おうとしたら

Error: Greasemonkey access violation: unsafeWindow cannot call GM_getValue.

とエラーが出てしまいました。

イベントの中で普通にこのように書くとダメなのです。

 var value = "bar";
 GM_setValue("foo", value);

でも、以下のように書くとOKになります。

  var value = "bar";
  setTimeout(function() {
    GM_setValue("foo", value);
  }, 0);

setTimeoutでくくればOKなようです。なぜかはよくわかりません。

ちなみに
http://wiki.greasespot.net/0.7.20080121.0%2B_compatibility
に書いてありました。

javascriptで前後の空白を除去する

javascript　空白除去
で検索するといろいろ出てくるのですが、前後の
全角スペース、半角スペース、タブ、改行
すべてを除去してくれるものは見つからなかったので、組み合わせてメモ的に書いておきます。

こんな感じです。

val = unescape(escape(val).replace(/^(%u3000|%20|%09|%0D|%0A)+|(%u3000|%20|%09|%0D|%0A)+$/g, ""));

valが前後の空白を除去したい文字列です。

javascriptで配列内に値が存在するかチェックするにもjQueryが便利

javascriptで配列内にある特定の値が存在するかチェックしようと思ったわけです。

var otomo = ['inu','saru','kiji'];
とあった場合、配列otomoが値'saru'を持つかを確認するような感じです。

rubyなどではindexを使えだけなのですが、javascriptではこのindexに相当するような関数がぱっとみ見つかりませんでした。
でも困ったときのjQueryということでjQueryのほうを調べたら
inArray
があるということがわかりました。
$.inArray("saru", otomo)
みたいな感じで使えます。

詳しくは、以下を見てみてください。
http://f32.aaa.livedoor.jp/~azusa/?t=ajax&p=jquery_utilities_array_object_operations#a_jquery_utilities_inarray

Google Mapplets APIをテストする

Google Mappletsというのは、自分のサイトの中にGoogle Mapの機能を持ってくるのとは逆に自分の作ったものをGoogle Mapに取り込んでもらうものです。
実際に利用するには、Mapplets用のjavaスクリプト入りのXMLを用意して、それをgoogleさんに読み込んでもらうことになります。
Googleさんに読み込んでもらうにはどっかに置いとかないといけないわけですが、動くかどうかわからないものを置くのも心苦しいわけです。
なのでまずはテストが必要なわけですが、そこは流石Googleさんなのでちゃんとスクリプトをテストする環境が用意されているわけです。
http://maps.google.co.jp/gadgets/directory?synd=mpl&hl=ja&backlink=http%3A%2F%2Fmaps.google.co.jp%2Fmaps%2Fmm%3Fie%3DUTF8%26hl%3Dja%26ll%3D35.689517%2C139.785946%26spn%3D0.307284%2C0.55481%26z%3D11&cat=devtools
にある
Mapplet Scratch Pad
というmappletをgoogleマップに追加して
Googleマップのマイマップを開くと
Mapplet Scratch Pad
が利用できるようになって、ここで自分書いたmappletのコードを試すことが出来るようになるわけです。
Mapplet Scratch Padは、
http://code.google.com/intl/ja/apis/maps/documentation/mapplets/guide.html#Important_Developer_Tools
にも重要ですよん。
と書いてあるのでMappletをいじる際には必ず利用した方がよいようです。

Google Map APIの直前の検索結果を変える

Google Map APIで縮尺を変えたり、地図を写真に切り替えたりといろいろなコントローラーが付けられるわけですが、その中で場所を移動する矢印の真ん中に「直前の検索結果に戻る」というのがあります。
これの直前の検索結果とは、
savePosition
を使って保存した場所になります。
以下のような感じでクリックするとマーカーを立ててその位置を記憶させることができます。
これによって、マーカーを立てた後に地図をドラッグしてマーカーが見えなくなってもマーカーの位置に戻れます。

<script type="text/javascript"
src="http://www.google.com/jsapi?key={{gkey}}"></script>
<script type="text/javascript">
 google.load("maps", "2.x",{"other_params":"sensor=false"});
 var map = null;

 function initialize() {
  map = new google.maps.Map2(document.getElementById("map"));
  map.setUIToDefault();
  GEvent.addListener(map, "click", getAddress);
 
  var point;
  point = new GLatLng(35.6585873, 139.7454247)
  map.setCenter(point, 14);
 }

 function getAddress(overlay, point) {
  if (point != null) {
   map.clearOverlays();
   map.setCenter(point);
   var marker = new GMarker(point);
   map.addOverlay(marker);
   map.savePosition();
  }
  }

    google.setOnLoadCallback(initialize);
</script>
<body onunload="GUnload()">
<div id="map" style="width: 600px; height: 480px"></div>
</body>

本当は、現在たっているマーカーの直前に立てたマーカーに戻るようにするために

map.savePosition();
map.setCenter(point);
var marker = new GMarker(point);
map.addOverlay(marker);

マーカーを記述する前にsavePositionを発行してみたのですが、なんかドラッグすると変な位置が記録されているような感じだったのでやめてみました。

GreasemonkeyのAutoPagerizeにサイトを対応させる

Firefoxを使っているとGreasemonkeyという任意のjavaスクリプトを実行させる環境をアドオンできるわけですが、その上でうごくAutoPagerizeというスクリプトがすごく便利なのです。
これは、次のページがある場合、先に読み込んでくれてページの下の方につなげてくれるもので次のページをがんがん画面をスクロールするだけで見ていけるものなのです。
そんな便利なツールにSOBARCOも対応させてみたいと思ってみたわけです。

本来ならば、SITEINFOというものをどっかに準備するみたいなのですが、記法もよくわからないし、どこに準備すればよいのかもいまいちわからなかったのです。

でも、SITEINFOというものがなくても対応させることができるようです。
その方法は、
http://d.hatena.ne.jp/swdyh/20070701/1183239979
が参考になります。

やるべきことは、以下のたったの二つです。
・次のページのリンク先をわかるようにする
・くっつけるブロックを指定する。
くっつけるブロックを指定したら、
最初のページのブロックのすぐ下に
次のページの先読みしたくっつけるブロックがくっつくことになります。

まず次のページのリンクには、rel="next"という属性をつけてやればよいようです。
具体的には、以下のような感じです。
<a href="次のページのリンク先" rel="next">次ページ</a>

くっつけるブロックの指定は、
class="autopagerize_page_element"
とつけてやればよいようです。
具体的には、
<div class="autopagerize_page_element">くっつけるブロック</div>
な感じでよいようです。