先日からAdobe Digital Editionsの奇妙な動作に嵌っていますが、いろいろ試したところどうやら分かってきたのは、最初に指定したプロパティがうまく働かないようだということです（CSSの場合、スタイルシートがいくつも使えるので、最初と言う言葉の定義も難しいですが）。
5/18追記：どうやらCSSにUTF-8のBOM（Byte Order Mark）が付いていたのが原因のようです。Adobe Digital Editionsの問題ではなくて、CSSの方の問題ということです。詳しくは次のTweetをご覧ください。
１．http://twitter.com/#!/MurakamiShinyu/status/70471711665033216
２．http://twitter.com/#!/MurakamiShinyu/status/70474839609180160
いやあ、やはり、@MurakamiShinyu はプロだよ!
ということで、下記は一応参考のために残しておきますが。もはや内容は単なる間違いの記録に過ぎません。皆様ご注意ください。
一応参考のために実験して分かってきたことを整理しておきます
「CSSで目的とする.fig {width}指定の前に、何らかのプロパティ指定（これは何でもよい）が入ると、Adobe Digital Editions では期待通りに表現される」
○資料
——————————————————-
１ re-Error-css-p-tuika.epub
——————————————————-
元ファイルの css にて、.fig の前に、 [.p] の backgland-color 指定を
入れる。
→正常に表示されている。
〈構文〉
.p　{
background-color: pink;
}
.fig {
border-style: solid;
border-width: thin;
border-color: black;
width: 50%;
}
（以下、元ファイルと一緒）
—————————————————–
２ re-size-of-image.epub
—————————————————–
.fig のレイアウト指定を二つに分割。width 要素を最後に持ってくる。
HTMLでは、正常に表示する。
Adobe Digital Editionsでは、イメージのサイズは期待通り表示されるがborderは表示されない。
〈構文〉
/* test */
/* re-size-of-image */
.fig {
border-style: solid;
border-width: thin;
border-color: black;
}
img.case-2 {
width:100%;
}
img.case-3 {
max-width: 100%;
}
.fig {
width: 50%;
}
—————————————————–
３ re-Error-css-fig-bunkatsu2.epub
—————————————————–
.fig のレイアウト指定を二つ分割。最初に width 要素を持ってくる。
HTMLでは正常に表現されるが、Adobe Digtal Editionでは.figにwidthが反映されない。
（しかし、2とは逆にborderは表示されている。）
〈構文〉
/* test */
/* re-Error */
.fig {
width: 50%;
}
img.case-2 {
width: 100%;
}
img.case-3 {
max-width: 100%;
}
.fig {
border-style: solid;
border-width: thin;
border-color: black;
}
これから見ると、どうやら指定順序が影響しているようだが、おそらくこれはAdobe Digital Editionsのバグではないだろうか。
１．のデータ
ファイルをダウンロード
元ファイルの css にて、.fig の前に、 [.p] の backgland-color 指定を入れる。
２．のデータ
ファイルをダウンロード
.fig のレイアウト指定を二つに分割。width 要素を最後に持ってくる。
３．のデータ
ファイルをダウンロード
.fig のレイアウト指定を二つ分割。最初に width 要素を持ってくる。

Tweet

