2012年4月24日

JavaScriptで文字コード変換ライブラリ作ってみた

文字コード変換ライブラリを JavaScript で作りました。
文字列ではなく配列 or TypedArray で処理します。

追記

↓動作サンプルを作りました
文字コード変換 動作サンプル

Unicode の変換が可能になりました。
文字コード配列から URLエンコード/デコード が可能になりました。
あと説明とサンプルも少し載せました。。(説明不足でごめんなさい)

こないだの 「JavaScriptだけでzipファイルの解凍 - Unzipper.js」が
SJIS ファイルとかだと表示で文字化けするので、ついつい。。

動作確認は、zip ファイル解凍のデモページでわかると思います。
zip の中に SJIS や EUC-JP のファイル (ファイル名) がある場合でも
UTF-8 表示で化けなければ問題なしです。


↑のデモページを開いて、デスクトップなどから zip ファイルをドロップすると
解凍して結果のテキストを表示します。

※ JavaScript だけで動いていて、どっかのサーバなどに送信したり保存したりしてません


今回はぜんぶ同期で書いちゃったのですが、
バイナリファイルとかが対象だとちょっと重たくなりがち。。
気が向いたら非同期も可能にしてみたいです。

あと、Unzipper.js と同じレポジトリにしちゃったけど
これもできれば別にしたいところ。
追記→ 作りました

使い方:
// <script src="encoding.js"></script>
//
// Encoding というオブジェクトがグローバルに定義されます
// 配列に対して変換または判別します

// 文字コード変換
var utf8Array = new Uint8Array(...) or [...] or Array(...);
var sjisArray = Encoding.convert(utf8Array, 'SJIS', 'UTF8');

// 文字コード自動判別で変換
var sjisArray = Encoding.convert(utf8Array, 'SJIS');
// or  
var sjisArray = Encoding.convert(utf8Array, 'SJIS', 'AUTO');


// 文字コード判別 (戻り値は下の「共通の文字コード値」のいずれか)
var encoding = Encoding.detect(utf8Array);
if (encoding === 'UTF8') {
    alert('UTF8です');
}

// 特定の文字コードかどうか判別
var isSJIS = Encoding.detect(sjisArray, 'SJIS');
if (isSJIS) {
    alert('SJISです');
}

// convert, detect 共通の文字コード値:
//  - 'UTF32'   (detect only)
//  - 'UTF16'   (detect only)
//  - 'BINARY'  (detect only)
//  - 'ASCII'   (detect only)
//  - 'JIS'
//  - 'UTF8'
//  - 'EUCJP'
//  - 'SJIS'
//  - 'UNICODE' (JavaScript Unicode String/Array)
//
// ※ (detect only) は Encoding.detect() でのみ有効 (変換はできない)
// ※ 'UNICODE' は JavaScript の Unicode コード値 (0xFF 以上の数値になりえる)
//

サンプル:
// EUCJPの文字コード配列 (中身は 'こんにちは、ほげ☆ぴよ')
var eucjpArray = [
    164, 179, 164, 243, 164, 203, 164, 193, 164, 207, 161,
    162, 164, 219, 164, 178, 161, 249, 164, 212, 164, 232
];
// UTF-8に変換
var utf8Array = Encoding.convert(eucjpArray, 'UTF8', 'EUCJP');
console.log( utf8Array );
// output: [
//   227, 129, 147, 227, 130, 147, 227, 129, 171,
//   227, 129, 161, 227, 129, 175, 227, 128, 129,
//   227, 129, 187, 227, 129, 146, 226, 152, 134,
//   227, 129, 180, 227, 130, 136
// ]
//   => 'こんにちは、ほげ☆ぴよ'

// ---------------------------------------------
// 文字コード自動判別で変換
//

// SJISの文字コード配列 (中身は 'こんにちは、ほげ☆ぴよ')
var sjisArray = [
    130, 177, 130, 241, 130, 201, 130, 191, 130, 205, 129,
     65, 130, 217, 130, 176, 129, 153, 130, 210, 130, 230
];
// Unicodeに変換
var unicodeArray = Encoding.convert(sjisArray, 'UNICODE', 'AUTO');
// 文字列にして表示
// codeToStringは、文字コード配列を文字列に変換(連結)して返す関数
console.log( Encoding.codeToString(unicodeArray) );
//
// output: 'こんにちは、ほげ☆ぴよ'
//

// ---------------------------------------------
// 文字コードの配列をURLエンコード/デコード
var sjisArray = [
  130, 177, 130, 241, 130, 201, 130, 191, 130, 205, 129,
   65, 130, 217, 130, 176, 129, 153, 130, 210, 130, 230
];
var encoded = Encoding.urlEncode(sjisArray);
console.log(encoded);
// output:
//   '%82%B1%82%F1%82%C9%82%BF%82%CD%81A%82%D9%82%B0%81%99%82%D2%82%E6'

