IMAGEDRIVE

音声合成エンジン VOICEROID+ で作成した朗読音声とテキストを同期して再生する EPUB3 の試作品を作った－ EPUB3、Media Overlays、VOICEROID+ －

IMAGEDRIVE — Tue, 07 Feb 2012 14:31:42 +0000

EPUB3 には動画・音声とテキストを同期させる仕様「EPUB Media Overlays 3.0（以後、Media Overlays）」があります。
この Media Overlays を利用して見て読むだけでなく聴いて読む EPUB3 を作って見ました。
第36回 Sugamo.css のフォローアップ記事でもあります。
なお再生する環境は iOS5 以上の iPhone4/iPad、リーディングシステムは iBooks1.5 以上を想定しています。

取り急ぎ完成した EPUB3 を見たい方はこちら

制作手順

1)準備

何はともあれ EPUB3 のファイルが必要です。適当に作って準備しましょう。
今回は作りおきのファイルを利用しました。

サンプル1：ASCANDALINBOHEMIA.epub

2)再生箇所の指定

音声と内容を同期させるため、HTML 文書内のそのテキストを読み上げている音声と同じ範囲を id 属性で指定します。

加工前

「まだデータがない。データなしに理論を立てるのは、致命的な誤りだ。無意識のうちに、事実と符合するべく推理するのではなく、推理に符合するべく事実を歪曲することになる。しかしここに紙がある。演繹してごらん。」

加工後

指定できる範囲は任意ですが、音声を再生している箇所をハイライトなどの視覚効果を加えることができるので（後述）、あまり広範囲を指定すると指定した範囲内のどこを再生しているのかわかりにくくなると思います。
今回の再生範囲の区切りは特に短いものを除いては基本的にセンテンスとしました。

3)合成音声の制作

次に音声ファイルを作成します。音声データは人が朗読するものを録音して利用するのが一般的なのかは知りませんが、今回は AH-Software が発売している音声合成エンジン『VOICEROID+ 結月ゆかり（http://www.ah-soft.com/voiceroid/yukari/）』を使用しました。

他にも多く音声合成エンジンがありますが、『VOICEROID+ 結月ゆかり』を選んだ理由としては以下の点です。

機能と価格のバランスが良かった。
落ち着きがあり優しい声がベースになっているのでので、朗読に適していた。

VOICEROID+ の使い方は割愛しますが、簡単に説明すると

テキストを貼り付ける
再生する
イントネーションや読み方がおかしかったら修正して2に戻る

の繰り返しです。

固有名詞や一般的ではない文字はイントネーションがおかしくなる傾向がありましたが、だいたい修正なしで読みあげてくれたと思います。

基本的な画面。テキストフィールドに読ませたいテキストを入れて再生させると音声で読み上げます。

フレーズ調整画面。イントネーションや読み方がおかしい時に修正する。調整したフレーズや単語を登録できるので、だんだんと読み上げ精度が上がるようです。

ピッチや話す速度も調整できる。今回作成した音声データは会話部分は1.1倍、他は1倍にしました。

保存すると音声データは .wav で、読ませたテキストは .txt で保存されます。
今回は 1) で定義した再生範囲毎に1つの音声ファイルを作成しました。音声ファイルはwavだとファイルサイズが大きかったので、音質とファイルサイズを検討して M4A に変換しました。WAV から M4A への変換は XLD（http://tmkk.pv.land.to/xld/）を使用しました。どの音声フォーマットを使う方のが良いのかわかりません。ここは更に調べる必要があります。

4)SMIL の記述

音声データとテキストを同期させるために SIML を利用します。1つの HTML 毎に1つの SMIL を用意します。

SMIL の中身は次の通り。

...

body 要素内に音声データと HTML 文書内の再生範囲を par 要素で紐付けます。




...












...

1つの再生箇所につき1つの par 要素で定義します。par 要素の中には、text 要素で HTML 文書内の再生範囲（id 属性を付与した箇所）を指定し、audio 要素で再生する音声ファイルを指定します。

text 要素は src 属性で再生箇所を指定します。再生箇所が chapter01.xhtml 内の id=”chp01-p025-01″ であった場合は次のようになります。

audio 要素も text 要素と同じく再生する音声ファイルを src 属性で指定します。

