HTML5で動くアスキーアートな動画プレーヤーを作った

http://setchi.jp/moziplayer/

ドラッグ&ドロップされた動画ファイルや、インカメラの映像をテキストアートで再生するwebアプリを作って遊んでました。

f:id:setchi_q:20140722015954p:plain
f:id:setchi_q:20140722020036p:plain

UIとか色々手抜きですが一応動きます。一番右のつまみで解像度を調節できます。
Chrome/Firefoxで動作確認済み
http://setchi.jp/moziplayer/

【JavaScript】他の画面を見ていることを検知する

チャットアプリで、ユーザーが他の画面を見ている(と思われる)ときにチャットが来た場合に通知をしたかった時のメモです。

それらしい資料が見当たらなかったので、ページが描画されていないときのrequestAnimationFrameとsetTimeoutの挙動の違いを利用して強引にやってます。

function executeIfNotViewing(callback) {
    var rendered= false;
    requestAnimationFrame(function () {
        rendered = true;
    });
    setTimeout(function () {
        if (!rendered) callback();
    }, 1000);
}

executeIfNotViewing(function () {
    alert('他の画面見てたでしょ');
});


ということで、
Ko-cha | http://setchi.jp/ko-cha/ 対応しているブラウザ少ないですがデスクトップ通知機能追加しました。
f:id:setchi_q:20140707232351p:plain

プログラミング言語の拡張子一覧

拡張子からプログラミング言語を判定する場面があったのでメモ。
表記ミスや漏れがあったら指摘していただけると幸いです。

言語 拡張子
ABAP .abp
ActionScript .as
C .c
C++ .cpp
COBOL .cobol
CoffeeScript .coffee
C# .cs
CSS .css
Clojure .clj
D .d
Dart .dart
Erlang .erl
Forth .forth
Go .go
Groovy .groovy
Haskell .hs
Haskell .lhs
Haxe .hx
HTML .html
HTML .htm
XHTML .xhtml
Java .java
JavaScript .js
jsx .jsx
Lisp .lisp
LSL .lsl
Lua .lua
MATLAB .mat
SQL .sql
Objective-C .m
OCaml .ml
Pascal .pas
Perl .pl
PHP .php
Prolog .pro
Prolog .swi
Python .py
R .r
Ruby .rb
Rust .rs
Scala .scala
Scheme .scm
ShellScript .sh
TypeScript .ts
VBScript .vbs
Verilog .v
assembly_x86 .asm
XML .xml
XQuery .xquery

厳密には「プログラミング言語」とは呼べないものも含まれてます。

MoziMovieアップデート

大したアプリじゃないですが、とりあえずβ版卒業させました('_')

以下β版からの変更点です

  • 大幅に軽量化して、以前よりヌルヌル動きます。
  • ブラウザのサイズに合わせてプレーヤーのサイズが最適化されます。
  • リピート再生機能を追加しました。
  • Firefoxに対応しました(でもChrome推奨…)
  • サイト全体を可変レイアウトにしました。


リクエスト動画が溜まってきたのでそちらも少しずつ消化していきます。

MoziMovie | http://setchi.jp/mozimovie/

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アスキーアート圧縮配信でも利用してます。

AA動画をブラウザで再生できる【MoziMovie】作りました。

暇つぶしに、ブラウザ上でアスキーアート動画を再生できる【MoziMovie】というサイトを作りました。
ブラウザはGoogleChromeのみ対応、スマホ未対応です。

MoziMovie | http://setchi.jp/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/