HTML に変換する文書の作成

HTML 文書、Adobe FrameMaker で HTML 変換する文書を作成する方法、テキストとグラフィックの変換について説明します。

HTML では、文書の各部分の用途を表すエレメントのセットが提供されます。例えば、<p> （段落）エレメント標準の本文段落、<h1> エレメントは第 1 レベルの見出しを表します。

HTML エレメントは、Adobe FrameMaker の書式に似ています。例えば、HTML 文書には本文段落エレメントと見出しエレメントがあり、FrameMaker 文書には本文段落と、見出し用の書式を使用する段落が含まれます。

ただし、HTML エレメントは、次の点で FrameMaker 書式と異なります。

HTML 文書では標準のエレメントのセットを使用しますが、FrameMaker 文書で使用する書式の数や書式名には制限がありません。
HTML エレメントは、文書の書式ではなく、構造を記述します。 Google Chrome や Microsoft Edge などの Web ブラウザーでは、定義済みの書式で各エレメントが表示されます。この 2 つのブラウザーでは、同じエレメントでも表示方法が異なる場合があります。

HTML 文書には、同じファイル内の別の位置や、インターネットやイントラネット上の別のファイルを指すハイパーテキストリンクを含めることができます。FrameMaker のほとんどのハイパーテキストコマンドは、HTML 形式で文書を保存すると自動的に HTML のハイパーテキストコマンドに変換されます。

HTML 変換の概要

HTML は、特定の種類の表現に最適なオンライン用の形式です。このため、HTML 文書の外見は元の FrameMaker 文書と必ずしも同じになるとは限りません。FrameMaker 文書の書式アイテムに相当するものが HTML にない場合は、HTML ではなく PDF に変換します。詳しくは、「 PDF 形式で保存」を参照してください。

変換内容

HTML 形式で文書を保存すると、メインテキストフロー（「A」というタグが付いたフロー）の内容だけが変換されます。変換するテキストが間違いなくフロー A に含まれており、すべてのフロー A が連結されていることを確認します（「テキスト枠を連結する」を参照）。

ヒント: 文書中に保持するフローが複数ある場合は、PDF として文書を保存します詳しくは、「PDF 出力」を参照してください。PDF 文書として保存すると、個々のフローを Acrobat アーティクルスレッド に変換できます。

フロー内のアンカー枠の内容は、アンカー枠内のテキストも含めて、グラフィックに変換されます。メインフローにないグラフィックとテキストは、マスターページ（ヘッダーやフッターなど）またはボディページ（ページ上に直接配置されたグラフィックなど）に直接含まれていても HTML には変換されません。ヘッダーを複製してすべての HTML 文書の一番上にテキストまたはグラフィック（ロゴのテキストまたはナビゲートボタンなど）を表示する場合は、マクロを使用します。

FrameMaker ハイパーテキストコマンドの中には、対応する HTML リンクに変換可能なものもあります。

HTML の書き出しの問題

HTML 形式での書き出しでは、次の点に注意してください。

アンカー枠内のベクターグラフィックとテキスト枠はビットマップに変換されます。変換されたグラフィック内のテキストがグリーキング表示される場合は、「環境設定」ダイアログボックスで、「グリーキングを行う最小フォントサイズ」選択しますダイアログボックス内にあります。
参照で取り込んだ GIF グラフィックを拡大 / 縮小したり、トリミングしたりした場合、文書を HTML 形式に変換すると、それらの設定が失われます。
FrameMaker で作成した HTML ファイルを Windows のメモ帳で開くと、改行が表示されません。TML ファイルを正しく表示するには、FrameMaker、高機能テキストエディター、またはソースコードを表示できるブラウザーを使用してください。
文書中にアクセント記号が付いた文字を含む段落スタイル名や文字スタイル名が使用されていると、一部のブラウザーではそれらの文字を正しく表示できないことがあります。この問題を回避するには、段落スタイルと文字スタイルの名前を、アクセント記号を含まないものに変更するか、HTML ファイルと共に作成されるカスケーディングスタイルシート .css ファイルを削除します。

HTML にマッピングするテンプレートの使用

HTML 形式で文書を保存した場合に必要となる微調整を最小限に抑えるには、FrameMaker に付属しているテンプレートを使用して文書を作成します。これらのテンプレートの書式は、対応する HTML の書式に簡単にマッピングされます。

図 1. HTML に変換する前と後の章のテンプレートの見本

Web に適したカラーの使用

オンラインカラーライブラリには、216 種類の「Web に適した」カラーが用意されており、どのプラットフォームの Web ブラウザーで表示しても、同じように表示されます。

スタイルシートを使用して FrameMaker の体裁を保持する

HTML は、書式設定用の言語ではなく、文書の構造（意味）を表す手段として設計されています。ただし、文書の意味だけでなくその書式も重要で、通常の HTML エレメントだけでは対応できない FrameMaker 文書の外観を保つ必要がある場合もあります。