加えて clipBegin で音声ファイルの再生開始時間、clipEnd で再生終了時間を指定します。今回は1つの再生箇所につき1つの音声ファイルを用意したので、clipBegin は常に音声ファイルの最初から、clipEnd は音声ファイルの再生時間になります。
clipBegin と clipEnd の値は Appendix B. Examples of Clock Values – EPUB Media Overlays 3.0（http://idpf.org/epub/30/spec/epub30-mediaoverlays.html#app-clock-examples）にいくつかサンプルがあります。

今回のハマりどころの一つが clipEnd の取得でした。サウンド関連の知識がさっぱりなかったので、この値をどうやって取得するのかに頭を悩ましました。また再生箇所を細かく別けたので、それだけ音声ファイルが増え、一度に長さを取得する方法を探すのに苦労しました。
結果的に音声ファイルの再生時間の取得には黒羽製作所（http://kurohane.net/）が配布している Windows 用のソフトウェア『真空波動研Lite』を使うことで解決しました。『真空波動研Lite』は”つくりもの”の”生産物”のページからダウンロードできます。

ウィンドウに音声ファイルをドロップすると、すぐ解析が始まります。解析が終わったら全選択し、コピーします。

テキストエディタなどにペーストします。音声ファイルの様々な情報が得られます。あとはこの情報をエクセルなどで加工したら SMIL ファイルは簡単に作ることができると思います。

5)OPF ファイルの編集

次に、作成した音声ファイルや SMIL ファイルなどを OPF ファイルに追記します。

音声ファイルを item 要素に登録

manifest 要素下の item 要素に音声ファイルを記述します。EPUB3 を作成できる人には特に注意するところはありません。


...

...

SMIL ファイルを item 要素に登録

音声ファイルと同様に SMIL ファイルを item 要素として登録します。


...

...

HTML 文書を SMIL の紐付け

すでに item 要素で記述されている HTML 文書と SMIL ファイルを紐付けます。HTML 文書を登録している item 要素に media-overlay 属性を加え、media-overlay 属性の値は該当する SMIL ファイルの item 要素にある id 属性値にします。
このことから1つのHTMLファイルにつき、SMILファイルは1つとなります。
修正前


...

...

修正後


...

...

SMIL ファイルの再生時間

metadata 要素下の meta 属性で各 SMIL ファイルの合計再生時間を記述します。


...
0:00:11.808
...

property 属性値は media:duration、refines 属性値は SMIL ファイルを記述した item 要素の id 属性値を指定します。

合計再生時間

各 SMIL ファイルの再生時間に加え、全体の再生時間を記述します。この meta 要素には refines 属性はありません。


...
0:01:22.572
...

再生箇所のスタイルシート

リーディングシステムが Media Overlays を利用する時に、音声がどの箇所と同期しているのかを判断できるように視覚効果を与えることがあります。
作成者が任意の効果を与える為に、リーディングシステムが HTML 文書内の再生箇所に付与するスタイルシートのセレクタを指定できるようになっています。

metadata 要素下の meta 要素に property=”media:active-class” を与え、任意につけた値がセレクタになります。なおセレクタはクラスセレクタになるので、CSS ファイルに記述する時は「.meta値」となります。

media-overlay-active

.media-overlay-active
{
background-color:#000;
color:#fff;
}

以上で Media Overlays に対応した EPUB3 の制作方法は終了です。

サンプル2：ASCANDALINBOHEMIA-voice.epub

6）iBooks 用にカスタマイズ

iBooks で Media Overlays を利用するには iBooks の独自拡張である Fixed Laytout モードにする必要があります。Fixed Laytout の EPUB にしないと音声をコントロールするメニューが表示されません。

xml ファイルの追加

Fixed Layout モードにするため、以下の内容を記述し、com.apple.ibooks.display-options.xml としたファイルを META-INF ディレクトリ以下に保存します。

meta 要素の追加

HTML 文書に meta 要素で viewport を指定します。viewport はスマートフォン向けのサイトを作ったことがある方なら見たことがあると思います。content 属性の width と height の値は数値のみが有効になるようで、device-width や device-height を使用すると表示がおかしくなったので注意が必要です。

スタイルシートの追加

body
{
width: 552px;
height: 920px;
}

以上の処理で、iBooks で Media Overlays を利用した EPUB3 が完成しました。

サンプル3：ASCANDALINBOHEMIA-ibooks.epub

7)iBooks に最適化する追加の処理

