月別アーカイブ: 2017年4月

Microsoft EdgeのEPUB表示機能はなかなか良い。これからはEdgeだと言いたいところですが、しかし、残念な点もあります。

投稿日時: 投稿者:
3

4月11日にリリースされたWindows 10のアップデート（バージョン1703）でEdgeのEPUBリーダーが一般に使えるようになったとのことですので、早速、Windows 10をアップデートしてEdgeを使ってみました。

EPUB3のサンプルとしては、先日発売しました『XSL-FOの基礎 第2版』を使いました。こちらで公開していますので、ぜひ、ご一読ください。

「XSL-FO の基礎 XML を組版するためのレイアウト仕様」第2版【新発売】

Webに公開してEPUBをWebページと同じようにリンクで開けます。

図1　EdgeでEPUBをWebと同じように開く

まず、Edgeでは、Windowの幅により2段組と1段組で表示されます。表示Windowの幅が広いと2段組で、表示Windowの幅を狭くすると1段組となります。

図2　2段組みの表示

図3　1段組みの表示

ページの下部に柱が出ています。左が本のタイトル、右が章または節の見出しです。これはなかなか良いです。

Windowの上部をタップするとメニューが表示されます。

図4　メニューを表示

メニューは左側に「ナビゲーション目次」「ブックマーク（一覧）」「検索」、右側に「文字など表示設定」「音声読み上げ」「ブックマーク追加」です。次の画面はナビゲーション目次を表示したところです。

図5　ナビゲーション目次を表示

音声読み上げはなかなか秀逸です。EPUBには音声同期を設定していないのに、読み上げている文節をハイライト表示します。もうメディアオーバレイによる設定は要らなくなります。

図6　音声読み上げ（ハイライト表示）

このEPUBは、章毎にファイルを分けていますので、新しい章の開始位置で改ページまたは改段します。それは普通です。

図7　章の開始で改段

さらに、節の見出しと次の本文や見出しが同じ段に入らないとき、泣き別れしないように節の前で改段できます[2]。

図8　節の前で改段

表のテキストだけをポップアップして表示できます。

図9　表のテキストをポップアップで表示

画像は幅または高さに合わせて縮小します。ラスターイメージ（このサンプルではPNG）を縮小すると少し汚くなりますが、図だけ拡大表示もできますので問題はないでしょう。なお、図をSVG形式としたEPUB3版も試して見ました（PDF作成用の図をそのまま使ったもの）。SVGも問題なく表示できるようです。いままで、EPUBを作るときはラスターイメージにしていたのですが、これからは公開するEPUBはSVG画像でも良いかもしれません[1]。

気になりましたのは整形済み（pre）のレイアウトです。Edgeではpre要素の前で改ページまたは改段します。これは必要ありません。そしてpreの中では改ページ／改段しません。このためpreの部分が見切れてしまいます。技術系の文書では多くの場合、preの内容はサンプルのコードなのでpreの内容を1段に収める必要はないのです。特に、見切れてしまうのは致命的です。評価用ではなく正式なEPUB3ではpreは使えないということになってしまいます。困りましたね。

図10　preの前で改段してしまう。preの内容が見切れてしまう

[1] 『XSL-FOの基礎』画像制作のこと。Word経由でインポートした画像は印刷品質の劣化が激しいため、第2版ではできるだけSVG形式に変更した件。
[2] ちなみにiBooksでは次のように見出しと本文が泣き別れしてしまいます（iBooks 4.1.1）。

■関連
『XSL-FOの基礎　第2版』は全文をWebでも公開。CAS-UBでプリントオンデマンド用PDFを作り、Web生成機能でWebページもワンタッチで完成。

英語、ラテン語の辞書にみる「ページ」の語源、使用例

投稿日時: 投稿者:
1

『オックスフォード英単語由来大辞典』[1]には「ページ」という言葉の由来が次のように説明されています。

