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

月曜日連載! Microsoft Wordスタイル探索 (41)『HTML on Word』の使用例(5)ハイパーリンクの編集と変換

Webページ(HTML)の編集ではハイパーリンクの編集は手間がかかります。手間がかかる理由の一つは、HTMLのハイパーリンクの構造にあります。
ハイパーリンクは、<a>要素で次のように記述します。

<a href="リンクのターゲット">ハイパーテキストアンカー</a>

ハイパーリンクの編集では、タグの入力に加えて、①リンクのターゲットの指定と②ハイパーテキストアンカーの入力が必要なのです。

Microsoft Wordを使うと、WebページをHTMLのエディタなどで直接編集するよりも簡単な操作でハイパーリンクを編集できます。Wordで編集した文書を『HTML on Word』でHTMLに変換することでハイパーリンク作成がより簡単になります。

Wordのハイパーリンク編集機能には、対話的にハイパーリンクを編集する機能と、自動的にハイパーリンクを作成する機能があります。

1.対話的にハイパーリンクを編集する機能

この機能は、リボン「挿入」の「リンク」グループにあります。

リボン「挿入」の「リンク」グループ

リボン「挿入」の「リンク」グループ

  • 「リンク」はハイパーリンクを挿入するダイアログを開いて、リンク先と表示文字列を入力します。HTMLに変換するとリンク先はリンクのターゲットになり、表示文字列はハイパーテキストアンカーになります。リンク先は外部のURLやファイル、文書内部、新規文書、メールアドレスを指定できます。
  • 「ブックマーク」は文書内部のリンク先を編集する機能です。HTMLに変換するとブックマークは<span id=”id値></span>に変換され、ブックマークの文字列がid値となります。ハイパーリンクではid値がリンクのターゲットとして使われます。
  • 「相互参照」は、文書内部へのリンクを設定します。リンク先は参照する項目で選択します。参照する項目は、アウトライン番号や段落番号を付けた項目、見出し、ブックマーク、脚注、図、表など多岐にわたります。また、表示文字列は参照する項目毎にカテゴリー化されていて、そのカテゴリーから選択します。「リンク」とは違ってカテゴリー化されているので文書全体で統一しやすくなります。

なお、「相互参照」は、リボン「参考資料」の「図表」グループからも使えます。

2.自動的にハイパーリンクを作成する機能

Wordで自動的にハイパーリンクを作成する機能としては、リボン「参考資料」の目次の自動作成と図表目次の組み込みがあります。

目次の自動作成では、段落のアウトラインレベルの設定された項目から目次を作成します。このときは、本文中の見出しが表示用テキストとなり、図表目次では図表のキャプションが目次項目になります。そして見出しや図表のキャプションの位置に自動生成のブックマークが_Tocから開始する数字で設定されます。目次の各項目から見出しや図表のキャプションの位置にハイパーリンクが設定されます。

『HTML on Word』では自動生成目次や図表目次をHTMLのハイパーリンクに変換します。

なお、Wordには類似の機能として索引作成機能があります。しかし、Wordの索引の仕組みは独自の形式となっており、HTMLのハイパーリンク方式ではないので、現時点では『HTML on Word』で索引をHTMLのハイパーリンクに変換することはできません。

3.ブックマークの編集

Wordはダイアログでブックマークを入力する機能と、自動で作成する機能があります。自動作成は目次作成や相互参照を設定したリンク先にブックマークを自動的に作成する機能です。

目次作成で自動的に作られたブックマークは _Tocで始まる数字、相互参照で自動的に作られたブックマークは_Refで始まる数字です。ブックマークダイアログで、「自動的に挿入されたブックマークを表示する」のチェックボックスをONにする(最初からONになっているときは、一度、OFFにしてからONにする)とこれらを確認できます。

ブックマークダイアログ

ブックマークダイアログ

自動的に作成されたブックマークはWordの内部ではあまり管理されていないようです。編集を繰り返すと膨大な数の使われていない自動生成ブックマークが文書ファイル内に残ります。これをそのままHTMLに変換すると、膨大な数の不要な<span id=”id値></span>ができるため、『HTML on Word』は、出力したHTMLファイルをスキャンして不要な(文書内のハイパーリンクで使われていない)id値をもつ<span id=”id値></span>を削除します。なお、文書の外部からid値に対してハイパーリンクを設定している場合のために、コマンドラインのオプション(-nonrefiid)で削除しない動作を指定できます。

