#創作を楽しむ 2024年07月22日(月)
柚木原 恭(ゆのきはら きょう)です。
とうとう漫画を描きました。そして電子書籍ビューワで掲載できました。
やった~~~~~~!!!!
さて、めちゃくちゃ久々にサイトメイキング記事を書きますよ!
表題の通り、ハイパーリンク付きの画像を埋め込んだ電子書籍を作成する方法です。
私はどーーーしても奥付ページを好き勝手に作りたいという野望を抱いていたため、漫画掲載手段としては最も手間がかかるであろうEPUBを選ぶことにいたしました。
敢えて険しい道を選ぶスポコン主人公タイプ。
因みに、好き勝手作った奥付というのがこちら。
(スクショなのでリンクは機能しません)
私がよく利用している某漫画アプリに倣い、作者の一言コメントを入れ、「コメント」やら「次の話」やら「関連ページ」へのリンク画像をぺたぺた貼りました。
そう、これがやりたかった。
作者さんの一言コメント、好きなので……。
そして、皆さまのコメントや反応が糧なので。えへ。
では、もしかしたら居るかもしれない同じ野望を抱いている方のために、簡単にメイキングを置いておきますね。
EPUBデータ作成~電子書籍ビューアで動かすまでに必要な材料は以下です。
バナーに使う画像
Pages(iOS標準ワードアプリ。私の環境はWindowsなので、iCloud Pagesを利用しています)
calibre(電子書籍管理ツールみたいな。EPUBを改造することもできます。なんと無料です、提供者様に感謝を)
BiBi(砦でもお借りしているオープンソースのEPUBリーダー。カスタマイズ性が高くて神。提供者様に感謝を)
Pagesで使うテンプレートは「(空白)」ってやつです。
iCloud PagesではA4サイズ以外選べないのですが、仕様なのでしょうか。
メイキングのくせにPagesの使い方をよく分かっておりません。ははは。
画像は、上部タブの写真アイコンから「メディアを選択」を押して配置します。
D&Dでも入れられるんですが、EPUBに書き出す場合に崩れやすくなる気がするので画像は順序正しく配置してった方が良い気がします。
置いた画像は全て図のように設定します。
オブジェクトの配置 :テキストと共に移動
テキスト折り返し :なし
この設定が多分きっと重要です。
私の環境では、この設定にしないとEPUBが崩れました。
因みに理由は不明です。本当に申し訳ない。
私の環境だけかもしれないので、あまり当てにしないで……。
そして、ハイパーリンクの追加は、画像の上で【右クリック】→【リンクを追加】→【Webページ】で出来ます。
Pagesの基本操作メモは以上です。
Pagesでデザインを終えたら、次はEPUBで書き出します。
まず、左上の「・・・」マークから「コピーをダウンロード」を押します。
するとこんな画面が出て来るので、「EPUB」を選択します。
EPUB情報を入力しろと言われるので、下記のように設定します。
タイトル :お好みで
作者名 :貴方のお名前
表紙 :お好みで
レイアウト :固定レイアウト型
カテゴリ :お好みで
言語 :お好みで
表示形式 :とりあえず2ページにします
目次を使用 :お好みで(画像オンリーの場合機能しません)
ここで大切なのはレイアウトを「固定レイアウト型」にすることです。この設定にすると、画像の配置を崩さずに書き出すことができます。
因みにリフロー型にすると、1ページの内容量を表示する画面サイズ(スマホ、PC、タブレットetc)に合わせてフレキシブルに整えてくれるため、漫画やデザイン性の高いページを作った場合は逆に崩れます。
リフロー型はきっと、文章オンリーの電子書籍に向くのだと思います。
以上の操作を行うと、EPUBデータが書き出せるはずです。
この時点でなんと早くも読むことができるので、このデータをBiBiに読み込ませてみましょう。
見開きページにならない、左開きの電子書籍が完成していると思います!! やったね!!
とはいえ、日本語漫画であれば大体ページは右開きでしょう。
Pagesは天下のApple製=アルファベット基準ですので、左開きのEPUBしか作ることができません。
なので、ここからはcalibreの作業に移ります。
calibreを開き、ホーム画面の白いスペースに先程作ったEPUBをD&Dして読み込みます。
そして、読み込んだ電子書籍データを選択した状態で、右上の紫色の本マーク「書籍編集」をクリック。
すると、個人サイト運営者さんであれば「ウォォ!! 来やがったな!!」ってなるであろうコードびっしり画面が登場します。
お察しのお降り、この画面からEPUBの中身を改造していきます。
本を右開きにするには、左タブの「epb.opf」を選択後、エディタ画面から<spine toc="ncx">というコード探して以下のように加筆します。
<spine toc="ncx" page-progression-direction="rtl">
因みに、「rtl」は「right to left(右から左)」の略です。
逆に「ltr」なら「left to right(左から右)」で左開きになります。
また、該当コードを探す際は、Ctrlキー+Fキーで検索するとすぐに見つけられます。便利。
Pagesで表示形式を「2ページ」にして書き出しても何故か見開き本にならない場合があります。
そういう時は、内部コードで「このページは右側に配置する!!」と命令すると上手くいきます。
そして、各ページの配置方法の命令を司っているのは「epb.opf」ファイル内の<itemref>というコードです。
<itemref idref="page-〇" linear="yes">
最初はこんな↑コードになっていると思うので、下記のように追記します。
<itemref idref="page-〇" linear="yes" properties="rendition:page-spread-center"> ←「このページを中央に配置する」の意味
<itemref idref="page-〇" linear="yes" properties="rendition:page-spread-left"> ←「このページを左側に配置する」の意味
<itemref idref="page-〇" linear="yes" properties="rendition:page-spread-right"> ←「このページを右側に配置する」の意味
こんな具合に、各ページの<itemref>タグに応じて追記してみてください。
改造方法のメモは以上です。
良い感じに改造できたら、上のバーにあるフロッピーマークから保存して画面を閉じます。
ここまでの工程を終えたら、あとはcalibreから改造済のEPUBをDLし直すだけです。
calibreのホーム画面に戻ってきたら、該当書籍を選択して右クリック→「ディスクに保存」→「ディスクに保存」の順に選択します。
あとはお好みの保存先を選んで、書き出せば完了です。
ここがcalibreの少し手間のかかるところなのですが、このソフトはエディタ内で電子書籍を管理する仕様です。PCの保存先から引っ張ってきているわけではないのです。
(※正確には、calibreにデータを読み込ませた時点でcalibreが勝手にデータを複製し、エクスプローラ内の別場所にコピーが生成される仕様です)ちょっと手間な仕様ではありますが、やっぱりcalibreのエディタ画面が使いやすいため私は目を瞑っています。
何にせよ、これできっとちゃんと見開きで右開きな電子書籍の完成です!! お疲れ様でした!
いかがでしたか? ……って書きたくなるブログ内容になったな(笑)
とはいえ、とても簡易的な電子書籍メイキングだったので、要所要所のポイントしか書けていません。分からないことがあったら聞いていただければ全力で回答いたします。
……分かる範囲で!!!(重要)
いやはや、EPUBで書き出してビューワ掲載するって本当に難しいです。今回のために電子書籍についてめちゃくちゃ研究を重ねて試行錯誤しました。色んなソフトも試したし、実は結構大変でした。
なので、簡易とはいえメイキングを書けてちょっと救われた気分です。
今回のブログは多分きっと読んでも面白くない内容だったと思うんですが、でも書けた私は満足しているので許して欲しい! すみません! ここまで読んでくださって本当にありがとうございます!!
そして、一次創作サイトとして肝心の「描いた漫画とその内容についての所感」は、次回のブログでやる所存でございます。
今回の内容とは敢えて分けます。描いた創作物の所感を語るために砦にブログを設けたと言っても過言ではないですからね。(まあ語れるほど大した内容じゃないんだけど……www)
次のブログもきっとすぐに上げられると思います。久々にブログページを充実させられそうで楽しみだ~!
ではでは、近い内にまたお会いできると嬉しいです!
ここまでお読みいただきありがとうございました(*^▽^*)