iBooks の Fixed Layout モードはリフローをせず見た目の領域以外のコンテンツを表示してくれません。上のサンプルでは第一章、第二章、第三章、奥付の下が切れてしまい非表示のままです。
もっとも音声は非表示領域も再生し続けるので、オーディオブックとしての利用価値はあります。しかし再生している箇所とテキストを同期して表示できるのMedia Overlaysの利点を生かせません。
という理由でこれまで Media Overlays を利用した iBooks 用 EPUB3 は絵本などの固定レイアウトで破綻しないものが多かったのではないかと思います。
今回はあくまでテキストが主体の文芸。そして見た目や印刷書籍の再現を重視し、文章の途中で HTML を別けるといった選択はしません。

要はボックスから溢れているコンテンツが表示できればとりあえずの解決になるので、表示して欲しいコンテンツを内包している要素を CSS の overflow を利用し、スクロールして表示できるようにします。

サンプルはどれも section 要素に本文を収めています。この section 要素に CSS で overflow:scroll; を指定し、スクロール可能にします。
もちろんこれを推奨しているわけではなく、iBooks専用に暫定処置です。今回はあくまで試作ということで、こうしたサンプルを作りました。

この処理をした結果、1ページのコンテンツは上下スクロールで読み、次のページ（次のHTML）へは前後のコンテンツへは左右方向で移動するという印刷物にはあらざる挙動をします。

でも挙動に関してはこれで問題ないと思っています。作っているのは印刷書籍を模した電子書籍ではないので。
ちなみに Firefox のアドオンにある EPUBReader（http://www.epubread.com/en/）も似たような挙動をします。

サンプル4：ASCANDALINBOHEMIA-ibooks-cmp.epub

8)さらに拡張してみる

サンプル４はユーザーがスクロールすることで、コンテンツおよび音声再生箇所を見ることはできます。しかし望む挙動は音声再生時にコンテンツが自動的にスクロールし、再生箇所が常に画面内に収まることです。
何かしらの理由によりユーザーが画面をスクロールすることができない状況を想定し、対処する必要があるかと思います。

できれば再生箇所に割り当てられるセレクタを取得し、再生箇所が画面内に表示されるよう JavaScript などで処理できればよかったのですが、自分の力量が足りないのか制御できませんでした。

そこでかなり力技ですが CSS の position を用いて、再生箇所を抜き出し画面内に表示する方法で対応しました。

サンプル5：ASCANDALINBOHEMIA-ibooks-cmp2.epub

朗読音声を作ってみて

さて制作を終えて感想と反省です。

制作の動機は VOICEROID+ 結月ゆかりの声を聴いて、これなら少しの手間で TTS のあのロボットぽい音声より遥かに人間の声のように、かつ人の声を使うよりはるかに低コストで好きな時に好きなように朗読音声を得られるということでした。
ただ朗読音声を EPUB にパッケージするとファイルごとの容量が肥大します。OS やアプリケーションに内蔵された TTS はテキストを直接読み上げるので、この容量の問題や音声を作る手間を省いてくれますが、朗読というレベルにはまだ達していないと感じています。VOICEROID による音声作りは TTS と肉声の中間に位置するのではないでしょうか。

また TTS は読み間違えや意図とした通りに読んでくれないことが多々あります。作品によっては表記とは異なる読みをさせたい場合があります。それはどう技術的に対応したらよいのでしょう？
例えば「とある科学の超電磁砲」は「とある　かがく　の　ちょうでんじほう」とは読みません。「とある　かがく　の　れーるがん」です（もっとも表記と読みについては、人によって考え方もあるでしょうが）。

また VOICEROID+ を使って音声を調節している時に「はて、イントネーションはこれで正しいのか」や「読みはこれで良かったっけ」、「息継ぎは表読点とは違うな」などのように発見と苦労がありました。

そもそもサウンド関係の知識はさっぱりなく、また音声合成エンジンも使ったことがなかったので、コツを掴むまで何度も音声を作り直しましたが、いったんわかってくると大きな問題は発生しませんでした。

とは言うものの今回の試作品にも微妙なイントネーションな怪しい読み方をしているところが多くありますが。

まとめ

