読者です 読者をやめる 読者になる 読者になる

setchi’s blog

コードに埋もれてます。

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/