カテゴリー別アーカイブ: コラム

月曜日連載! Microsoft Wordスタイル探索 (36)『HTML on Word』の使用例(1)見出しと目次のあるWebページの作成

前回は、Microsoft Wordを使ってタグを書かずにリッチなHTMLを作成できる『HTML on Word V1.0』についてご案内しました。

今回は、『HTML on Word』を使ってできることをご紹介します。
ご承知のとおり、Microsoft Wordはオフィスで文書を作成する定番のワードプロセッサで、次のような強力な文書編集・校閲機能があります。

・検索・置換
・文書校閲機能-用語統一、文法チェック、コメント機能など
・見出しスタイル
・目次作成機能
・自動番号付け
・アウトライン番号、段落番号
・リンクと参照
・表、作画機能

次に、見出しスタイルによる①見出し作成⇒②アウトライン編集⇒③目次の自動作成⇒④目次のあるWebページの作成の例を示します。

この図は、Wordで編集中の『HTML on Word』のマニュアルの一部です。スタイルギャラリーの見出し1、見出し2、見出し3を使って階層化した見出しを付けています。

Wordで編集中のマニュアル、見出しの例

Wordで編集中のマニュアル、見出しの例

Wordのアウトライン編集を使えば、階層化した見出しをアウトラインで表示して編集できます。

階層化した見出しをアウトライン表示

階層化した見出しをアウトライン表示

このようにスタイルを使って付けた見出しからは、自動的に目次を作ることができます。

自動生成した目次

自動生成した目次

ここまでは、Microsoft Wordの見出しスタイルとその応用例です。このようにしてWordで作成した見出しと目次がある文書を『HTML on Word』で変換すれば、目次のあるWebページを簡単につくることができます。

HTML on Wordで作成した目次のあるWebページ

HTML on Wordで作成した目次のあるWebページ

Wordを使えば、このように簡単に見出しを付けたり、目次のあるWebページを作ったりできるのですが、『HTML on Word』を使えば、さらにそれをそのままHTMLに変換できます。

このあたりは明日(12日、火曜日)16時からの「ちょっと一息・アンテナハウスウェビナー」でもう少し詳しくご紹介いたします。

※画像をクリックするとウェビナーページに移動します。

お時間がございましたら、ぜひ、ご参加ください。

——-
◆前回:月曜日連載! Microsoft Wordスタイル探索 (35)Word でリッチなHTMLを作成しよう
◆次回:月曜日連載! Microsoft Wordスタイル探索 (37)Wordで書いたお知らせをWebページにする

シリーズ総目次
〇関連ページ
Microsoft Wordを使って報告書などの長文を作成する人向けの新知識満載です。 Microsoft Wordのアウトラインと見出しスタイルを活用する方法(概要)

Antenna House Office Serversとは

Antenna House Office Serversとは


月曜日連載! Microsoft Wordスタイル探索 (35)Word でリッチなHTMLを作成しよう

弊社では、来る10月18日(月)Microsoft Wordを使ってタグを書かずにリッチなHTMLを作成できる『HTML on Word V1.0』を発売します。

『HTML on Word』は、①Wordで作成・保存した文書(docx)ファイルをHTMLに変換する「Word2HTML」変換プログラムと、②Wordのリボンに組み込むアドインから構成します。

①Word2HTML変換プログラムは、弊社のOffice Document Server Converter(OSDC)のWord文書解析機能を応用して開発したアプリケーションで、変換にはWordの機能を使わずに、独自処理を行います。

②アドインを使うとWordで編集中の画面上で、WordのリボンのメニューからWord2HTML変換プログラムを操作して、編集中の文書をHTMLに変換します。変換が終わるとブラウザなどで変換結果を表示できます。

これにより、変換結果を見ながら変換中の文書を期待通りの変換になるように調整できます。

次はアドインによる変換例です。
1.Word文書を編集

Word文書編集画面

Word文書編集画面

2.アドインタブで変換設定と変換実行
・変換結果のHTMLにリンクするCSSファイルを指定
・変換先フォルダーを指定
・変換を実行

アドインのメニューから変換設定と実行

アドインのメニューから変換設定と実行

3.変換結果をブラウザでプレビュー
変換結果はWindowsでHTMLに紐付けたアプリケーションで開きます。ここではブラウザを紐付けているのでブラウザで表示します。

変換結果をブラウザで表示

変換結果をブラウザで表示

10月1日付けの本製品のニュース・リリースは、Wordで編集し、本製品でHTMLに変換したものです(注を参照)。

ところで、「リッチなHTML」とはどういう意味だろう? と疑問をお持ちかもしれません。リッチなHTMLとは、文書表現に加えて、表や図形を使った内容豊かなHTMLを表す造語です。

Webが登場して30年近くなり、Webが大変身近になっています。この立役者はタグを直接書かずにWebページを記述するブログの普及です。また、ここ10年ほどはマークダウンのような簡易記法が人気を集めています。しかし、ブログやマークダウンはHTMLタグの記述手段としては機能的に貧弱です。また、文書を作成・編集するための支援機能があまり充実していません。例えばブログやマークダウンで高度な表を作るのは困難です。こうしたことから、現在のWebページは断片的で内容が乏しい状態となっています。

こうした事情を鑑みて、現在のWebページの内容をもっと表現豊かなものにしたいという願いを込めて、リッチなHTMLという言葉を作りました。

(注)ニュース・リリース公開にあたって、Webページのメニュー表示、サイドメニューなど、弊社Webページ全体に合わせて表示するためのテンプレートにHTMLを差し込む調整を行っています。

——-
◆前回:月曜日連載! Microsoft Wordスタイル探索 (34)HTMLとはなにか。だれが決めているのか。
◆次回:月曜日連載! Microsoft Wordスタイル探索 (36)『HTML on Word』の使用例(1)見出しと目次のあるWebページの作成
シリーズ総目次
〇関連ページ
Microsoft Wordを使って報告書などの長文を作成する人向けの新知識満載です。 Microsoft Wordのアウトラインと見出しスタイルを活用する方法(概要)