今回の主題は iBooks で再生できる Media Overlays を利用した EPUB3 の作成ではなく、音声合成エンジンで作った朗読音声でオーディオブックの代替は可能かの実験でした。
ただ iPhone や iPad は一定数が普及しており、また iBooks はデバイスに標準的に搭載されているリーディングシステムなので、試作品の再生環境として選択しました。
EPUB3 の仕様通りに再生してくれる環境があれば「サンプル2：ASCANDALINBOHEMIA-voice.epub」で作業は完了しているはずです。iBooks の Fixed Layout モードについてはここで言及はしませんが、Fixed Layout モードは視覚表現を優先したと思われる節があります。

以前からオーディオブックに興味はあったものの知識も少なく、オーディオブックに不可欠な音声を得るのが制作において大きな壁でした。しかし初音ミクに代表される VOCALOID という人格を得た音声合成エンジンの普及と認知、技術的な向上で、人が聴いても違和感の少ない合成音声を作る環境が個人に整ってきたように思えます。
また EPUB3 が Media Overlays を仕様として盛り込み、スマートフォンを普通の人が持つ状況を創り上げた iPhone、それに続く Android 端末の普及により、汎用的な音声”でも”本を読むことのできる機器を多くの人がそれとは気が付かない内に所持している時代もそう遠くないのではないでしょうか。

最後に「音声付きの本」は必要なの？と疑問を持つ方もいるかもしれません。文字があるなら文字を読むよと思われるかもしれません。もしかしたら「音声付きの本」は今までしなかった読み方をする為のものかもしれません。移動中や他の作業をしている時、音声であれば明かりがなくても読めます、また手を使ってページをめくる必要がないので、寝る前や寝転がっている時に聴くのも良いでしょう。

「本を読む方法に新しい選択肢が増えた」というだけでも、こうした本を作る意味は十分にあるのではないかと思っています。

EPUB Media Overlays サンプル

IMAGEDRIVE — Tue, 07 Feb 2012 14:31:23 +0000

音声 EPUB3 の使い方

音声再生に対応した EPUB3 を iBooks で開くと、リフローの EPUB3 を開いた時とメニューが異なります。

音声を再生するには、再生を開始したいページを開き、スピーカーのアイコンを選択します。

「朗読を開始」を選択をすると音声が再生され、再生しているテキストに視覚効果が与えられます。

以下は”音声合成エンジン VOICEROID+ で作成した朗読音声とテキストを同期して再生する EPUB3 の試作品を作った－ EPUB3、Media Overlays、VOICEROID+ －”で作成した EPUB3 です。

サンプル1

ASCANDALINBOHEMIA.epub（1.1MB）は Media Overlays に対応する前の EPUB3 ファイルです。

サンプル2

ASCANDALINBOHEMIA-voice.epub（63MB）は Media Overlays の仕様通りに作成した EPUB3 ファイルです。

サンプル3

ASCANDALINBOHEMIA-ibooks.epub（63MB）は iBooks の Fixed Layout モードに対応した EPUB3 ファイルです。iBooks 以外のリーディングシステムでは正常に表示できないと思います。

サンプル4

ASCANDALINBOHEMIA-ibooks-cmp.epub（63MB）はコンテンツ部分を CSS で overflow させ、Fixed Layout でありながら上下スクロールでコンテンツを見ることができる EPUB3 ファイルです。iBooks 向けです。

サンプル5

ASCANDALINBOHEMIA-ibooks-cmp2.epub（63MB）は音声再生箇所をポップアップで表示するよう CSS を調整した EPUB3 ファイルです。iBooks 向けです。

EPUB 3 Structural Semantics Vocabulary の日本語訳

IMAGEDRIVE — Thu, 02 Feb 2012 01:33:26 +0000

EPUB 3 Structural Semantics Vocabularyの日本語訳を作成して公開しました。

EPUB 3 Structural Semantics Vocabulary【日本語訳】

The 機械翻訳なので日本語なのに理解に苦しむ箇所が多々あります。
なお、この日本語訳は参考で、公式な文書ではありません。翻訳・解釈の正確性を保証しておりませんので、注意してご利用ください。この資料を使って問題が発生しても私は一切の責任は持ちません。

MathML Primer というスライドを作った。

IMAGEDRIVE — Thu, 17 Nov 2011 04:33:49 +0000

第34階 Sugamo.css で LT した MathML についてのスライドを構成変更、加筆・修正して公開しました。
のお知らせ。

MathML Primer

iOS5 の iBooks でフォントを指定する方法

