簡単そうで難しいPDFからのテキスト抽出 解決策を考えます

Adobe Readerなどには、表示しているPDFからテキストをコピー・ペーストする機能があります。内容のコピーが禁止されていないPDFでは、リーダーのコピー・ペースト機能を使ってテキストを取り出して再利用できます。

しかし、このテキスト抽出で取り出したテキストは、文字列の順番が画面に表示される(眼で見た順番)通りにはならないことがあります。

簡単な例を示しましょう。ここに二つのPDFを用意しました。サンプルPDFはダウンロードしていただけます。

PDF1(test.pdf)
PDF2(test2.pdf)

この二つのPDFを表示して横に並べますと、次の図のように画面に表示されるテキストは全く同じです。

この二つのPDFからテキストをコピーしてみます。これは次の操作でできます。
Adobe ReaderでPDFを表示している状態で、「編集」メニュー⇒「すべてを選択」します。選択範囲が次のように表示されます。

次に、「編集」メニュー⇒「コピー」して、メモ帳に貼り付けます。結果を比較してみましょう。

(1)次は左側のPDFから取り出したテキストです。

三連休の最終日10月8日(月・祝日)に開催された
技術書典5。
CAS電子出版は初回から連続して出典しており5回
目の出典です。今回は事情により初めてスポン
サーブースにて出典しました。
事前には大型の台風25号が上陸するかもしれな
いという予報もあり、大変心配しました。蓋を空け
てみますと台風の方は予想よりも速く通り過ぎて、
杞憂でしたが、運営の方々をはじめ心配されたこ
とでしょう。
こうしたイベントは天気次第というのはつらいとこ
ろです。雨にならなくて良かった!

(2)次は右側のPDFから取り出したテキストです。

三連休の最終日10月8日(月・祝日)に開催された
技術書典5。
事前には大型の台風25号が上陸するかもしれな
いという予報もあり、大変心配しました。蓋を空け
てみますと台風の方は予想よりも速く通り過ぎて、
杞憂でしたが、運営の方々をはじめ心配されたこ
とでしょう。
こうしたイベントは天気次第というのはつらいとこ
ろです。雨にならなくて良かった!
CAS電子出版は初回から連続して出典しており5回
目の出典です。今回は事情により初めてスポン
サーブースにて出典しました。

二つのテキストは内容の順序が違っています。このようにPDFでは画面または印刷上では同じ順序で表示される文字列であっても、テキストを抽出した結果が同じになるとは限りません。こうした問題を実際に経験されておられる方も多いでしょう。

このためPDFからテキストを取り出して再利用するのが難しくなります。最悪の場合、もう一度打ち直しになります。

参考資料:PDF資料室で、もう少し整理してみました。
「簡単そうで簡単ではないPDFのテキスト抽出」

アンテナハウスでは、この問題を解決する方策をいろいろと用意しておりますので、お困りの方は一度ご相談いただければと存じます。
お問い合わせ先

デジタル時代のレイアウトは、ユーザーの目に見えない神プロセス

『印刷用語ハンドブック』(帆風出版プロジェクト編、印刷学会出版部発行、2007年5月第2版)の3-3-5 レイアウトには、つぎのようにあります。

整理した原稿をまとめ組み立てる設計図で,文字,図,表,写真などの配置,大きさ,色など次工程への指示書となるものを指定することをレイアウト,または割付(わりつけ)といい,主にデザイナーの仕事である。(p. 72)

最近、ある案件で営業担当者からの相談がありました。お客さんはPDFにテキストボックス注釈をつけたいらしいのです。元のデータはデータベース(DB)に入っているらしいのにどうやってPDFがつくられるのか、営業担当者からお客さんに問い合わせしてもピンとくる返答が得られない、とのことです。

DBから新規にPDFを作り、その際に同時にテキストボックス注釈をつけるのであれば、弊社の製品では「AH Formatter」が最適です。AH Formatterでは、PDFへテキストボックス注釈を付けることができます。

AH Formatter
PDF出力における注釈

また、PDFが既にできているのであれば、弊社の製品では「PDF Tool API」で、PDFにテキストボックス注釈をつけられます。

PDF Tool API

ですので、PDFにテキスト注釈を付けるとして、それが:
①新しく作るPDFに対してなのか
②既存PDFに対してなのか
で弊社から提案するべき製品が異なります。