4.ハイパーリンク変換例

簡単なハイパーリンク変換例を紹介します。

次はWordの編集画面で外部URLへのリンクを設定している例です。

外部URLへのリンクを設定

外部URLへのリンクを設定

HTMLに変換すると次のようになります。


<p>3) <a href="https://elaws.e-gov.go.jp/document?lawid=410M50000040043_20220101_503M60000040025">平成十年大蔵省令第四十三号…</a>…</p>

これをブラウザで表示するとデフォルト表示では次のようになります。

browserで表示したところ

次はWordの編集画面で相互参照を設定した例です。

Wordで相互参照を設定

Wordで相互参照を設定

HTMLに変換すると次のようになります。


<p>2021年3月に改正された電子帳簿保存法<a href="#_Ref86743273"><sup>1)</sup></a>の第7条に規定する…</p>

これをブラウザで表示するとデフォルト表示では次のようになります。

ブラウザで内部リンクを表示

ブラウザで内部リンクを表示


【広告】
11月16日(火曜日)16時からの「ちょっと一息・アンテナハウスウェビナー」の録画がYouTubeで公開されております。


※画像をクリックするとウェビナーのアーカイブページに移動しますので、そちらからYouTubeをお進みください。

10月12日「ちょっと一息・アンテナハウスウェビナー」の録画がYouTubeで公開されております。(リンクをクリックするとYouTubeを表示します。)

(1)【WordでHTMLが書けたらすごい!】-vol.1 予備知識

「コンテンツ」、「HTML」、「タグ」、「レイアウト」、「CSS」といった基礎知識の説明です。

(2)【WordでHTMLが書けたらすごい!】-vol.2 タグを書かずにHTMLを作る、これまでの方法

「タグ」を書かずにHTMLをつくる、代表的なサービスや技術、問題点などを簡単に紹介します。

(3)【WordでHTMLが書けたらすごい!】-vol.3 WordからHTMLを作る、これまでの方法

Wordでも、HTMLは作れます。また、Word文書からHTMLを作る方法もいろいろ世間に提供されています。しかし、やはりあまり使われてはいないようです。なぜでしょうか。

(4)【WordでHTMLが書けたらすごい!】-vol.4 新しい解決策:『HTML on Word』

Word文書を「綺麗な」HTMLにすることを可能にした、新しい解決策『HTML on Word』を、簡単なデモを交えて紹介します。うまく使うには「印刷用」というレイアウトからの脱却が必要です


◆前回:(40)『HTML on Word』の使用例(4)Webページの実例。Wordの機能との対応付け
◆次回:(42)Wordの箇条書き再訪
シリーズ総目次


月曜日連載! Microsoft Wordスタイル探索 (40)『HTML on Word』の使用例(4)Webページの実例。Wordの機能との対応付け

HTML on Word』の使用例として、先週11月2日に公開した「中堅・中小企業は2022年1月から施行される電子帳簿保存法第7条電子取引データ保存にどう対処するか(考察)」を紹介します。この原稿はWordで編集したもので、HTMLに変換した結果をほぼそのままWebページとしています。

1.Webページ全体と本文の先頭部分
まず全体の構成を説明します。Webページの上部はグローバルなナビゲーションメニュー、左側はサイドメニュー、また下にはフッターがあります(Webのフッターは次の図では見えていません)。これらはテンプレートとして用意されています。

1.Webページ先頭部分

1.Webページ先頭部分


上図①の赤枠で囲った部分がWordで編集した原稿になります。次にHTMLソースを示しましたが、テンプレートの中で本文の部分にWordから変換したHTML(赤枠で囲った部分)を貼り付けていることを確認できます。
テンプレートにWordから変換したHTMLを貼り付け

テンプレートにWordから変換したHTMLを貼り付け


上図②~⑤をWord編集した原稿と対応させると次のようになります。
Word原稿の冒頭部分

Word原稿の冒頭部分


