前々回はパッケージ化するHTML5電子書籍について紹介しました。そのエントリをご覧頂いた方からご指摘を頂いて、大幅な修正が2回入りましたが、そろそろ次の回ということで今回はWebサイト化する電子書籍について紹介してみたいと思います。
目次
1. 「Webサイト化する電子書籍」とは
この「Webサイト化する電子書籍」という言葉、これだけで理解できるほど自明なものとは思えませんのでまずは簡単に紹介します。
HTMLコンテンツはHTML+CSS+JavaScriptで主に構成されます(CSSとJavaScriptは必須というわけではない)。例えば、以下のような構成のコンテンツがあったとします。読者にそれらを格納するフォルダごと渡して、その中にあるindex.htmlファイルを開いてコンテンツを読んでもらうという方法はいろいろと問題があるという話は前々回のエントリで話した通りです。
ならばということで、前々回のエントリでは、パッケージ化して1つのファイルとして固める方法を紹介しました。今回は単純にいえば上のフォルダをパッケージ化もせずにそのままWebサーバーに上げてしまおうという話になります。つまり、やっていることはWebサイトをアップロードするのと全く同じです。読者にはURLを知らせて、そのURLからコンテンツへ誘導します。
コンテンツがWeb上に上げられると読者はURLを頼りにコンテンツを行き来することになりますので、そのコンテンツの構成をローカル環境ほど意識することはほとんどありません。さらにハイパーリンクによって他のコンテンツと行き来することも当然ありえますので、他とのコンテンツの境界線はかなり希薄になります。
上の図では一例としてindex.htmlにアクセスしていますが、リンクを貼ることができるものであれば別に他のページでもかまいません。htmlディレクトリの中に001.htmlというコンテンツファイルが格納されているならば、直接、http://example.com/html/001.htmlというURLを指定して読者に誘導してもよいわけです。
上だけだと、新聞社や雑誌社がコンテンツをサイトに掲載している従来のものとあまり変わりありませんが、さらに踏み込んでコンテンツに「電子書籍的UI」を付与し、読者にはWebサイトではなく、「電子書籍」を読んでいるという意識を持たせようと意図した動きが最近、見られるようになっています。
そんな電子書籍コンテンツをここでは「Webサイト化した電子書籍」と呼ぶことにします。
では、まずはWebサイトに「電子書籍的UI」を付与する方法から紹介したいと思います。
2.電子書籍的UIを付与する
treesaver.js
treesaver.jsはHTML+CSS+JavaScriptでWebサイトを電子雑誌ライクなUIを実現するオープンソースのJavaScirptフレームワークです。
treesaver.js
http://www.treesaverjs.com/
紹介動画を見ていただくとわかりますが、スマートフォンからデスクトップ版のブラウザまで様々なスクリーンサイズのデバイスに対応した電子雑誌なUIをもったサイトをつくることができます。
２つのデモサイトが公開されています。
aside
Web上に電子雑誌を公開することを提案しているサイトです。興味をもったら連絡しろぐらいのことしか書いておらず、利用する方法がよくわかりませんでした。個別に交渉なんでしょうか。
aside
http://www.asidemag.com/
このasideのサイトそのものがそのサービスのデモサイトになっています。iPadで確認することができます。お持ちでない方も以下の動画でそのデモの紹介されていますのでご覧ください。
aside magazine Trailer from aside magazine on Vimeo
ここまではどちらかと言うと「書籍」コンテンツをWebサイト化することを主たる目的としていますが、以下のCSS3ののGenerated Content for Paged Media Moduleは「書籍」コンテンツのWebサイト化に使うだけではなく、通常のWebサイトに「電子書籍的UI」を付与するために利用できそうな仕様になっています。
CSS3のGenerated Content for Paged Media Module
これはフレームワークではなく、W3Cが検討しているCSS3の仕様の1つです。プリントメディアの特徴をCSSを使用して実現することを目的としています。
CSS Generated Content for Paged Media Module
http://www.w3.org/TR/css3-gcpm/
この仕様をブラウザが実装するようになれば、スタイルシートを指定するだけで、以下のような電子書籍的なUIを実現することができるようになります。
といえ、この仕様はまだドラフトの段階で安定版のブラウザで実装しているものはありません。普通に使用できるのはもう少し先の話になりそうですが、Opera開発版では先行して実装されているので、それを使って試すことも可能です。
More fun using the Web, with getUserMedia and native pages – Dev.Opera
このCSSを実装したデモサイトもすでに用意されています。上の開発版で訪問するとデモサイトに実装されたこの仕様を確認することができます。
Opera Reader: Paging the Web
※2012/6/18追記
先日公開されたOpera12でCSS Generated Content for Paged Mediaがサポートされるようになりました。
Opera の新機能
3.Webサイト化する電子書籍のメリット/デメリット
AppleのApp Storeの審査がときおり問題になる現状を見ると、プラットフォーマーの意向に左右されずにすむことがWebサイト化の一番のメリットかもしれません。（HTML5に対応した）ブラウザがすべてそのコンテンツのビュワーになるわけですので、対応するデバイスが劇的に増えることになり、利用者層の拡がりも期待できます。また、コンテンツはサーバーで集中的に管理できますので、読者の読書環境を一元的に提供することも可能になります。
しかし、一方でWebサイト化するならば、独自でサーバーを用意しなければなりません。場合によってはシステム開発も独自に行う必要があるでしょう。コンテンツを有料で配信するのであれば、その課金についてもなんらかの手段を用意しなければなりません。仮に用意できたとしても、サイトの無料化と有料化の間で揺れ続けている新聞や雑誌の動向を見ても、Webサイトの有料化は非常にハードルが高いと思われます。
米国のPLAYBOYがウェブ雑誌としてWebサイトに移行しましたが、事例としてはまだまだ少ないようです。デメリットを勘案すれば、小規模なコンテンツプロバイダが既存のプラットフォームを捨てて、Webサイト化に移行するのはかなり高いハードルを乗り越えなけれなりません。当面はWebサイト化はブランド力をもった雑誌や大量の定期購読者を抱えているような雑誌、もしくは巨大なプラットフォームの間で行われるにとどまるかもしれません。
しかし、一方で既存のWebサイトを例えば、iPadで見るときは「電子書籍的UI」で見せるといったWebデザインの延長として提供することは充分ありえることです。デバイスのインターフェイスにあわせて柔軟にUIを最適化させる、その最適化の手段の1つとして「電子書籍的UI」を組み込むということです。ブログや新聞、雑誌のようなテキストコンテンツが主となるWebサイトはその候補の筆頭だと思いますが、公的機関や大学、研究所がサイトで公開している報告書や広報誌もその候補になり得ます。また、メディアがサイトの有料化に踏み切る際に電子書籍的なUIを付与するという選択肢もありえるかもしません。
「Webサイト化する電子書籍– HTML5電子書籍(2) –」への1件のフィードバック
コメントは受け付けていません。