WebWorker で画像のデコードがしてみたかったので,C言語のライブラリ (stb_image.c) を Emscripten で移植して Pure JavaScript な画像デコードライブラリを生成してみた
誰も得しそうに無いエントリをこりずに書く (デモ,Github)
画像のバイナリデータ (ArrayBuffer とか Blob) をデコードして画像のピクセルデータというか, ImageData みたいな情報を取り出したかったので ,
- ArrayBuffer から Blob を作り,
- window.URL.createObjectURL で Blob URL を作り,
- img 要素の src に Blob URL を代入し,
- img 要素の onload イベント内で,canvas に drawImage メソッドを使って img 要素を描画し,
- canvas の getImageData を呼ぶ,
という作業をしていた.コードと実行例は以下.
期待通りの動作をしてくれてるのだけど,まわりくどいなーとか,俺は画像を表示したいんじゃなくてピクセルデータが欲しいだけなんだよなー *1とか,WebWorker で作業できないかなーとか,色々とどうでもいいことを思ったので Emscripten 先生の力を使って解決してみた.
変換したライブラリは stb_image.c.1ファイル (4600行強) なのに,色々なフォーマット (JPEG/PNG/TGA/BMP/PSD/GIF/HDR/PIC) に対応していて素敵.ただ Emscripten で生成されたコードの宿命というか,変換後のサイズは最適化+minify*2しても 293KB となった.
デモはこちら.表示している時間は,Blob URL から画像のRGBAデータを取得するのに要した時間 (ミリ秒).Firefox で試すと異様に早いなーと思ったら asm.js のおかげだったらしい."use asm" を消すと1ケタ遅くなった.Emscripten と asm.js のコンボはんぱねぇ…….
AngularJS の $watch, $digest, $apply について書く
「僕らはみんな河合荘」 のアニメ化決定に小躍りしている seikichi です.
律ちゃんかわすぎ…….
前置きはさておき,AngularJS の話をします. AngularJS はブラウザ上で動作するWebアプリケーションを作成するための JavaScript フレームワークです.Backbone.js,Ember.js,Knockout.js などに代表される,最近流行り(?)のMV*フレームワークの1つと言えば良いのでしょうか.
AngularJSの公式サイト に掲載されているサンプルを見てみます.
テキストボックスの内容を変更すると,<h1>
要素の中身にリアルタイムに反映されます.
すごい.JavaScript をまだ1行も書いてないのに,何か作った気分になってしまいました (おいおい).
AngularJS は ビューでの変更をモデルに,モデルでの変更をビューに自動的に反映する機能を備えています.この機能を双方向データバインディング (Two Way Data-Binding) と呼びます.なんて便利なフレームワークなのでしょうか.一度使うと Backbone.js などの双方向データバインディング無しのフレームワーク(or ライブラリ) には戻れそうにありません*1 (ほんまか).
ただ,使っていると「このフレームワークは裏で一体何をやっているのだろうか」という,もやもやした疑問が生まれてきます.適当にググると $watch や $diget や $apply だのよくわからないキーワードが出てきて混乱するばかり.そんなこんなで,AngularJS の内部の仕組みをちょっと調べてみました,というのがこの記事です.
この記事では以下の内容について解説します.なお AngularJS の基本的な概念 ($scope,コントローラ,DI など) については解説しません.
- Scope.$watch メソッドを使ってモデルの変更を監視する
- Scope.$apply メソッドを使ってモデルの変更をビュー (DOM) に適用する
- ngBind と ngModel もどきを実装する (書きかけ)
*1:Backbone.stickit やEpoxy.js などのライブラリを利用すれば Backbone.js でも双方向データバインディングを実現できます
GNA UnRAR を Emscripten で JavaScript に変換して,RAR形式のアーカイブをWebブラウザ上で展開する
誰得 Emscripten ネタ2発目 (Github, デモ). 変換してデモつくったあたりで飽きた.new Unrar に ArrayBuffer を渡して,getEntries とか decompress とかで遊んで,close で後片付けすればそれっぽく動く気がする.
LibTIFF を Emscripten で JavaScript に変換して,TIFF形式の画像をWebブラウザで表示する
概要
Emscripten おもしろいなー,ということで LibTIFF を JS に変換して TIFF 形式の画像をブラウザで表示させてみた (Github, デモ1, デモ2 (WebWorker から読み込み), デモ3 (マルチページなTIFFを表示)).
Usage
var xhr = new XMLHttpRequest(); xhr.responseType = 'arraybuffer'; xhr.open('GET', "url/of/a/tiff/image/file.tiff"); xhr.onload = function (e) { var tiff = new Tiff({buffer: xhr.response}); var canvas = tiff.toCanvas(); document.body.append(canvas); }; xhr.send();
てな感じで書けば多分使える. Web Worker で利用する場合は,ワーカのスクリプト内から canvas が作れないので,Tiff.readRGBAImage で ArrayBuffer を作成して postMessage すれば動く(例)
動作環境
手元の Firefox 25,Chrome 29,Safari 6 でデモが動くのを確認した.
その他
JavaScript でこんなアプリ を作っていた際に「ブラウザでTIFFの画像とか表示できないかなー」と思ってやってみたとかそんな動機.適当だなぁ.
変換の際にいくつか詰まった話はまた別のエントリで.
TypeScript + Backbone.js + jQuery Mobile でコミックビューワを作った
「TypeScript 面白そうだなー」,「練習がてらに何か作ってみたいなー」,「Google Drive とか Dropbox に置いている自炊したラノベとか技術書を読むためのビューワが欲しいなー」などの欲が高まったので作った (Github).以下は README からのコピペ ;-p
デモ
漫画を読む. このデモページで表示されている漫画は,Jコミ からダウンロードした pdf ファイルです.
特徴
- デスクトップとモバイル両方のモダンなブラウザで動作します
- サポートしているフォーマットは pdf, zip, rar, cbz, cbr の5つです
- 画像ファイルは jpeg, png, gif, bmp, tiff の5つをサポートしています
- Google Drive や Dropbox 上に置いてあるファイルを閲覧することができます
既知の不具合
- モバイルでは挙動が不安定です.たまにクラッシュします.
キーボードショートカット
- 左右カーソルキー: ページを移動します
- スペース: 2ページ表示モードと1ページ表示モードを切り替えます
- エンター: フルスクリーンに切り替えます (フルスクリーンAPIをサポートしているブラウザに限る)
その他どうでもいい特徴
- ファイルのドロップに対応してます
- 右綴じか左綴じかを設定で変更できます
- pdf ファイルを閲覧する際は,ファイルのダウンロード完了を待たずに読み始めることができます (ただし Safari を除く)
- 回線が細い場合は一旦ファイルを全てダウンロードしてから閲覧を開始した方が快適かもしれません
- フッタの設定 (Config) から "Range-Request when reading PDF files" で挙動を変更できます
- スワイプでページを移動できます (iScroll5 を利用)
- 横に長いページは2ページ表示モードの際でも,その1ページだけ表示します
- ページのキャッシュとかプリフェッチとかしてます
- zip 等の圧縮ファイルを閲覧する際は,ファイル名を自然順ソートで並び換えます
- Backbone.js + TypeScript (0.9) + JQuery Mobile (1.4) で書かれてます
- MBA でビルドするのに10秒以上かかってつらぽよ...
ライセンス
GPL v3 or later
TypeScript であそんでみたかんそう
実を言うとこれまで JavaScript をサッパリ書いたことが無かったので,書き始める際は「いきなり TypeScript から入るってどうなんだ……」とかちょっと不安だったのだけど,なんとなく動くものが作れて良かった (ほんまか).
現状 (0.9.1.1) だとコンパイル時間が割と遅めで,そこらへんは今後早くなって欲しいなーとか思う (小学生並の感想). 他にも些細な不満点は色々あるのだけど,まー別に許せちゃうなーという気分.