次にHTMLの②から⑤の部分に対応するWordの該当部分で使用している機能を説明します。以下ではWordの機能を「」で囲んで示します。
②は文書の表題にあたり、段落に「アウトラインレベル1」を設定しています。
③の段落は日付なのでWordで「右寄せ」を設定しています。
④は冒頭の枠囲みです。「HTML on Word V1.0」では枠囲みを無視するので、一行一列の「表」で枠囲みを表現しました。
⑤は「自動生成の目次」です。Wordではアウトラインレベルを設定した段落(見出しスタイルにもアウトラインレベルが設定されている)から自動的に目次を生成できます。目次を生成した後、表題の項目は、Wordで削除しました。

2.Webページ本文の途中
次は表示を下に少しスクロールしたところです。見出し、箇条書き、リンクが設定されていることが確認できます。

Webページ表示を下にスクロール

Webページ表示を下にスクロール


上図⑥、⑧、⑪はWordのスタイルギャラリーで「見出し1」、「見出し2」、「見出し3」のスタイルを適用しています。見出しにはWordで「アウトライン番号」を設定しました。アウトライン番号は、レベル1がⅠ、Ⅱ、Ⅲ、…、レベル2がA、B、C、…、レベル3が、1、2、3、…と定義しています。
⑦はWordでリボン「挿入」の「リンク」グループ「相互参照」で参考資料3)へのリンクを設定しています。
⑨はWordの「箇条書き」を設定しました。
⑩はWordで「段落番号」を設定した段落から変換した番号付き箇条書きです。番号付き箇条書きは2階層になっています。なお、HTMLの番号はCSSを使って、1階層は漢字、2階層はカタカナに設定しました。

3.Webページ本文の最後
次はWebページ表示の本文最後の部分です。

Webページ本文最後

Webページ本文最後


⑫は段落に「アウトラインレベル1」を設定しました。
⑬はWordで「段落番号」を設定した段落です。
⑭はWordでリボン「挿入」の「リンク」グループの「リンク」を使って設定しました。
⑮はWordで「段落番号」を設定した段落で、⑦のリンクの宛先になっています。

4.補足説明
このWord文書をHTMLに変換する際に、一番、問題になる箇所はWordで段落番号のついた段落の扱いです。この例ではWordで段落番号を付けた段落を、⑩ではHTMLの番号付き箇条書きに変換しており、⑬では番号のついた段落に変換しています。Wordには番号付き箇条書きを直接指定する機能がないため、『HTML on Word』は、連続する二つ以上の段落に段落番号が付いていたら番号付き箇条書きとし、それ以外は番号のついた段落に変換するという方策をとっています。

その他には、アウトラインレベルと見出しスタイルの使い分けがポイントです。こちらは次の記事も参照していただくと理解し易いでしょう。

参考資料:Microsoft Wordのアウトラインと見出しスタイルを活用する方法(概要)

--------------------
◆前回:(39)『HTML on Word』の使用例(3)サンプルCSSのレイアウト
◆次回:(41)『HTML on Word』の使用例(5)ハイパーリンクの編集と変換
シリーズ総目次


月曜日連載! Microsoft Wordスタイル探索 (39)『HTML on Word』の使用例(3)サンプルCSSのレイアウト

HTML on Word』は、Wordで書いた文書の見出し、本文、画像や表などの内容をWeb形式に変換します。

本日は、『HTML on Word』のレイアウトについて説明します。
まず、変換に際しては、見出し、本文、表などをHTMLのタグに変換しますが、そのときWordで指定したレイアウトをすべて無視します。レイアウトは別途CSSをリンクして指定します。

『HTML on Word』にはCSSのサンプルが同梱されています。サンプルCSSは、インストール時にプログラムをインストールしたフォルダの中にコピーされます。デフォルトでは次のフォルダーです。
C:\Program Files\Antenna House\xhw10\CSS

V1.0に同梱されているCSSは次図に示すように6種類があります。

HTML on Word(V1.0)に同梱されているCSS

HTML on Word(V1.0)に同梱されているCSS

『HTML on Word』をアドインから使用するとき、CSSを指定するにはアドインの「指定したCSSを用いる」メニューをクリックします。

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

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