例えば、章の最初の文字に青の 20 pt の書体を使用している文書があるとします。 HTML スタイルシートを使用すると、このように独特な書式設定を保持できます。

HTML カスケーディングスタイルシートは、メインの HTML ファイルと名前は同じですが、拡張子が .css になっています。これは多くの Web ブラウザーで利用、実行できる標準化ファイル形式です。 .css スタイルシートには、フォント、スタイル、サイズ、インデント、間隔、余白を元の文書から複製できる書式設定が含まれています。

HTML ファイルには、読み込む対象の.css スタイルシートを記述した箇所があります。ブラウザーでスタイルシートが検出されると、その情報を使用して Web ページの書式が設定されます。ブラウザーがスタイルシートをサポートしていない場合は、各 HTML エレメントに対して定義されている組み込み書式のみが使用されます。

文書を HTML として保存します。 .css ファイルが HTML ファイルと同じフォルダーに自動的に作成されます。
HTML スタイルシート（.css ファイル）を Web サーバの HTML ファイルと同じフォルダー内にコピーします。

注: スタイルシートの書式ルールは、別のスタイルシート（変換後の文書を表示する他のユーザーが設定した独自のスタイルシートなど）のルールと重ね合わせることができるため、「カスケード」とも呼ばれます。 FrameMaker が作成するスタイルシートは、他のスタイルシートに優先します。

書式の上書き

書式の上書きとして追跡される変更

FrameMaker は、定義から異なるテキスト、文字、表のプロパティにおける変更を、上書きとして扱います。また、現在の文書が書式の定義を持っていない場合、例えば他の文書からテキストをコピーしてペーストしたときは、上書きと見なされます。

以下の場合、上書きと見なされます。

ツールバーを使用して書式を変更したとき（例えば、太字、下線、または斜体を適用する）。
段落、文字、表のスタイルを書式設定ウィンドウで編集し、書式定義を更新せずに編集した内容を選択範囲に適用したとき。
異なるテンプレートがある別の文書からコンテンツをコピーして、コピー先のコンテンツで書式が元のまま保持されているが、定義が現在の文書に存在しないとき。

例えば、テキストカラーが赤、太さが「そのまま」に設定された Error という名前の文字スタイルがあるとします。このテキストカラーを赤から黒に変更すると、これは上書きとなります。ただし、太さが「標準」から「太字」に変更された場合、これは上書きではありません（定義からの逸脱ではありません）。ただし、「そのまま」として設定されているプロパティを持っていた書式が変更された場合、これは上書きとして追跡されません。

注: 表 > 書式 > 任意の罫線・塗りから表セルのプロパティが変更された場合には、表書式の上書きフラグが付きません。

コンテンツ変換のための書式上書きの管理

正確な変換を行うには、FrameMaker 文書で使用する書式の一貫性が保たれている必要があります。カタログに保存された定義済みの書式の代わりに、変更された書式が使用されていると、文書が正確に変換されません。例えば、通常の段落と見出しの両方に本文書式を使用している文書は、HTML に正確に変換されません。文書で上書きを多用した場合は、次のいずれかのことを行ってください。

書式上書きを検索して削除する

ブックまたは文書内で、段落、文字、および表の書式上書きを検索して削除できます。

編集 > 検索を選択し、検索ドロップダウンリストから、書式上書きのタイプを選択します。
置換ドロップダウンリストで、「上書きを削除」を選択します。
「検索」をクリックし、書式上書きの各インスタンスごとに「置換」をクリックします。

上書きに基づいた新しい書式セットを作成し適用する

FrameMaker に自動的に文書の書式上書きを分析させ新しい書式を作成させることができます。文書で使用されている書式でカタログに保存されていないものがカタログに追加されます。また、変更された書式が文書で使用されている場合は、変更が反映された別の書式がカタログに追加されます。

例えば、文書内で、「ボディ」の段落が上書き（左インデントなど）された場合、その段落には、「Body1」というタグが付きます。

「ボディ」に別の上書き箇所（デフォルトフォントの変更など）がある場合、その書式を適用する段落にはすべて「Body2」というタグが付きます。書式の名前はわかりやすいように変更することをお勧めします。例えば、「本文 1」を「本文インデント」などに変更します。

ファイル > ユーティリティ > 書式の適用と作成を選択し、「続行」をクリックします。

URL へのリンクを追加する

Uniform Resource Locator（URL）は、インターネットやイントラネット上の文書の場所を示します。 HTML または PDF として文書を保存するときは、URL にリンクする特殊なマーカーを FrameMaker 文書に埋め込むことができます。

