すでにJavaScriptによるBase64 Encodingの実装は複数あるのですが、これまた気に入った車輪がなかったので再発明。
Demo
Textにはencodeすべき文字列を、Base64にはdecodeすべき文字列を入力
Text | Base64 (URL Safe ) |
---|---|
Roundtrip | iframe w/ data: |
Discussion
まず車輪の再発明に至った理由ですが、
- Firefox 2以降とSafari 3.1以降には、window.atobならびにwindow.btoaが実装されているので、使える時にはこれを使いたかった。
- ただし、これらはそのまま使えない。引数に
/[^\x00-\xFF]/
な文字が入っているとUncaught Exceptionになる。これはFirefox 3を含む、window.(atob|btoa)を持つ全てのブラウザーがそう。 - URI SafeなBase64もサポートしたかった。
ということになります。
Base64の利点は、なんといっても「固定税率」、それも比較的「税率が低い」ことにあります。Paddingなしなら、3バイトが4バイトにencodeされるので、33%ということになります。これに対してencodeURIComponent
の税率は、UTF-8基準で最高で3倍、UTF-16基準で最高で4.5倍にも達します。ただでさえ多くの情報を詰め込めないURI渡しにおいて、%AF
なencodingはあまりにももったいない。特にjsonpを使ったAjaxではGET
メソッドしか使えないのでこの問題は深刻です。URL Safe な Base64 は、長めのデータをURI渡しするのにまさにうってつけです。
しかし、肝心のクライアントの方がそれに対応していなければ話になりません。それで車輪の再発明というわけです。
APIs
- Base64.encode(str)
- strをBase64 encodeします。strに/[^\x00-\xFF]/な文字はutf8化します。
- Base64.encodeURI(str)
- strをURL Safe な Base64 encodeします。
- Base64.decode(base64)
- base64をJavaScript文字列にdecodeします。URL Safe な Base64 もdecodeできるので、Base64.deocdeURI()は今のところありません。
通常これで充分ですが、Base64には他にも以下のメソッドが搭載されています。
- Base64.atob(a)
- Base64.btoa(b)
- window.(atob|btoa)互換のメソッド。
/[^\x00-\xFF]/
な文字を受け付けないところも同じです。 - strをBase64 encodeします。strに/[^\x00-\xFF]/な文字はutf8化します。
- strをURL Safe な Base64 encodeします。
- Base64.utob(str)
- strをutf8表現にします。例えば'弾'は'\xE5\xBC\xBE'になります。
- Base64.btou(bin)
- binをJavaScript文字列にします。'\xE5\xBC\xBE'は'弾'になります。
さいごに
例によってCodeReposにあげておきました。ご自由にお使いになるだけではなく、添削していただけると幸いです。
Enjoy!
Base64.decode('RGFuIHRoZSBKYXZhU2NyaXB0ZXI=')
See Also:
- 404 Blog Not Found:perl - Convert::BaseN released!
- 404 Blog Not Found:perl+javascript - IEでdata:スキームを有効に!
- [PC] アマゾンやウィキペディアのURLはなぜあんなに長いの? | LxR | R25.jp
>ieでは、このコードで後ろの ] が表示されません。
最新バージョンでは直ってます。遅まきながら報告。
Dan the Maintainer Thereof