Antenna House Office Serversとは

Antenna House Office Serversとは


月曜日連載! Microsoft Wordスタイル探索 (34)HTMLとはなにか。だれが決めているのか。

来る10月12日(火)16時からの「ちょっと一息・アンテナハウスウェビナー」は、

WordでHTMLを書けたらスゴイ!という題で、Microsoft Wordで書いた文書からWebページ(HTML)を作るというトピックで開催する予定です。

次の画像をクリックするとウェビナー案内ページが開きます。

関心をお持ちの方は、ぜひ、ご参加ください。

さて、このブログをお読みいただいている方でHTMLという言葉を知らない人は少ないと思います。しかし、HTMLという言葉を知っている人でも、HTMLとはどういうもので、どのように使うのか、そもそも誰が決めているのか? について詳しく知っている人は少ないのではないでしょうか。そこで、まずHTMLとはなにか。誰が決めているのか。について極簡単に紹介してみます。

HTMLの概念はWebとともに誕生したものです。Webの基本概念を作り出したのはTim Berners-Leeです。彼の書いた“Weaving the Web”という本によると、1990年頃からWebを構成する3要素であるURL(資源の場所を特定する)、HTTP(通信規約)、HTML(ハイパーテキスト記述言語)を構想したようです。

Webが世間に登場したのは1990年代前半ですが、Webが一般に流行りだしたのは、1990年代後半です。ちなみに、アンテナハウスのWebサイトは1996年に開設しました。

そのころからW3C(Tim Berners-Leeが中心になって設立したWeb標準化コンソーシアム)でHTML拡張と標準化がすすめられました。

HTML3.2 (1997年1月W3C勧告、2018年3月に譲位)
HTML 4.01(1999年12月W3C勧告、2018年3月譲位)
XHTML1.0 (2000年1月W3C勧告、2018年3月譲位)
HTML5(2014年10月W3C勧告、2018年3月譲位)
HTML 5.1 (2016年11月W3C勧告、2017年10月第2版、2021年1月に譲位)
HTML5.2(2017年12月W3C勧告、2021年1月に譲位)

譲位という概念は難しいですが、W3Cの勧告が放棄される状態は次の3種類があると説明されています。

W3C勧告の放棄

W3C勧告の放棄


W3C Process Document、6.2.12.3. Abandoning a W3C Recommendation

ここではSupersededの状態を譲位と表現しました。譲位された仕様の参照先はすべて、HTML Living Standardとなっており、HTML Living StandardがWebページを記述するための、現在有効な唯一の仕様となります。

この10年ほどHTML5という言葉が、Webページの代名詞になっていました。W3Cの仕様ではHTML5という言葉が仕様の名前として使われています。

それに対して、HTML Living StandardのページではHTML5という言葉は、現代のWeb技術を表すバズワードであるとされています。
1.2 Is this HTML5?

HTML5はもはや特定のHTMLを示す用語ではなくなったことになります。

また、HTML Living StandardではXHTMLという用語はなくなってしまい、代わりにHTMLをXML文法で書く方法が規定されています。

1.8 HTML vs XML syntax

30年で、Webを支える技術の一つであるHTMLを制定する枠組みが、大きく変わったと言えます。

ところで「譲位」という用語は不適切という意見もいただきましたが、W3CはWebの帝王だったので。
——-
◆前回:月曜日連載! Microsoft Wordスタイル探索 (33)Word文書からWebページ(HTML)変換について考える
◆次回:月曜日連載! Microsoft Wordスタイル探索 (35)Word でリッチなHTMLを作成しよう

シリーズ総目次
〇関連ページ
Microsoft Wordを使って報告書などの長文を作成する人向けの新知識満載です。 Microsoft Wordのアウトラインと見出しスタイルを活用する方法(概要)

Antenna House Office Serversとは

Antenna House Office Serversとは


月曜日連載! Microsoft Wordスタイル探索 (33)Word文書からWebページ(HTML)変換について考える

先日、noteに「行政文書をマークダウン化しよう!ところでマークダウンって何? 」という記事が掲載されていました。

これは従来Wordで書いてPDFで配信されていた、経済産業省情報プロジェクト室 の「PlayBook」を、マークダウンで書いてGitHubで公開するように変更した過程について説明したものです。

実際にマークダウンで書いた文書の例として、「 meti-dx-team/METI-Digital-Service-Playbook」から閲覧できる「PlayBook」の内容をご覧いただくと良いでしょう。

マークダウンは、10年位前から流行り始めており、ソフトウェアの簡易マニュアルではよく見かけます。簡単なメモを書いて、それを随時更新していくには便利であり、どちらかというと書き手と読み手が同じ集団であるときに一番効果を発揮すると思われます。そういう意味では、「PlayBook」の作成には向いていると言えるでしょう。

しかし、このマークダウンの「PlayBook」が、一般の人に読みやすいか、というとどうでしょうか? 読みやすい、理解しやすいと思った人がどの位いるでしょうか?

個人的には、マークダウンはシンプルなメモ的な文章は良いですが、こういう長文は向かないんではないだろうか? と感じます。それにもう少し図表やイラストを入れる方が良いのではないでしょうか? 私自身、マークダウンで本を書いたことがありますが、その経験を踏まえて、マークダウンは表現力が決定的に足りない、と考えています。もちろん、マークダウンにはHTMLのタグを直接書けますので、HTMLタグを直書きすれば良いのですが、それを始めるとHTMLタグのオンパレードになってしまうのです。実際のところ、それならHTMLで書けば良いや、となります。

そういう風に考えますと、やはりWordの方が、マークダウンよりは簡単に豊かな表現ができそうです。では、Wordで書いた文書を、簡単に、Webページに掲載するようなHTMLにできるか、ということになります。これについては既に検討しました。

