動画の電子書籍に興味があるので、調べたことをまとめてみます。
noteでgifがアップロードできない事件があってよりやってみようかなとなりました。
目次
【作り方】動画の電子書籍の埋め込み(ePUB,Html,PDF)
ePUBとHtml
軽くテストしたところ次のことはわかりました。
- ePUBはgifやmp4の動画の再生は可能です。
- Htmlはgifやmp4の動画の再生は可能です。
実際に少しだけ試してみました。
GifはHtmlなら動きます。markdownは画像の貼り方と一緒のようです。
ただ、いろいろパラメーターを追加したかったので、普通に書きました。
<video src="./theme/video/test.mp4" width="100%" poster="./theme/images/default.png" controls>
</video>上記のように書くとhtmlはOKなんですけど、ePUBではエラーがでます。Apple Booksで検証しました。
this page contains the following errorsそこで次のように書き直したらうまくいきました。controlsは省略した書き方は禁止のようですね。
<video src="./theme/video/test.mp4" width="100%" poster="./theme/images/default.png" controls="true">
</video>あと、preload=”none”をつけちゃうとビデオの中央などをクリックしたとき再生されないようです。
ePUBとhtmlの使い分け
つまりePubやHtmlの電子書籍ならいける気がします。個人的に印刷しなければ、もうHtmlでいいんじゃないの？って思っているところもややあります。
ただ、ePUBの利点はないのでしょうか。調べたところ、AndroidはともかくiPhoneやiPadはhtmlに最適なビューアーがありませんね。またなぜかGoogleドライブやDropboxからHtmlを開く手法もサポートが終了していました。。個人的にePUBはあまり好きなフォーマットではないのですけど、だからePUBも必要そうです。。
逆にPCはePUBのビューアーが少ないです。ブラウザでは開けません。Htmlなら、WindowsやMacのブラウザでみれるためhtmlでよしです。
つまり両方必要そうです。
Androidはmoon readerという万能リーダーがあります。
gifとmp4はどっち?
- gifはどうしても画像の劣化などが言われるますからmp4でしょうか。
- またmp4なら音声も入れられます。
- mp4ならコントローラーがあるため一時停止が容易です。
- 容量的にもmp4でしょうか。
Googleもgifよりmp4と言っていた記事は見ましたし、Twitterはgifであげても内部的にmp4に変換しています。
PDFでGifやMP4の動画の埋め込みはできない？
PDFはGIFに非対応なんです。Adobe Acrobat Proは動画フォーマット（.movや.mp4）に対応しているようですが、容量などいろいろ課題があるようです。。実用レベルではない気がします。
では埋め込みではなくリンクを次に考えますよね。ローカルリンクと外部リンクがあります。
また詳しく検証していないのでわかりませんがローカル環境の相対パスもやや問題がありそうです。
MarkdownをPDFに変換すると相対パスのリンクが機能しなくなるのが辛い
— よしはる (@Yossy_Hal) March 8, 2022
@walz10432 ご質問ありがとうございます。ハイパーリンクしているMP4のデータは、オンライン上にございますか？それともローカルのデータでしょうか？
— Surface Japan (@SurfaceJP) January 8, 2016
@walz10432 ご返信ありがとうございます。考えられる内容としてハイパーリンクが絶対パスとして指定されていない場合がございます。こちらのページをご参照の上、ご確認いただけますでしょうか？https://t.co/xTGZR0gGko
— Surface Japan (@SurfaceJP) January 9, 2016
余談ですけどsurfaceさん、いろいろなことにお答えになるんですね😳
まあ、知っているかぎりGoogleよりマイクロソフトの方が顧客対応は丁寧な企業なんですけど…。
結局、画像にして外部リンクみたいなやり方が現実的なんですかね?
ただ、リンクも随分古い手だという気がして、結論としてはPDFはやっぱダメ!PDFではなくePUBとhtmlで作ることにしました。ePUBはkindleなどで使われている電子書籍のメインフォーマットですね。
gifやmp4で再生ボタンをつける
CSSのみでもできるみたいですね。
あるいはGiffferを使っているか。トリガーもマウスオーバーにしている人も。
mp4はいつか追加します。。
電子書籍の動画の埋め込み、容量の上限は?
ePUBのフォーマット自体には特定の「ファイル容量上限」はないようです。ただし、電子書籍ストアごとに決まりごとがあるようです。
格電子書籍ストアのePUBの容量の上限から、動画の大体の平均の容量を想定して、いくつ入れられるか計算することになります。
boothの動画の埋め込み上限
たとえば、技術同人誌で有名なbooth。追加もできますし十分な容量ですかね。
1つのショップで商品登録の際にアップロードできるデータ容量は合計10GBまでです。
https://booth.pixiv.help/hc/ja/articles/230690347-%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E5%95%86%E5%93%81%E3%81%A7-1%E3%81%A4%E3%81%AE%E3%82%B7%E3%83%A7%E3%83%83%E3%83%97%E3%81%A7%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89%E3%81%A7%E3%81%8D%E3%82%8B%E3%83%87%E3%83%BC%E3%82%BF%E5%AE%B9%E9%87%8F%E3%81%AE%E5%88%B6%E9%99%90%E3%81%AF%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%81%8B-#:~:text=1%E3%81%A4%E3%81%AE%E3%82%B7%E3%83%A7%E3%83%83%E3%83%97%E3%81%A7%E5%95%86%E5%93%81,10GB%E3%81%8B%E3%82%89100GB%E3%81%A8%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82
BOOTH Apps 容量追加をご利用いただくと、アップロードできるファイルの総容量が10GBから100GBとなります。
boothの1ファイルの制限はどうでしょう。
1ファイルのアップロードできるデータ容量は1GBまでです。
https://booth.pixiv.help/hc/ja/articles/230690327-%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E5%95%86%E5%93%81%E3%81%AE-%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89%E3%81%A7%E3%81%8D%E3%82%8B1%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E5%AE%B9%E9%87%8F%E3%81%AE%E5%88%B6%E9%99%90%E3%81%AF%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%81%8B-
Apple Booksの動画の埋め込み上限
Apple Booksは意外と頑張っています。
https://help.apple.com/itc/booksassetguide/ja.lproj/static.html
zipファイルの最大サイズは、2GB です。
kindle(キンドル)の容量上限
アマゾンのキンドル。
アップロードできる電子書籍の原稿ファイルの最大サイズは 650 MB です。KDP ではこのサイズまでの Word 文書 (doc および docx)、MOBI、EPUB、HTML、および PDF ファイルを変換できます。
https://kdp.amazon.co.jp/ja_JP/help/topic/G200730380#:~:text=%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89%E3%81%A7%E3%81%8D%E3%82%8B%E9%9B%BB%E5%AD%90%E6%9B%B8%E7%B1%8D%E3%81%AE,%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E5%A4%89%E6%8F%9B%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82
動画の電子書籍の場合、ファイル分割などが言われます。
kindleなど動画の埋め込み解像度
Kdpをみると次のように書かれていますね。
ワイドスクリーン: 704 x 396 (もしくはその他のワイドスクリーン画面比率)、フルスクリーン: 640 x 480
https://kdp.amazon.co.jp/ja_JP/help/topic/GCRRGQL2SPQXYXD4#video
Youtubeは1280×720が主流のようです。
720p: 1280×720
https://support.google.com/youtube/answer/6375112?hl=ja&co=GENIE.Platform%3DDesktop
参考までにUdemyをみてみましょう。
コースのビデオファイルはそれぞれ、720p以上、サイズは4.0 GB未満でなければなりません。
https://business-support.udemy.com/hc/ja/articles/360022570274-%E3%83%93%E3%83%87%E3%82%AA%E3%81%AE%E5%9F%BA%E6%BA%96%E3%81%A8%E3%82%AB%E3%83%A1%E3%83%A9%E3%81%AE%E9%81%B8%E3%81%B3%E6%96%B9-#:~:text=Udemy%E3%81%A7%E5%BF%85%E8%A6%81%E3%81%AA%E3%83%93%E3%83%87%E3%82%AA,%E3%81%AA%E3%81%91%E3%82%8C%E3%81%B0%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%9B%E3%82%93%E3%80%82
楽天koboの容量上限
楽天koboは意外と厳しいんですよね。
楽天Koboライティングライフではファイルサイズが100MB以下でない場合、アップロードすることが出来ません。
https://kobo.faq.rakuten.net/kwl/detail/000001117
アップロードとインポートがイコールなのかは検証が必要ですけど。
仮のこの容量なら楽天koboを電子書籍のビューアーで使うことを想定すると、100mbにおさめようということでしょうか。
Apple Books は KC2 の生成した画像そのままで問題なかったけど、楽天 Kobo はファイルサイズの制限が厳しく（100MB）画像サイズを縮小することで対応したのが、もう１つの手間でした。
— こんにちわ！ AI FORUM (@hello_ai_forum) August 4, 2021
これで、電子書籍は Amazon Kindle, Apple Books, 楽天 Kobo をクリアした、と。
疲れた。
gif1枚10mbだったらgif10枚です。ちょっと厳しいですね。
gif1枚5mbだったらgif20枚です。
まあ、自サイトでstripeなどで販売するなら問題ないんですかね。とはいえ、ユーザーのPCを圧迫するのも問題ですからバランスが必要ですかね。
640にするのか1280にするのか動画の本数とサイズをみて調整するという感じでしょうか。
電子書籍リーダーはePUBで動画再生できない!?
ePUBの電子書籍リーダーは動画再生の対応状況がひどかったです(´・ω・｀)
せっかく検証したためめもを残しておきます。
動画再生 | その他 | |
Apple Books | ◎ | |
Kindle | 動画の挿入が消える | CSSがひどい表示崩れ |
楽天kobo | 再生できないマーク | |
honto | 再生できないマーク | |
キノッピー | 動画を入れると落ちる…?? |
Apple Booksは素晴らしかったです。Apple Books専用になってしまいますね。
Gifは拡大すると静止画になってしまうため、問題ありなのですよね。スマホは拡大しないと見にくいのです。
Kindle in Motionは進展がない!?
余談だが、kindleには Kindle in Motionがあるようです。アマゾンのサイトをみてのとおり、イラストが動いています。2016年ごろにはじまったようです。
ポチップ
ただ、その後、忘れ去られたのでしょうか。一般向きに作られている話は聞きませね。
ちなみにkindleはmp4になっています。
.mp4
https://kdp.amazon.co.jp/ja_JP/help/topic/GCRRGQL2SPQXYXD4#video
参考になれば幸いです。
コメント