2008年06月18日 16:00 [Edit]

javascript - Yet Another Base64 transcoder

すでにJavaScriptによるBase64 Encodingの実装は複数あるのですが、これまた気に入った車輪がなかったので再発明。


Demo

Textにはencodeすべき文字列を、Base64にはdecodeすべき文字列を入力

TextBase64 (URL Safe )
Roundtripiframe w/ data:

Discussion

まず車輪の再発明に至った理由ですが、

  1. Firefox 2以降とSafari 3.1以降には、window.atobならびにwindow.btoaが実装されているので、使える時にはこれを使いたかった。
  2. ただし、これらはそのまま使えない。引数に/[^\x00-\xFF]/な文字が入っているとUncaught Exceptionになる。これはFirefox 3を含む、window.(atob|btoa)を持つ全てのブラウザーがそう。
  3. 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:

Demo Source



Source

base64.js

この記事へのトラックバックURL

この記事へのトラックバック
これ、昨今では最もよく再発明されている車輪の一つかも。 検索サイトなどのURL中に含まれる「%+16進」の形にエンコードされた日本語文字列(例えばI%E3%82%B7%E3%83%A1%E3%82%B8I)を、LinuxのCUI上でデコードする簡単な方法は.. - 人力検索はてな 最古の文字コー...
tips - "%E5%BC%BE" を「弾」にするには?【404 Blog Not Found】at 2009年05月01日 16:57
これでもまだ税率が高かったので。 404 Blog Not Found:javascript - Yet Another Base64 transcoder Base64の利点は、なんといっても「固定税率」、それも比較的「税率が低い」ことにあります。Paddingなしなら、3バイトが4バイトにencodeされるので、33%ということになり...
javascript - でデータを圧縮/伸張する【404 Blog Not Found】at 2009年03月02日 09:21
この記事へのコメント
>alert("[" + Base64.decode(Base64.encode('{}')) + "]");
>ieでは、このコードで後ろの ] が表示されません。
最新バージョンでは直ってます。遅まきながら報告。
Dan the Maintainer Thereof
Posted by dankogai at 2012年08月24日 05:52
alert("[" + Base64.decode(Base64.encode('{}')) + "]");
ieでは、このコードで後ろの ] が表示されません。
おそらく、この影響でJSON.parseで失敗してしまいます。
Posted by https://me.yahoo.co.jp/a/yxTXnmJcM.EUPgQ.gmiSHLG0V6Bd9m9sFkulM.s-#71072 at 2011年10月25日 17:54
試したのですが、データが大きくても出力が1行のために、不正です。
私には添削は難しいのですが、ルーチンの中で処理してくれると助かります。

Posted by anonymous at 2008年12月30日 22:08
nanasiさん、
いいえ、私のせいですorz.
早速直しておきました。
Dan the Typo Generator
# なんかreplaceしたときに一緒にひっかけたのかしらん?
Posted by at 2008年06月18日 17:07
b64charsにX及びxが無いのは気のせい?
Posted by nanasi at 2008年06月18日 16:34