IMAGEDRIVE — Thu, 20 Oct 2011 05:33:21 +0000

iOS5 から iBooks で明朝体が表示できなくなったので対応メモ。
結論から書くと漢字の入ったフォント名を認識しなくなり、Safari と同じく PostScript 名で指定するようです。

以下は iBooks で表示したキャプチャ。帯のある部分が font-family に指定したフォント名。その下が CSS を適用して表示した箇所です。

以下は明朝体。

CSS は以下です。

.hoge {
font-family:'Hiragino Kaku Gothic ProN';
}

.hoge {
font-family:'HiraKakuProN-W3';
}

.hoge {
font-family:'HiraKakuProN-W6';
}

.hoge {
font-family:'Hiragino Mincho ProN';
}
.hoge {
font-family:'HiraMinProN-W3';
}

.hoge {
font-family:'HiraMinProN-W6';
}

ゴシック体の Hiragino Kaku Gothic ProN は効くのに、Hiragino Mincho ProN は無効になるのが謎ですね。
記述をミスしていたようで Hiragino Mincho ProN でもフォントの指定が可能でした。

iOS5 がリリースされたので iBooks 用に縦組 EPUB 3 ファイルを作ってみた。

IMAGEDRIVE — Thu, 13 Oct 2011 03:28:26 +0000

自分はまだ iOS5 にアップデートしてないのですが、噂によると iBooks が縦組に対応したと聞きつけたので EPUB 3 ファイルを作って見ました。
iPhone/iPad の Safari からアクセスして以下のリンク先をダウンロードすると iBooks に取り込まれると思います。

iOS5 の iBooks で縦組表示されるかもしれない EPUB 3 ファイル[約450KB]
iBooks で表示できない不具合があったので修正しました。[2011-10-17]

iBooks でも以下のキャプチャように表示されるでしょう。なおキャプチャは espur によるものです。

この EPUB ファイルの制作には FUSEe を、素材は青空文庫の『ボヘミアの醜聞』を使わせて頂きました。
そして epubchek で極力エラーがでないようエディタで修正しています。

なお、いくつか分かった問題として（間違っていたら指摘お願い。。。）

OPF ファイルの spine 要素の page-progression-direction 属性が効かない（正確にはデフォルトの ltr になっていると思われる。
toc.ncx ファイルがないと不適切なコンテンツとして iBooks で開けない。
writing-mode の vertical-rl は有効になり、ファイル毎での表示は縦組になるけど、１）の問題によりコンテンツ全体のページ送りが右→左にならないから、オーバーフローしたコンテンツを表示する術がない。

現状、分かった範囲で致命的なところはこんな感じでしょうか。

さようなら、Steve Jobs

IMAGEDRIVE — Thu, 06 Oct 2011 14:52:53 +0000

朝一番に飛び込んできた突然の悲報に世界が包まれました。この時間になっても彼を惜しむ声は絶えません。

このニュースを目にした時、まっさきに脳裏に浮かんだのが昨晩行われた iPhone 4S の発表です。iPhone 4S の発表を行ったのは言うまでもなく8月に CEO に就任したクック氏。実際のところ Jobs 氏は数日前に亡くなっており、無用な混乱を避けるために亡くなったことを iPhone 4S 発表後に公表したと考えるのが普通でしょう。もしそうならクック氏、いえ発表会に携わった Apple 社員皆が Jobs 氏を失った非常に辛い状況の下で、その事実を誰にも悟られること無くあれほどに立派なプレゼンを行ったことになります。Jobs 氏の CEO 引退でも Apple の行く末を案じる声が多くあり、ましてや氏を失ったとあればおのずと Apple に対する不安要素が高まるのは必然でしょう。
しかし先にも述べたとおり Apple の統率と情報統制を見るとそれも取り越し苦労に終わるのではというのが今の思いです。

Jobs 氏についてはボクが Macintosh を初めて購入した時には Apple に不在でしたので伝説の存在でした。当時の Apple は経営的にどん底で、OS のライセンスや互換機などでなんとか会社を存続させようとするも、明日には買収されるのではないかといった危機的状況でした。
日本人の有志が集まって Apple の株を買おうという運動も起こり、その時に自分も 1 株購入しました。今は額に入れて飾っています。Apple は今でも律儀に決算報告書を郵便で送ってきてくれます。