月曜日連載! Microsoft Wordスタイル探索 (31)WordのWebページ保存は使えない。その理由は?
月曜日連載! Microsoft Wordスタイル探索 (32)Word文書からWebページ(HTML)変換の既存実現手段は?

Word文書をHTMLに変換するツールやWebサービスは多種多様ありますが、ざっと調べてみた結論としてはなかなかこれといったものはないようです。

根本的な理由として考えられるのは、Microsoft Wordはもともと紙に印刷する文書を作成するためのワープロであり、特にレイアウトの指定方法がA4、B5といった固定サイズのページを大前提としていることです。それに対して、Webページのレイアウトは考え方が全く異なります。

従来のWordからHTMLへの変換ツールは、Wordで指定されたレイアウトをそのままHTMLタグに出そうとしています。

Wordの便利な点の一つに作表機能の使いやすさがあります。そこで、Wordで作った図のような表をHTMLにしたいと考えたとします。

Wordで作成した表の例

Wordで作成した表の例


この表を、あるWordからHTMLに変換するWebサービスでHTMLにすると次のような出力になります。
<div style=’margin:0cm;text-align:justify;font-size:14px;font-family:”游明朝”,serif;’>
<ul style=”margin-bottom:0cm;list-style-type: undefined;”>
<li style=’margin:0cm;text-align:justify;font-size:14px;font-family:”游明朝”,serif;’>
<h2 style=’margin-top:0cm;margin-right:0cm;margin-bottom:0cm;margin-left:42.55pt;text-align:justify;text-indent:-21.3pt;font-size:14px;font-family:”游ゴシック Light”;font-weight:normal;’>表のスタイル</h2>
</li>
</ul>
</div>
<div align=”center” style=’margin:0cm;text-align:justify;font-size:14px;font-family:”游明朝”,serif;’>
<table style=”border-collapse:collapse;border:none;”>
<tbody>
<tr>
<td style=”width: 120.5pt;border: 1pt solid rgb(191, 191, 191);padding: 0cm 5.4pt;vertical-align: top;”>
<p style=’margin:0cm;text-align:justify;font-size:14px;font-family:”游明朝”,serif;’><strong>表のスタイル</strong></p>
</td>
<td style=”width: 63.6pt;border-color: rgb(191, 191, 191) rgb(191, 191, 191) rgb(191, 191, 191) currentcolor;border-style: solid solid solid none;border-width: 1pt 1pt 1pt medium;border-image: none 100% / 1 / 0 stretch;padding: 0cm 5.4pt;vertical-align: top;”>
<p style=’margin:0cm;text-align:justify;font-size:14px;font-family:”游明朝”,serif;’><strong>標準の表1</strong></p>
</td>
<td style=”width: 92.1pt;border-color: rgb(191, 191, 191) rgb(191, 191, 191) rgb(191, 191, 191) currentcolor;border-style: solid solid solid none;border-width: 1pt 1pt 1pt medium;border-image: none 100% / 1 / 0 stretch;padding: 0cm 5.4pt;vertical-align: top;”>
<p style=’margin:0cm;text-align:justify;font-size:14px;font-family:”游明朝”,serif;’><strong> </strong></p>
</td>
<td rowspan=”2″ style=”width:2.0cm;border:solid #BFBFBF 1.0pt;border-left:none;padding:0cm 5.4pt 0cm 5.4pt;”>
<p style=’margin:0cm;text-align:center;font-size:14px;font-family:”游明朝”,serif;’><strong>最後の列</strong></p>
</td>
</tr>
<tr>
<td style=”width: 120.5pt;border-color: currentcolor rgb(191, 191, 191) rgb(191, 191, 191);border-style: none solid solid;border-width: medium 1pt 1pt;border-image: none 100% / 1 / 0 stretch;background: rgb(242, 242, 242) none repeat scroll 0% 0%;padding: 0cm 5.4pt;vertical-align: top;”>
<p style=’margin:0cm;text-align:justify;font-size:14px;font-family:”游明朝”,serif;’><strong> </strong></p>
</td>
<td colspan=”2″ style=”width: 155.7pt;border-color: currentcolor rgb(191, 191, 191) rgb(191, 191, 191) currentcolor;border-style: none solid solid none;border-width: medium 1pt 1pt medium;background: rgb(242, 242, 242) none repeat scroll 0% 0%;padding: 0cm 5.4pt;vertical-align: top;”>
<p style=’margin:0cm;text-align:center;font-size:14px;font-family:”游明朝”,serif;’><span style=”color:black;”>セルの左右結合</span></p>
</td>
</tr>
<tr>
<td style=”width: 120.5pt;border-color: currentcolor rgb(191, 191, 191) rgb(191, 191, 191);border-style: none solid solid;border-width: medium 1pt 1pt;border-image: none 100% / 1 / 0 stretch;padding: 0cm 5.4pt;vertical-align: top;”>
<p style=’margin:0cm;text-align:justify;font-size:14px;font-family:”游明朝”,serif;’><strong>合計</strong></p>
</td>
<td style=”width: 63.6pt;border-color: currentcolor rgb(191, 191, 191) rgb(191, 191, 191) currentcolor;border-style: none solid solid none;border-width: medium 1pt 1pt medium;padding: 0cm 5.4pt;vertical-align: top;”>
<p style=’margin:0cm;text-align:justify;font-size:14px;font-family:”游明朝”,serif;’><strong> </strong></p>
</td>
<td style=”width: 92.1pt;border-color: currentcolor rgb(191, 191, 191) rgb(191, 191, 191) currentcolor;border-style: none solid solid none;border-width: medium 1pt 1pt medium;padding: 0cm 5.4pt;vertical-align: top;”>
<p style=’margin:0cm;text-align:justify;font-size:14px;font-family:”游明朝”,serif;’><strong> </strong></p>
</td>
<td style=”width: 2cm;border-color: currentcolor rgb(191, 191, 191) rgb(191, 191, 191) currentcolor;border-style: none solid solid none;border-width: medium 1pt 1pt medium;padding: 0cm 5.4pt;vertical-align: top;”>
<p style=’margin:0cm;text-align:justify;font-size:14px;font-family:”游明朝”,serif;’><strong> </strong></p>
</td>
</tr>
</tbody>
</table>
</div>