var decoded = Encoding.urlDecode(encoded);
console.log(decoded);
// output: [
//   130, 177, 130, 241, 130, 201, 130, 191, 130, 205, 129,
//    65, 130, 217, 130, 176, 129, 153, 130, 210, 130, 230
// ]

ダウンロード



レポジトリ



その他、なにか問題等あれば
コメントやメールまたは @polygon_planet まで送っていただけるとうれしいです。



デザインに便利な解像度マップ付き壁紙画像合成ツール作った

壁紙とか任意の画像に解像度別のマップを入れて合成できるツールを作ってみました。

HTML とか CSS とかデザインいじってて解像度ごとに確認したい時とか
窓の大きさを一定にしたい時とかに便利です。


↑のページを開いて、デスクトップなどから 画像ファイルをドロップすると
その画像に 1024x768 とか解像度ごとのマップつきで合成してダウンロードできます。

※ソース確認でわかりますが JavaScript で動いていてアプリはユーザー操作とか記録してません

あと、canvas とか HTML5 API, DropEvent などが動かないブラウザでは使えません。
Firefox, GoogleChrome で動作確認済みです。


遊んでみてくれるとうれしいです。



その他、なにか問題等あれば
コメントやメールまたは @polygon_planet までお願いします。



2012年4月22日

JavaScriptライブラリ Pot.js 関連リンクまとめ

Pot.js 関連のリンクまとめ

JavaScript ライブラリ Pot.js に関する記事やサンプルの紹介です。
Pot.js は CPU に負荷をかけることなく JavaScript の実行を可能とするユーティリティライブラリです。
MOONGIFT さんの記事 で紹介されたのもあって、せっかくなのでまとめてみました。



Pot.js / PotLite.js

Pot.js は CPU に負荷をかけることなく JavaScript の実行を可能とするユーティリティライブラリです。
PotLite.js は Pot.js の非同期な部分だけを抽出したライトバージョンです。

ダウンロード

マニュアル

その他の情報についてはマニュアル/マニュアルからのリンク から参照ください。

レポジトリ




その他、なにか問題・バグ・感想・指摘などあれば、
コメントやメールまたは @polygon_planet まで送っていただけるとうれしいです。



2012年4月17日

JavaScriptだけでzipファイルの解凍 - Unzipper.js

とつぜん書いてみました。


デモページを開いて、デスクトップなどから zip ファイルをドロップすると
再帰的に解凍して結果のテキストを表示します。

非同期 + Pot.js イテレータ を使って実装したくて作ってみました。
zlib inflate を非同期化しています。
数GB の zip も、CPU 負荷を抑えつつ「応答のないスクリプト」警告なしに解凍できましたが
ブラウザによって、ファイルドロップの時点である程度サイズがあると無効になるようです。

レポジトリ



その他、なにか問題等あれば
コメントやメールまたは @polygon_planet まで送っていただけるとうれしいです。



2012年4月15日

JavaScriptライブラリPot.js 1.18 リリース。strict modeになりました




Pot.js 1.18 と PotLite.js 1.35 リリースしました。





変更点など

  • 'use strict'つけてライブラリ全体が strict mode になりました
  • DropFile が Firefox で不具合出てたので修正
  • minify したときの最適化

などで、とくに機能の変更はありません。
ねんがんの strict mode にできたので、'use strict' 内で取り込まれても問題なく動きます。
全体を strict mode にするためにソースコードの表現はけっこう変わってますが
動作はむしろ速くなって、サイズがちょっとだけ減りました。


リファレンスのほうは、定義してある関数をとりあえず全部メニューに載せるようにしました。
でもメニューだけで中身の html が無いので、はやいとこ作りたいなと思ってます。




Pot.js / PotLite.js

Pot.js は CPU に負荷をかけることなく JavaScript の実行を可能とするユーティリティライブラリです。
PotLite.js は Pot.js の非同期な部分だけを抽出したライトバージョンです。

ダウンロード

マニュアル

その他の情報についてはマニュアル/マニュアルからのリンク から参照ください。

レポジトリ




その他、なにか問題・バグ・感想・指摘などあれば、
コメントやメールまたは @polygon_planet まで送っていただけるとうれしいです。



2012年4月12日

Tumblrにポストすると動かなくなるgifアニメを減色して動かすTomblooパッチ

Firefox アドオン Tombloo のパッチです。

機能概要

Tumblr に gif アニメをポストすると、ちょっとサイズがあるだけで動かなくなってしまいます。
それを減色とかして動くようにするパッチ。

gif 画像からメニュー出すと、「Photo - Upload from Cache」 の下にでます。


