第 二回目(付録) 懲りずに、電子ブック作成にチャレンジしてみました。

第二回目で、縦書き絵本で、大変な状態になったにも関わらず、電子 ブックを作ってみました。

印刷しなくても、電子ブックだったら無料でできるという、せこい根性丸見えですが、
やってみたら、意外に簡単そうで、難しかったので紹介します。

ここでも縦書き問題にいくつかぶつかりました。
Linux用の電子ブックリーダが縦書きに対応していなかったとか
ちょっとしたプログラミングみたいなのが必要でした。

英検受験も自信ないので、逃げまくっている自分ですが、すべて、「呪文なんだ」とおもうと、
結構、楽しく出来ました。

(↓↓↓クリックすると作成したE-PUBが見れます。↓↓↓)

denden02
(注意)まだまだ、わかっていないことが多いので、失敗が多そうです。
クリックすると新しいウインドウになるので、
全ページ表示で縦スクロール移動モードにして、ブラウザを横長にして見てください。

ページ単位表示の時と、ブラウザが縦長だと、うまく、動きませんでした。
これから、勉強していきますので、お代官様、お許しください。
表示には、主様が BiBiというツールを使っているようです。

今回使用したアプリケーションについて

あき:今回は、完璧に全て、初めてでした。
るみ:今回は、模擬試験を受けているような感じでした。
あき:どういうこと?
るみ:出来そうだと思ったら、できない。出来たと思ったら違っている。
あき:まあ、白紙にならなくてよかったね。
るみ:HTML見た瞬間に、留年確定かと思いました。
あき:私なんか、これで、ボーナスなしだなと思いました。
るみ:英語もパソコンもダメダメ人間が二人でよく出来ました。
あき:ゲームだったら根性出るんだけどね、、、
るみ:アニメをまとめて見るのだったら徹夜も簡単なのにね、、、

さて、今回使用したソフトは、3つです。
Sigilという今回の主人公の電子書籍作成アプリ、
ReadiumというChrome上で使うE-PUBリーダ。(縦書き対応)
BiBiというサーバーに設置して、クライアント側のブラウザのE-PUBビューワ

 
使 用したアプリ 簡 単な説明 WiKi  URL
Sigil
Sigil
E-PUB形式の文書を作成するソフトです。
WYSWYGなので、初心者にも大変簡単だと思います。
直接コードを書き込むこともできるので、
細かい設定なども自由に出来るソフトだと思います。
初心者からベテランまでの使えそうな気がします。
Sigil-WiKi
Readium
Readium
縦書きも表示できる、Chrome上のアプリになります。
Linuxのビューワもいくつか、試したのですが、
縦書きが出来るのが、見つかりませんでした。
操作は、直感的に簡単に出来るものでした。
Readium-WiKi
BiBi
bibi
E-PUBをブラウザで利用するためにサーバーに設置します。
今回は、主様(あるじさま)がやってくれました。
パソコンの中でも操作が出来たので、どのようになるのか
確認できました。

電子ブック作ります。

あき:今度は、何をやらかすとおもったら電子ブックですか?
るみ:主様(あるじさま)が次の創作ソフト搭載OSの制作をしていて、説明書をみていたら、
  電子ブックがあったんです。現在、製作中の創作ソフト搭載OSをインストールしました。
あき:外観は、あまり、変わらないね、、、、
るみ:主様に聞いたら、Sigilというソフトが入っているから、これ一本で作れるということでした。
あき:へーーー、
るみ:それでは、初めます。

作業の大枠の整理

あき:今回は、前回SimpleScanで読んだイラストとテキス トファイルを使うんだね。
るみ:このままでは、面白くないので、青空文庫のまま、カタカナを使います。

あき:超簡単だね、、、
るみ:主様(あるじさま)が3分間クッキングだと言ってました。
あき:3分間クッキングで、3分で出来たことないよ。
るみ:そうそう、鍋温めたり、材料切ったりすると、結構時間がかかる。
あき:これもそうですね。
るみ:テレビ見るとさも、簡単そうに見えるけど、自分がやると大変なことになる。

Hontai 1.イラスト用の.pngファイルと
 文書用の.txtファイルを用意します。
2.イラストを読み込みます。
3.Sigleで表紙を自動生成します。
4.メタデータを入れます。
5.ページを作成します。
6.ページにイラストを割り当てます。
7.テキストの文書を入れていきます。
8.縦書きのcssを入れます。
9.各ページ縦書きにしていきます。
縦書きcss

 

