「Webマニュアル作成術 その1」ではWebマニュアルが、紙の媒体や他の電子文書のフォーマットと比べてどのようなメリットがあるのかと、Microsoft Word（以下、Word）でWebマニュアルを作成するとこのメリットについてお話しました。
ここでは実際にWordで原稿を作成して、弊社製品『HTML on Word』でHTMLへ変換し、Webマニュアルを作成する方法やコツをご紹介します。
|
ヒント |
|
このページは、Wordで文書を作成して『HTML on Word』でHTMLに変換して作成しました。 |
Webマニュアルを作成する場合、HTMLの記述作法に準拠する必要があります。現在最新のHTMLの仕様は「HTML Living Standard1」となります。
しかしながら、このHTMLの仕様に沿って一から記述するには、それなりに知識が必要となります。また、文章を構造的に記述する必要があります。
そこで『HTML on Word』を使うことでWord文書（docx）からHTML5（HTML Living Standard）2に準拠したHTMLを簡単に作成することができます。『HTML on Word』がdocxファイルを解析してHTMLを作成するので、Wordを使うことができればHTMLのタグを記述することなくWebマニュアルを作成できます。
また、Wordのスタイルやアウトラインレベルを適切に指定することで、自動で構造的なHTMLの記述に変換できます。
|
ここでポイント！ |
|
Wordの機能で「名前を付けて保存」から「Webページ」を選択して保存することで、HTML形式のファイルとして出力できますが、余分なタグが多く含まれており、Webマニュアルとして公開するには適していないHTMLが作成されます。 『HTML on Word』では弊社独自の解析エンジンにより、余分なタグが少ないシンプルでHTML5（HTML Living Standard）に準拠したHTMLを作成することができます。また、スマホなどの端末にも適した表示ができるオプションの設定をすることができるので、色々な端末から閲覧できるWebマニュアルの作成に最適です。 |
それでは実際にWord文書から『HTML on Word』利用してWebマニュアルを作成する方法をご紹介します。マニュアルの作成前にご利用のパソコンにWordがインストールされていること、『HTML on Word』がインストールされていることをご確認ください。『HTML on Word』がインストールされていない場合は、30日間お試しいただける評価版を用意していますので、次のリンクからお申し込みいただき、ダウンロード後にインストールを行ってください。
HTMLの記述は、HTML5（HTML Living Standard）の仕様の場合
で構成されます。
Word文書から『HTML on Word』を利用してWebマニュアルを作成する場合、上記の①と②の<head>部分は『HTML on Word』によるWord文書の解析と、『HTML on Word』の設定ファイルの値を利用して自動で作成します。
③の<body>箇所は作成者がマニュアルや説明書の文章を記述したり、画像を貼ったりして作成します。文章はWord上で記述することで、『HTML on Word』がHTML形式への変換と、Word文書の解析によるタグやリンク、ページ構成などを自動生成して出力します。
マニュアルの作成者はWordの機能を利用して、普段の文書作成に近い基本的な文章の記述やスタイルなどの指定をするだけで、Webマニュアルを作成することができます。
|
Word上で新しく文書を作成します。Wordを起動して、リボン「ファイル」の「新規」メニューから「白紙の文書」をクリックして新しい文書を作成します。 |
|
ここで一旦作成した文書を保存します。Wordのアドインから『HTML on Word』を使用してHTMLに変換する場合、Word文書のファイル名が使用されますので、実際の公開時のファイル名と同じ名前にすることをお勧めします。
※コマンドラインから変換する場合は、出力するHTMLのファイル名を指定できます。
|
HTMLの<head>要素に出力される文書のタイトル（<title>要素）や作成者などのメタデータを設定します。 Wordのリボン「ファイル」から「情報」メニューの次のプロパティの項目を設定することで、HTMLの該当箇所に出力できます。 |
|
|
Wordのプロパティ項目 |
HTMLの<head>内の要素 |
|
タイトル |
<title></title>内の文字列 |
|
タグ |
「meta name="keywords"」要素の「content」の値。 例. <meta name="keywords" content="Webマニュアル,HTML,Word,docx"> |
|
コメント |
「meta name="description"」要素の「content」の値。 <meta name="description" content="Wordの機能をフル活用してWebマニュアルを作ろう！"> |
|
作成者 |
「meta name="author"」要素の「content」の値。 例. <meta name="author" content="アンテナハウス株式会社"> 不要な場合は作成者欄の右クリックで「ユーザーの削除」をしてください。 |
マニュアルの原稿を記述したり、画像の配置をしたりします。
原稿を記述する際、その内容の見出しとなる段落を作成してください。
「大見出し」「中見出し」「小見出し」のように階層に分けて見出しとその内容を構成してください。そうすることで次の手順「見出しにスタイルを指定する」で見出しにアウトラインレベルが指定されたスタイルを適用することで、出力するHTMLの見出し要素<h1>,<h2>,<h3>などが出力され、適切なHTMLの構造にすることができたり、HTMLを分割3して出力する場合の分割基準にしたりすることができます。
|
見出しにする段落に対して、Wordのスタイルを適用します。 ここでは「大見出し」「中見出し」「小見出し」に相当する段落に対して、Wordのテンプレート「白紙の文書」の初期状態で「スタイル ギャラリー」に追加されている「見出し1」～「見出し3」を指定します。 各見出しのスタイルのHTMLのヘッダー要素は以下の通りです。ヘッダー要素はWordの段落のアウトラインレベルによって決まります。指定するWordスタイル名に正しくアウトラインレベルが指定されているかご確認ください。 |
※画像のクリックで音声付き動画を再生します。 |
|
Wordスタイル名 |
アウトラインレベル |
HTML要素 |
|
|
大見出し |
見出し1 |
アウトラインレベル1 |
<h1></h1> |
|
中見出し |
見出し2 |
アウトラインレベル2 |
<h2></h2> |
|
小見出し |
見出し3 |
アウトラインレベル3 |
<h3></h3> |
その他、Wordで作成した表, 箇条書き, 番号付き段落, 数式, 脚注・文末脚注, 索引など、要素や装飾をHTMLのタグとして出力することができますので、必要に応じて作成します。
変換できる内容はユーザーズマニュアルの「第5章 変換仕様」をご参照ください。
|
ヒント |
|
要素や装飾はコマンドラインから変換時のオプションの指定または、コマンドラインから変換設定を変更することで、より様々な機能をご利用いただけます。 |
|
手順「5」で適用した見出しの情報をもとに、Wordの機能で自動で目次を作成することができます。 目次を挿入したい箇所でWordのリボン「参考資料」の「目次」メニューで「目次」ボタンをクリックして「組み込み」の一覧から目次の種類を選んで挿入します。 ここで挿入した目次がHTMLに変換した場合に、該当箇所へのハイパーリンクを付けた目次として出力されます。 |
※画像のクリックで音声付き動画を再生します。 |
より詳しいWordでの文章の作成方法については「HTML on Word ユーザーズマニュアル」に記載していますので、ご参考にしてください。
Wordでの原稿作成が完了したら、HTMLファイルに変換します。変換する前に現在編集中の文書を上書き保存してください。
|
HTMLへの変換はWordのアドインから簡単にできます。 Wordのリボン「アンテナハウス」の「HTML on Word」メニューから「HTMLへ変換」ボタンをクリックして、HTMLファイルの変換先4を指定して変換を実行します。 変換実行時にレイアウト用のcssを指定する場合は、「HTML on Word」メニューにある「指定したCSSを用いる」にチェックをして、cssファイルを指定してください。HTMLへ変換実行時に指定したcssがHTMLの変換先にコピーされ、HTMLからリンクします。 |
|
『HTML on Word』のユーザーズマニュアル
に類似したレイアウトにする場合は、以下のサンプルのcssを指定してください。（V3.0の場合）
C:\Program Files\Antenna House\xhw30\CSS\sample-toc.css
|
変換が完了すると、拡張子「html」に関連付けられたアプリケーションでHTMLを自動で表示します。（通常はWebブラウザー） Webブラウザーが関連付けされている場合は、作成したWebマニュアルをすぐに確認することができます。 |
※画像のクリックで音声付き動画を再生します。 |
以上でWordで原稿を作成してWebマニュアルを作成することができました。
編集中の原稿をすぐにWebブラウザーで確認することができるので、気軽にチェックしながらWebマニュアルの作成ができます。
完成したWebマニュアルは、手順8で指定した出力先に保存されています。出力したHTMLファイル, 画像ファイルとその画像が保存されているフォルダー, cssファイルなどをまとめてWebサーバーにアップロード※することで、インターネットまたはイントラネットを通じて閲覧することができる様になります。
|
ご注意 |
|
※『HTML on Word』の評価版を利用して作成したHTML、画像、製品に付属のサンプルcssファイルは、製品を評価する目的以外でご利用いただけません。製品の機能にご満足いただけましたら、ぜひアンテナハウスオンラインショップでお買い求めください。 |
『HTML on Word』はHTMLへ変換時にWordの機能を使用せず、弊社独自の変換エンジンによりdocxファイルを解析してHTMLへ変換しています。
docxファイルの内部にある情報以外に、独自の解析による変換を行うため、Word自体にない要素を生成して出力することができます。
例えば、索引に対して挿入箇所へのハイパーリンクを自動で出力できます。マニュアルには欠かせない「索引」にハイパーリンクを設定することで、目的の情報を素早く見つけることができます。
『HTML on Word』の製品について詳しい情報は、製品情報ページをご覧ください。
また、製品を30日間お試しいただける評価版のお申し込み、および製品のご購入は以下のリンクボタンよりお進みください。
さて、ここまではWordで原稿を記述して、Webマニュアル（HTML）を作成する方法についてご紹介しました。
Wordで原稿を作成していれば、WebマニュアルだけではなくPDFのマニュアルも作成できます。
一つのWord文書からHTMLとPDFの2つの形式のマニュアルを作成する、いわゆるワンソース マルチユースを実現することができます。
以下のページで公開している『HTML on Word』のユーザーズマニュアルは、一つのWord文書からWebマニュアルとPDFのマニュアルを作成したものです。
Webマニュアルは『HTML on Word』を使用して作成しています。
PDFのマニュアルは『瞬簡PDF 統合版』に同梱している『Antenna House PDF Driver』を使用して作成しています。
Wordの「ファイル」メニューの「名前を付けて保存」を選択して表示する「名前を付けて保存」画面で、ファイルの種類に「PDF」を指定して保存します。
Wordの標準機能以外でPDFに変換するには、市販されているPDF作成ソフト、または無償のPDF作成ソフト（フリーソフト）、Webサービスなどを利用して作成することができます。
ここでは弊社のPDF作成ソフトについてご紹介します。
弊社のWindows用デスクトップアプリケーションの『瞬簡PDF 統合版』、『瞬簡PDF 編集』、『瞬簡PDF 作成』には、いろいろなアプリケーションからPDFを作成できる、仮想PDFプリンタードライバー『Antenna House PDF Driver』を同梱しています。WordからPDFに変換する場合、Wordの印刷機能からのPDF作成のほかにWordのアドインからPDFを作成することができます。
Wordの『Antenna House PDF Driver』アドインからPDFを作成する場合、Wordの見出しをPDFのしおりに変換したり、ハイパーリンクや脚注へのリンクをPDFに出力できます。
また、『Antenna House PDF Driver』ではPDFのバージョン1.3～2.0やPDF/A、PDF/Xの各規格の出力ができたり、編集不可や閲覧・印刷制限などPDF標準のセキュリティが設定できるため、マニュアルの配布先やご利用環境に合わせたPDFの作成が可能です。
|
ヒント |
|
このページは、Wordで文書を作成して『HTML on Word』でHTMLに変換して作成しました。 |