ここではすべての表セルに対してWordで指定したスタイルがCSSで指定されています。このため、変換したHTMLをWebページとして使うにあたって、例えば罫線の見栄えを少し変更したいときは、スタイル変更に思った以上の手間がかかるでしょう。

そうすると、Wordで指定したレイアウトの中で、HTMLにしたとき構造を表すようなレイアウトのみをHTMLタグに変換し、印刷のためのレイアウトを捨ててしまうような変換方式を考えると良さそうです。

そうなんですが、Wordで作成する文章で文字の大きさや字体の変更しているとき、例えば文字のサイズが大きいと、意味上は重要、階層構造上は本文よりも上位になるといったように、Wordではレイアウトと構造が混然一体です。そのため「構造を表すようなレイアウトのみをHTMLタグに変換し、印刷のためのレイアウトを捨てる」というのは実は結構難しいのです。
——-
◆前回:月曜日連載! Microsoft Wordスタイル探索 (32)Word文書からWebページ(HTML)変換の既存実現手段は?
◆次回:月曜日連載! Microsoft Wordスタイル探索 (34)HTMLとはなにか。だれが決めているのか。
シリーズ総目次
〇関連ページ
Microsoft Wordを使って報告書などの長文を作成する人向けの新知識満載です。 Microsoft Wordのアウトラインと見出しスタイルを活用する方法(概要)

Antenna House Office Serversとは

Antenna House Office Serversとは


月曜日連載! Microsoft Wordスタイル探索 (32)Word文書からWebページ(HTML)変換の既存実現手段は?

現在のWebページの多くは、WordPress、はてなブログのようなブログ、Wikiペディアを代表とするWiki、最近では、noteやテッキーな人達にはGitHubが人気を集めています。こうしたWebページを見ると、一様に短文であり、またテキスト中心のシンプルな作りになっていて表現される内容の量や表現力という点で、PDFによるものと比べて、もの足りなく感じます。

PDFによる文書作成というと、まずMicrosoft Wordを思い浮かべるわけですが、Wordには、見出し作成、目次作成、段落への自動番号付け、文章の校閲機能、など強力な文章の編集機能があります。文章だけではなく、作図、表作成機能なども優れています。

Wordで図表などを盛り込んで作成した文書を、そのままWebページにできれば、Webページの表現内容がいまより豊かになるはずです。しかし、前回((31)WordのWebページ保存は使えない。その理由は?)も説明した通り、Wordで編集中の文書を、Word自身の「名前を付けて保存」「Webページとして保存」しても、そのままでは、Webページとして使えません。

Wordで作成した文書をWebページ(HTML)にしたいというニーズがあれば、それを満たすために、サービスやツールが提供されるのは必然です。次に、現在、どういうものがあるかを簡単にまとめてみます。

1.WordのWebページ保存で作成したHTMLをフィルターするツール
この代表例として、Webページ編集ソフトのDreamWeaverの「Word HTMLのクリーンアップ」機能があります。DreamWeaverは、デスクトップPC上で動作するアプリケーションです。「Word HTMLのクリーンアップ」ダイアログには次図のようなオプションがあります。

DreamWeaverの「Word HTMLのクリーンアップ」ダイアログ

DreamWeaverの「Word HTMLのクリーンアップ」ダイアログ


DreamWeaverの「Word HTMLのクリーンアップ」ダイアログ(続き)

DreamWeaverの「Word HTMLのクリーンアップ」ダイアログ(続き)


Wordを使ってWebページ保存したファイルで実際に試すと次の図のようなダイアログが表示されます。いろいろと不要なタグを削除したり、Word独自のスタイルを適用するための属性を削除しています。
DreamWeaverの「Word HTMLのクリーンアップ」結果報告ダイアログ

DreamWeaverの「Word HTMLのクリーンアップ」結果報告ダイアログ

2.Wordの不要なタグをフィルターするWebサービス
同じようなフィルタリング機能を提供するWebサービスもいろいろあります。

例えば、『Convert Word Documents to Clean HTML』サービスを見てみましょう。
https://word2cleanhtml.com/

Convert Word documents to Clean HTML のトップ画面

Convert Word documents to Clean HTML のトップ画面

簡単なサンプルで試してみます。次はWordで箇条書きを指定してみました。箇条書きの項目の一部にルビを指定しています。

Word文書で箇条書きを指定した部分

Word文書で箇条書きを指定した部分


この文書を『Convert Word Documents to Clean HTML』にペーストします。ペーストした段階では、箇条書き項目(上の図でアンダーラインの部分)は次のようになります。
『Convert Word Documents to Clean HTML』にペーストした状態

『Convert Word Documents to Clean HTML』にペーストした状態


このペーストしたファイルをコピーしてローカルにファイルとして保存、ブラウザ(Edge)で表示したところ次のようになります。
『Convert Word Documents to Clean HTML』にペーストした状態をブラウザで表示

『Convert Word Documents to Clean HTML』にペーストした状態をブラウザで表示

次に、これを「Convert to Clean HTML」(ボタン)でクリーンなHTMLにします。同じ箇所は次のようになっています。

『Convert Word Documents to Clean HTML』でクリーンなHTMLに変換した結果

『Convert Word Documents to Clean HTML』でクリーンなHTMLに変換した結果


一見して、Word文書をコピーしたときについていた沢山のタグが削除されて、シンプルなHTMLタグ付けになっています。ルビを付けた部分はきちんとルビタグで表現されています。

良さげです。しかし、この変換後のファイルをローカルに保存してブラウザ(Edge)で表示すると次のようになってしまいます。

