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

『オックスフォード英単語由来大辞典』[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枚、1頁
2.頁の内容、書きもの、文書、誌、作品

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

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

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

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

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

でも、この説明は英語の元の意味(使い方)と違うような気もします。つまり英語の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ページ
本のかたちを考える ― その2ページって何?「ページ」と本のかたちとの関係

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

前回[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のスタイル機能「見出し1」を使って文書を作成して、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のスタイルで「見出し1」を設定した段落はHTML保存するとh1要素にマップされます。Word文書では見出しスタイルは一般的であり、「見出し1」は結構頻繁に使います。つまり、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)では、セクションの深さと見出しのランクは同じとなった(次回)

Word2013のWord文書をHTML形式で保存を試してみる。その問題点は?

最近、HTMLをどう作るかを再考しています。HTMLの書き方で一番原始的な方法は、テキストエディタで書くことです。それではあまりに効率が悪いのでもう少し簡単に作る方法が必要なことは明らかです。で、ここ10年近くWordでHTMLを作るという問題をあまり考えていませんでしたが、まずはWordでHTMLを作る方法を調べています。

ということは前回も書きましたが、前回「HTMLを手軽に作る方法を再検討します。手軽といえば、まずWordでHTMLを作ることが思いつきます。」として、Webにでていたサンプルを見ました。

今回はその続きで、自分で作成したWord文書で調べてみました。作成した文書は次のものです:
・オリジナルのWord文書[1](こちらからダウンロード)
・Word文書をPDF化:(PDFをダウンロード)


図 PDFを画像化したもの(先頭ページ)

これをWord2013でHTML保存してみます。


図 Webページ形式で保存

保存したHTML形式:リンクをクリックすると開きます。

保存したHTML形式を表示しますと、Wordの次の指定はそのまま生きています。
・段落枠による囲み
・段落の文字サイズ
・見出し
・段落と段落の空き
・表

このHTMLのソースを見ますと、こんな感じです。

図 Word2013でHTML保存したHTMLファイル

このHTMLはHTMLのタグとCSSでレイアウトを指定しています。見出しレベル1がh1タグになるためh1タグが複数出てきています[2]。表のタグも正しく付いているようです。多くの属性値は引用符で囲まれていません。

HTML+CSSの表現として大きな問題はないと思いますが、このHTMLを使い回すときはとても難しいでしょう。例えば、他のHTMLと一緒にして、二つの見栄えを揃えようとします。もし、二つのHTMLでフォント指定(サイズ、フォントファミリー)異なっていたとします。すると見栄えを揃えるにはフォント指定を統一する必要があります。しかし、フォント指定がHTMLタグツリーの末端にばらばらに指定されているため、統一する編集はかなり面倒なことにあります。HTMLでこのような操作をするよりも元のWord文書に戻ってWord文書で編集したくなると思います。

ということは、ここで作るHTMLはあくまで出来上がった文書を単独でパブリッシュする(最終用途)ために使うものということです。Wordで保存したHTMLを使って、例えば、他のWebサイトに組み込んで全体のレイアウトを統一したり、EPUBを作ったりするなどの流用は難しいのではないでしょうか。

[1] 3月22日のニュースリリースの原稿です。ニュースリリースはこちら
[2] SEOの本を見ますと、h1タグはHTMLの最上位に1回使うというのが基本的とされているようです。確かに、大見出しは1ページ(1HTMLファイル)あたり1つが望ましいと思います。しかし、HTMLの仕様ではh1タグをHTMLの最上位要素として1回だけしか使うという制限はありません。HTML5では文書をsectionで分けて、各sectionタグの子供としてh1タグを使います。そしてh1~h6の新しいランクタグは新しいセクションを暗黙に作るという考えのもとで、sectionタグはそれを明示的にするという考えのようです。すると、h1⇒p1⇒h1⇒p1の順序でタグが出てきたときは、h1⇒p1⇒section(h1⇒p1)と考えることになるのでしょうか。

■連載
(1) ワンソースマルチユースの課題:HTMLソースのオーサリング問題を改めて考えてみようと。
(2) HTMLを手軽に作る方法を再検討します。手軽といえば、まずWordでHTMLを作ることが思いつきます。
(3) Word2013のWord文書をHTML形式で保存を試してみる。その問題点は?(今回)
(4) HTMLを簡単に作る方法:h1要素の話(1)(次回)

HTMLを手軽に作る方法を再検討します。手軽といえば、まずWordでHTMLを作ることが思いつきます。

このところ、CAS記法[1]の便利さになれてHTMLを作る他のオプションを忘れかけていました。

しかし、まだ巷ではHTMLを簡単に作る方法で苦労しているようです。そういう方には、CAS記法を使ったら如何ですか? と言いたいところです。しかし、いきなり結論を出しても、ということで、まずは久しぶりに現状を調べてみましょう。最近は、どんなのがあるんだろうねぇ。

こういうときはググるというわけで、「Office HTML 変換」で検索! 最近のGoogle検索はパーソナライズされていますので、すべての人が同じ結果になるかどうかは分かりませんが、私の画面でトップに来たのはこちらです。

「ワード文書を Web ページに変換する」
Last Update:12/22/2016 21:58:35

となっていますので新しいですね。どれどれ。

どうやらマンション管理組合関係のWord文書をHTMLに変換する話のようです。Word2007/2010の「名前を付けて保存」でHTML形式に保存しているようです。ああ、これはもう10年以上前に試した記憶があるなあ、と思って読んでみました。

この「ワード文書を Web ページに変換する」というWebページを作成された方は、Wordで紙に印刷するようにレイアウトした紙のページをWebページでも再現しようと考えておられるようです。そして、変換前のWordのレイアウトをWeb化したときのレイアウトを比較して「レイアウトが崩れること、その原因」についてのまとめがあります。

これはまさにWordで文書を作成している人の典型のパターンです。

まず、Wordの文書は紙に印刷することを想定しています。そして一定のサイズをもつ紙の印刷面にうまく適合するように、そして分かりやすいように画像や文字の大きさを決めてレイアウトするわけです。

しかし、Webページはコンピュータの画面で表示するものです。で画面はWebページを読むコンピュータの種類、最近ではスマホで見る方が多いと思います。スマホの画面でみるかタブレットの画面で見るかなど、使う人の時間やあるいは通勤途上、会社、自宅などの場所によって千差万別になります

ですので、そもそもWebを作るときには印刷レイアウトをそのままWebで再現したい、という発想はあまり良くないんですね。

ではどうしたら良いでしょうか?

まずは、Webページ=様々な画面で見たときに問題がない、というようなWord文書の作り方をする必要があります。このWebページで紹介しているようなチラシ的なレイアウトをした文書はWebに持って行くのはあまり適切ではないでしょう。

WordでHTMLを作るといったときは、まずWord文書の作り方を次のように変える必要があると思います。

・見出しと本文を明確に使い分ける。
・そして見出しの階層は文字の大きさではなくスタイルで表す。
・本文は段落を意識して書く。
・段落の種類(例えば、引用、箇条書きなど)はレイアウトで区別するのではなく、スタイルで区別する。

こうなると、結局、Wordで簡単にHTMLを作る=まずガイドラインの作成から? そのガイドラインはいままでのWord文書の作り方の発想転換を迫るものになって、結局は受け入れられるまでに時間がかかる? やれやれ。

[1] CAS記法リファレンス
[2] 前回:ワンソースマルチユースの課題:HTMLソースのオーサリング問題を改めて考えてみようと。

■シリーズ
(1) ワンソースマルチユースの課題:HTMLソースのオーサリング問題を改めて考えてみようと。
(2) HTMLを手軽に作る方法を再検討します。手軽といえば、まずWordでHTMLを作ることが思いつきます。
(3) Word2013のWord文書をHTML形式で保存を試してみる。その問題点は?
(4) HTMLを簡単に作る方法:h1要素の話(1)

ワンソースマルチユースの課題:HTMLソースのオーサリング問題を改めて考えてみようと。

2017年になってから久しぶりにWebページを自分で編集・更新をし始めています。XHTML形式のWebページをoXygenというXMLエディタ[1]で編集しているのですが、このところ毎日Webページ制作の生産性の低さに辟易しています。

少し遡っての個人的な経験ですが、私は2000年頃からドキュメントの多くをXML(XHTML)で作成するようになり、Webページなども簡単なHTMLタグの組み合わせで作成していました。それらのWebページはXHTMLタグでマークアップして簡単なCSSでレイアウトを施したものです。今から見ますと原始的なものですが、この頃のマークアップ編集はAntenna House XMLエディタという自社開発のXMLエディタを使っていました。この間、Antenna House XMLエディタは、開発があまり進まず、時代の流れに遅れてしまい、結局、販売も断念してしまいました。

その間、HTMLのタグを直接編集するのはどうも生産性が低いのでなんとかうまい解決策がないものかと考えていました。そうした経験からWiki記法のような簡易マークアップを使ってHTMLを書くことで、HTML制作の生産性を高めることができるだろう、と考えました。それが、2010年にCAS-UBの開発を開始した一つの理由です。CAS-UBはWiki記法を拡張したCAS記法をつかってHTML文書を記述します[2]。これは檜山正幸さんという天才的なアーキテクトに設計していただいたものです。自分で言うのもなんですが、いつも良く出来ていると感じます。CAS記法をなかなか普及させられないのは、偏に私のマーケティング力が足りないからだと反省します。

もう一つの理由は、出版の世界は一品生産のため、DITAマニュアルの制作システムのように大きな投資が必要なシステムを作るのは難しいので、PDFとEPUBを作る仕組をWebサービスとして提供するのが向いているのではないかと考えたことです。CAS-UBは出版物を作る仕組としてうまく機能するようになっています。まだまだ改善が必要ですが。

そうしたことで、2011年頃から、業務上の文書はOffice、簡単なWebページはブログ、出版物にするときはCAS-UB、といった使い分をしていました。そんなことで、個人的には問題も感じなくなり、もうワンソースマルチユースには課題はないだろうなどと考え始めていたのです。そして、ワンソースマルチユースの大きな課題であるソースドキュメント編集の問題について、やや忘れかけていました。

で、久しぶりにWebページ(HTML)をXMLエディタ(oXygen)で編集し始めて、HTML直接編集の生産性がさらに低下しているのに辟易しています。ずっと、HTMLの生産性が低い理由は、コンテンツ(原稿)とタグ(マークアップ)の二つを同時に考えるためと思っていました。しかし、今回、久しぶりにWebページを編集してみて、レイアウトのための余計なクラス属性や余計な階層構造が、さらに生産性を下げる原因になっている、と痛感しています。

ちなみに、今『CSS設計の教科書』(谷 拓樹著、インプレス発行、2016年2月第1版第4刷)を読んでいます。この本を見ますとCSSのセレクタには要素ではなく、クラス属性を指定する方を推奨しています。要素のセマンティクスにはあまり依存しないで、div要素に多数のクラスを設定し、CSSではクラスのセレクタを使って部品化し組み合わせる方法などがあります(pp.45-52 OOCSS)。こうなってきますと、今度はコンテンツの編集の際に、レイアウトのためのクラスの設定を適切に行わなければならなくなります。結局、HTMLの編集において、テキストや画像コンテンツ、セマンティクスとしてのHTMLタグ、さらにCSSレイアウトのためのクラス属性の設定、という三つを同時に考慮しなければなりません。これはちょっと? です。

見栄えの良いWebページを作るために、CSSが複雑になりメンテナンスしにくいのでクラス属性を組み合わせ、今度は内容を書くのが大変になる! って本末転倒しているように感じます。どうしたら良いんでしょうかね。

また、最近、2回ほど学術情報XML推進協議会のセミナーに参加して、皆さんの意見も伺い、久しぶりにコンテンツ制作の問題がまだ課題なんだな、と痛感している次第です。ということで、HTMLのオーサリングについて、改めて整理し直そうと考えているところです。

[1] oXygen
[2] CAS記法リファレンス
[3] 次回 HTMLを手軽に作る方法を再検討します。手軽といえば、まずWordでHTMLを作ることが思いつきます。

■シリーズ
(1) ワンソースマルチユースの課題:HTMLソースのオーサリング問題を改めて考えてみようと。
(2) HTMLを手軽に作る方法を再検討します。手軽といえば、まずWordでHTMLを作ることが思いつきます。
(3) Word2013のWord文書をHTML形式で保存を試してみる。その問題点は?
(4) HTMLを簡単に作る方法:h1要素の話(1)

Submission Request to W3C from Vivliostyleについての若干の感想

Current Status of Japanese Typography Using Web Technologies(Submission Request to W3C from Vivliostyle)日本語訳

という文書が1月27日付けで発表されているので、ざっと見てみた。以下に若干の感想を記す。

まず、この文書の中で一番重要なポイントは「Implementations that support pagination, such as EPUB readers or PDF formatters, do need to support such features.」(日本語訳「EPUBリーダーやPDFフォーマッタなどのページネーションをサポートする実装は、そのような機能をサポートする必要があります。」)という点だろう。

もともとJLReqは、紙に印刷する書籍の組版に関して整理したものである。従って、JLReqを議論の前提にする以上、縦横の大きさをもつページの概念が必須である。ページの概念を無視すれはかなりの部分が意味を失ってしまう。

一方において、ブラウザは画面に高速に表示することを目的としている。そしてページサイズの概念はブラウザには必要ない。このため、CSSの勧告仕様または勧告候補だけでは、まだページの大きさを指定できない。CSS Paged Media Module Level 3という仕様にページの大きさを規定する方法があるが、これはまだWorking Draftの段階であり[1]、正式な仕様として参照できる状態ではない。

CSS Paged Media Moduleの歴史は古い。一番最初は1999年にHPのRobert Stevahn氏がWorking Draftを出している。その後、2004年に勧告候補まで行ったが、次の2006年版ではまたWorking Draftに戻ってしまった。CSSを紙への印刷に使おうとするとページの大きさの指定は必須であるのに、正式な仕様ではそれができない状態がもう長いこと続いているわけだ。

現在、リフローのEPUB3を表示するリーダーは、ページ捲りを実装しているものが多い。しかし、これらは各リーダーの独自実装である。ページ捲りの一つとして、例えば、章の見出しを画面の上下・左右中央に配置したいときは縦と横のサイズを指定して、その中央に置くのが素直なはずだ。しかし、CSSではそういう指定はできない。このため、日本語のEPUB3ではトリッキーな指定をせざるを得なくなってしまっている。

このように、紙に限らず、画面表示を前提とするEPUBリーダーやブラウザでページめくりをきちんと実装しようとすればCSS Paged Media Module Level3を実装することが必要になる。

そこまでの理屈は良いとして、CSS Paged Media Moduleがブラウザの世界で受け入れられるかどうかが問題である。なぜならば、CSSの仕様開発作業はブラウザベンダーの主導で進んでいて、ブラウザベンダー以外はほとんど影響力を持っていないからである。さらに言うならば、CSS2.0で勧告になった項目でさえも、ブラウザが実装していないことを理由にCSS 2.1で削除されてしまったものもある。その一例がここで問題にしているページの大きさである。CSS2には@pageというルールがあり、CSS2.0ではそこに’size’プロパティでページの大きさを指定できた。しかし、CSS 2.1では’size’プロパティは削除されてしまった。’size’はCSS Paged Media Moduleに移行した。こうした経緯を知っていれば、CSS Paged Media ModuleをCSS3の勧告にもっていくのが困難なことは予想に難くない。

CSSがサポートしないためにできないことがいろいろあるのは確かである。そしてこれに正面から取り組もうとすると、現状のCSSワーキンググループと長く熾烈な論争になるのは確実である。このサブミッションがどう受け止められるか、興味深いところである。

[1] CSS Paged Media Module Level 3 W3C Working Draft 14 March 2013

ページっていったい、どういう意味なんだろう? ――Webページ

個人的にはずっと長いことページという言葉を紙と連想して使ってきました。もう一方で、ここ20年くらいはWebページという言葉もかなり頻繁に使っています。そうしますと、この二つのページはかなりかけ離れたもののように感じるのですが、ページっていったいどういう意味でしょうか? 

Webの発明者Tim Berners Leeの本[1]によりますと、WorldWideWebプログラムを初めてCERNの限定されたNeXTユーザーにリリースしたのが、1991年3月なのだそうです。そうしますと、Webページという言葉は1991年より前にはなかったはずです。

Webページという言葉を初めて使ったのが誰かは分かりませんが。とりあえず、上記の本でpageに関する文章を拾ってみました。

これらを見ますと、まず、HTMLのソースコードはWebページではないようです。HTMLはページとして整形する方法を記述しているもので、Webページとはブラウザなどでワープロのように可視化した状態を指すようです。

…Hyper Text Markup Language (HTML) I had written, which describes how to format pages containing hyper text links.(p.29)

The browser would decode URIs, and let me read, write, or edit Web pages in HTML. (p.29)

… users could bookmark any place and return to it, and could make links into any place from another document. This would give a feeling of persistence, of an ongoing existence, to each page.(p.37)

I never intended HTML source code (the stuff with the angle bracket) to be seen by users. A browser/editor would let a user simply view or edit the language of a page of hypertext, as if he were using a word processor. (p.42)

[1] 『Weaving the WEB』(Tim Berners Lee, Harper, 1999-2000)

★本ブログの内容をもう少し整理して、次のWebページとしましたので、ぜひご一読ください。
本のかたちを考える ― その2 ページって何? 「ページ」と本のかたちとの関係

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

ページってどういう意味? 紙のページ、Webページ (memo)

かねがね疑問に思っていることがあります。それはタイトルに挙げました「ページ」という言葉です。

個人的には、ページという言葉を、従来、ずっと紙の1ページとして考えてきました。つまり、ある大きさでカットされた紙があり、その上に確保された白紙の領域に、文字または絵が書かれたり、印刷またはプリントされたときその面がページとなります。実際に文字がなくても印刷されることが想定されていれば白紙のページです。

一方、文字が印刷されることが想定されていないとページとは言いません。たとえば、ティッシュペーパーは大体20cm四方でカットされていますが、ティッシュペーパーの1面をページと言う人はいないでしょう。

でも、紙に文字が印刷されていても、例えば紙幣の面、チケットや切符の面はページとは言わないように思います。

ページという言葉が断裁された紙と密接に結びついているかと言えば、全く逆の、Webページ、あるいはホームページという使い方もあります。

例えば、Mozillaの用語説明では、Webページとは「ブラウザで表示できる文書のこと」とされています。Webページのことを略してページとも言うそうです。特にHTMLで表記された文書がWebページであり、PDFのような文書はWebページとは言わないそうです[1]

でもなぜWebにページという言葉を使うんでしょうね。紙のページとWebのページとでは共通項がないような。そういえば、言葉が意味的にやや反対に使われる例として、以前にメモした、解像度[3]もそれに近いように思います。

Cambridge Dictionaryでは、Webページとは「a page of information on the internet about a particular subject, that forms (a part of) a website:」[2](特定の主題についての、インターネット上の情報の1ページであり、Webサイト(の一部)を構成する)とあります。

そうしますと、ページというのは情報と密接に関係しているようにもみえます。

言葉の意味は時代に応じて変化するものです。そうなってきますと、将来は、ページとは紙のページではなく、ブラウザで見るHTMLファイルのことになるのでしょうか? 

[1] What is the difference between webpage, website, web server, and search engine?
[2] web page
[3] 解像度とは(草稿)

続き:ページってどういう意味? 続編 Kindleの紙の本の長さと、KENPについて

10月24日(月)バージョンアップ内容についてご案内するセミナーを予定しています。お申し込みはこちらからどうぞ:
http://www.cas-ub.com/user/seminar.html

★本ブログの内容をもう少し整理して、次のWebページとしましたので、ぜひご一読ください。
本のかたちを考える ― その2 ページって何? 「ページ」と本のかたちとの関係

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