Sigilでスキャンしたイラストを読み込み作成準備をします。

あき:イメージを読み込んで、初期設定をするということですね。
るみ:いろいろなやり方があるみたいだけれども、まず、下準備をしようと思います。
あき:やることは、イメージを読み込み、書籍情報を設定するということですね。
るみ:ついでに表紙も自動で作ってもらいます。

Layer01 Layer01
SimpleScanを選択して起動します。 1.とつぜん、HTMLの編集画面が出てきて、
 ビビりました。やめたい!!!
2.右クリックして、画像を読み込みします。
Layer01 Layer01
使用する画像を一括選択します。 ツールメニューで表紙を作成を選びます。
Layer01 Layer01
一ページ目が表紙なので、選択します。 表紙が作成されました。
Layer01 Layer01
ツールメニューのメタデータエディタを起動します。
エディタと聞いて、ビビってます。
AddMetadataを押します。
Layer01 Layer01
作者とタイトルを選びます。 良くわかりませんが、
dc:language:ja
dc:title:デンデンムシノカナシミ
dc:creator:新見南吉
は、必要らしい。

あき:るみ!!!大丈夫???
  何回か固まってたよね、、、
るみ:立ち上げた瞬間、HTMLの編集画面が出て、正直ビビりました。
  やめたほうが良いかな?と思った。
あき:そうか?私もそばで、見ていて、やばーーーと思いました。普通の人は、ビビりますよね、、、
るみ:勇気出して、メタデータエディタを開いたら、ここもやばい、「どうしよう」と思いました。
あき:結構色々な人の情報読んで、整理したけど、実際は、不安だよね。
るみ:殺されるわけではないけど、ビビりました。
あき:ここで、一休みしたほうが良さそうだね。
るみ:そうしよう。ちょっと緊張しまくって、ダメです
  わたし、限界です。

 

一休みしたので、Sigilでスキャンしたイラストを読 み込み作成準備をします。

あき:イメージを読み込んで、ページを作っていくことでね。
るみ:良くわかりませんが、WYSWYGのメニューならあまり怖くありません。
あき:そうだね、HTMLなんて、自分たちにハードル高すぎですね。
るみ:Section0001.xhtmというところに、イラスト読み込んでいきます。
あき:上手だね。でも、大きすぎない?
るみ:本当だね、原画がB5だったからな。でも、あとで、CSSファイルというのがあって、
  そこに、スタイルとか設定をいれれば、どうにかなるらしいです。
あき:そうか、それでは、つぎつぎに、ページ作れば良いんだね。

Insert01 Insert02
Section0001.xhtmlで 右クリックすると、ページの追加になります。
ページ番号は、勝手に入れてくれます。
Insert03 Insert04
同じように、次の画像を入れていきます。 繰り返して、全てのページを作ります。

あき:これで、イラストが全部入ったわけね。
るみ:ひとまず、全部入りました。
あき:画像が大きかったみたいだね。
るみ:あとで、CSSというところで、大きさを指定すれば良いらしいです。
あき:本当は、この前の広報誌みたいに、リサイズをすれば良いかもね。
るみ:そうだよね、、、深みにはまると失敗しそうだから、、、、
あき:るみのこだわる部分とこだわらない部分がだいたいわかる。
るみ:へーー。不安なところは、後回ししている。だから、学校の成績が伸びないようです。

イラストの大きさを変えます。

あき:へー、、、私には、難しい。
るみ:よく解らないけど、、なんとなく、、わかります。
あき:要するに、CSSというところに呪文を書き込むばいいのね。
るみ:呪文をいれると、勝手にやってくれるってわけ。
るみ:今回、使う、CSSは、
  画像を画面の100%にするという呪文

img{ max-width:100%; max-height:100%; }

あき:イラストの大きさは、どういうふうに変えるの?
るみ:CSSを設定すると出来るらしいです。
  その後、大きさと位置を揃えれば良いそうです。
るみ:今回使う、CSSは、画像の位置決めのCSSになります。

CSS01 CSS02
Styleで右クリックする。
空のスタイルシートを追加
img{ max-width:100%; max-height:100%; }
CSS03 CSS04
作成して、スタイルシートを適用する、
ページを選択する。
右クリックすると、スタイルシートにリンクする。
というメニューが出てきます。
CSS05 CSS07
チェックをするだけで、全てのページにリンクする。 WYSWYG画面に 戻り確認する。
CSS09 CSS10
左に文を入れるので、画像を右寄せします。 Sigilが呪文を自動的に入れてくれます。
難しい、HTMLは、考えなくて大丈夫でした。

 