『Convert Word Documents to Clean HTML』でクリーンなHTMLに変換した結果をブラウザで表示

『Convert Word Documents to Clean HTML』でクリーンなHTMLに変換した結果をブラウザで表示

箇条書きの項目先頭の記号が文字化けしてしまっています。

この変換例では、前回((31)WordのWebページ保存は使えない。その理由は?)で整理した問題の中で、次の二つが該当します。

(2) 箇条書きを通常の段落タグにしているなどタグの表現が貧困
(3) 文字化け

『Convert Word Documents to Clean HTML』サービスはかなり良さそうですが、結構、大きな問題が残っています。

要するに、Wordで作成した文書からHTMLを作って、単にフィルタリングするだけでは不十分であり、もう少し賢い解決策が必要、と言えるでしょう。

——-
◆前回:月曜日連載! Microsoft Wordスタイル探索 (31)WordのWebページ保存は使えない。その理由は?
◆次回:月曜日連載! Microsoft Wordスタイル探索 (33)Word文書からWebページ(HTML)変換について考える
シリーズ総目次
〇関連ページ
Microsoft Wordを使って報告書などの長文を作成する人向けの新知識満載です。 Microsoft Wordのアウトラインと見出しスタイルを活用する方法(概要)

Antenna House Office Serversとは

Antenna House Office Serversとは


月曜日連載! Microsoft Wordスタイル探索 (31)WordのWebページ保存は使えない。その理由は?

先週は(30)WordのWebページ保存は使えるか?というタイトルでWebページ保存があることを紹介しました。しかし、肝心の質問に答えるまでには至りませんでした(申し訳ありません)。今日は、いよいよ質問に答えてみたいと思います。

日ごろから使い慣れたMicrosoft Wordで書いた原稿を、そのままWebページにできたら、Webページ作成がより身近になることでしょう。さらにWordには、見出し作成、目次作成、段落への自動番号付け、文章の校閲機能、など強力な文章の編集機能があります。文章だけではなく、作図、表作成機能なども優れているので、Wordで図表などを盛り込んで作成した文書を、そのままWebページにできれば、Webページの表現内容もいまより豊かになるはずです。

こうしたメリットが期待できるにも関わらず、アマチュアならともかく、プロの制作者で実際にWordの原稿をそのままWebページにしている人はあまりいないはずです。なぜか? その理由は単純にWordのWebページ保存は使いものにならないからです。

何が問題なのでしょうか? 以下は、やや技術的になりますが、実際の文書で調べた結果です。調査はWord 2019のWebページ保存(フィルター後)で行いました。

先週は、WordのWebページ保存には、①Webページ保存と、②Webページ保存(フィルター後)の2種類があること、Webページ保存では、ブラウザの表示には使わない、いろいろなファイルが保存されていることを示しました。ですので、WordでWebページを作るなら、Webページ保存(フィルター後)の方が適切なはずです。

Webページは、HTML(Hyper Text Markup Language)で書きます。Webページ保存(フィルター後)のHTMLファイルを、oXygen XML Editorで開いて内容を見てみます。先週、使ったファイルの本体(bodyタグ)先頭部分は次のようになっています。

WordでWebページ保存(フィルター後)の内容

WordでWebページ保存(フィルター後)の内容

気が付いた点を次に大雑把に整理してみます。

(1) 和欧混植の言語指定方法が不適切
和欧混植の文を、bodyにlang=JAを指定したうえで、段落のラテン文字に<span lang=EN-US>という属性をつけています。この結果、段落の文はすべて次のようにマークアップされています。

<span lang=EN-US>Word</span>の情報タイトルが<span lang=EN-US>HTMLの<span
lang=EN-US>title</span>に出力

しかし、日本語の文にはラテン文字を混在できるので、このような指定は不要です。こうした出力ではHTMLになった文章を編集するのが厄介になってしまいます。

(2) 箇条書きを通常の段落タグにしているなどタグの表現が貧困
Wordで箇条書きを指定した段落、番号付き段落などは、行頭に記号や数字のついた通常段落として表現されています。段落タグ以外で使われているのは、見出しランクタグ<h?>、表(<table>など)、イメージ(<img>)、文字飾り(<b>、<u>など)僅かで、タグの種類としては、このブログ(WordPress)よりも少なそうです。

(3) 文字化け
次の例は、別の箇条書きの部分ですが、フォントが段落の一部に直接指定されています。箇条書き記号にWingdingsというWordで昔から使われている特殊なフォントが指定されています。箇条書き記号はUnicodeでU+00B2(SUPERSCRIPT TWO: 上付きの2。これはおそらくWingdingsの内部番号をそのまま出している)となっていて、文字化けしています。Unicode標準にマップするなら、U+2727(WHITE FOUR POINTED STAR)とすべきではないかと思います。

<p class=a1><span style='font-family:Wingdings'>²<span style='font:7.0pt "Times New Roman"'> 
</span></span><span lang=JA style='font-family:HGP正楷書体'>新しい箇条書きスタイル</span></p>

(4) レイアウト指定が固定的になっており、後でCSSで変更できない
・通常の段落は<p class=MsoNormal>が指定されており、MsoNormalというクラス属性には、Wordで指定した段落スタイルをCSSにしたものが指定されているため、Webページに別のCSSをリンクしてレイアウトを変更しにくい。
・bodyにはstyle=’word-wrap:break-word;text-justify-trim:punctuation’のようにスタイルを直接指定しています。

これでは、原稿の作者が指定したレイアウトがWebページに影響を及ぼしてしまいます。現在のWebページは、文章などのコンテンツに対して、CSSでレイアウトを自由に指定・変更することが多いのですが、WordのWebページ保存は、コンテンツにレイアウトが密接に紐づいてしまっています。特にWordのレイアウトは紙にプリントすることを暗黙に想定されているのでWebページにそのまま使うのは不向きです。