cxx さんの API を使用しています、感謝

API の都合上、レスポンスが遅かったり 500 が返ってくることがあります。
そういうときはのんびりやるといいです


パッチはアップデートする可能性があるので、
パッチ一括アップデートぱっち で確認すると便利かと思います。

パッチ (Download or Update):

インストール/アップデート:

上のパッチリンクを
右クリック→「Tombloo」→「Tomblooパッチのインストール」でインストール/アップデート。


※直接右クリックからインストールできない場合:

できない場合は
「Tomblooパッチのインストールに失敗しなくなるパッチ」 のパッチ/記事をインストールもしくは参照ください。

レポジトリ



2012年4月11日

JavaScriptライブラリ Pot.js のチートシートと壁紙用ジェネレータ作りました




Pot.js チートシートとジェネレータ ができました。



Cheat Sheet

現時点では、PotLite.js のぶんです。
他のライブラリのチートシートを参考にしながら作ってたのですが、
Pot.js のほうはまだリファレンスも全部書けてないので
重要な非同期系の関数/メソッド/プロパティに絞ってたら PotLite.js と同じになりました。
はじめからそうしてればよかった。。


Cheat Sheet Generator

自分で関数の存在を忘れてしまうことがあって
それもどうかと思うので、忘れないように壁紙にできたらなぁて思って
せっかくだからいつも使ってる壁紙とか好きな画像とアルファ合成できたらいいなって
ジェネレータ作ってみました。
canvas で DataURI にして合成してるだけですが…。(なので Firefox, GoogleChrome, Safari? 限定)

上のリンクからジェネレータのページに行って、
デスクトップとかからブラウザに画像ドロップして合成・生成できます。
※ソースでも確認できますが画像とかをどっかに送信したり保存したりしてません

通常のチートシートは Basic Cheat Sheet のをダウンロードして利用できます。

ジェネレータはこんな感じで背景と合成できます。



以下、Pot.js についてのリンクとか。

Pot.js / PotLite.js

Pot.js は CPU に負荷をかけることなく JavaScript の実行を可能とするユーティリティライブラリです。
PotLite.js は Pot.js の非同期な部分だけを抽出したライトバージョンです。

ダウンロード

マニュアル

その他の情報についてはマニュアル/リンク から参照ください。

レポジトリ




その他、なにか問題・バグ・感想・指摘などあれば、
コメントやメールまたは @polygon_planet まで送っていただけるとうれしいです。



2012年4月5日

並列処理のWorkerぽいWorkeroid実装。JavaScriptライブラリPot.js 1.17 リリース




Pot.js 1.17 と PotLite.js 1.34 リリースしました。





Web Workers

バックグラウンド処理、並列処理ができる HTML5 API の Web Workers は、
主要なブラウザですでに実装されています。

var worker = new Worker('child.js');
worker.onmessage = function(event) {
    alert(event.data); // 'hogefuga' がアラートされる
};
worker.postMessage('hoge');
child.js
onmessage = function(event) {
    postMessage(event.data + 'fuga');
};
上のような感じで使うのですが、基本的に 'child.js' のようにファイル名を渡さないといけないんです。
なので JavaScript が 2 ファイルになります。

並列で 4 スレッドとか 6 スレッドとかしてたら どんどん増えてファイルの管理がめんどいです。

あと、ブラウザによって動作 (子Worker のスコープ) が若干異なっていて
せっかく並列処理がネイティブにできるのに、なかなか扱いにくいものになってしまってます。

そこで、ネイティブ Worker が利用できたら ネイティブで
なければ Worker エミュレータとして、
クロスブラウザに動作する Workeroid (Pot.Workeroid) を実装しました。

Pot.Workeroid

  • 基本的にネイティブ Worker と同じに並列処理ができる
  • ネイティブ Worker がなければエミュレートする
  • クロスブラウザ
  • 子 Worker スレッドで importScripts しなくても Pot.js が使える
  • エミュレート時でも terminate で中断/終了できる
  • ファイル名だけじゃなく関数オブジェクトを子 Workerとして渡せる

ネイティブの Worker は
子Worker プロセス内では 親 window のライブラリなどが使えません。
importScripts('hoge.js') で読み込まないと使えないのですが、
Pot.Workeroid はデフォルトで Pot.js が利用できます。
なので、Pot.Deferred.forEach などを利用して CPU 負荷を抑えた処理が可能です。

最大の特徴として、
コンストラクタに ファイル名のほか、関数を渡すことが可能なことです。

以下は function で Worker スレッドを生成する例です。

var worker = new Pot.Workeroid(function(data) {
    //                                          
    // このスコープの中が 子Worker スレッド     
    //                                          
    var add = 1;                                
    postMessage(data + add);                    
});