昨日、「iBooksとAdobe Digital Editionsの画像表示動作の違いにご注意」（http://d.hatena.ne.jp/cassupport/20110512/1305162472）という日記をかいたのですが、制作された大石さんから次のようなコメントをもらいました。
『CSSに「img {width:100%;}」と追加してみました。一見大丈夫なようですが、画面サイズを左右に広げた場合、Adobe Digital Editionsでは2段組となり、firefoxのアドオンEPUBreaderではどこまでも画面に追随するため偏平な画像になってしまいます。』
まず、前段の画面サイズを左右に広げたときの話ですが、Adobe Digital Editionsでは文字を小さくするとか、あるいは、表示幅を広くすると2段組で表示するのが通常動作のようです（Windows版で確認）。Sony Readerなどでは画面のサイズが決まっていますので問題ないのではないでしょうか。
firefoxのEPUBreaderで画面幅に追随して扁平になるのを避けるには、max-width:100% とすれば良いようです。max-widthに対する動作もEPUBReaderで少し違うようなのでこのあたりはまた調べてみようと思います。
それと関係して、Adobe Digital Editionsの画像サイズに関する奇妙な動作に嵌ってしまいました。
※バージョンは1.7.2.1131（Windows7）の環境です。
先日、次のように書きました。
——
div {
width:30%;
}
img {
width:100%;
}
imgの親要素のdivに幅を指定し、img自体にはその親要素の表示幅に合わせて画像を表示するように指定するとiPadでも、Adobe Digital Editionsでも画像の表示サイズが同じになります。
——
（http://d.hatena.ne.jp/cassupport/20110426/1303775762）
ところが今日同じ様なファイルを作ってみたところAdobe Digital Editionsでそうならないのです。
○divにwidth:50%;を指定したつもりなのに次のようになってしまいます。
http://f.hatena.ne.jp/cassupport/20110513200405
※スタイルシートの内容（一部）
/* test */
.fig {
width: 50%;
}
img.case-2 {
width:100%;
}
img.case-3 {
max-width: 100%;
}
テストファイル：ファイルをダウンロード
これはおかしいと思い、さんざん調べました。でたまたま指定の順序を入れ替えたのです。
※スタイルシートの内容（一部：変更後）
/* test */
img.case-2 {
width:100%;
}
img.case-3 {
max-width: 100%;
}
.fig {
width: 50%;
}
○今度はなんと次のようになってしまいます。2枚目は期待通りになりますが1枚目が画像本来のサイズのままになってしまっています。
1枚目http://f.hatena.ne.jp/cassupport/20110513200406
2枚目http://f.hatena.ne.jp/cassupport/20110513200407
Adobe Digital Editions はスタイルシートの指定順序で画像の大きさが変わってしまいます。
テストファイル：ファイルをダウンロード
ブラウザ（ForefoxやそのEPUB Readerプラグイン）では２つの画像の両方とも画面サイズの50%の幅で表示されます。
この現象はどういうことなんでしょうかね。まだ原因は分かっていません。

Tweet

