ホーム  > ブログ一覧  > ウェブブック

ブログ

ウェブブック

2019.12.21


出版社の運営する公式漫画サイトに行くと、大抵本のページをめくるように
複数の画像を表示する構造が組み込まれていますよね。ブラウザで第1話や
最新話を無料で読んでもらいそのまま書籍購入につなげようという試みです。

 

先日うちにもそのようなページを作成したいと依頼があったので、何か
ライブラリがないか調べているとturns.jsというなかなか良さそうなものが
見つかりました。

 
turns.js
http://www.turnjs.com/
 

BSDライセンスで使いやすく、ライブサンプルも公式サイト上でいくつか
見ることができます。(画面右上の本棚がそのままサンプルです)
7年更新されていませんしコードの中には多少気になる部分もあり、手直し
する必要が出てくる場合もありますが、HTMLの知識さえあればほとんど
学習コストをかけずに導入できるのは大きいと思います。

 

サンプルを含むファイル一式をダウンロードして作業フォルダに展開します。
5種類のサンプルのうち今回は雑誌タイプをベースにしてのですが、まず
通常表示用、サムネイル用、ズーム時の高画質用の三種類の画像を
ページの分用意してあげなければなりません。今回は全部で数百枚にも
なるためこれを手でやるのは当然却下です。ちょっとした修正が入るたびに
手で変換作業を行っていたら給料泥棒と言われかねません。こういう場合
普通バッチ処理できるグラフィックツールの出番ですが、ファイル名の生成
規則とか考えると面倒なのでpython+Pillowを利用しました。
こんな処理でももしC++で書かなければならないとしたら、プロジェクトを
起こしてライブラリを用意してと……ああ今回しか使わない処理なのに
面倒で億劫だ、となっていたでしょう。必要な処理を書き、変換処理まで
入れても10分かからないpythonはものぐさな私にぴったりです。

 

サムネイル画像表示時の縦方向のセンタリングコードがおかしいのを
修正したりキーボード操作を追加したりで多少JavaScript部分を
弄りましたがLunacyを使ったページデザイン含め4時間ほどで完成。
フルスクラッチだったらこんな時間では到底完了してません。
ありがたや。(Windows用Sketch互換アプリのLunacyについては
また今度書きたいと思います)

 

話変わりまして、以前ブログ内にGoogleしごと検索向けにJSON
データを埋め込んでみたのですが、半月ほどのラグで検索結果に出るように
なりました。興味のある方はどうぞ。

ページトップへ