各ストアビューア向けのEPUB制作で、画面サイズに対して%で画像表示サイズを指定することは長らくできておらず、悩ましい問題です。これは2014年頃にEPUB組版表現の対応状況を調査し始めてから状況がずっと変わっていません。特にKindleでは、PaperWhiteなどの電子ペーパー専用端末とAndroid版では％指定が効くものの、iOS版Kindleアプリで効かないという状況が続いており（参考／項目7-9）、このために画像を画面内の特定のサイズで表示させるために「余白部分込み」で画像化するというまるでWebの初期のようなTipsを使用せざるを得ませんでした。
　これをやってしまいますと、ビューア側の設定で背景色を変えた際に余白部分が白く表示されて見えてしまうので可能ならば避けた方が良いのですが、サイズ指定が効かないよりはマシということで使われてきたわけです。
　ただ、最近JAGATの研究会活動の一環として改めて挙動をチェックしてみたところ、％指定が効かなかったiOS版Kindleでもどうやら単位にvw/vh^※1を用いたサイズ指定なら効くことがわかりました。であるならば、もしかしたら%とvw/vhを同じ値で指定してやることでKindleの全プラットフォーム共通のサイズ指定ができるかもしれません。ということで試してみよう、というのが今回の趣旨です。

　ということでひとまず目的は達しました。とはいえ％でのサイズ指定が効かないのはKindleだけではなく、Mac版iBooks（もうApple Booksですが）でも同様だったりしますので、出来るなら将来的にはメディアクエリは外したいところです。各電書ストアビューアの表示対応を期待します。

※1 vwは表示中の画面（ビューポート）の横幅に対しての%指定、vhは高さに対しての%指定の意味。参考記事はこちら。
※2 電書協EPUB3制作ガイドのCSS記述を参考にしている。
※3 中の人に報告上げてブログ記事作る間に該当のビューアで修正がかかった模様。対応が早くてありがたい。とはいえ不具合が出るビューアが1社だけとは限らないので記事としては残しておく。
※4 参考：http://epubsecrets.com/media-queries-for-kindle-devices.php

おまけ
EPUBで電書協ガイドの規定クラスに追記するには以下の形になるはず。book-style.cssの作品別カスタマイズ領域に書けばよい。

CSS

/* iOS版Kindleでのサイズ指定反映対策（vh/vw追加指定） */ @media amzn-kf8 { .height-010per { height: 10vh; } .height-020per { height: 20vh; } .height-025per { height: 25vh; } .height-030per { height: 30vh; } .height-033per { height: 33vh; } .height-040per { height: 40vh; } .height-050per { height: 50vh; } .height-060per { height: 60vh; } .height-067per { height: 67vh; } .height-070per { height: 70vh; } .height-075per { height: 75vh; } .height-080per { height: 80vh; } .height-090per { height: 90vh; } .height-100per { height: 100vh; } .width-010per { width: 10vw; } .width-020per { width: 20vw; } .width-025per { width: 25vw; } .width-030per { width: 30vw; } .width-033per { width: 33vw; } .width-040per { width: 40vw; } .width-050per { width: 50vw; } .width-060per { width: 60vw; } .width-067per { width: 67vw; } .width-070per { width: 70vw; } .width-075per { width: 75vw; } .width-080per { width: 80vw; } .width-090per { width: 90vw; } .width-100per { width: 100vw; } }

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

/* iOS版Kindleでのサイズ指定反映対策（vh/vw追加指定） */ @media amzn-kf8 { .height-010per { height:  10vh; } .height-020per { height:  20vh; } .height-025per { height:  25vh; } .height-030per { height:  30vh; } .height-033per { height:  33vh; } .height-040per { height:  40vh; } .height-050per { height:  50vh; } .height-060per { height:  60vh; } .height-067per { height:  67vh; } .height-070per { height:  70vh; } .height-075per { height:  75vh; } .height-080per { height:  80vh; } .height-090per { height:  90vh; } .height-100per { height: 100vh; } .width-010per { width:  10vw; } .width-020per { width:  20vw; } .width-025per { width:  25vw; } .width-030per { width:  30vw; } .width-033per { width:  33vw; } .width-040per { width:  40vw; } .width-050per { width:  50vw; } .width-060per { width:  60vw; } .width-067per { width:  67vw; } .width-070per { width:  70vw; } .width-075per { width:  75vw; } .width-080per { width:  80vw; } .width-090per { width:  90vw; } .width-100per { width: 100vw; } }

（2018.10.1）

Amazon Kindle向けコンテンツ作成の仕様書、「Amazon Kindle パブリッシングガイドライン」が更新されていたようですので、更新部分をざっくりとチェックしました。英語版はこちら。以下、見出しは元文書の見出し項目そのまま、赤字は特に重要と思われる箇所です。ご一読ください。

◇

今回、Real Page Number対応やepub:type 属性での脚注ポップアップ対応、MathML対応など大きな追加ポイントがありましたが、潜在的に最も大きな変化は「タイプセッティングの改善」（まだ日本語非対応ですが）に関するものでしょう。これは改訂履歴の項目の大部分がこれ絡みであることからわかります。
どうもずっとこの機能は謎のままだったのですが、今回の改訂から推測する限りでは、フォントサイズや端末の種類に伴う画面サイズなどの変化に応じてKindle側が随時CSSの値の調整を行う機能であるように思われます。つまりメディアクエリ的なことをKindleが自動でやるということです。これは日本語コンテンツでも使えるようになれば相当以上に大きな変化がもたらされるものと思います。ただし実機でのコンテンツ表示チェックは相当以上に大変になりそうです。Amazonがレンダリングエンジンの不具合を長期放置している理由もこれの対応が絡んでいるような気はします。