そんな中で iMac の登場、Jobs 氏の復帰。そこからの Apple と Jobs 氏の活躍は記憶に新しいところです。彼については Apple 復帰後より Apple 設立と去るまでの生き方に衝撃を受けた口です。

もういくら書いても終わりが見えそうもないので、ありがとうそしてさようなら、Steve Jobs。あなたはイノベイターとして一つの概念に昇華し、違う次元に今でも元気にしていると信じています。

Kindle 4 を購入した

IMAGEDRIVE — Wed, 05 Oct 2011 02:23:22 +0000

久々のブログ更新です。Kindle Wi-Fi, 6″ E Ink Display を買ったのでブログを更新しました。ブログを更新する為に買ったと言ったら過言です。

9月28日に Amazon から新型の Kindle が3種類発表されたのは記憶に新しいところです。Android OS を搭載した待望の Kindle Fire、タッチパネルを採用した Kindle Touch、そして初代 Kindle の後継機種。四代目になる E Ink 採用の Kindle（仮にKindle 4）が発表され、迷うこと無く Kindle Fire を予約しようとしたら米国以外には発送しないアラートが出て断念。Kindle Touch も同様。仕方ないわけではありませんが、唯一買える Kindle 4 を購入しました。自分にとっては Kindle DX、Kindle 3とこれで三代目の Kindle になります。

ちなみに本体8,657円、送料は1,110円の計9,767円。Kindle は $79 なので約110円/$換算ですね（あれ高くね？）

日本でもすでに多くの方が Kindle 4 を入手しブログにも感想など書かれているので、Kindle 4 の感想や使い勝手などは適当にググッてそちらを見て頂くとし、前回の Kindle 3 の記事と同様に内蔵ブラウザ周りのチェックをしてみたいと思います。

UserAgent

内蔵ブラウザが WebKit ベースなのは事前の情報として掴んでいたので、もう少し詳しい情報を UserAgent で確認。

Mozilla/5.0 (Linux; U; en-US) AppleWebKit/528.5+ (KHTML, like Gecko, Safari/528.5+) Version/4.0 Kindle/3.0 (Screen 600x800; rotate)

残念ながら Safari5 相当ではありませんでした。
ちなみに Kindle 3 は

Mozilla/5.0 (Linux; U; en-US) AppleWebKit/528.5+ (KHTML, like Gecko, Safari/528.5+) Version/4.0 Kindle/3.0 (screen 600x800; rotate)

同じですね。
ソフトウェア的に改善される箇所なので今後に期待と言いたい所。ただブラウザは Kindle の主たる機能ではないから、ブラウザのバージョンアップは期待できないかもしれません。

さて内蔵ブラウザが Kindle 3 と同じ事もあり、続きを書く必要性をまったく感じなくなりました。
が前回やろうして忘れていたこともあるし、そもそも前回の記事なんて自分も覚えてないからいい感じに水増しした感じで進めます。

iPhone 3GS との比較写真でお茶を濁しつつ

Acid3

Acid3 Testが改訂ということもあり、一応なんとなく Acid3 をチェック。

はいそうですか。といった結果に。

The HTML5 test

こちらは前回テストを行わかなった The HTML5 test。ブラウザが HTML5 の実装にどれだけ対応しているのかを確認するサイトです。

キーボード

Kindle 4 はハードウェアキーボードが撤去され、ソフトウェアキーボードに変更されました。

左から二番目のボタンを押すと画面内にソフトウェアキーボードが表示されます。

スクリーンキャプチャの撮り方

ハードウェアキーボードを備えていた Kindle 3 は Alt+↑(Shift)+G でスクリーンキャプチャを撮ることが可能でした。ソフトウェアキーボードになった Kindle 4 ではキーボードボタンを押しながらメニューボタンを押すことでスクリーンキャプチャを撮ることができます。

スクリーンキャプチャは Kindle 内の documents フォルダ内に screen_shot-*****.gif として保存されます。USB 接続でパソコンに繋げて取り出せます。

Kindle 3 とブラウザが同じだったこともあり、ネタらしいネタも書けなかったわけですが、Kindle 4 を使っていくなかで気がついたことがあれば、Google+ のほうにあれこれ書いて行こうかなと。

iOS5 SDKのSafariと縦組対応

IMAGEDRIVE — Tue, 07 Jun 2011 06:35:55 +0000