・pageは16世紀後半から
・pages of a book「本のページ」の意味のページは、ラテン語のpãginaから派生したフランス語による。pãginaの元になっているのは、pangere（留める）である。
・pagination「ページつけ」「ページ数」はpaginate（本にページつけをする）という行為の名詞形として19世紀半ばに現われた。ラテン語pãginaから派生したフランス語paginerによる。

ということですので、英語のpageという言葉の歴史は比較的新しいようです。『紙二千年の歴史』[2]によると紙がイギリスに伝わったのは1494年（同書p.61）とあり、『紙の世界史』[3]では、イギリスの初めての印刷業者はウィリアム・キャクストンが1476年にウエストミンスターに開いた印刷工房、初めての製紙工場は1495年とあります（同書p.254）。

そうしますと、15世紀後半に紙と印刷がイギリスに伝わってから英語のpageという言葉が生まれるまで100年ほど掛かっていることになります。紙や印刷はヨーロッパからイギリスに伝わったものですので、「ページ」がラテン語からフランス語へ、そして英語へと伝わったのはわかります。

『古典ラテン語辞典』[4]では、pãginaの意味は次のようになっています。

１．紙（パピルス）の1枚、1頁
２．頁の内容、書きもの、文書、誌、作品

古典ラテン語ではパピルスの髄を並べて紙を作ったことから留めるという言葉からページという言葉が派生したようです。

『新編 英和活用大辞典』[5]には、英語のpageの用例が大量に出ています。ページという言葉は、単に紙の1ぺージという意味だけではなく、歴史の1ぺージというような、比喩的な意味にも使われています。本書は1995年発行ですので、当然、インターネットのWebページに関連する使い方は一つも出てきません。

『三省堂 英語イディオム・句動詞大辞典』[6]では、pageの使い方として、

・page up/page downとして「コンピュータで次／前のページを出す」

とあります。2011年ですので、もうインターネットがかなり普及している時代ですが、まだ、１画面を１ページと見立てた説明になっています。

でも、この説明は英語の元の意味（使い方）と違うような気もします。つまり英語のpage upは縦につながっている巻物全体を1ぺージとして、巻物を上にスクロールする意味なのに、page upを次の「ページを出す」としてしまうと、いかにもページが区切られているように受け取られてしまいませんか？

現在、ページというとWebページという意味で使うことが増えていますが、英語の（紙の）辞書でWebページを説明しているものをまだ見かけていません（Webの辞書における説明は初回のブログにあります。）。次回、図書館で探してみましょう。

[1]『オックスフォード英単語由来大辞典』（グリニス・チャントレル編、株式会社柊風舎、2015年12月25日発行）
[2]『紙二千年の歴史』（ニコラス・A・バスベインズ著、原書房、2016年5月30日発行）
[3]『紙の世界史』（マーク・カーランスキー著、川副　智子訳、徳間書店、2016年11月発行）
[4]『古典ラテン語辞典 改訂増補版』（國原　吉之助著、大学書院、2016年12月30日発行）
[5]『新編 英和活用大辞典』（市川 繁治郎他編、研究社、1995年発行）
[6]『三省堂 英語イディオム・句動詞大辞典』（安藤 貞雄編集、三省堂、2011年7月10日発行）

★ページに関連する過去ブログ記事の一覧
[1] ページってどういう意味?　紙のページ、Webページ (memo)
[2] ページってどういう意味?　続編　Kindleの紙の本の長さと、KENPについて
[3] Kindle Unlimited問題とKENPの関係について（続き）
[4] Amazonでは本のページの数え方が三つある。Kindle Unlimitedは第三のKENPで著者への支払いが行われ、KENP相場が基準になる。
[5] ページっていったい、どういう意味なんだろう？　――Webページ
[6] ページって何？　「ページ」と本のかたちとの関係、「ページ」と「頁」の関係、ブラウザと電子書籍の未来

