電子書籍でエラーになる絵文字の検知
今回のエントリは。
経緯
・電子書籍でエラーになるのが絵文字だった。
・元データから絵文字を検知する必要が出てきた。
結論
・perlを使えば絵文字のチェックも簡単だった。
てことなんだけど、調べてみたらunicodeまわりが魔窟でびっくり。またハマりそうなのでメモ。
以下は、何を今さらという話が無駄に長くて、既知のかたには役に立たない内容です。
電子書籍に求められる基準はほぼ以下のふたつ
・Epubcheckでエラーはない。
・kindle previewerでエラーはない。
epubcheckでエラーがなければEPUB3の電子書籍として問題はないし、kindle perviewerでエラーをチェックするのは最大の配信サイトであるAmazonでエラーがあったら商売上よろしくないから。
上記２つのチェックをクリアしたのに、一部の配信サイトでエラーになるという指摘があって、追いかけてみると、問題になったのが「絵文字」
「😀」←こういうやつ
原稿に絵文字があったんで、あれ？これってイケるんだっけと思って作ってみて、上記２つのチェックにかけてもエラーはなかった。
文字コードがShiftJISの時代ならともかく、今どきはutf8。
utf8のおかげで文字化けなんかを気にする必要はほぼなくなった。機種依存、環境依存文字に神経質にならなくていいのはストレスフリーで、いい時代になったもんだとのんきに感慨深い今日この頃だったのに…。
文字として問題はないんだけど、配信サイトごとにビューワーが違ってたりして、そのビューワーが絵文字に対応してるかどうかのことだと思う。
「EPUB | CSS組版ブログ」
https://blog.antenna.co.jp/CSSPage2/archives/category/epub
↑絵文字なんかについて、縦書きのepub3が始まった頃に議論があったらしい。
（電子書籍元年当時の話が読めるのでオススメ）
「横倒しのまま」にするのか「正立させる」のか。文字の意味的に方向があるものは正立させる？とか。そのあたりのすり合わせが問題になってたっぽい（という理解でいいのかなあ）
これは縦書きの場合、見た目けっこう致命的なので、たぶん、絵文字の対応を見送ったビューワー＝配信サイトがあったんじゃないかと思う（憶測）
あるいは、そもそも、絵文字は環境ごとで見え方も違うのでそこが問題なのかもしれない（憶測）
そんなこんなの名残りもあって、面倒なものは却下、ということで今でもエラーにする配信サイトがある、んだろう（めっちゃ憶測）
epubcheckでもkindle previewerでもエラーにならない文字を自前で検知する必要にせまられる事態となった。
電子書籍のボリュームを目で追ってその中から絵文字を見つける、目視で探すなどありえない。必ず漏れが出る。
なもんで、絵文字の文字コードを調べてみて改めて今さらびっくりのunicodeだ。
ちなみに、文字を表示させるためには、以下の２本立てになっている。
・unicodeの文字コード表で文字を指定特定していて
・文字コードをエンコードすることで文字を表現する
これ、けっこう勘違いするんだけど、utf8というのは文字コードではなくてunicodeの文字コードをエンコードする方法の名前のこと。
以下のサイトを読んでまたびっくりすることをおすすめする。
「文字コード再入門 ─ Unicodeでのサロゲートペア、結合文字、正規化、書記素クラスタを理解しよう！」
https://en-ambi.com/itcontents/entry/2020/04/28/103000/
「書記素クラスタ - daiizfeel 2022」
https://isobe-yaki.hateblo.jp/entry/2023/07/20/194803
てのはともかく、読んでも難しいんで、なにか大変なことになってるんだなあ、でOK。
そもそもutf8でエンコードされた、日本語などは、ひと文字を表すのに、そのコードは3バイト使う。
ひとつの文字がアルファベットのように1バイトではないので
たとえば「日本語の文字」の６文字は、１つの文字に３バイトのコードが必要で、文字列の長さをバイト数でいうと18となる。
文字数いくつだっけ？て時に、バイト数の18ではなくて「正しく」６と数えるためにエンコードされている必要がある。
unicodeのコードをエンコードして初めて「文字として認識される」
このエンコードする方法がutf16だったりutf8とか呼ばれて、エンコードすることで初めて「文字として認識された文字を表示する＝扱うことができる」という変な日本語。
perlの場合、utf8フラグというのを使うことで問題解決する。
my $str = '日本語の文字'
my $utf8 = Encode::decode('utf8',$str)
print length($str)
→18文字
print length($utf8)
→6文字
perlはこのおかげで、文字の扱いについて、普段はまずほとんど、こんな面倒くさいことを意識する必要はなくて、なもんで、すっかりわけがわからず混乱してしまったのが昨日今日の話、だ（とほほ
unicodeとutf8についてのおさらいができたところで、やっと本題。
じゃあ、絵文字を検知するには絵文字が使ってるコードを見つければいいだけじゃん。簡単だろ、と思ったらまたひと悶着。
ていうか、ここからが今回の本丸、一丁目一番地（死語）
utf8フラグだけでは解決しない「結合文字」というのがあった。
「１つの文字を表示しているのは、１つのunicodeのコードポイント」とは限らない。
ひとつの文字を表示、扱うのに、複数のunicodeのコードポイントを使ってるケースがあって、見た目のひと文字とそれを表すコードは1対1ではない、ということ。
perlでutf8フラグがついていてもutf8の文字コード（←unicodeコード表によるコードではなくてエンコード後の文字コード）2つ結合した文字はlength()では意図通りに取得できない。ひと文字として扱ってほしいのに、たとえば二文字としてカウントされてしまってお手上げ。
実のところ、書記素クラスタというのはこういう結合文字も含めた呼び方で、書記素クラスタに対応すれば「結合文字」も「ひと文字」として扱うことができる。書記素クラスタというのがなんだか「とても面倒くさい」というのはこのあたり。
こうなってくると、電子書籍でエラーをなくすために、なんでこんなことまで調べにゃならんのか。そもそもレアケースだし、配信サイト個別のクレーム対応でいいんじゃないのか。と思わないでもないけど。乗りかかった船だししょうがない。
話がそれた。
perlはこれも解決してくれる。て、テキストを扱わせたらperl最強じゃね？
「絵文字を含む文字列を分割～解説編～」
https://www.lemorin.jp/perl/3b_split_char.html
↑こちらのサイトに知りたいことのすべてがあった（多謝
my $line = Encode::decode('utf8', $_);
my $len = length($line);
print $len . "\n";
my @x = $line =~ m!\X!g;
print scalar(@x) . "\n";
length()では「見た目のひと文字」じゃなくて困ってたところ、perlでは「いい感じに」「ちゃんと」文字として認識できる文字のための正規表現「\X」が用意されてた。
「perlの正規表現」
https://perldoc.perl.org/perlrebackslash#Misc
ということで、やっと本エントリの締めとなります（長っ！
問題のない文字ダネを削除して残った文字を正規表現「\X」で配列に取り出して、「見た目のひと文字」をコードポイントにバラして16進表現して絵文字のコードに検索をかける。検索がヒットしたら、それはイコール絵文字。
「HTMLの絵文字 文字コード表」
https://gray-code.com/html_css/list-of-emoji/
↑絵文字のコードはこちらの一覧から拝借しました。
こちらで掲載されているコードを絵文字判定の対象としました。
これでやっと絵文字検知。
前から言ってるんだけど、人間の目視確認、手作業修正（目grep、手marge）なんて1mmも信用できない。特におれ。なので機械に頼めるなら機械に任せるのが正解。
↓こちらも参考になりました
「Perl 5.26 & Unicode 9.0 で変わる書記素クラスタ(grapheme cluster)のお話」
https://shogo82148.github.io/blog/2017/08/25/unicode9-grapheme-cluster/
「UTF-8の文字コード表」
https://orange-factory.com/dnf/utf-8.html
本エントリとはまったく関係ないけど。
この埼玉県八潮市の資料館はびっくりの充実。行く前は小学校の教室ぐらいなもんだろ、と思っててすみませんでした。
交通アクセスにちょっと難があって、気楽にとはいえないけど、行けるかたはぜひぜひ
https://www.city.yashio.lg.jp/kurashi/shisetsuguide/shiryokan/index.html
[08/25 16:58:54] いろいろ間違えてたので改稿
「文字につかうバイト数」と「コードポイント」を混用していた、という乱暴な理解だった（恥
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
KDP登録時の「シリーズ」の表示
KDPに登録する時に「シリーズ」を設定したんだけど、これってどんな表示？どこに表示されるの？というメモ、あるいは小ネタ。
日野裕太郎の12月新刊『うそつき、祈祷師になる』は10月既刊『淀んだ川で待っている』と同じ世界観で登場人物も重なるので「シリーズ」にしたい。
ということで、KDPの登録画面にはしっかり「シリーズ」というのがあるので記入した。
ここでシリーズ登録するとどうなるのかというのが以下。
商品詳細ページ。タイトルに続けてシリーズ名が表記されるのはともかく。スクリーンショットの右下を、よぉく、見ていただきたく。
小さくてわからないのでその部分だけのスクリーンショット。
「類似の本」というリンクになっていた。
せっかくシリーズとして扱ってほしいのに、これは小さい。目立たないよなあ。
でもまあ、このリンクをクリックして開くと
と、意図どおり、シリーズとして登録した2冊がリストアップされている。並び順はシリーズ番号の新しもの順(降順)になっている。
シリーズとして一覧してもらうには良いページなので、シリーズ登録ができるのはありがたい、かな。個別の詳細ページでもっとわかりやすいところに案内(リンク)をつけて欲しいところ。
URLを見ると
「field-collection」というパラメータにシリーズ名「手業の民の物語」が設定されていた。
ちなみに、どちらも今のところKDPセレクトに登録。KindleUnlimited(Kindle読み放題)なので、プライム会員のかたや、読み放題プランに参加のかたは、無料で読めますので、いかがでしょう。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
ダブルクリックでepubもmobiも開けるようになった
先月、WINDOWS10にしたら電子書籍ファイル、epubファイルもmobiファイルもダブルクリックで開くようになっていてビックリした。
…て、ファイルの関連付けというだけのことなんだけど。
Kinoppyをインストールすればepubファイルと関連づけされて、epubファイルをダブルクリックすればKinoppyが立ち上がって読めるようになってたのは知ってたんだけど、まさかmobiファイルダブルクリックでKindle for PCが立ち上がるとは思わなかった。いや、なんとなくダブルクリックしてkindleが立ち上がって仰天したのが、つい今さっきの話。
kindleというかKDPに登録、アップロードするための電子書籍ファイルはEPUB3ファイルをkindlegenというアマゾンの提供するコンバーターでmobiファイルに変換する。
mobiファイルに変換後、本文など中身のチェックのために、今までkindle previewerというビューワーで閲覧＆チェックしてた。
このプレビューワーは
1 Paperwhiteなどのe-ink端末やFire、iOSアプリの表示を切り替えて確認できる
2 目次やコンテンツ情報を確認できて整合性のチェックができる
と便利なんだけど。
1 実際に販売されているデータとmobiファイルが同一で実機でも同じ表示になっているのか、ビミョーで信用しきれない。
2 epub3ファイルの時点でepubcheckを通してエラーが出てなければ問題がない。
てことで、ウチの非力なネットブックじゃ動作ももっさりしてるので、本文のチェック(縦中横やルビ、圏点、太字など)だけの場合にはだるい作業だ。
でも、Kindle for PCなら、非力なネットブックでもさくさく問題なく読める。
Kindle for PCはもともとローカルのmobiファイルを所定のフォルダ(kindle_for_pc)に入れておけば読めるんだけど「mobiファイルをフォルダにコピーして」「Kindleを立ち上げて」「ライブラリで選んで」読むのは面倒くさかった。mobiファイルを修正したら、この手順を最初からいちいち繰り返し。ルビを一箇所訂正するだけでこの手順が発生する。
これがmobiファイルをダブルクリックでスグに読めるんだから大助かり、だ。
（もちろん、プレビューワーでの各デバイスごとの表示確認、というか表示の違いの確認は別途必要）
epubはKinoppyに、mobiはKindleに関連づけられている。
mobiファイルをダブルクリックするとKindle for PCが立ち上がる。
これまで、たとえば同人誌や個人出版などで電子書籍を作っても、いざ配布する時に、どうやって読むのかうじゃうじゃ説明しなきゃいけなかった。説明する方もされる方もなんだか面倒くさいし、まあいいや、になってなかっただろうか。
でも、それが「Kinoppyをインストールしてください」「kindle for PCをインストールしてね」だけでいいんだなあ。
(※mobiファイルはアマゾンの規格なので配布するのは利用規約的に微妙かな)
Kindle for PC
https://www.amazon.co.jp/dp/B011UEHYWQ
紀伊国屋Kinoppy
https://k-kinoppy.jp/
世の中、まだまだ知らないことばかりだ。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
【改良版】kindleの小説無料サンプルを縦書きでブログに貼り付け
Kindleの無料サンプル、試し読みを縦書きにしてブログに貼り付けるというのを、先日やってみたんだけど。
現状のCSS3のマルチカラムは縦書きがまともじゃない。
カラムの高さが取得できなくて2段目以降がオーバーフローしてしまうことがある。親要素に高さが伝わらないので、たとえばページの最下部にありがちなフッターを乗り越えて表示したりしてしまうのだ。
またそのせいか、一段の高さと表示段数の計算がわけわかめ状態。CSSで指定した高さになっていなかったりしてうまくコントロールできない。ブラウザごとで解釈がバラバラ。
つまり、現状のCSS3のマルチカラムを使って縦書きにすると。
ページのレイアウトデザインが意図どおりコントロールできない。ブラウザが違うと一段の字数・行数が違ってくる。ということになる。
ありえなかった。
たぶん、時間が解決してくれる。そのうちCSS3のマルチカラムでも縦書きがちゃんと意図通りに表示される時代がやってくる。
でも、いったいいつになるのか、初老フリーターに残された時間は短い。
てことで、段組表示用に、字数x行数でテキストを区切ってひと塊ずつdiv要素でくるんだものを返すようにした。
CSS3のマルチカラムで起こっていた問題はこれで解決（禁足なんかの判定がバギーだけど…）
意図通りに縦書きで段組されて（＝マルチカラムで）表示されるようになった。
↑28字x20行のカラムごとに表示している。
でもこれは、CSSのマルチカラムではないので、レスポンシブというか画面の幅に合わせて柔軟に広がったりしない。N字xN行の塊が表示されるだけ。
今どきはスマホファーストでもあるので、それだとなんかアレな感じ。その場しのぎというかスマホでのアクセスの場合、表示する行数をPCの半分にするようにした。
各々一段10行表示となる。
Android
iPhone4S
https://sandbox.doncha.net/sample-kindle.html
↑表示のサンプルページはこちら
（ちなみに、無料サンプルについてくる「目次」toc は削除）
以下のコードを、縦書きでサンプルを表示させたいところに貼り付け。
1行目。
・「ASIN」の部分にサンプルを表示させたい本のASINコードを記入。
・「data-cols」が一行の字数。デフォルト28字
・「data-lines」が一段の行数。デフォルト20行
※「はてな」や「fc2」などのブログサービスでは「HTML編集」で上記のコードを貼り付ける。
現状、電子書籍をブラウザで読む・体験するのには 「BiB/i」 が最適最強。
ただ、WEBはクリックのコスト・ハードルがかなり高い。
サンプルをさらっと読んでもらいたいと思っても、クリックしなきゃ読めないのはツライものがある。前にも書いたけど、楽天のフンドシのような長いページはそれなりの意図意味がある。
ページに着地したら余計なアクション不要でサンプルが目の前に表示されている状態にしたい。
ということでごそごそいじってみた。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
日野裕太郎作品一覧サイトの制作
同人誌、商業誌、電子書籍と作品発表の場所というか販路が多岐に渡るので、発行した書籍をまとめてチェックできるサイトを作った。
日野裕太郎の本::駄文の王様
https://hino-yutaro.doncha.net/
宣伝力が弱点の個人作家（…「個人作家」て変な言葉だな）なので、作家名で検索されるようなことも少ないだろうけど、そんな希少で貴重な機会は大切にしたい。
現状はSEOが断然格段圧倒的に強いAmazonの日野裕太郎作品一覧ページが検索結果上位に来る。それはそれでいいんだけど、ウチはAmazonだけで販売してるわけではない。
電子書籍はibooks、kobo、BOOKWALKERでも販売しているし、同人誌はコミケやコミティア、文学フリマなどのイベントで手売りあるいは委託販売している。そちらの情報も掲載したサイトを用意して検索してきた読者のかたにお知らせできるようにしておきたい。
というのが今回サイト制作するにあたっての動機。
わたしの雑記帖に混じってたんじゃ検索にも引っかからないし、URLを新たに作っていろいろと散らばっている情報を集積、掲載することにした。
・手元で作ってあった情報
・Amazonにある書誌情報
・HappyReadingにある同人誌情報
ただ、これらからネタ（掲載情報）をそのまま引っぱってくるだけだと、サテライトサイトみたいなもんでgoogle先生に嫌われる。
オリジナル情報、付加情報が必要。
・日野裕太郎の公式ブログRSS
・エゴサーチしておいたblogやtwitterでのクチコミ
・無料サンプルというか試し読み、立ち読み
このために、ここ2回ほどの雑記帖のネタ。
その1 同人誌情報を取得するために
「創作文芸見本誌会場HappyReadingに書誌情報APIを実装しました」
その2 kindleの無料サンプル（試し読み）を縦書きでページに貼り付けるために
「kindleの小説無料サンプルを縦書きでブログに貼り付け」
となった（商業誌の紙印刷本に関してはアマゾンに無料サンプルがないので諦め）
そしてできた以下のページたち。
商業誌の紙印刷本のページ
『強引執着溺愛ダーリン あきらめの悪い御曹司』
https://hino-yutaro.doncha.net/?asin=4801906095
電子書籍のページ
『夏煉喧騒曲』
https://hino-yutaro.doncha.net/?book=12
『道化の沈む夢』
https://hino-yutaro.doncha.net/?asin=B00MQL0EIE
同人誌のページ
『うそつき、祈祷師になる』
https://hino-yutaro.doncha.net/?happyreading=756
トップページには新刊・既刊情報に同人誌即売会イベント参加情報なども入れてみた。
https://hino-yutaro.doncha.net/
一応、スマホにも対応したけど、サンプルの縦書き表示でスマホのChromeが高さをうまく判定できないようで、スマホの場合はサンプル表示を諦めた。うーん、なんでだろ。
titleタグやaltタグはしっかり入れる、Ajaxは使わないなどそれなりにSEOを考慮。
xmlだのRSSだの、LWPでリクエストだの、なんか久しぶりにサイトを作ったような気がする。
やっぱごそごそとサイトを作るのは面白いなぁ。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
kindleの小説無料サンプルを縦書きでブログに貼り付け
kindleは無料サンプル、試し読みが提供されている。
ttp://kindleweb.s3.amazonaws.com/content/ASIN/gz_sample.html
この「ASIN」の部分をamazonの商品ID、ASINにしてアクセスすると無料サンプルが読める。権利的な問題からかサンプルが用意されていない本もあるけど、KDPの個人出版の場合はおそらく確実に無料サンプルが用意されている。
これを縦書きにしてブログなんかに貼り付けられるようにしてみた。
以前、同じようなことを試して書いた、その改良版(ていうか、やっとfirefoxが縦書きに対応したのでこの手のネタは注釈なしでイケるのがありがたい)
百聞は一見に如かずとか論より証拠とか。
https://sandbox.doncha.net/sample-kindle.html
↑ページはこんな感じ。
「はてな」でも検証確認
以下のコードをHTMLやブログ記事にコピー＆ペーストすると、そこに無料サンプルを縦書きで表示します。
※「はてな」や「fc2」などのブログの場合は「HTML編集」でペーストしてください。
1行目
・data-asin
ここにASIN、kindleの商品コードを記入
・data-column
一段落の高さ(emでの指定になります) デフォルトは20
・data-font-size
フォントのサイズ(%での指定になります) デフォルトは100
data-columnとdata-font-sizeを調整するとそれっぽくページにおさまります。
KDPを利用して自分の作品を公開しているひとにとっては(サンプルなら自分でテキストを持っているので)ほとんど役に立たないシロモノですが、ブログに貼り付ける手間をほんの少しラクチンに。
2016/2/5 [15:15:47]
現状では、このCSS3マルチカラムを使った縦書きの段組が使い物にならないことが判明。
CSS3のマルチカラムを使わないで、縦書き段組を実現する方法についてはこちら
【改良版】kindleの小説無料サンプルを縦書きでブログに貼り付け
https://t2aki.doncha.net/?id=1454652947
縦書きをシンプルに実現するのはまだ難しい。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