(5) HTML文法上の問題
pタグにalign属性を付けるなど、既に廃止されたタグを使っているため、今回の文書では、oXygen XML EditorからHTML検証エラーが140個出されています。

以上は、一例に過ぎませんが、WordのWebページ保存(フィルター後)には、技術的にかなり問題があると言えます。なお、WordのWebページ保存はラウンドトリップ(HTML保存した結果を読むと元のWordのdocx版に戻ること)を想定しているためか、WordのWebページ保存(フィルター後)と比べて、さらに不要な情報が出力されています。

—-
宣伝です。来る10月12日(火)16時から、「ちょっと一息・アンテナハウスウェビナー」で、

WordでHTMLを書けたらスゴイ!

という題で、Microsoft Wordで書いた文書からWebページ(HTML)を作るというトピックについてお話しする予定です。関心をお持ちの方は、ぜひ、ご参加ください。

——-
◆前回:月曜日連載! Microsoft Wordスタイル探索 (30)WordのWebページ保存は使えるか?
◆次回:月曜日連載! Microsoft Wordスタイル探索 (32)Word文書からWebページ(HTML)変換の既存実現手段は?
シリーズ総目次
〇関連ページ
Microsoft Wordを使って報告書などの長文を作成する人向けの新知識満載です。 Microsoft Wordのアウトラインと見出しスタイルを活用する方法(概要)

Antenna House Office Serversとは

Antenna House Office Serversとは


月曜日連載! Microsoft Wordスタイル探索 (30)WordのWebページ保存は使えるか?

来る10月12日(火)16時から、「ちょっと一息・アンテナハウスウェビナー」で、

WordでHTMLを書けたらスゴイ!

という題で、Microsoft Wordで書いた文書からWebページ(HTML)を作るというトピックについてお話しする予定です。そこで、その準備も含めて、月曜日連載! Microsoft Wordスタイル探索では、10月12日までの間、WordでHTMLを作ることをテーマに探索してみたいと思います。

WordでWebページを作ると言えば、Wordをいつも使っている人なら、WordのWebページ保存を使うことを思い浮かべるでしょう。そこで、まず、WordのWebページ保存を探索してみます。(以下は、Microsoft Word 2019 (バージョン2107、ビルド14228.20250)、をWindows 10 Proで使用して調査しました。)

Wordで編集中の文書を「名前を付けて保存」を実行すると保存ダイアログが開きます。そのファイルの種類から次の図のように様々なファイル形式を選択して保存できます。

Wordの名前を付けて保存で選択できるファイル形式

この中でWebページに関係ありそうなファイル形式は次の三つです。

・単一ファイルWebページ
・Webページ
・Webページ(フィルター後)

それぞれの形式で保存して調べてみます。最初は、単一ファイルWebページです。

単一ファイルWebページは画像まで含めて一つのファイルとして保存されます。ファイルの拡張子は既定値では.mhtです。この保存したファイルをダブルクリックすると、インターネット・エクスプローラが立ち上がってファイルの内容を表示できます。しかし、このファイルは、マイクロソフトの最新ブラウザであるエッジやFireFoxなどでは内容を正しく表示できません。

念のため、.mhtファイルをテキストエディタで開いてみますと、先頭に次のような文章があります。

MIME-Version: 1.0
Content-Type: multipart/related; boundary="----=_NextPart_01D797DF.52FF6750"

このドキュメントは単一ファイル Web ページ (Web アーカイブ ファイル) です。お使いのブラウザーまたはエディターは Web アーカイブ ファイルをサポートしていません。Web アーカイブをサポートするブラウザーをダウンロードしてください。

------=_NextPart_01D797DF.52FF6750
Content-Location: file:///C:/754AB838/file1096.htm
Content-Transfer-Encoding: quoted-printable
Content-Type: text/html; charset="utf-8"

単一ページWeb形式はHTMLファイルではなく、インターネット・エクスプローラ専用のファイル形式のようです。もちろん、Wordで保存した.mhtファイルを元のWordで開くことはできます。なんにしてもこれはWeb形式という名前がついているだけであって、一般のブラウザで表示できるWebページではないと言ってよいでしょう。

次に、WebページとWebページ(フィルター後)を見てみます。

編集中のWord文書をこの二つの形式で保存すると、次の図のように.htmという拡張子のファイルと、ファイル名の最後に.filesという名前の付いたフォルダーができます。

Wordの文書をWebページとして保存したときできるファイルとフォルダー

htmの内容を調査するのは後回しにして、.filesフォルダーの内容を見てみます。

次は、Webページで保存したときにできる.filesフォルダーの内容です。.pngという拡張子のファイルはイメージ画像ですが、それ以外にいろいろな種類のファイルができています。

Webページとして保存したときの.filesの内容

Webページ(フィルター後)で保存したときにできる.filesフォルダーの内容は次の図のようになります。こちらは、.pngという拡張子のファイルのみです。

Webページ(フィルター後)で保存したときの.filesの内容

.filesフォルダーの中をみただけで想像できることはWebページ(フィルター後)の方は、Webで必要な最小限の情報だけに絞っているようだ、ということです。

この両者のhtmファイルをブラウザで表示して、Webページとしての評価をする前に、Wordで読み込んでどうなるかを見てみます。

元のWord文書とhtmファイルをWordで読み込んだ結果のページを比較してみます。

htmファイルをWordで読み込んで元のWord文書と比較

htmファイルをWordで読み込んで元のWord文書と比較

Webページとして保存したhtmをWordで読み込むとほぼ元のWord文書に戻ります。しかし、Webページ(フィルター後)として保存したhtmをWordで読み込むと元のWord文書に近くはなりますが、レイアウトが崩れたり表示されない画像があったりします。

次は、元のWord文書とWebページ(フィルター後)として保存したhtmを読み込んでページを比較した例です。

Webページ(フィルター後)として保存したhtmを読み込んだ結果と比較