★「ページ」についてまとめたWebページ
本のかたちを考える ― その２ページって何？「ページ」と本のかたちとの関係

CAS記法によるWebページの作成：Webページ内の参考資料へのID設定と、本文から内部リンクを設定する方法

投稿日時: 投稿者:
返信

CAS-UBで次のようなWebのリンクを設定する方法を紹介します。

(1) Webページの末尾に参考資料のリストを作る。
(2) Webページの本文から、参考資料へのページ内リンクを設定する。

出来上がったWebページはこんな感じです。


図１ リンク元


図２ リンク先

HTMLで、このようなページ内部のリンクを作るには、リンク先の要素にid=id値を設定し、リンク元のアンカータグ（aタグ）のhref属性に#id値を設定します。

CAS記法では次のようにします。リンク先の要素にはユーザー独自idのマークアップを使います[1]。CAS-UBでユーザー独自のidを付けるには、二つの方法があります。難しい方法と簡単な方法があります。利用ガイドでは難しい方法のみを詳しく解説しています。（難しい方法には、自動化処理のための用途があるのですが）ここでは単にリンクを設定するだけの簡単な方法をご紹介します。

次のようにすれば良いです。

１．リンク先に:id=id値　という属性名と属性値を設定する
２．リンク元に[[#id値|アンカーテキスト]] というマークアップをする。

上の例では次のようになります。

１．リンク先
CAS記法のマークアップ：
*::nolabel:id=s1 [1] [[http://stackoverflow.com/questions/42618628/how-to-convert-office-file-to-image/43161134|How to convert office file to image]]
HTMLでは右のようになります：
<ul class=”nolabel”><li id=”s1″>[1] <a href=”http://stackoverflow.com/questions/42618628/how-to-convert-office-file-to-image/43161134″ >How to convert office file to image</li>

２．リンク元
CAS記法のマークアップ：
StackOverflow の質問（英語）[[#s1|[1~]]]より引用
HTMLでは右のようになります：
StackOverflow の質問（英語）<a href=”#s1″ >[1]より引用

::nolabelはリンクとは関係なく、CSSで箇条書きのラベルを付けないようにするためのクラス属性の設定です。
:id=s1 が箇条書きの項目（li）のid属性になります。

参考資料
[1] CAS-UBでは見出しや図・表のキャプションには自動的にidを設定します。ユーザーがCAS記法で設定するidについては、自動設定のidと区別するためにユーザー独自idという表現をしています。これは、HTMLでは通常のid属性にあたります。
[2]第9章 CAS記法の属性マークアップリファレンス
[3] ここでCAS-UBで作ったHTMLを埋め込んだWebのページ: Microsoft Office（マイクロソフト オフィス）のファイルを、プログラム開発者が自力でPDFや画像に変換するには、どうしたら良い？

HTMLを簡単に作る方法：h1要素の話(3) WHATWGのHTML5にみるセクションの深さと見出しランク

投稿日時: 投稿者:
1

前回[1]は、W3CのHTML5.1では、セクションの階層の深さと見出しのランクが一致するように変更になったことを説明しました。HTML5についてはWHATWGでも仕様を公開しています[2]。この最新版（Last Updated 12 April 2017）で、セクション階層と見出しのランクについてどのように記述されているかを調べてみました。

WHATWGの仕様説明

4.3.3 The section elementの最初の例では、トップレベルの見出し(A)、第二階層（sectionで囲まれている）の見出し（B、C）はh1です。

<article>
　<hgroup>
　　<h1>A</h1>
　　<h2>…</h2>
　</hgroup>
　<p>…</p>
　<section>
　　<h1>B</h1>
　　<p>…</p>
　</section>
　<section>
　　<h1>C</h1>
　　<p>…</p>
　</section>
</article>

この例説明には、セクションがトップレベルか、第二階層か、第三階層かを気にすることなく、h1タグを使うことができるとなっています。前回調べたW3CのHTML5.1とは考え方が相反しています。

4.3.6 The h1, h2, h3, h4, h5, and h6 elements
h1～h6が見出しのランクを意味すると説明されています（W3Cと同じです）。アウトラインについては、見出しランクによる暗黙の階層のレベルとセクションによる階層と両者を混用したものが同じである、ということです。

<body>
　<h1>A</h1>
　　<h2>B</h2>
　　<h2>C</h2>
　　<h2>D</h2>
　　　<h3>E</h3>
　　<h2>F</h2>
</body>

<body>
　<h1>A</h1>
　<section>
　　<h1>B</h1>
　</section>
　<section>
　　<h1>C</h1>
　</section>
　<section>
　　<h1>D</h1>
　　<section>
　　　<h1>E</h1>
　　</section>
　</section>
　<section>
　　<h1>F</h1>
　</section>
</body>

<body>
　<h1>A</h1>
　<section>
　　<h2>B</h2>
　</section>
　<section>
　　<h2>C</h2>
　</section>
　<section>
　　<h2>D</h2>
　　<section>
　　　<h3>E</h3>
　　</section>
　</section>
　<section>
　　<h2>F</h2>
　</section>
</body>

このあたりは、W3CのHTML5のままになっていると言えます。

4.3.11 Headings and sections　には次のような記述があります。

“The first element of heading content in an element of sectioning content represents the heading for that section. Subsequent headings of equal or higher rank start new (implied) sections, headings of lower rank start implied subsections that are part of the previous one.”

（日本語訳）[3]より引用
「セクショニングコンテンツの要素においてヘディングコンテンツの最初の要素は、そのセクションの見出しを表す。同等以上のランクに属する後続の見出しは、新しい（暗黙の）セクションを開始し、低いランクの見出しは、前のセクションの一部である暗黙のサブセクションを開始する。どちらの場合も、要素は暗黙のセクションの見出しを表す。」

問題点
この説明によれば、単純に考えるとsection要素の先頭に一番ランクの高い見出しを置かなければならないという制約を生み、body（セクションルート）やsection要素の先頭の見出しはh1にリセットされるということを意味します。

つまり、HTML5では

セクション開始
h2中見出し
テキスト
h1大見出し
テキスト
セクション終了

というような見出しの付け方はできないということになりそうです。このような見出しの付け方をすると、HTML5の解釈によるアウトラインは、中見出しが最上位階層、大見出しがその下の階層となります。

う～ん。このような考え方では本のコンテンツを記述するのは難しいかもしれません。それとも、セクション開始の先頭には省略されたh1タグがあって、その次のh2中見出しはh1のサブセクションである。そしてその次のh1はh2の作るサブセクションの親である、という解釈はできるのでしょうか？　それができるなら、アウトラインの階層と見出しの階層が一致します。さて、ちょっとやっかいです…

[1] HTMLを簡単に作る方法：h1要素の話(2) HTML5.1 (W3C）では、セクションの深さと見出しのランクは同じとなった
[2] HTML Living Standard
[3] 4.3.11 見出しとセクション

■連載
(1) ワンソースマルチユースの課題：HTMLソースのオーサリング問題を改めて考えてみようと。
(2) HTMLを手軽に作る方法を再検討します。手軽といえば、まずWordでHTMLを作ることが思いつきます。
(3) Word2013のWord文書をHTML形式で保存を試してみる。その問題点は？
(4) HTMLを簡単に作る方法：h1要素の話(1)
(5) HTMLを簡単に作る方法：h1要素の話(2) HTML5.1 (W3C）では、セクションの深さと見出しのランクは同じとなった（前回）
(6) HTMLを簡単に作る方法：h1要素の話(3) WHATWGのHTML5にみるセクションの深さと見出しランク（前回）

HTMLを簡単に作る方法：h1要素の話(2) HTML5.1 (W3C）では、セクションの深さと見出しのランクは同じとなった

投稿日時: 投稿者:
返信

前回のブログでは、主にHTMLの見出し要素h1～h6について、W3CのHTML5を対象に見ました。2016年11月勧告のHTML5.1ではこのあたりがかなり変更となっています。今回は、W3CのHTML5.1について見てみます[1]。

その前にもう一度用語を整理します。
セクションルート：独自のアウトラインを持つことができる。そして、セクションルートのアウトラインはその祖先のアウトラインには寄与しない。セクションルートには次の要素があります。

・body, blockquote, details, fieldset, figure, td

セクション内容
見出しとフッターの範囲を示します。セクション内容の要素には次があります。

・section, article, aside, nav

h1～h6の見出し要素は、（暗黙またはセクション内容でマークアップされているかに関わらず）セクションの見出しを示します。h1～h6は見出しのランクを示します。ランクによって文書のアウトラインを作ります。section要素はアウトラインを明示化します。次図の左と右では文書のアウトラインは同じです。

アウトラインは、アクセシビリティのための支援ツールなどで見出しの重要度を示すのに使うことができます。

4.3.10. Headings and sections[2]に、セクションと見出しについての詳しい説明があります。この部分がHTML5.1では次のようになりました。

「セクションには、セクションのネストレベルと同じランクの見出しを含むことができる。著者はセクションのネストレベルからみて適切な見出しを付けるべきである。ひとつのセクション内容に複数の見出しを付けて、暗黙のセクション生成に頼るのではなく、明示的にセクションを包むことを推奨する。」

HTML5では、各section要素の最初に<h1>で見出しを置くと分かりやすいという説明がありました。この他の幾つかのサンプルと共に、敢えなく沈没してしまいました。

そうすると、最初の話に戻りますが、Wordの見出しレベル1の扱いが問題になります。Wordのスタイル機能「見出し１」を使って文書を作成して、HTMLで保存すると、HTMLの構造は次の図の右のようになります。

これは、そのままではHTML5.1の4.3.10. Headings and sectionsに書かれた内容に準拠とはならないかもしれません。

例えば、次の図のようなケースはどうなるのでしょうか？

左と右が同じであることは分かります。h1の次にh2が出てくれば、新しいサブセクションが開始されるからです。では、h1の次にh1がでてきたとき、h2の次にh1が出てきたときはどうなるんでしょうか？　4.3.10. Headings and sectionsによれば、いずれのケースでも新しいセクションが始まることになります。新しいセクションはbodyと同ランクですので、bodyが暗黙に分割されると考えられます。HTML5ではこのことが、サンプルとともに文章として書かれていました[3]。しかし、HTML5.1でこのサンプルは削除されてしまいました。

セクション化の闇は深い？

次は、WHATWAGの仕様をチェックしてみたいと思います[4]。

[1] HTML 5.1 W3C Recommendation, 1 November 2016
[2] 4.3.10. Headings and sections
[3] HTML5.0 4.3.10.2 Sample outlines
[4] HTML Living Standard — Last Updated 31 March 2017

■連載
(1) ワンソースマルチユースの課題：HTMLソースのオーサリング問題を改めて考えてみようと。
(2) HTMLを手軽に作る方法を再検討します。手軽といえば、まずWordでHTMLを作ることが思いつきます。
(3) Word2013のWord文書をHTML形式で保存を試してみる。その問題点は？
(4) HTMLを簡単に作る方法：h1要素の話(1)（前回）
(5) HTMLを簡単に作る方法：h1要素の話(2) HTML5.1 (W3C）では、セクションの深さと見出しのランクは同じとなった（今回）

HTMLを簡単に作る方法：h1要素の話(1)

投稿日時: 投稿者:
返信

前回のブログではWordのHTML保存を検討しました。そこで、浮かび上がった1つの検討事項がh1要素の使用方法です。

Wordのスタイルで「見出し１」を設定した段落はHTML保存するとh1要素にマップされます。Word文書では見出しスタイルは一般的であり、「見出し１」は結構頻繁に使います。つまり、WordでHTMLを作るとh1要素がたくさん出てくる可能性があります。

HTMLにおいては、h1要素の使い方には少し注意が必要です。第一にTwitterのログをみますと、どうも、h1要素の使い方にはいろいろ議論があるようです[1]。また、W3CとWHATWGの主張の違いもあるようです。

第二にSEO（検索エンジン最適化）の観点からの注意があります。SEOの本を読みますとh1タグは最上位のタグであり、ページで一回だけ使うようにとされています[2]。SEOの本ではHTML5の仕様という観点よりも、Googleなどの検索エンジンがどのように評価するかという観点です。

ということでこのあたりを掘り下げてみます。

最初に、W3CのHTML5仕様[3]をみてみます。HTMLにはh1～h6という見出しランクの要素が規定されています。HTML5の4.3.10 Headings and sectionsを見ますと、h1～h6要素はセクションの見出しとして使うとされています。h1～h6はHTMLのツリー構造上は明示的に階層を作りません。しかし、h1～h6があると暗黙に新しいセクションが始まり、そのセクションは階層を作ることが想定されています。

例えばh1要素に続いて、h2要素があれば、暗黙に新しい下位のセクションができます。そして、h2は新しい下位セクションの先頭の見出しとなります（図）。h1の次にh6が出てくるようなランクが不連続（1⇒6のようなジャンプ）でも暗黙のツリー構造では1階層の変化です[4]。

HTML5でsection要素が導入されました。セクションはsection要素で明示的に階層化できます。そして、section要素で階層構造を作り、そのsection要素の先頭にセクションの見出しとしてh1を置くという方法が仕様書に記載されました。ここで、暗黙の階層化（sectionでマークアップしない）と明示的な階層化（sectionでマークアップする）という2つの階層化の方法ができたことになります。

sectionは見出しが作るセクションの範囲を規定する要素（sectioning content）です。しかし、セクションのルート（sectioning root）ではありません。セクションのルートはblockquote、body、fieldset、figure、tdの4つです。新しいsectionはセクションのルートの子供か、そのsectionの先祖のセクションの一部となります。

仕様書の4.3.10.1、4.3.10.2項に、この2つの方法の関係の取り扱いの例が幾つか出ていますが、複雑でやっかいです。

2016年11月に勧告となった、HTML5.1では削除された機能のリストの中に次の項目があります。

・先頭にh1要素を置いたsection要素を入れ子にしてアウトラインを作る[5]。

このあたりがどうやらHTML5.1で変更になったようですので、HTML5の例をあまり深入りしないで次回はHTML5.1を見てみましょう。

[1] h1要素は複数回使って良いのか!? HTML5.1に関するW3CとWHATWGの主張の違い
[2] 例えば、『いちばんやさしい新しいSEOの教本』（安川　洋他著、株式会社インプレス発行、2015年8月11日）p.114には「h1タグはページ内に1回のみ使用する。」とある。
[3] HTML5 A vocabulary and associated APIs for HTML and XHTML W3C Recommendation 28 October 2014
[4] CAS記法ではh1～h6がマークアップされたとき、divを生成して明示的にツリー構造を作っています。CAS記法リファレンスの「見出し」の行の例を参照してください。CAS-UBでも同様にランクがジャンプしてもdivの階層変化は1つにしています。
[5] Features removed

■連載
(1) ワンソースマルチユースの課題：HTMLソースのオーサリング問題を改めて考えてみようと。
(2) HTMLを手軽に作る方法を再検討します。手軽といえば、まずWordでHTMLを作ることが思いつきます。
(3) Word2013のWord文書をHTML形式で保存を試してみる。その問題点は？
(4) HTMLを簡単に作る方法：h1要素の話(1)（今回）
(5) HTMLを簡単に作る方法：h1要素の話(2) HTML5.1 (W3C）では、セクションの深さと見出しのランクは同じとなった（次回）