■CALENDAR■
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31   
<<前月 2019年10月 次月>>
■NEW ENTRIES■
■PROFILE■
都築由浩
SFやらミステリやらホラーやらをライトノベルジャンルで書いている作家。
コミック原作・編集デザインなどその他さまざまな職業を兼業する。
クルマ・R/Cカー・自転車・ホビーロボットなど多趣味で、それらの道具や仕事の資料が散らばる自室が常にゴミ箱のような様相を呈していることから、巻末に『9畳のゴミ箱より』と記する。
■RECENT COMMENTS■
■CATEGORIES■
■都築由浩HOMEPAGE■
■ARCHIVES■
■COUNTER■
total:
since 30.April.2008
■利用規約■
本blog内の個別のページにリンクするのは構いませんが、画像やムービーなどに直接リンクをしたり、URLを使用して自身のページに直接貼り付けたりする行為はご遠慮下さい。
本blogに掲載されている写真、文章等の著作権は筆者およびそれぞれの作者・撮影者に帰属します。無断でのコピーや転載等はご遠慮ください。
  
2008(C) Yoshihiro Tsuduki
  All right reserved.
■注意■
SPAMコメント対策のため、ページを開いた後1分間以内にコメント書き込みボタンを押された場合、コメントが反映されないことがあります。オフ書きされる方はご注意ください。
■OTHER■
■POWERED BY■
BLOGN(ぶろぐん)
BLOGNPLUS(ぶろぐん+)

『ザ セカンドドア』iBooks版を無料公開します
 以前からpdf版を無料で公開していた>『ザ セカンドドア』のePub版を公開します。
 ePub版といっても、iPad上で読むiBooksに特化したデータになっています。他のePubブラウザでは表示が乱れると思います。
 右の表紙画像をクリックしてダウンロードしたデータを、iPad上のiBooksに転送してご覧下さい。(10月29日、データのリンク先をiPadZineに変更しました)
 無料公開するくらいですから、多少「テスト」の面も入っています。不都合な点がお知らせ下さい。

 なお、チャットページで文字を大きくすると表示が乱れます。こればかりは仕様ということでお許し下さい。

 続き▽の下にはiBooks向けに縦書き/右綴じのePubデータを作成する場合に注意する点を列挙しました。ご参考にしていただければ幸いです。
 なお、このデータは現在のところiPad専用です。iPad miniでは動作確認していませんが、たぶん読めると思います。
 iPhone4では各ファイルの1ページ目しか表示されず、読むことができませんでした。この点についてはiBooks2.0のころにあったバグが残っているのか、私の指定がどこか間違っているのか、引き続き調査をいたします。

 iBook向けの日本語縦書き書類を作るに当たり、CSSで諸設定を行います。まず、縦書き設定。

body {
writing-mode : vertical-rl;
-epub-writing-mode : vertical-rl;
-webkit-writing-mode : vertical-rl;
line-height: 1.7em;
font-size: 12pt;
background-color: #fff;
}

 最初の3行が「縦書き」設定です。最初の1行はたぶんIE向け、2行目がePub一般向け、3行目がiBooksやMac純正ウェブブラウザのSafari、それにChrome向けに「縦書き」を指定するCSSです。iBookだけを考えるなら3行目だけでも大丈夫なはずです。
 4行目では、ルビを入れることも考えて、行間は1.7emとしました。ルビがないなら1.5emを指定すればいいと思います。
 背景色は本当は真っ白じゃなくて書籍用紙っぽい薄いベージュにしたかったのですが、iBooksの仕様上、ページ全体が背景色にならないのであきらめました。

 次に、縦中横の指定です。「!?」や「!!」など、感嘆符や疑問符が二つ並んだ場合、文字自体は半角文字を使用しますが、そのままでは文字が横倒しになってしまうので、これを指定します。

span.tcy{
writing-mode : horizontal-tb;
-webkit-writing-mode : horizontal-tb;
line-height:105%;
padding-top:3px;
}

 縦中横指定は常に「span class="tcy"」のタグで指定するので、cssもこれで。
 さらにルビ(よみがな)の指定です。

ruby {
display: inline-table;
position: relative;
line-height: 1;
margin-left: 0em;
padding: 0;
vertical-align: -0.1em;
border:none;
border-collapse: collapse;
border-spacing: 0;
}
rb {
display: table-row-group;
text-align: center;
padding: 0;
margin: 0;
border: none;
}
rt {
display: table-header-group;
line-height: 1.2;
font-size: 0.5em;
text-align: center;
padding:0;
margin: 0;
border: none;
}
rb, rt {text-align: center;}
rp {display: none;}

 細かいですね(笑) まあ、デフォルト通りなのでわざわざ指定しなくても……というものも入っています。
 この他にもCSSはいろいろ使いましたが、一般的に使えるのはこのくらいでしょう。

 次に、「右綴じ」にする方法です。
 これはCSSではなく、ePubならではの制御用ファイル「contents.opf」にある「spine」タグ内にオプションとして指定します。

<spine toc="ncx" page-progression-direction="rtl">    (「<」や「>」はもちろん本来は半角です)

 これを指定することで、ブック全体が右綴じになります。

 もう一つ、このePubデータを作るのに苦労したのが、チャット形式のページで使用しているアイコン画像の大きさを調整するところです。
 ePubは文字の大きさをユーザーが切り替えられるのが特徴ですので、下のようにCSSで指定しました。

.icn{
margin:3px;
margin-bottom:1.5em;
height:2.5em;
float:left;
}

 アイコンの大きさも文字の大きさに依存するようにしたのです。それでもチャットページで文字の大きさの設定を変えると表示が乱れるのは避けられませんでした。
 iBooksはなぜか「img」タグに直接このCSSを適用しても画像の大きさを変えられません。

<div class="icn"><img src=〜……></div>

 という風に、親divを作ってそこにclassを適用するようにしました。

 チャット画面ではJavaScriptを使って表示/非表示を切り替えるようにしています。このように、html5を全て内包するePub形式では、従来紙の本では不可能だったプログラムを使った表現が可能になっています。iBooksのような電子書籍ブラウザを使うことを考えると、「本」としての見た目のなかでこの機能をどう使うかというのは、いろいろ可能性を感じさせてくれて想像が膨らみます。
 今回、大学の講義のネタにもするためにあえてこのような「ちょっと普通の本から外れた」表現も入れてみたということで、読みにくいようでしたらご容赦下さい。
| http://ripper.sakura.ne.jp/blog/index.php?e=393 |
| お仕事(小説/SF) | 05:39 PM | comments (0) | trackback (x) |

PAGE TOP ↑