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)