文章を入れていきます。

あき:WYSWYGで、自動的にHTMLを入れてくれるのは、びっくりしました。
るみ:ゲームのチート使っている感じですね。
あき:るみって、チート使ってるの?
るみ:う、、、やば、、、困るから、話題を変えましょう。縦書きの呪文を入れます。
あき:縦書きの呪文でしょ。
  調べておきました。

body{
writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
-epub-writing-mode: vertical-rl;

line-height: 1.75;

text-align: justify;
margin:0;
padding:0;
font-size:100%; }
  
るみ:それでは、文章を入れていきます。
あき:変な縦書きになるね。
るみ:Sigilが対応していないだけみたいです。
あき:縦書きユーザーのマイノリティの影響かな?
るみ:大丈夫らしいから安心して進めましょう。

txt01 txt02
CSS に次の呪文を記入しました。
body{
writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
-epub-writing-mode: vertical-rl;

line-height: 1.75;

text-align: justify;
margin:0;
padding:0;
font-size:100%; }
文章を入れていきま す。
スペースだとか、改行だとか、もっと、
便利な指定があると思いますが、
ひとまず、簡単にやってしまいました。
txt03 txt04
同じように、入れていきます。 最後まで、文をいれてセーブです。

あき:ひとまず、セーブ出来ました。
るみ:それでは、みてみましょう。

 

ビューワで見てみます。

あき:ブラウザで見れないんだ。
るみ:そういえば、創作ソフト搭載OSにe-pubビューワ入っていない。。。
あき:主様(あるじさま)は、作る道具入れておいて、見る道具入ってないじゃない。
るみ:本当だ、、、
あき:調べてみました。
  縦書き対応の電子ブックビューワってあまりないね、、、ChromeのアプリのReadium
  というのが良いらしい。
るみ:それでは、それで、行きましょう。

 

readium02
縦 書きは、上手く行ったけど図がおかしい。
調べたら、大きさを指定して、文章の回りこみが必要らしい。

呪 文を変えました。

「 img{float:start ; clear:both; height:30em; width:40em;}」

readiumu03
ようやく、完成したみたいです。
図が欠けずに入るようになりました。

あき:ようやく、完成という感じですね。
るみ:ひとまず、形になったって感じ。
あき:今回の初チャレンジは、ちょっと大変だったね。
るみ:なんで、最近、イラスト描いた次のことばかりやっていますね。
あき:つぎあたり、イラスの関することやりましょう。
るみ:折角だから、WEBページにアップしてもらいました。
あき:るみ、そんなことできるの?
るみ:主様(あるじさま)にBiBiというのを入れてもらいました。
あき:初めてだから、いろいろ、変なところもあるよね、、、
るみ:これから、もう少し、熟練していければと思います。



(下 の表紙の絵をクリックしてください。新しい、ページで、e-pubが見れます。)
(注意)まだまだ、わかっていないことが多いので、クリックすると新しいウインドウになるので、

全ページ表示で縦スクロール移動モード、ブラウザを横長にして見てください。
ページ単位表示の時と、ブラウザが縦長だとまだ、うまく、動きません。
これから、勉強していきますので、お代官様、お許しください。
表示には、主様が BiBiというツールを使っているようです。


(↓↓↓クリックするとE-PUBが見 れます。↓↓↓)

 denden02
 

第 二回目を終えて

あき:e-pubは、奥が深すぎますね。
るみ:朝からやって、夜だもんね、、、今日は、泊まっていってください。
あき:そうするわ、、、知恵熱出てるし。
るみ:でも、電子書籍って、自分でできたらいいね、、、
あき:まだまだ、失敗だらけだけど、少しずつわかっていったら楽しいね。
るみ:今、イラスト仲間が結構いて、印刷して送るのも大変だし、、
  メール添付じゃ、味気ないしね、、、
あき:電子書籍で、画集だったら、もらったら嬉しいよね、、、
るみ:いっしょに、テーマ決めて作ってもいいよね、、
あき:もう少し、作品たまったら、一緒に作ろうか?
るみ:それは、いいね、、、
あき:それでは、今回は、これで終わりにしましょう。

 

「あきとるみの制作室第二回目(付録)終了します。」
「良くわからないまま進めたところも多いので、
ミスが多いと思いますが、
皆様の暖かい視点で、ご容赦いただけたら幸いです。」
「ありがとうございました。」

ページトップへ