CSSを選択するダイアログが表示されるので、上記のフォルダの中から望みのCSSファイルを選択します。

次に、オリジナルのWordの文書と、各CSSを指定したときのレイアウトのサンプルを示します。

1.オリジナルWord文書

オリジナルワード文書1ページ目

オリジナルワード文書1ページ目

オリジナルワード文書2ページ目

オリジナルワード文書2ページ目

2.次は、変換後のHTMLをブラウザ(chrome)で表示した状態です。
(1) sample.cssを指定したとき

sample.cssのレイアウト

sample.cssのレイアウト

(2) sample-basic.cssを指定したとき

sample-basicのレイアウト

sample-basicのレイアウト

(3) sample-news.cssを指定したとき

sample-newsのレイアウト

sample-newsのレイアウト

(4) sample-simple.cssを指定したとき

sample-simpleのレイアウト

sample-simpleのレイアウト

(5) sample-thema-green.cssを指定したとき

sample-thema-greenのレイアウト

sample-thema-greenのレイアウト

(6) sample-thema-warm.cssを指定したとき

sample-thema-warmのレイアウト

sample-thema-warmのレイアウト

このようにCSSを変更することでレイアウトを好きなように変更できます。多くの場合、既にあるWebページ全体との調和を配慮して見栄えを変更したいと考えられます。このときは、いまのWebページのCSSを自分で用意して指定することになります。


【広告】
11月16日(火曜日)16時からの「ちょっと一息・アンテナハウスウェビナー」の録画がYouTubeで公開されております。


※画像をクリックするとウェビナーのアーカイブページに移動しますので、そちらからYouTubeをお進みください。

10月12日「ちょっと一息・アンテナハウスウェビナー」の録画がYouTubeで公開されております。(リンクをクリックするとYouTubeを表示します。)

(1)【WordでHTMLが書けたらすごい!】-vol.1 予備知識

「コンテンツ」、「HTML」、「タグ」、「レイアウト」、「CSS」といった基礎知識の説明です。

(2)【WordでHTMLが書けたらすごい!】-vol.2 タグを書かずにHTMLを作る、これまでの方法

「タグ」を書かずにHTMLをつくる、代表的なサービスや技術、問題点などを簡単に紹介します。

(3)【WordでHTMLが書けたらすごい!】-vol.3 WordからHTMLを作る、これまでの方法

Wordでも、HTMLは作れます。また、Word文書からHTMLを作る方法もいろいろ世間に提供されています。しかし、やはりあまり使われてはいないようです。なぜでしょうか。

(4)【WordでHTMLが書けたらすごい!】-vol.4 新しい解決策:『HTML on Word』

Word文書を「綺麗な」HTMLにすることを可能にした、新しい解決策『HTML on Word』を、簡単なデモを交えて紹介します。うまく使うには「印刷用」というレイアウトからの脱却が必要です

--------------------
◆前回:(38)『HTML on Word』の使用例(2)Wordで書いたマニュアルをWebページにする
◆次回:(40)『HTML on Word』の使用例(4)Webページの実例。Wordの機能との対応付け
シリーズ総目次
〇関連ページ
Microsoft Wordを使って報告書などの長文を作成する人向けの新知識満載です。 Microsoft Wordのアウトラインと見出しスタイルを活用する方法(概要)

Antenna House Office Serversとは

Antenna House Office Serversとは


月曜日連載! Microsoft Wordスタイル探索 (38)『HTML on Word』の使用例(2)Wordで書いたマニュアルをWebページにする

先週はWordで書いたお知らせをWebページにすることを紹介しました。

Wordで作成する文書は、お知らせ以外にも、手紙、見積書・請求書、調査レポート、アニュアルレポート、業務マニュアル、製品マニュアル、サービスマニュアルなど、実にいろいろな種類があります。

マニュアルのようなボリュームのある文書は、従来は紙に印刷されて配布されていましたが、最近はPDFとして作成して、デジタルで配信されることも多くなっています。さらに、今後は、見やすいWebページ(HTML)が求められるようになるでしょう。

そこで、今週は、Wordで書いたマニュアルをWebページ(HTML)にする例を紹介します。