Webページ(フィルター後)として保存したhtmを読み込んだ結果と比較


この例では番号付き段落の文字のならびの間に画像が入ってしまう、などの文字のならびの崩れが確認できます。

まとめると、Webページとして保存するとWebでは使わない様々なファイルが同時に保存されるが再びWordに読み込んだ時にもとに戻る。しかし、Webページ(フィルター後)として保存すると、Webページでは使わないファイルは削除されてしまい、再びWordに読み込んだ時に元に戻らない箇所がある、と言えます。

——-
◆前回:月曜日連載! Microsoft Wordスタイル探索 (29)WordでHTMLを書けたらスゴイ!
◆次回:月曜日連載! Microsoft Wordスタイル探索 (31)WordのWebページ保存は使えない。その理由は?
シリーズ総目次
〇関連ページ
Microsoft Wordを使って報告書などの長文を作成する人向けの新知識満載です。 Microsoft Wordのアウトラインと見出しスタイルを活用する方法(概要)

Antenna House Office Serversとは

Antenna House Office Serversとは


月曜日連載! Microsoft Wordスタイル探索 (29)WordでHTMLを書けたらスゴイ!

おはようございます。

2か月近く先になりますが、10月12日(火)16時から、いつもの、「ちょっと一息・アンテナハウスウェビナー」は、

WordでHTMLを書けたらスゴイ!

という題で、Microsoft Wordで書いた文書からWebページ(HTML)を作るというトピックについてお話しする予定です。そこで、その準備も含めて、月曜日連載! Microsoft Wordスタイル探索では、これから10月12日までの間、WordでHTMLを作ることをテーマにいろいろと探索してみたいと思います。

振り返ってみると、

1980年代半ばにパソコン(Personal Computer: PC)が誕生しました。PCの用途の一つにOfficeでの文書作成があります。PCが普及する前、私が社会人になった約45年前は日本のオフィスでの文書作成と配布は、もっぱら手書きとコピー、そして公式文書は簡易印刷でした。その後、ワープロ専用機が登場して、手書きによる文書作成がなくなりました。

現在は、デスクでの文書作成作業には、ほとんどPCのワープロを使うようになっています。

1980年代後半に、いろいろな日本語ワープロソフトが登場してしのぎを削っていましたが、現在は、Microsoft Wordが圧倒的なシェアをもっています。Word以外には、Google DocsとかLibre Officeを使う人もいるかもしれませんが、少数派と言ってよいでしょう。

Wordで作成した文書は、当初は、プリンタで紙に印刷して配布されました。現在では、PDFの形式で配布されるのが当たり前となっています。

PDFは、紙に印刷されるレイアウトをそのまま電子ファイルにした形式です。つまり紙を使った情報の配信をそのままデジタル化したのがPDFによる情報配信と言えます。
参考) PDFとは? そのメリット、活用法など

今後は、
現在、公開される情報配信はWebページが圧倒的に主流になっています。非公開・社内向けの情報配信でさえもイントラネット上のWebページとして配信されているものが多いと思います。

Webページで配信する情報を表現するとき、基本はHTML形式を使います。HTML形式の最新であるHTML5は、現在WHATWGという団体が策定しているものです。
HTML標準仕様の策定についてW3CとWHATWGが合意 今後はWHATWGのリビングスタンダードが唯一のHTML標準仕様に

HTMLを表示するにはブラウザを使いますが、最新の主要ブラウザはHTMLだけでなくPDFを表示する機能を内蔵していますので、HTMLとPDFはほとんどシームレスにいったりきたりできます。

但し、これは設定によります。PDFをダウンロードする設定になっているとシームレスな移動はできません。詳しくは次をご参照ください。
参考)ブラウザでPDFファイルをWebページからシームレスに表示するか、ダウンロードするかの設定

こうしてPDFで作成した文書をそのままWebページで配信しても、大きな問題はなくなってきたとも言えます。

ところが不都合なことが一つあります。それは、現在、Webページを閲覧するのはPCではなくスマホが主流になってきていることです。スマホでもPDFを表示はできますが、画面が小さいので見ずらいと感じている人は多いでしょう。

普通に考えるとWordで作成した文書をWebページで配信するなら、PDF(のみ)ではなくてHTML形式にしてほしいという要求が高まっての不思議ではありません。

しかし、これは実は結構難しい問題なのです。それが、WordでHTMLを書けたらスゴイ!ということの意味になります。では実際に何がスゴイって? それについてはこれから順次お話していきたいと思います。

——-
◆前回:月曜日連載! Microsoft Wordスタイル探索 (28)これまでの27回の人気記事は?
◆次回:月曜日連載! Microsoft Wordスタイル探索 (30)WordのWebページ保存は使えるか?
シリーズ総目次
〇関連ページ
Microsoft Wordを使って報告書などの長文を作成する人向けの新知識満載です。 Microsoft Wordのアウトラインと見出しスタイルを活用する方法(概要)

Antenna House Office Serversとは

Antenna House Office Serversとは


月曜日連載! Microsoft Wordスタイル探索 (28)これまでの27回の人気記事は?

Microsoft Wordスタイル探索 2月より約半年間にわたり毎週月曜日に連載してきました。今日の月曜日はお休みにあたるので、これまでの記事のまとめを紹介します。

まず、これまでのページビューの多い順1位から10位までのランキングは次のとおりです。1番人気は第8回段落のアウトラインレベルです。この記事は、Wordではアウトラインは階層化という意味合いであり、段落のアウトライン(段落の階層化)と番号のアウトライン(階層化した番号)の2様に使われていることを説明したものです。