6月6日に始まったアップルの開発者向けイベント WWDC 2011では次期Mac OS Xの『Lion』や、iPhone/iPad向けの『iOS5』、MobileMeに替わるクラウドサービスの『iCloud』などが発表され、ネットは朝から盛り上がりを見せています。

そんな中、250を超える新機能を搭載したLion。特にSafari（ブラウザ）の項目に「CSS3の縦書きテキスト」という興味深い項目がありました。
これはWebKitに実装されつつあるCSS Writing Modes Module Level 3のwriting-modeプロパティの対応でしょう。
あえて新機能の項目に加えるのもどうなのかなと思いましたが、何にせよ嬉しい限りです。（もっとも開発版にあたるWebkitに実装されてるのだから、いつかは対応するだろうとは思っていましたが）

WebKitでは縦組はほぼ実装されていますが、縦組が必要とされる日本語組版に求められる実装はまだ残っています。
Lionリリースまでのあと一ヶ月でどこまでの機能がSafariに組み込まれるのか興味深いところです。

そしてこのMac OS X版Safariが縦組に対応すると明言したことで、おのずと秋にバージョンアップ予定のiOS Safariにも期待がかかります。
Safariが縦組に対応すると言っても、Webサイトに縦組は必須かは微妙なところです。せいぜい読み物系コンテンツを提供しているWebサイトくらいが恩恵に預かる程度ではないでしょうか。
むしろiPad/iPhoneでの利用が主になるであろう電子書籍の分野。特にApple謹製の電子書籍リーダ「iBooks」のエンジンにあたるiOS版Safariの縦組対応のほうが意義は大きいかと思います。

朝方に知り合いの方が早くもiOS5のSDKを触っていたので、WebKit向けに縦組のテストをしていたファイルを、iOS5のiPadエミュレータで見てもらいました。以下がその画面キャプチャになります。

iOS Safariにも縦組来てますね。
パッと見は良いのですが、コンテンツの左側にスクロールしない（恐らくWebkitの縦組対応初期にあった、body要素にwriting-modeを指定しないとスクロールしない現象かと）、約物などの文字が寝たままなどを見るに今年の1月くらいのWebkitと同じくらいの実装状況だと思います。

と言ってもiOS5リリース予定の秋まで時間もあるし、Mac OS X版SafariやWebkitからのフィードバックもあるので、iOS5が提供される頃にはiBooksも含めて見た目遜色ないレベルにまで縦組に対応すると思います。

余談

さて巷では相変わらず紙の書籍vs電子書籍なる構図が幅を効かせているようですが、電子書籍が書籍であるなら電子書籍vs紙の書籍ではなく、戦う相手は共通の敵としてWebコンテンツやゲームなど他の媒体ではないでしょうか（別に戦わなくても良いと思うのですが）。

現代社会には隙間時間という不思議な時間があり、何をそこまで必死になって時間を埋めたいのか理解できませんが、様々な業界が人間の１日２４時間をみっちり充実に過ごせるよう切磋琢磨をしています。
そうしたおかげで消費者も例えば移動時間で読書をしたりゲームをしたり携帯でメールをしたりと、充実した隙間時間ライフを過ごせています。

そんな環境の中で、出版という土壌の上で創り上げられつつある電子書籍と紙の書籍が内戦しても無駄に疲弊するばかりで、紙と電子の書籍についてあまり実りある未来が待っているようには見えません。
競合する相手が何かを見据えて、これまでの紙の書籍はどうするのか、電子書籍はどうあるべきかを考えるのが良いのではないでしょうか。

vimemo

IMAGEDRIVE — Wed, 01 Jun 2011 01:46:18 +0000

vim のあれこれ備忘録

・矩形選択時に先頭にヤンクした内容をペースト

ビジュアルモードでy（ヤンク）→Ctrl+v（矩形選択）→Shift+i（先頭挿入）→Ctrl+r→”→ESC or Ctrl+[（インサートモードから抜ける）

もしくは

1)vimrcに以下を追加

imap 0

Ctrl+v（矩形選択）→Shift+i（先頭挿入）→Ctrl+p（ヤンクをペースト）

・複数行にクリップボードの内容をペースト

1)vimrcに追加追加

imap

Ctrl+v（矩形選択）→Shift+i（先頭挿入）→Ctrl+b（クリップボードの内容をペースト）