FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

MonacaやWebブラウザでマンガを読むためのビューワーアプリまとめ

書籍(紙 + 電子)市場の4割がコミックになるなど、日本においてマンガ市場の規模が年々大きくなっています。そうした時に大事になるのがコミックを快適に読むためのビューワーアプリの存在です。

有名なところでははてな社の開発しているGigaViewerがあります。GigaViewerを使うこともできますが、他にも無料で使える選択肢もあります。今回はそんなコミック、マンガビューワーを紹介します。

slick-custom

slick-customはjQueryプラグインのslickを利用しています。あらかじめ用意するのは連番の画像ファイル(PNG)になります。ライセンスはMIT Licenseとなっています。

サンプル

なんかいい感じのマンガビューア~slick-custom~

laymic

見開きや縦読み、拡大、全画面、一覧表示、HTML利用、さらにPC/スマホをサポートとマンガビューワーに必要な機能を網羅しています。商業対応として告知エリアも追加できます。ライセンスはMIT Licenseになります。

サンプル

誰でも使えるwebマンガビューワーlaymicをリリースしました|LV3(れべるさん)|note

WCR Comic Viewer

画像をリストタグで並べるだけで使えるコミックビューワーです。簡単に使えるのが売りとなっています。スマートフォンには対応していないかも知れません。ライセンスはMIT Licenseです。

サンプル

WCR Comic Viewer - 超簡単ウェブコミックビューワ

comic-viewer

スマートフォンとデスクトップで画像を分けて配置するコミックビューワーです。画像は連番のPNGファイルになります。PCの場合は左右、スマホの場合は上下でページ切り替えになります。

サンプル

tomalatte001/comic-viewer: ブラウザ上で漫画を読めるようにするためのソースです。

comicbed

PDFやZip、RAR、CBZ、CBRといった1ファイルでの配布の他、JPEG/PNG/GIF/TIFF/BMPといった画像ファイルにも対応しています。Google DriveやDropboxにも対応しています。ライセンスはGPL v3となっています。

サンプル

seikichi/comicbed: A browser based comic book reader

react-comic-viewer

React製のコミックビューワーです。画像のファイル名は自由で、配列で指定するだけで利用できます。ライセンスはMIT Licenseになります。

サンプル

piro0919/react-comic-viewer

Web Comic Reader

CBR/CBZ/CBT形式に対応したコミックビューワーです。jQueryを利用しています。下にサムネイルが並んで表示されるのが特徴的です。拡大や自動再生といった機能もあります。

afzafri/Web-Comic-Reader: Web Based cbr/cbz/cbt comic book reader. Written in HTML5 and Javascript (with jQuery)

まとめ

ビューワーとしてはjQueryを利用しているものとそれ以外に分かれそうです。また、React向けにはreact-comic-viewerが有力候補になりそうです。コミックファイルの置き場所をNCMBのファイルストアとして、ぜひ組み合わせてください。

導入相談会

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。