アンテナハウスのCAS-UB（http://www.cas-ub.com/）は書籍のコンテンツを編集・制作するサービスです。
CAS-UBで編集した結果はEPUBとPDFに同時に出力できますので、BOD（ブックオンデマンド）にも最適です。
　
BODというのは聞きなれないかもしれません。まだ一般的に定着した言葉ではないようで、まったく別の意味に用いているケースも見受けられます。
世間一般にはPOD（プリントオンデマンド）と言う言葉の方が普及しているようです。しかし、PODというとダイナミックに変動する需要に応じて印刷するという幅広い概念で、ちらしやDMのようなものの印刷まで含むと思います。
いわゆるページもの（論文、冊子、書籍）の場合は、印刷だけではなく、製本や断裁の工程が追加になります。ページものを対象にするときは、製本・断裁などを含む言葉として、BOD（ブックオンデマンド）と言うほうがPODよりも意味が明確になると思います。
１．Espresso Book Machine（EBM）
BODの装置で有名なのがこのEBMです。三省堂の神田本店にEBMがあります。ここでは絶版本などの印刷・製本サービスを行なっています。三省堂のメニューを見ますと一般読者向けの書籍が多いようです。詳しく比較したわけではありませんが、通常の店頭書籍とあまり変わらない価格という印象を受けます。
現在は、自分で作ったPDFを本にして欲しいと言ってもだめなようです。このマシン用のデータはオンデマンドブックス社のサーバ上にあるようで、それが理由かもしれませんね。システム上はオンサイトのデータ入力も可能らしいので、持ち込みPDFの印刷・製本もやればできるのでしょうけど。ぜひ持ち込みPDFベースのBODにも対応して欲しいです。そうなったら試してみたいと思っています。
2. BODのできるPOD機械
　
EBMの特徴はコピーから製本まで一連の加工を短時間で行うことにあります。同じような機能を実現する装置としては、キヤノン、富士ゼロックス、コニカミノルタなどのプロダクションプリンティングのメーカから、プリント装置（コピー機）と連動する大型のインライン自動製本機も販売されています。しかし、これらは機械全体としては高額であり、比較的低価格のものはEBMのみのようです。
2. BOD書籍の販売
「だれが「本」を殺すのか」（佐野　眞一著、プレジデント社）には、地方出版社の経営者の言葉として、印刷会社への支払いがきついということがでてきます。印刷した本は在庫になりますので、印刷会社への支払いだけではなく税金負担もあります。コンテンツを販売する立場からは在庫負担のないBODは理想的な手段に見えます。
2.1 書籍の流通でBODを利用する
三省堂のEBMは、BODを書店が利用する例ですが、オンライン流通業者がBODを行なっているケースがあります。
(1) Bookparkのオンデマンド出版
富士ゼロックスの関連会社で、コンテンツワークスという会社はBOD流通サイトを運営しています。
http://www.booknest.jp/
コンテンツワークスはもともと富士ゼロックスの事業から由来しているようです。BODで本を作るだけではなく販売もしてもらえます。
利用している人のＴｗｅｅｔによりますと、コピー費用は4円/ページですが、諸経費含めて1頁10円位とのことです。
　
http://twitter.com/#!/mao3mao3/status/64517440792567810
(2) アマゾンがBODでの販売を始めた
アマゾンが米国でBODで本を作っている話は前から紹介されています。先月、日本でも始めるというニュースが出ました。
http://japan.internet.com/wmnews/20110419/2.html
http://internet.watch.impress.co.jp/docs/news/20110419_440705.html
アマゾンのWebページにはまだ英語の書籍が多いようです。
http://www.amazon.co.jp/b?ie=UTF8&node=2229003051
現在、日本語の書籍のＢＯＤ販売の準備を進めているようです。検討してみた方の声がブログに紹介されていました。これで出版ビジネスに新規参入するのは難しいようです。
　
「AmazonのPODは新規参入出版社にとってきつい」
　
2.2 出版社がBODを利用する例
Webを探したところ出版社でBODで本を販売しているケースを見つけました。
(1) 森北出版
BOD書籍のご案内
http://www.morikita.co.jp/pod.html
BOD書籍のリスト
http://www.morikita.co.jp/bunya/20-1.html
ざっとみると平均：約215頁、3,582円。１頁あたり16.6円になります。一番安いもので13円弱。高いものが22円強です。専門書なので比較的高価です。
(2) 角川学芸出版
BOD書籍
http://www.kadokawagakugei.com/ondemand/list-c.php
角川地名大辞典、角川選書、源氏物語評釈のBOD本が出ています。比較的ポピュラーと見られる角川選書でも最低価格は3,000円です。かなり高価という印象を受けます。
3. BODの可能性は？
3.1 市販本の出版
一般に市販する書籍を数を出そうとするとある程度安くする必要があると思いますが、森北出版や角川学芸出版のケースでみますと、一般の書籍と比べてかなり高価になっています。これだとどうしても必要な人を除いてなかなか売れないでしょう。
流通業者を利用することを考えてみると、ブックネストにしてもアマゾンにしても、BOD印刷・製本コストに加えて販売手数料がかかります。
書籍はひとつづつ内容が違いますので、一見差別化しやすいようですが、しかし類似書籍が大量にありますので差別化は難しいと思います。そうしますと、一般読者に売るときはどうしても他の書籍と価格競争になります。
市販の書籍の印刷・製本コストは、現在のBODコストの1/3以下ではないでしょうか？結局、BODベースでは印刷・製本した書籍に価格的に太刀打ちできないだろうと思います。
但し、三省堂書店のEBMは価格的な魅力を感じます。書店の店頭にＥＢＭが普及したとき初めてＢＯＤベースの出版ビジネスが成立する可能性があります。
3.2 私家書籍あるいは企業内書籍
上述のようにBOD本を一般に販売するときは、印刷製本済みの書籍との価格競争に巻き込まれます。ので、この領域でのBODの将来性はなかなか厳しいと思います。
BODはむしろ自費出版（著者が負担する出版）、私家書籍（私蔵用）、企業・団体で本をつくるのに向いているような気がします。
「なぜ日本は大東亜戦争を戦ったのか」（田原総一郎著、PHP研究所）には北　一輝が「国体論及び純正社会主義」を書き上げて自費出版して、世の中と勝負する経緯が出てきます（pp．324～329）。北は自費出版で書を出して一部で高い評価を得るも、わずか6日間で権力と御用新聞によって発禁処分となり闇に葬られたようです。出版とはむしろそういうものかもしれません。
　
3.3 電子書籍との関係
　
BODは手作りと言う点では今流行の自炊と似通っています。BODは電子から紙という方向なので紙をスキャンして電子化する自炊とは反対方向です。そうするとBODと言わずに「お袋の味」とでもというと流行るかもしれません。
　
EPUBなどの電子書籍が普及する過程は、とりあえずは形を欲しがる著者と読者にはBODで提供し、形にこだわらない著者と読者にはEPUBで提供したらどうでしょうか？

