JavaScriptで文字列を圧縮する

jsで文字列を圧縮する方法を探していたらこんなページを見つけました。
javascript - でデータを圧縮/伸張する

これを使えば良いやと思っていたら、あるデータパターンで上手く復元できないことがありました。

とりあえず
JavaScript文字列(UTF-16)をUTF8化

RawDeflate.deflate()

base64エンコード

とすれば圧縮できて、逆をすれば復号ができるようなので難しいことは考えず確実に簡単に動くものを作りました。

高度なJavaScript技集にあるdeflate.js(圧縮用)とinflate.js(復号用)をHTML内で読み込んで下記のような関数を定義。

// 圧縮関数 (要deflate.js)
function deflate(val) {
    val = encodeURIComponent(val); // UTF16 → UTF8
    val = RawDeflate.deflate(val); // 圧縮
    val = btoa(val); // base64エンコード
    return val;
}

// 復号関数 (要inflate.js)
function inflate(val) {
    val = atob(val); // base64デコード
    val = RawDeflate.inflate(val); // 復号
    val = decodeURIComponent(val); // UTF8 → UTF16
    return val;
}

サンプル

 

元の文字列 

圧縮された文字列 

復号された文字列

同じパターンが連続していると圧縮率が高くなる感じです。

モダンブラウザなら申し分ない速度で動くし、膨大な文字列ならweb workerで走らせることもできるので十分実用的かも。

MoziMovieアスキーアート圧縮配信でも利用してます。

【コーデュート!】OCamlに対応しました。

伝えたいことがタイトルで完結してますが、OCamlに対応しました。
Hello, World!とクイックソートを追加してあります。

文法的に省略可能な空白文字云々は全く調整してないので、もし「省いたらダメな空白が飛ばして打てる」や、その逆があったら報告していただけると助かります…('_')

f:id:setchi_q:20131026171859p:plain

対応言語数が45になりました。
コーデュート!{β} | https://codeute.com/

CSS3のcubic-bezierの書き方でjQueryのeasingを生成する

CSS3のアニメーションでtiming-functionを指定する際にcubic-bezier関数が使えますが、
同じ書き方でjQueryのeasingを生成できるプラグインがあります。

https://github.com/rdallasgray/bez

CSSで書くこのようなアニメーションを、

#sample {
    left: -100px;
    transition-property: left;
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0.02, -0.55, 0, 0.11);
}

直感的にjQueryのアニメーションに置き換えられます。

$("#sample").animate({
    left: '-100px'
}, 500, $.bez([0.02, -0.55, 0, 0.11]));


ちなみに[0.02, -0.55, 0, 0.11]は、コーデュートのコンボカウントのエフェクトで使用している値です。

元々コンボのエフェクトはCSSアニメーションで実装していたんですが、環境によってはキーを押したときの反応が鈍くなったため、JavaScriptでの実装に変更しました。

ただ、最近のブラウザは超スピードで進化し続けているので、高速化を図るときは俗説にとらわれず最新ブラウザの挙動を常に観測していく必要があるなーと感じました。

【コーデュート!】コード一覧でランキングの順位を表示

ユーザーからの要望により、コード一覧の中でランキング登録済みのものに、本人の順位を表示する機能を追加しました。
確かにこれは便利や!

f:id:setchi_q:20131012231237p:plain
一人で作っていると隅々まで気配りが行き届かないことが多いので、実際に使った人からの声はかなり参考になります。

不具合報告・ご要望はサイトのメニューから気軽に送信できるようになっているので、もし不具合を見つけたり、あったら便利そうな機能を思いついた方はぜひお聞かせください。

お陰様で、徐々にタイピングサイトとしてサマになってきた気がします\(^_^)/
コーデュート! | https://codeute.com/

【コーデュート!】レーティングの計算式

現在レーティングは下記の式で求めています。

本人の平均スコア × SQRT(ポイントの合計)

ポイントとは、各ランキングの順位を反転させたものです。
10人参加しているランキングで、2位の人のポイントは「9」になります。

コーデュート! | https://codeute.com/

【コーデュート!】2013/10/10の変更点

【変更点】
  • ゲームスタートのトリガを「スペースキー」から「コードの最初の文字」に変更しました。スピードやミス率の計測はコードの2文字目からになります。
【新機能】
  • 結果画面でツイートボタンを押すと、結果をツイートできるようにしました。

※いいね!ボタンやツイートボタンを押した後はキー入力が無効になっているので、リトライ時は一度画面をクリックしてください。


そろそろレーティングの算出法も見直したいと思います!
コーデュート! | https://codeute.com

【コーデュート!】2013/10/09の変更点

前回の記事からの変更点です。
【修正】

  • 結果画面でランキング登録ボタンが押せなくなるバグを修正しました。
  • 非公開コードの記録が総合ランキングに反映されていた不具合を修正しました。

【新機能】

  • C言語に対応しました。HelloWorldも追加 https://codeute.com/c/0
  • 検索結果のソート項目に「ランク登録数」を追加しました。
  • キーボードの表示/非表示の情報をアカウントに紐づけて自動保存します。(ログイン時のみ有効・Ctrl+Sで切替えます)
  • ランキング登録時に、レーティングの変動が分かるようにしました。

f:id:setchi_q:20131009184820p:plain

暇潰しにレーティング稼ぎましょう!コードも募集中です('_')
コーデュート! | https://codeute.com

【コーデュート!】総合ランキングを実装しました

全ランキングと言語別ランキングを集計した総合ランキングを実装しました!

今のところ、コード毎の

  • 本人の順位
  • 本人のスコア
  • ランキング参加人数

の3つの値をもとに総合スコアを集計しています。

総合スコアは、多くのランキングに登録してコツコツと増やすこともできますし、人気の高いランキングで上位を獲得することで劇的に稼ぐこともできます。


まだβ版なので、様子を見ながらスコアバランスを調整していく予定です。
ちなみに、ランキングは項目名をクリックするとその項目でソートすることができます。

ぜひ、総合ランキングで上位を目指してみてください!
コーデュート! | https://codeute.com/

近いうちに、タイピング結果をツイートできる機能を追加予定です。

【コーデュート!】ESCキーでのリトライ機能を実装しました

以前から要望にあがっていたESCキーでのリトライ機能をちゃんと実装しました。
ESCを押すと、リロードせずにプレイ前の状態に戻ります!

実装に時間がかかってたのは、自分が2ヶ月前に書いたコードを読み解けなかったからです(汗
暇つぶしに遊んでみて下さい!
コーデュート! | https://codeute.com