URL にリンクするテキストを選択し、文字スタイルを適用します。例えば、「詳細はここをクリックしてください。」という行に下線書式を適用します。
書式設定した箇所をクリックし、挿入 > ハイパーテキストを選択します。
コマンドドロップダウンリストで、「メッセージクライアント」を選択し、「シンタックス」テキストボックスに以下を入力します。
```
 message URLurl_name 
```
url_name はリンク先の URL です。 例えば、アドビシステムズ社のホームページにリンクする場合は、次のように入力します。
```
 message URL http://www.adobe.com 
```
「新規ハイパーテキストマーカー」をクリックします。HTML、XML または PDF に文書を変換してから、書式設定したテキストをクリックすると、URL で指定された場所が表示されます。

注: ハイパーテキストマーカーの作成では、URL にアンパサンド（&）を使用した PDF のリンクを追加しないことをお勧めします。レスポンシブ HTML5 出力で、リンクが破損する可能性があります。

目次をシミュレートするリンクを作成する

サイズの大きいファイルを、1 つの親文書にリンクされた一連の小さい HTML サブ文書に変換できます。その場合の親文書は、サブ文書のリンクされた目次として機能することができます。

図 2. FrameMaker 文書と Web ページでシミュレートした目次

サブ文書には、自動で順番に名前が付けられます。例えば、「MyDoc」を HTML 形式で保存すると、親文書は「MyDoc.html」となり、1 つ目のサブ文書は「MyDoc.1.html」、2 つ目のサブ文書は「MyDoc.2.html」となります。ファイル名を変更するとリンクが無効になるため、変更しないでください。

サブ文書の見出しレベルの階層は、Headings 表で設定します。

新規ファイルが見出しから始まるように文書のマッピングを調整します。これを行うには、「HTML 設定」ダイアログボックスの新規開始、リンクされた Web ページオプションを使用します。

注: 見出しを選択するときには、その内容が適度な量であるかどうか確認してください（ジャンプ先のページが大き過ぎて何度もスクロールが必要な場合や、ジャンプ先のページが 1 段落のみの場合は、ユーザーの混乱を招きます）。また、リンク先の見出しの一覧では、最初の見出しの前に何らかの説明を追加するようにします。

リンクしたサブ文書から親文書に戻りやすいよう、EndOfSubDoc または StartOfSubDoc システムマクロを定義します。このマクロで定義したテキストまたはグラフィックは、次の例のように、リンクされた各 Web ページの最後または最初に表示されます。

マクロ名	置換
`EndOfSubDoc`	`<div> <p><a href="<$parentdoc>">Return to main page</a></p> <p><a href="<$prevsubdoc>">Go to previous page</a></p> <p><a href="<$nextsubdoc>">Go to next page</a></p> </div>`

HTML 形式でファイルまたはブックを保存します。親文書には、リンクされた目次が含まれます。

画像マップのリンクの設定

Web ページ上の画像マップは、リンクとして定義した領域が含まれるグラフィックです。画像マップを使用すると、単純なテキストだけの場合より視覚的効果の高い Web ページへのリンクを作成できます。

FrameMaker 文書を HTML または XML に変換すると、メインテキストフローに含まれるグラフィックは、正しく設定されていれば、自動的に画像マップに変換されます。グラフィックは、次のような場合に画像マップに変換されます。

アンカー枠内のグラフィックの上にテキスト枠が存在し、テキスト枠内に有効なハイパーテキストマーカーがある場合。
アンカー枠にあるグラフィックの上に長方形のリンクの行列がある場合。

グラフィック変換の指定

HTML 形式で文書を保存すると、アンカー枠内にコピーして取り込んだグラフィックファイルは、すべて別の形式で保存されるように指定しない限り、GIF 形式に変換されます。各グラフィックは、個別のファイルに保存されます。アンカー枠内のテキストも GIF 形式に変換されます。

参照して取り込んだグラフィックファイルは、コピーが作成されるように指定しない限り、元の場所に残ります。その場合、形式がチェックされて、必要に応じて変換されます（グラフィックの dpi 解像度は保持されます）。新しいファイルは、HTML 文書と同じフォルダー内に作成されます。

変換後のグラフィックファイルの形式を指定する

ファイル > ユーティリティ > HTML 設定を選択し、「オプション」をクリックします。

図 3. HTML オプション
グラフィックファイルの形式を指定します。次の形式から選択できます。
- 256 色以内の写真以外の画像には GIF 形式が最適です。
- 24 ビットの写真などの広範囲にわたるカラーが含まれる画像には JPEG 形式が最適です。
- PNG 形式は、Web で一般的に使用されているパブリックドメイン形式です。 GIF 形式と同様に 256 色以内の画像に最適です。
「OK」をクリックします。

参照して取り込んだグラフィックをコピーおよび変換するように指定する

参照して取り込んだグラフィックをターゲット先にコピーする設定には、以下を行います。

ファイル > ユーティリティ > HTML 設定を選択し、「オプション」をクリックします。
「参照して取り込んだファイルをコピー」を選択します。