PDFにテキスト注釈をつける、という要件だけでなく、もう少し詳しい情報が必要です。

お客さんに面談させていただき、そのあたりを確認しました。そうしましたところ、どうやら、ご担当の方は、DBに入力すればPDFができると想定していたようです。

私たちのような組版ソフトのベンダーの担当者は、DBからPDFを作るにはレイアウト指定が必要、ということを常識として知っているわけです。しかし、普段、できあがったDBやWebを使っている立場から見ますと、フォームでデータを入力すれば自動的にPDFがでてくるように見えるわけです。

最初に紹介したアナログ印刷では、デザイナーという職種が担うレイアウト工程という役割分担があります。レイアウトが目に見える工程です。

それに対して、DBに入っているようなデジタルのデータからPDFを作るというデジタルな出版処理では、レイアウトという工程が利用者の目に見えなくなっています。

現代のデジタルパブリッシングにおいては、レイアウトはXSL-FOやCSSというレイアウト指定言語を使う開発者と自動組版ソフトが水面下で担うわけです。

ユーザーから見ますと、レイアウトは神プロセスです。

本、マニュアル、報告書などのブック形式出版物のWebページをどのように作成するか?

本、マニュアル、報告書などをWebページとして公開するにはどういう風にWebを構成したら良いか?

これがCAS-UB V5のバージョンアップにおけるテーマの一つです。

今年の春先に、いろいろな本のWebページの作り方を調べて、次のブログ[1][2]で簡単に整理してみました。

[1] 本はWeb化するか? PDFとブック型WebページとEPUBを考える
[2] 本はWeb化するか? (続き)Webアプリケーション化したオンライン版の本 vs シンプルなHTML+CSSの本

その結果は次のWebページに整理しています。

[3] ワンソースマルチユースで拓く、ブック型Webページの未来

Webページの目的あるいは種類として「ブック型Webページ」があります。本は、ずっと長いこと紙に印刷して製本する形態で提供されてきました。そして、現在、本の内容が電子媒体で提供されはじめています。そこでブック型Webページをどのように構成すると良いか、が重要な検討課題になっています。

CAS-UBのV5では、そのブック型Webページの形態として3つのポイントを考えました。

①表紙に相当する「タイトルページ」(書名や版元・発行日・著者名など)を作るかどうか。
②本の目次はナビゲーションのためには重要な要素です。これをどのように画面に表したら良いか。
③読み進める順序をナビゲーションとして表す。

次はCAS-UB V5で制作したブック型Webページの見本です。

『XSL-FOの基礎 第2版』

上の見本では目次のフレームをレスポンシブにしており、ノートPCなどの広い画面では次のように、目次のフレームと本文のフレームを横に並べて表示します。

画面の幅が狭くなったときは、目次のフレームをアイコンとして表示します。

目次のアイコンをクリックしますと、目次のフレームを本文の上にオーバラップして表示します。

Webページ制作の生産性をアップする: ExcelファイルからQ-A(QuestionーAnswer)ページを自動生成

弊社では、11月下旬から、システム・ソリューション製品の「製品ナビゲータ」ページを公開しました(次のバナーをクリックしてみてください)。

弊社のWebページには、こうしたQ-Aページがいろいろあります。従来、こうしたページは手作業で編集していました。Q-Aページはリンクが多いこともあり、Q-A項目を追加する毎に、Webページを手作業で更新するのは結構面倒です。決して生産性が高い作業とは言えません。

大ボリュームのQ-Aページであれば、システムを作って自動化ということも考えられます。
しかし、数百件項目のQ-Aページへの自動化投資はちょっと重すぎます。

ということで、今回は、Excelファイルに質問と回答の内容を整理・編集し、Excelファイルをアップすると自動的にWebページに変換する仕組を作成しました。

レイアウトは従来のQ-AページのCSSを使っていますので、見栄えは従来のページと一見同じですが、作り方は全く異なります。

この仕組は完全に汎用というわけではないですが、お客様用のページに合わせて比較的簡単にカスタマイズできるかと存じます。
関心のお持ちのお客様には、カスタマイズして専用のものを構築致しますのでお問い合わせください。

slideshareでスライドを公開しました:「エクセルファイルをアップロードしてHTMLを自動生成」

お問い合わせ先:cas-info@antenna.co.jp

