きちぽよ〜

ねむい

WebWorker で画像のデコードがしてみたかったので，C言語のライブラリ (stb_image.c) を Emscripten で移植して Pure JavaScript な画像デコードライブラリを生成してみた

emscripten javascript Program

誰も得しそうに無いエントリをこりずに書く (デモ，Github)

画像のバイナリデータ (ArrayBuffer とか Blob) をデコードして画像のピクセルデータというか， ImageData みたいな情報を取り出したかったので ，

  1. ArrayBuffer から Blob を作り，
  2. window.URL.createObjectURL で Blob URL を作り，
  3. img 要素の src に Blob URL を代入し，
  4. img 要素の onload イベント内で，canvas に drawImage メソッドを使って img 要素を描画し，
  5. 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 のコンボはんぱねぇ……．

*1:何がしたいんですかねこの人は……

*2:emcc に -O3 オプションを与えた

AngularJS の $watch, $digest, $apply について書く

AngularJS javascript

「僕らはみんな河合荘」 のアニメ化決定に小躍りしている seikichi です．

f:id:kichipoyo:20131201034908j:plain

律ちゃんかわすぎ……．

前置きはさておき，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 でも双方向データバインディングを実現できます

続きを読む

PDF.js で遊んでみた (ページの描画，テキスト・注釈の表示など)

javascript pdf.js Program

修士論文の予備審査が終わって一段落した seikichi です．卒業できるといいなぁ……．

PDF.js は HTML5 とJavaScript を利用してPDFを描画するライブラリです． PDF.js を利用するとWebブラウザ上でPDFファイルを描画することができます． つい最近，このライブラリを利用して遊んでみた ので，そのときに得た知識とかを適当に書いてみます．

このエントリでは主に以下の内容について解説します．

  • PDF.js の取得，ビルド
  • ページの描画
  • テキストを選択可能な形式で描画
  • 注釈 (リンク等) を取り扱う
  • PDF.js の各種オプション
続きを読む

GNA UnRAR を Emscripten で JavaScript に変換して，RAR形式のアーカイブをWebブラウザ上で展開する

javascript emscripten

誰得 Emscripten ネタ2発目 (Github, デモ)． 変換してデモつくったあたりで飽きた．new Unrar に ArrayBuffer を渡して，getEntries とか decompress とかで遊んで，close で後片付けすればそれっぽく動く気がする．

Node.js だとこれとかこれみたいにすれば遊べるハズ．

LibTIFF を Emscripten で JavaScript に変換して，TIFF形式の画像をWebブラウザで表示する

emscripten javascript

概要

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の画像とか表示できないかなー」と思ってやってみたとかそんな動機．適当だなぁ．

変換の際にいくつか詰まった話はまた別のエントリで．

DreamSpark で提供されている製品を Linux 上から ダウンロードしたい

misc.

wine1.7 では ie8 と msxml3 を winetricks からインストールした後，SDM (Secure Download Manager) をインストールすれば良いらしい (参考: WinHQ)． 昔は専用ダウンローダとか必要無かったのに，気付いたら Linux に厳しいサイトになっていて辛ぽよ．

TypeScript + Backbone.js + jQuery Mobile でコミックビューワを作った

TypeScript Program

「TypeScript 面白そうだなー」，「練習がてらに何か作ってみたいなー」，「Google Drive とか Dropbox に置いている自炊したラノベとか技術書を読むためのビューワが欲しいなー」などの欲が高まったので作った (Github)．以下は README からのコピペ ;-p

デモ

漫画を読む. このデモページで表示されている漫画は，Jコミ からダウンロードした pdf ファイルです．

特徴

  • デスクトップとモバイル両方のモダンなブラウザで動作します
    • Firefox 24+, Chrome29+, Safari 6+, Chrome for Android 30+, iOS Safari 6+
    • とか言いつつモバイルだとまだまだ挙動が不安定です．たまにクラッシュするので注意
  • サポートしているフォーマットは 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) だとコンパイル時間が割と遅めで，そこらへんは今後早くなって欲しいなーとか思う (小学生並の感想)． 他にも些細な不満点は色々あるのだけど，まー別に許せちゃうなーという気分．