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) だとコンパイル時間が割と遅めで,そこらへんは今後早くなって欲しいなーとか思う (小学生並の感想). 他にも些細な不満点は色々あるのだけど,まー別に許せちゃうなーという気分.