アンテナハウスのWebサイトが全面的にレスポンシブになりました

アンテナハウスのWebサイト(https://www.antenna.co.jp/)は、7月10日より全面的にレスポンシブ化してモバイルでも読み易いようになりました。

例えば、「PDF資料室」は、従来はモバイルでは次のように表示されていました。

これでは、狭いモバイル画面で表示するとき、左のナビゲーションメニューのため本文の表示幅がさらに狭くなってしまって大変読みにくい状態です。そこで、新たにモバイルで次のように表示されるようにレイアウトを追加したものです。

CSSとメニュー表示用のJavaScriptの機能を追加して、画面幅が狭いときはモバイル用のレイアウトで表示するようにしたものです。PCファーストのレスポンシブデザインと言えるかもしれません。

アンテナハウスのWebサイトは、2011年に全面的にリニューアルしたものです。当時はモバイルWebはまだマイナーな存在でしたので、WebページはPCの画面を想定してデザインされています。

その後、スマホの隆盛により、Webサイトのデザインの流行もだいぶ変っています。デザインの流行はともかく、PC向けのデザインのままではスマホの画面ではとても読みにくいものとなってしまいます。そこで、とりあえず、レスポンシブデザインの考え方を取り入れて、スマホでもできるだけ読み易いようにすることにしました。

レスポンシブデザインは、表示する画面の幅に応じてレイアウトを最適化するものです。具体的にはCSSのメディアクエリーの機能を使って画面幅に応じたCSSデザインを適用するものと考えます[1]。市販されているレスポンシブデザインの本を読みますと、デザインパターンなどが紹介されており、それらはほとんど、Webをデザインし直して、ゼロから作り直すことを想定しています。考え方としてはモバイルファーストが良いとされているようです。

しかし、アンテナハウスの現在のWebサイトのように(会社の規模にしては)膨大な情報量を用意しているページを、モバイルファーストでゼロから作り直す、というのは無理があります。不可能とまでは言いませんが、工数が大きくなりすぎてとても短時間では実行できません。そこで、今回はPCのときは従来のデザインはそのままとし、狭い画面でのみ新しいデザインとするという、一般の本に書かれているのとは逆の方法でレスポンシブ化してみました。

これにより、ほとんどのWebページでCSSとJavaScriptを入れ替えるだけでレスポンシブ化ができています。

[1]幾つかの本をチェックしてみますと、この考え方は、少し単純化しすぎかもしれません。デザイナーの理想とすることは分からないでもないですが、膨大な(?)Webページをゼロから作り直しは無理があると思います。

本はWeb化するか その3 J-STAGEの新バージョン評価版をみて考えたこと

6月2日開催された「学術情報の流通を考える-ORCIDとJ-STAGE新バージョン評価版をめぐって-」セミナーに参加しました[1]

ORCIDの話も面白かったのですが、小倉 辰徳氏によるJ-STAGEの新バージョンの紹介が、いま考え中の課題「本はWeb化するか」の観点から大変参考になりました。セミナーのスライドはこちらです[2]

J-STAGEは、「見やすく,使いやすいジャーナルサイト構築のため,海外のジャーナルプラットフォームを参考にしつつ,デザインを一新する.」(スライド[2]p5より)として開発中です。機械学会、薬学会より3誌をモデル誌として選択して、1年ほど前からベータ版の運用試験を行っており、2017年度中に全雑誌に適用する予定とのことです。

画面の説明など、詳しくはスライドで紹介されていますのでご参照ください。

早速、J-STAGEの評価版Webページを見ました。機械学会の「Mechanical Engineering Letters」は全文HTMLではなく、PDFダウンロードです。それに対して薬学会の「Chemical and Pharmaceutical Bulletin」「Biological and Pharmaceutical Bulletin」は全文HTMLを見ることができます。

例えば、Chemical and Pharmaceutical Bulletin[3]は、画面切り替えタブで、ジャーナルのホームページ、発行前の原稿が確定した版(Advance online publication)、各号(Journal issue)、主要論文(Featured articles)、ジャーナルについて(About the journal)に切り替わります。そして各論文の内容はPDFダウンロードに加えて全文HTMLを見ることができます。

ちなみに、Palladium(0)-Catalyzed Benzylic C(sp3)–H Functionalization for the Concise Synthesis of Heterocycles and Its Applications(Volume 65 (2017) Issue 5 Pages 409-425)の全文HTMLのWebページを見てみます[4]

Webページ全体のデザインは次のようになっています。

このHTMLページは、Window幅を狭くすると2段階のブレークポイントで表示が切り替わります。第1段階ではジャーナル上位のダウンロードメニューが右からジャーナル概要の下に切り替わります。第2段階でArticle overviewのメニューがボタンに縮退します。スマホで見ると次のようになります。

こうしてみますと、まさに現代風のレスポンシブデザインになっています。

そこで、気になるのが、このWebページがどのように作られているかです。ソースファイルを見ますと、Webページは次のような構成になっています。

HTML5で1953行であり、3行目~35行目がhead要素。9個の外部CSSをリンクしています。
36行目~1952行がbodyで、bodyの最後部1378行目~1952行にJavaScriptがあります。かなり直書きされており、全体の行の29%がJavaScriptです。

bodyは次のように分かれています。
・header要素:39~148行
・ジャーナル専用部
・footer要素:1311~1362行目
・フィードバックボタンなど1363~1377行目

header、footerはJ-STAGEシステム全体のメニューなどがあり、ジャーナル専用の部分は149行目~1310行目です。

ジャーナル専用部は次のように分かれています。
・ジャーナル紹介:151~163行目
・画面切り替えのタブ:166~180行目
・パンクズリスト:180~194行目
・記事毎のタイトルと概要・右メニュー:195~306行目
・ジャーナル記事本文:309~1304行目

全体としては記事本文が半分でそれ以外がタイトルやナビゲーションメニュー部となります。

こうしてみますと、Webページは、コンテンツが半分でそれ以外がリンクやナビゲーションのHTMLとCSSとJavaScriptから構成されている、一種のプログラムとデータの集合体と言えます。

Web誕生の頃は、HTMLだけで書いていたのですが、その後HTMLとCSSが分離し、現在のWebページは、HTML+CSS+JavaScriptとなっていますが、このJ-STAGEページはその典型例です。

こうしたWebページはもはや人手でHTMLをコーディングするものではなくなり、CMSに登録したデータからCMSの機能を使って生成しているはずです。そういう意味でCMSに完全依存となっています。

出版物のコンテンツがプログラムと組み合わさってWeb上のアプリケーション化しています。学術情報誌のページとなりますと、こうしたページが何万、何百万個と作られます。そこで、私として一番気になるのは保守コストです。保守は3つに分かれます。

(1)まず、障害対応です。Webページに直書きされているJavaScriptページは一番問題で、ここにバグがあるとWebページそのものを作り直しとなります。

(2)次は改良です。CSSとJavaScriptが膨大になっていますので、これらを改良したとき今までのWebページに問題が起きないかどうか? 

(3)次に抜本的な作り直しです。今回のJ-STAGEのユーザーインターフェイスの作り直しは2015年から開始しているとのことですので、既に2年掛かっています。これを2017年度内に全雑誌に適用するということですが、膨大な費用が掛かっているのは間違いありません。

WebのコンテンツをHTMLで作り、CSSでレイアウトし、JavaScriptでインターフェイスを操作する、という流れ。さらにスマホの登場でレスポンシブにするという流れが加わり、Webページのメンテナンスコストがどんどん大きくなっていく傾向にあるように感じます。

ここでもう一度、コンテンツとアプリケーションを分離したEPUB3の良さを見直してみる必要がありそうです。特に、学術論文のようにタイトル数が膨大なものをWebにするとき、プログラムを組み込んでアプリケーション化すると、将来の保守コストが大きな問題になるのは間違いないところです。

[1] XSPAセミナー「学術情報の流通を考える-ORCIDとJ-STAGE新バージョン評価版をめぐって-」のご案内
[2] J-STAGEの評価版について(スライドシェア)
[3] Chemical and Pharmaceutical Bulletin
[4] Palladium(0)-Catalyzed Benzylic C(sp3)–H Functionalization for the Concise Synthesis of Heterocycles and Its Applications(Volume 65 (2017) Issue 5 Pages 409-425)

参考
ワンソースマルチユースで拓く、ブック型Webページの未来 (ブログ記事2回分を整理したHTMLページ)

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

『オックスフォード英単語由来大辞典』[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)では、セクションの深さと見出しのランクは同じとなった(次回)