次は、Wordで書いた『HTML on Word』のマニュアルに対して、目次を作成し、目次のあるHTMLを作成する例を動画にしてみました。

1.Wordの機能で目次を自動作成します。
(1) Wordでは、スタイルギャラリーの「見出し1」、「見出し2」といった見出しスタイルを使って見出しを設定すると、リボンの「参考資料」タブの「目次」メニューを使って目次を自動的に作成できます。
(2) このように作成した目次には、目次の項目から本文の見出しにリンクが設定されています。Wordの画面で目次の項目を選択して、Ctrlキー+クリックすると、その項目の位置にジャンプします。

2.目次を作成したWord文書を、『HTML on Word』のアドインでHTMLに変換します。具体的には次のようにします。
(1) リボン「アンテナハウス」タブを表示すると、アドインのメニューになります。
(2) 「指定したCSSを用いる」をクリックしてCSSを選択します。CSSはHTMLにレイアウトを指定するためのものです。
(3) 「HTMLへ変換」をクリックします。すると変換後のHTMLを保存するフォルダを選択するダイアログが表示されます。適当なフォルダを選択して「OK」を押します。
(4) 変換で作成されたHTMLがブラウザで表示されます。
(5) HTMLの目次には、見出しへのリンクが設定されているので、ブラウザで目次の項目をクリックすると対応する見出しの位置にジャンプすることが分かります。

この操作を行った動画が次です。

このように『HTML on Word』を使えば、Wordで作成したマニュアルを簡単に目次のあるWebページ(HTML)に変換できます。


【広告】
11月16日(火曜日)16時からの「ちょっと一息・アンテナハウスウェビナー」の録画がYouTubeで公開されております。


※画像をクリックするとウェビナーのアーカイブページに移動しますので、そちらからYouTubeをお進みください。

10月12日「ちょっと一息・アンテナハウスウェビナー」の録画がYouTubeで公開されております。(リンクをクリックするとYouTubeを表示します。)

(1)【WordでHTMLが書けたらすごい!】-vol.1 予備知識

「コンテンツ」、「HTML」、「タグ」、「レイアウト」、「CSS」といった基礎知識の説明です。

(2)【WordでHTMLが書けたらすごい!】-vol.2 タグを書かずにHTMLを作る、これまでの方法

「タグ」を書かずにHTMLをつくる、代表的なサービスや技術、問題点などを簡単に紹介します。

(3)【WordでHTMLが書けたらすごい!】-vol.3 WordからHTMLを作る、これまでの方法

Wordでも、HTMLは作れます。また、Word文書からHTMLを作る方法もいろいろ世間に提供されています。しかし、やはりあまり使われてはいないようです。なぜでしょうか。

(4)【WordでHTMLが書けたらすごい!】-vol.4 新しい解決策:『HTML on Word』

Word文書を「綺麗な」HTMLにすることを可能にした、新しい解決策『HTML on Word』を、簡単なデモを交えて紹介します。うまく使うには「印刷用」というレイアウトからの脱却が必要です

--------------------
◆前回:(37)Wordで書いたお知らせをWebページにする
◆次回:(39)『HTML on Word』の使用例(3)サンプルCSSのレイアウト
シリーズ総目次
〇関連ページ
Microsoft Wordを使って報告書などの長文を作成する人向けの新知識満載です。 Microsoft Wordのアウトラインと見出しスタイルを活用する方法(概要)

Antenna House Office Serversとは

Antenna House Office Serversとは


月曜日連載! Microsoft Wordスタイル探索 (37)Wordで書いたお知らせをWebページにする

会社のお知らせやニュースリリースなどの広報文書を作成するためにMicrosoft Wordを使っている人も多いでしょう。

PCが登場した1980年代は、PC用の日本語ワードプロセッサがいろいろありました。その中でいまも生き残っているのは一太郎のみではないでしょうか。いまのオフィスで文書作成といえば、ほぼWord一択になっていると言っても過言ではありません。

長い間、日本語ワードプロセッサで作成した広報文書は、紙に印刷して手渡し、手紙などで物理的に配布されていました。Webが普及してからは、紙に代わって、PDFで配布されるケースが中心になっています。