（2018.8.6）

　EPUBを作るためにフリーのmac用テキストエディタ「mi」（旧ミミカキエディット）のバージョン2.1を愛用していたのですが、そろそろOSのバージョンが上がってきて64bit対応しなければならないのが見えてきたので正式リリースバージョンの出ていたバージョン3.0を試したところ、かなりの機能強化がなされていたようなのでちょっと紹介です。以下新機能や前からあったけれど良いなと思っている機能を箇条書きで。

1.タブセットを保存

タブセットを保存

　miはもともとタブ表示機能を持っていたテキストエディタでしたが、3.0で開いていたタブの情報を保存しておけるようになったようです。作業切り替え時などに混乱を防ぐために開いていたタブを一旦閉じざるを得ないことはよくあるので有難いかも。

2.ファイルパスをコピー

ファイルパスをコピー

　地味だけど現在開いているファイルのパスをコピーできる機能が追加。コード書いている時などにターミナルで動作テストはよくやるので有難いかも。

3.強化された検索置換機能

強化された検索置換機能

　検索置換関係が相当機能強化されている様子。一度設定した検索置換セットを「検索メモリー」機能で名前を付けて保存しておけます。スゴい便利そう。それから置換テーブルを別ファイルで用意して一括置換もできるようになったようです。また、「一致テキストを新規ドキュメントに抽出」などという機能も見えます。正規表現もドロップダウンメニューから選んで入力できるように。

4.マルチファイル検索／マルチファイル置換

マルチファイル検索

マルチファイル置換

　miには2.1からマルチファイル検索の機能がありましたが、3.0でマルチファイル置換の機能が加わって強力になりました。一度マルチファイル検索を実行してから置換対象ファイルを選んで置換を実行する形なのもうれしい感じ。置換実行前にファイルをバックアップなどという機能もあって至れり尽くせり。この辺の機能でうっかりミスをやらかすと悲劇が待ってますからね。

5.コードの折りたたみ表示

コードの折りたたみ表示

　コードの折りたたみ表示にも対応したようです。長めのスクリプトを書くときに全体の見通しが良くなりそう。

6.見出しリスト

見出しリスト

　見出しをリスト表示してクリックでジャンプ。まあこれは2.1からあった機能なんですが便利なので紹介。EPUB用のXHTMLとかだとかなり長めのテキストを編集することになるので見出しで飛べるのは有難いです。

7.テキストの比較

テキスト比較

　いわゆるdiff機能ですがかなり機能強化されたようで「ファイルと比較」「クリップボードと比較」などの機能が増えたほか、設定すればgitやsubversionとの連携もできるようになった模様です。

8.モード機能

モード機能

モード編集画面

　miと言えば「モード」機能が強力無比です。自分で「モード」を作ってよく使うタグコマンドなどを簡単に入力できるようにし、特定の用途用の専用エディタに仕立て上げることができます。ショートカットもカスタマイズできますし各種スクリプトも仕込めるのでまあ相当なことができるわけです。私はこんな感じで使ってます。

9.縦書きモード

縦書き表示の対応

　今回から縦書き表示にも対応したようです。設定すれば原稿用紙風の表示も可能。簡単なワープロ代わりとしても使えるようになってきた感じでしょうか。

10.サブ画面表示

サブ画面表示

　画面を左右2分割して参照テキストを表示しながら編集できるようになりました。CSSファイルを開いてクラス名を確認しながらXHTMLを修正するなどのシーンで威力を発揮しそう。

11.ビューの縦分割

画面分割表示

　編集中のテキストの縦分割表示もできます。同一ファイル内でのコピー＆ペースト作業は日常的に発生するので有り難いかと。

12.単語の自動ハイライト

単語の自動ハイライト

　個人的にスゴいなと思ったのがコレ。カーソルを置いた場所を含む単語を自動識別して同じ単語をリアルタイムでハイライト表示します。挙動を見る限りではどうやら形態素解析まではやっていないようで、連続する漢字／カタカナ／ひらがな／英文字を識別しているだけのようですがまあ挙動も軽いしそれで必要十分な感じ。ナチュラルに修正の見落としが減りそうで素晴らしいです。

13.テキストハイライトパレット

テキストハイライト表示

　特定の単語を指定してハイライトさせることもできます。「テキストハイライト」パレットに単語を登録してやればOK。ハイライト単語リストを複数登録しておいて切り替えて表示させることもできるようです。

14.テキスト情報パレット

テキスト情報

　「テキスト情報パレット」で、特定の文字のUnicode値などを気軽にチェックできるようになりました。これ個人的にはとても嬉しいです。macOSの以前のバージョンではmi等でテキストを選択してATOKの文字パレットを開くとコードポイントがチェックできていたのですが、バージョンアップで出来なくなってしまっていたので。

15.プレビューパレット

プレビュー表示

　今回からXHTMLなどの表示結果をプレビューモードで見ながら編集できるようになりました。縦書き表示の結果もきちんと反映されていましたので、そこまで凝ったレイアウトでもなければ十分役に立ちそうです。

◇

　どうでしょうか。なかなか山盛りの機能追加で見ていて嬉しくなって来てしまいます。これがフリーウェアで本当にいいのかという感じ。触れる環境にある方はぜひ試してみてください。

（2018.6.26）