// メッセージを受信した時
worker.onmessage = function(data) {
    alert(data);
};

// エラー時の設定 (任意)
worker.onerror = function(err) {
    alert(err);
};

// 1 を 子 Worker に送信 => 2 が alert される
worker.postMessage(1);

をつけたスコープ内が 子 Worker として別スレッドになります。
子 Worker 空間内は、別ファイルに書いてる気持ちでコーディングするとわかりやすいかもです。
たくさんのスレッド作る場合でも、少しの短いコードでも 別ファイルにしなくて済みます。

これで楽に並列処理ができるとうれしい!


Pot.Workeroid の例を含む詳細は Pot.Workeroid リファレンス から参照できます。

あと、簡単な動作テストを jsFiddle に置いてあります。

更新したところ


Pot.js / PotLite.js

Pot.js は CPU に負荷をかけることなく JavaScript の実行を可能とするユーティリティライブラリです。

PotLite.js は Pot.js の非同期な部分だけを抽出したライトバージョンです。

ダウンロード

マニュアル

その他の情報についてはマニュアル/マニュアルからのリンク から参照ください。

レポジトリ




その他、なにか問題・バグ・感想・指摘などあれば、
コメントやメールまたは @polygon_planet まで送っていただけるとうれしいです。



2012年4月3日

ブログを移動しました

ブログの URL が変わりました。

http://polygon-planet-log.blogspot.com/
になりました。

blogspot.com は、blogspot.jp に飛ばされると思います。
canonical 設定するとか、 /ncr にリダイレクトして .com に戻すことも可能ですが
変化しようとしているものを無理にとどめるのもアレなので何もしてません。

ブログの URL が変わったのは Google に BAN されてしまったからです。
何度ログインしなおしても

「アカウントが無効になっています」

Gmail, リーダー、Google+、Blogger、GoogleBookmarks、Picasa、
Docs、カレンダー、サイト、ほかいろいろ、全部消えました。
全部です。
アカウントがオワタので全サービスです。もちろんログインもできません。


エイプリルフールだったので、あらあらまあまあwww とか思ってたんですが

えっ、日付変わってるのに戻らないよ?どういうことなの?……えっ?



えっ?



頭ましろ色シンフォニーになって

よくわかんないですが PC 再起動とかしてみてルーターもついでに再起動して
そのまま勢いで OS 再インストールとかしそうになって
当然のごとく何も変わらなくて、

そういえば最近 picasa に画像ポストのテストしてたなあ・・
Tumblr からひっぱって。
それ入れっぱなしだったなぁと思うフシがあって

つまり立派なポリシー違反でした。ごめんなさい。
と言っても遅すぎて完全に手遅れだったので

そのころ GoogleMaps では、ぼうけんがはじまってましたが
こちらもはじまりました。
そうです、今からが始まりなのです。

せっかくだからリーダーもフォルダ分けして整理できるし
1 からつける Gmail ラベル付け
楽しいなっ!アハハッ!
真っ白のカレンダーに未来の予定を記入したりしてアハハ!

無理。

もうヤダから Gmail は Thunderbird から復旧
同期するようにしてバックアップ状態を保つようにして
リーダーはエクスポートした OPML があったので復旧
Bookmarks はインポートという機能が見つからないぞ!
Google+ は 1 からサークル作ってどんどん追加
またサークルに追加とか迷惑かけてごめんなさい
他のサービスもどうのこうの
Blogger はバックアップしてなくて、ブログが消えたのはつらい・・・
と思ってたら数時間後に閲覧だけできるようになってたので
あっでも、アカウントの有効期間って 6~9ヶ月くらいだったような・・
Google アカウントの有効期間を調べたけど今のポリシーには書いてないっぽい
それでもいつ消えるかわからないから、ブックマークしてくれた方々のためにも
せめてアーカイブとして残そうと思って
でもログインできないから、バッチ書いて記事抽出してインポートの XML 形式に合わせて
あれれ、いくつか記事壊れたけどいいや状態でインポートして
デザインは外側から見た HTML からだいたい復元
これはべつに違うデザインにしてもよかったなと今書いてて思った
でも画像が Picasa だから全部ダメになってて仕方なく手作業で戻した

このような感じで季節はすっかり春になりました

今後はこのブログでとりあえず書くけど、
その前に メールアドレスが変わったから、ソースコード内の表記とか
登録してるサービスの情報変更をしなければ・・・

ブログは Tumblr にしようか Octpress と GitHub Pages にしようか考え中
Tombloo 関連が多いから、どっちかというと Tumblr かなぁ

なんか思いつくまま書いてしまったけど、そういう状態でした
クラウドというか Web サービスとどう付き合うべきか学べたし
それでも Google は寛大だと思った

そろそろコード書かないと死にそう