順位  回数 タイトル
1 (8)―段落のアウトラインレベル
2 (11)―箇条書きは難しい?
3 (2)―アウトラインのタイプ
4 (15)―箇条書きの話、世間の箇条書きガイド(続き)
5 (1)―アウトライン
6 (9)―本のような形式の目次を自動で作る方法を調べてみました
7 (12)―見出しのアウトライン番号の付け方を変更
8 (14)―箇条書きとはなにか?
9 (3)―アウトラインで見出し番号をつける
10 (16)―箇条書きのタイプとそれに対応するWordの機能・表現方法
11 (17)―Word組み込みの箇条書きスタイルは使えない、その理由は?
12 (4)―見出しスタイルの便利な機能いくつか

これまでの記事はアウトラインと見出し、箇条書き、図形機能の3カテゴリーになりますが、カテゴリー別に記事の一覧を作成しました。

アウトラインと見出し関連記事

箇条書き関連記事

Wordの図機能関連記事

———————-
◆次回:(29)WordでHTMLを書けたらスゴイ!
シリーズ総目次
〇関連ページ
Microsoft Wordを使って報告書などの長文を作成する人向けの新知識満載です。 Microsoft Wordのアウトラインと見出しスタイルを活用する方法(概要)

Antenna House Office Serversとは

Antenna House Office Serversとは


月曜日連載! Microsoft Wordスタイル探索(27)―アンカーの役割

前回(月曜日連載! Microsoft Wordスタイル探索(26)―図形の移動)は図形のレイアウトにおいて、「文字列と一緒に移動」、「ページ上の位置を固定」の設定の違いを見ました。

前回分かったこと
「文字列と一緒」に設定すると、図形が結びつけられている文字・段落が移動すると図形も一緒に移動する。周囲の文字・段落と図形の相対位置は変化しない。
「ページ上の位置を固定」に設定すると、図形が結びつけられている文字・段落が移動しても、図形のページ上の位置は変化しない。図形が結びつけられている段落が別のページに移ると、図形のページも移動する。

図形と文字・段落の結びつきをアンカーで設定する?
前回分かったことから、図形と文字や段落の結びつきを決めるのがアンカーらしいと想像できます。今回は、このあたりをもう少し調べてみます。

アンカーの位置―水平方向
(1) アンカーの左右方向の位置は、既定値では左の余白になっています。図形の位置設定の寸法はアンカーの位置を規準にしているわけではなくて、レイアウト詳細設定で基準とした項目からの位置になっています。

レイアウト詳細設定、水平方向はページを規準にして79.6mmとする

レイアウト詳細設定、水平方向はページを規準にして79.6mmとする


この例では図形の水平方向配置はページの端から79.6mmの位置になっていて、アンカーからの距離ではありません。

(2) 水平方向の基準位置として「文字」を指定できます。このとき、アンカーの水平方向の位置を文字単位で移動でき、またアンカー(を指定した文字)と図形の水平方向の距離を指定できます。

レイアウト詳細設定、水平方向は文字を規準にして31.1mmとする

レイアウト詳細設定、水平方向は文字を規準にして31.1mmとする


※文字列と図形の位置関係によっては、指定したとおりすると重なってしまうなどで、実現できない場合があるようです。この時に図形をどのように移動させているか、いまひとつ不明です。

アンカーの位置―垂直方向
(1) アンカーの垂直方向の位置は、既定値では段落になっています。図形の位置設定の寸法はアンカーの位置を規準にしているわけではなくて、レイアウト詳細設定で基準とした項目からの位置になっています。

レイアウト詳細設定、垂直方向は段落を規準にして10.0mmとする

レイアウト詳細設定、垂直方向は段落を規準にして10.0mmとする


この例では、垂直方向の基準が段落になっており、段落から図形までの距離が10㎜です。

(2) 垂直方向の基準位置として「行」を指定できます。このとき、アンカーの垂直方向の位置を行単位で移動でき、またアンカー(を指定した行)と図形の垂直方向の距離を指定できます。

レイアウト詳細設定、垂直方向は行を規準にして0mmとする

レイアウト詳細設定、垂直方向は行を規準にして0mmとする

アンカーの役割まとめ
アンカーについて分かったことをまとめると次のようになります。

  1. 図形のレイアウトとして、「文字列の折り返し」を選択したとき、図形を文字や段落と結びつけるアンカーが設定されます。
  2. アンカーの位置は、既定値では段落単位です。
  3. レイアウトの詳細設定で基準とする項目を水平方向では文字を選択でき、その時に限り、アンカーは文字と結びつきます。また、垂直方向では行を選択できアンカーは行と結びつきます。
  4. 図形の配置の詳細設定は、アンカーから図形までの距離を指定するわけではなくて、レイアウトの詳細設定で基準に選択した項目からの距離で指定します。

アンカーは図形と文字や段落との結びつきを設定するものと言えます。
--------------------
【広告】
マイクロソフト・オフィスを使わずに、サーバー上でエクセル、ワード、パワーポイント・ファイルをPDFにダイレクト変換。
マイクロソフト・オフィスを使わずに、サーバー上でエクセル、ワード、パワーポイント・ファイルをPDFにダイレクト変換。
Microsoft Wordが帳票ツールに変身!OOXML Tool API for docx ≪α版≫
--------------------
◆前回:(26)―図形の移動
◆次回:(28)これまでの27回の人気記事は?
シリーズ総目次
〇関連ページ
Microsoft Wordを使って報告書などの長文を作成する人向けの新知識満載です。 Microsoft Wordのアウトラインと見出しスタイルを活用する方法(概要)
--------------------
YouTube アンテナハウスPDFチャンネル
【Wordの「スタイル」ってなんだろう】ゼロから学ぼう! Microsoft Wordのスタイル機能・シリーズ -アウトラインと見出しスタイルについて- vol.1

【vol.1】Wordの「スタイル」ってなんだろう

「はじめに」ということで、ウェビナー全体の構造とともに、Wordのスタイルについて、Wordの画面を使用して簡単に紹介します。


Antenna House Office Serversとは

Antenna House Office Serversとは


Pages: Prev 1 2 3 4 5 6 7 8 9 10 ... 118 119 120 Next