きちぽよ〜

ねむい

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

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