文書の配布形式を紙からPDFに変更するのは簡単でした。なぜかというとPDFは紙をそのままデジタル化したものだからです。

(参考資料)PDFとはなんですか?PDFにするとどんなメリットがありますか?

しかし、現在は、Webを使って配信した広報文書はスマホを使って閲覧されることが多くなっています。

PDFはスマホでも表示できますが、A4サイズ(210mm×297mm)に、本文9ポイントで印刷した文字を、iPhone13の画面で表示するとどのくらいの大きさになるのでしょうか?

iPhone13の画面サイズは6.1インチとされていますが、これは対角線の長さなので、画面の横幅は計算上では6.5cm程度になります。実際に表示できる画面サイズはもっと小さいようです。仮に横幅6cmとすると、文字サイズは約2.6ポイントとなります。つまり、本文の文字の大きさが1ミリにも満たないサイズになってしまいます。

こうした計算をするまでもなく、A4サイズ用から作成したPDFをスマホで読みたい人はほとんどいないと言ってよいでしょう。

回りくどくなりましたが、Webで配信する広報文書はPDFではなく、Webページとして用意して欲しいものです。しかし、例えば、中央官庁から配信されているお知らせをざっとみても、現在、またPDFが大勢を占めているようです。

これを、簡単にスマホでも読みやすいWebページにするにはどうしたら良いでしょうか。まず、読みやすいWebページを作るには、文書をHTMLという形式をつかって表現しなければなりません。

誰でもすぐに思いつくのは、WordにはWebページ保存という機能があるので、それを使えばいいのではないだろうか、ということです。しかし、これは試してみるとほとんど使えないことがわかります。これについては、既に次のブログで報告しています。

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

そこで、アンテナハウスの『HTML on Word』(HOW)の登場です!

Wordで書いた文書をHOWを使ってHTMLに変換すれば、ボタン一つで、見やすいHTMLができます。

論より証拠、次のHOWのニュースリリースは、Wordで書いた文書をHOWでHTML化したものです。

HOWのニュースリリース

このニュースリリース・ページは、トップのメインメニューや、横のサイドメニュー、下のフッタを表現するテンプレートページに、Wordで書いたリリース文書を、HOWで変換・作成したHTMLの本体(body)を貼り付けて作成したものです。

Word文書とHTMLのサンプルは、次に公開しておりますのでご参照ください。

Antenna House Office Servers HTML on Word 使用例紹介:ニュースリリースをWordから作成する


【広告】
11月16日(火曜日)16時からの「ちょっと一息・アンテナハウスウェビナー」の録画がYouTubeで公開されております。


※画像をクリックするとウェビナーのアーカイブページに移動しますので、そちらからYouTubeをお進みください。

前回、10月12日「ちょっと一息・アンテナハウスウェビナー」の録画がYouTubeで公開されております。(リンクをクリックするとYouTubeを表示します。)

(1)【WordでHTMLが書けたらすごい!】-vol.1 予備知識

「コンテンツ」、「HTML」、「タグ」、「レイアウト」、「CSS」といった基礎知識の説明です。

(2)【WordでHTMLが書けたらすごい!】-vol.2 タグを書かずにHTMLを作る、これまでの方法

「タグ」を書かずにHTMLをつくる、代表的なサービスや技術、問題点などを簡単に紹介します。

(3)【WordでHTMLが書けたらすごい!】-vol.3 WordからHTMLを作る、これまでの方法

Wordでも、HTMLは作れます。また、Word文書からHTMLを作る方法もいろいろ世間に提供されています。しかし、やはりあまり使われてはいないようです。なぜでしょうか。

(4)【WordでHTMLが書けたらすごい!】-vol.4 新しい解決策:『HTML on Word』

Word文書を「綺麗な」HTMLにすることを可能にした、新しい解決策『HTML on Word』を、簡単なデモを交えて紹介します。うまく使うには「印刷用」というレイアウトからの脱却が必要です

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

Antenna House Office Serversとは

Antenna House Office Serversとは


月曜日連載! 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とは


Pages: Prev 1 2 3 4 5 6 7 8 9 10 ... 114 115 116 Next