Tweet

イメージの大きさの決定について、CSS 2.1仕様との関係を整理しておきます。
この記事は、昨日の「EPUBで画像の大きさを指定する方法について、続きです」の続きです。初めての方は、前の記事をお読みいただくとわかりやすいと思います。
1．非置換インラインとは
CSS 2.1の3.1 定義に置換要素の定義があります。
http://www.w3.org/TR/CSS2/conform.html#replaced-element
置換要素とはイメージ、埋め込みオブジェクト、アプレットなど、内容が普通の要素とは別のものに置換されて可視化されるものとなっています。置換要素には固有な大きさ（width、height）があることが多いという説明があります。
ここから「非置換のインライン要素」というのは、画像などではないインライン要素（spanなど）のことであることがわかります。span要素のような通常の文書内のンライン要素にwidthを指定したとしても、CSSではwidthの指定は適用されず無視されることになります。
2．画像の表示サイズの決定
前回のケース４でdivに幅を指定したとき、その子供のimgの表示サイズは次のようになっていました。
(1)ブラウザやAdobe Digital Editionsではimgにwidth:100％を指定しないとイメージ固有の大きさで表示されwidth:100％を指定したときに初めて、親のdiv要素に指定した幅で表示される。
(2)iBooksはimgにwidth:100％を指定しなくても親のdiv要素に指定した幅で表示される。
2種類の挙動のうちどちらが正しいのでしょうか？
CSS 2.1の仕様では「10.3幅とマージンの計算」の「10.3.2 置換インライン要素」の項
http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width
に次のような記述があります。
「もし、heightとwidthが共に’auto’になり、かつ、要素が固有の幅をもつならば、固有の幅をwidthの値として使用する。」
widthもheightの初期値は’auto’です。「imgになにもwidthを指定しない」とwidthの値は初期値の’auto’になりますのでこの記述が適用されます。
つまり、imgにwidthもheightも明示的に指定しない場合はイメージの固有サイズで表示するのが正しいことになります。
このことからiBooksの挙動はCSS2.1の仕様とは違うということになります。

Tweet

１昨日のEPUBで画像の大きさを指定する方法について、もう少し継続して調べてみました。
XHTMLファイルの構造は次のようになっています。
<div …>
<img src="画像ファイルへのパス" … />
</div>
ケース１、ケース３は直接imgに対してwidth属性またはCSSのwidthプロパティで幅を指定しました。この両方ともブラウザやAdobe Digital Editionsでは幅指定が有効になります。これは正常な動作と思います。
ケース２は、img要素の親要素であるdivにwidth属性を指定しました。
ケース４は、img要素の親要素であるdivにCSSのwidthプロパティで幅を指定しました。
ケース２は、ブラウザやAdobe Digital Editionsでは幅指定が無視されます。XHTML1.0の文書型を調べると、width属性を指定できるのは、img、table関連の要素オブジェクト要素などとなっておりdivにはwidth属性は指定できません。従って、divに指定したwidth属性を無視するのは正常と思います。
問題はケース４です。CSSのwidth属性は、CSS2.1仕様をみると「非置換のインライン要素と表の行を除く全て要素に適用できる」とあります。非置換ってわからないのですが、divはインラインではないのでwidthを適用できるはず。で、なぜ、画像の幅が期待通りにならないのか？
調べてみますと、どうやらimgに指定した画像ファイルのもともとの大きさが幅1024ピクセル、高さ768ピクセルと大きいのですが、imgに幅を指定していないので、画像ファイルのサイズのままで表示しているようです。
それで今度はimg幅を明示的に指定してみました。CSSを簡単に書くとこのようになります。
div {
width:30%;
}
img {
width:100%;
}
つまり、imgの親要素のdivに幅を指定し、img自体にはその親要素の表示幅に合わせて画像を表示するように指定します。
そうすると今度はブラウザでもAdobe Digital Editions でも画像が期待した大きさで表示されます。どうもこれが正しいようです。
iBooksはimgに100%指定がなくてもあるものとして解釈しているようですね。やはりiBooksは特殊というべきでしょうか。
○結論としては、現時点で、ブラウザ、Adobe Digital Editions、iBooks(1.2)で共通になるようなイメージの大きさ指定は、このケース４の方法しかない、ということになりそうです。
○テストデータ
Case4aファイルをダウンロード

Tweet