HTML Helpの作成方法（基本編）
操作の流れ：コンパイル形式

コンパイル形式のHTML Helpは、通常次の手順で作成します。

  1. トピックを作成する
  2. プロジェクトを作成する
  3. プロジェクトにトピックを追加する
  4. 目次を設定する
  5. 索引（キーワード）を設定する
  6. コンパイルを実行する

１．トピックを作成する

トピックは、ヘルプの本文1ページに該当します。HTML Helpウインドウの右側に表示されるのが、1つのトピックの内容です。

トピックは、通常のHTMLファイルです。HTMLエディタなどで作成します。1トピックごとに1トピックファイル（*.htm、*.html）が必要です。

トピック作成時の注意

  • プロジェクトを構成するファイルを、プロジェクトファイル（*.hhp）より上の階層や他のドライブに置くと、それらのファイルがヘルプに含まれない場合があります。これは、コンパイルしたヘルプファイル（*.chm）の位置がルートとしてとらえられ、その位置よりも上に存在するファイルの場所が正しく認識されないためです。トピックファイルやイメージファイルは、すべてプロジェクトファイルと同じフォルダかそのサブフォルダに入れてください。
  • プロジェクトフォルダ名に全角文字および半角カタカナの名前を付けると、トピックのリンクが正常に動作しない場合があります。プロジェクトフォルダ名は半角英数字のみにしてください。
  • フォルダ名、ファイル名、アンカー名にスペースが含まれると、トピックのリンクや印刷が正しく行われない場合があります。これらの名前にはスペースを入れないでください。
  • フォルダ名に%が含まれていると、目次が正しく表示されません。フォルダ名には%を入れないでください。
  • トピックファイルをISO-2022-JP、EUC-JPで保存していると、コンパイル時にエラーが表示されます。コンパイルは実行され、トピックは正しく表示されますが、全文検索で日本語を検索できなくなるなどの問題があります。トピックファイルはシフトJISで保存してください。
  • 各トピックファイルには、HTMLのTITLE要素で分かりやすいタイトルを付けておいてください。ここで指定したタイトルが、全文検索やキーワード検索時などでトピックが一覧表示されるときのタイトルになります。

その他

  • HTML Helpウインドウで表示するため、あまり横幅をとらないレイアウトにする方が見やすいヘルプを作成できます。
  • スタイルシートを活用すると、書式設定や変更を効率よく行えます。

(一覧に戻る)

２．プロジェクトを作成する

プロジェクトとは、1つのHTML Helpを作成するために必要なファイルの集まりです。プロジェクトに関する情報は、プロジェクトファイル（*.hhp）に保存します。

  1. ［スタート］→［プログラム］→［HTML Help Workshop］→［HTML Help Workshop］を選択します。
    HTML Help Workshopが起動します。
  2. ［File］→［New］を選択します。
    ［New］ダイアログが表示されます。
  3. ［Project］を選択し、［OK］ボタンをクリックします。
    ［New Project］ダイアログが表示されます。
  4. WinHelpを変換するのでない場合は、そのまま［次へ］ボタンをクリックします。
    ［New Project -- Destination］ダイアログが表示されます。
  5. ［Browse］ボタンをクリックし、作成するプロジェクトファイルの名前と場所を指定します。
  6. ［次へ］ボタンをクリックします。
    ［New Project -- Existing Files］ダイアログが表示されます。
  7. 既存の目次ファイル（*.hhc）、索引ファイル（*.hhk）、トピックファイル（*.htm、*.html）を使用する場合は、該当する項目にチェックを付けます。
    すべてのファイルを新規に作成する場合は、特にチェックを付けずに［次へ］ボタンをクリックします。
    ［New Project -- Finish］ダイアログが表示されます。
  8. ［完了］ボタンをクリックします。
    プロジェクトファイルが作成され、［Project］タブの［OPTIONS］セクションに現在の設定内容が表示されます。

[OPTIONS]
Compatibility=1.1 or later
Compiled file=test.chm
Display compile progress=No
Language=0x411 日本語

(一覧に戻る)

３．プロジェクトにトピックを追加する

トピックを追加する

  1. HTML Help Workshopの左側のツールバーの アイコン （Add/Remove topic files）をクリックします。
    ［Topic Files］ダイアログが表示されます。
  2. ［Add］ボタンをクリックします。
    ［ファイルを開く］ダイアログが表示されます。
  3. 追加するトピックファイル（*.htm、*.html）を選択します。
  • ［Ctrl］、［Shift］キーを押しながらクリックすると、複数ファイルを選択できます。
  1. ［開く］ボタンをクリックします。
    ［Topic Files］ダイアログに戻り、選択したファイル名がリストに表示されます。
  2. 手順2〜4の操作を繰り返し、必要なトピックファイルをすべて追加します。
  3. ［OK］ボタンをクリックします。
    ［Topic Files］ダイアログが閉じます。
    ［Project］タブの［FILES］セクションに、指定したファイル名が表示されます。

[FILES]
sample1.htm
sample2.htm
sample3.htm

※プロジェクトファイルとHTMLファイルを同じフォルダに並列で置いている場合は、いちいちHTMLファイルをしないでも[FILES]セクションに「*.htm」と1行書くだけで、すべてのHTMLファイルがトピックに追加されます。ただし、これは下の階層のフォルダなどでなく、同じ場所であることが前提です。（2007年12月9日追記）

トピックを削除する

  1. アイコン （Add/Remove topic files）をクリックします。
    ［Topic Files］ダイアログが表示されます。
  2. 削除したいトピックファイルをリストから選択し、［Remove］ボタンをクリックします。
    選択したファイルが削除されます。
  3. ［OK］ボタンをクリックします。
    ［Topic Files］ダイアログが閉じます。

設定内容を保存する

トピックの追加が完了したら、［Project］タブの アイコン（Save project, contents, and index files）をクリックして設定内容をプロジェクトファイルに保存します。

(一覧に戻る)

４．目次を設定する

HTML Helpウインドウの［目次］タブに表示される内容を設定します。

目次ファイルを作成する

  1. HTML Help Workshopの［Contents］タブをクリックします。
    目次をまだ設定していない場合は、［Table of Contents Not Specified］ダイアログが表示されます。
  2. ［Create a new contents file］を選択し、［OK］ボタンをクリックします。
    ［ファイル名を付けて保存］ダイアログが表示されます。
  3. ファイルの名前と場所を指定し、［保存］ボタンをクリックします。
    目次ファイルが作成され、空の［Contents］タブが表示されます。

目次の見出しを挿入する

見出しとは、目次のフォルダアイコンやブックアイコンに相当する部分です。

  • 見出しのアイコンは初期設定ではフォルダアイコンですが、［Contents］タブのアイコン（Contents properties）でブックアイコンに切り替えたりカスタマイズすることができます。詳しくは、「目次のアイコンを変更する」をご覧ください。
  1. アイコン（Insert a heading）をクリックします。
    ［Table of Contents Entry］ダイアログが表示されます。
  2. ［Entry title］に、見出しに表示する文字を入力します。
  3. ［Add］ボタンをクリックします。
    ［Path or URL］ダイアログが表示されます。
  4. ［HTML titles］リストには、現在のプロジェクトに追加されているトピックファイルのタイトルが一覧表示されています。
    見出しに対応させるトピックのタイトルを選択し、［OK］ボタンをクリックします。
    ［Table of Contents Entry］ダイアログに戻ります。
  5. ［OK］ボタンをクリックします。
    ［Contents］タブに追加した見出しが表示されます。

ページを挿入する

  1. ［Contents］タブでページを挿入する位置の上にあたる見出しまたはページをクリックして選択します。
  2. アイコン（Insert a page）をクリックします。
    ［Table of Contents Entry］ダイアログが表示されます。
  • 手順1でリストの一番上にある見出しまたはページを選択していた場合は、アイコン（Insert a page）をクリックすると「Do you want to insert this entry at the beginning of the Table of Contents?」というメッセージが表示されます。
    ［はい］ボタンをクリックするとリストの一番上にページが挿入され、［いいえ］ボタンをクリックすると上から二番目に挿入されます。
  1. ［Entry title］に、目次に表示する文字を入力します。
  2. ［Add］ボタンをクリックします。
    ［Path or URL］ダイアログが表示されます。
  3. ページに対応させるトピックのタイトルを選択し、［OK］ボタンをクリックします。
    ［Table of Contents Entry］ダイアログに戻ります。
  4. ［OK］ボタンをクリックします。
    ［Contents］タブにページが表示されます。

見出し/ページを変更する

見出し、ページを選択して アイコン（Edit selection）をクリックすると、［Table of Contents Entry］ダイアログに設定内容が表示されます。
内容を変更して［OK］ボタンをクリックします。

見出し/ページを削除する

見出し、ページを選択して アイコン（Delete selection）をクリックすると、見出し、ページが削除されます。

設定内容を保存する

見出し、ページの挿入が完了したら、 アイコン（Save File）をクリックして設定内容を目次ファイルに保存します。

(一覧に戻る)

５．索引（キーワード）を設定する

HTML Helpウインドウの［キーワード］タブに表示される内容を設定します。

索引ファイルを作成する

  1. HTML Help Workshopの［Index］タブをクリックします。
    索引をまだ設定していない場合は、［Index Not Specified］ダイアログが表示されます。
  2. ［Create a new index file］を選択し、［OK］ボタンをクリックします。
    ［ファイル名を付けて保存］ダイアログが表示されます。
  3. ファイルの名前と場所を指定し、［保存］ボタンをクリックします。
    索引ファイルが作成され、空の［Index］タブが表示されます。

キーワードを挿入する

  1. アイコン（Insert a keyword）をクリックします。
    ［Index Entry］ダイアログが表示されます。
  2. ［Keyword］に、キーワードの文字を入力します。
  3. ［Add］ボタンをクリックします。
    ［Path or URL］ダイアログが表示されます。
  4. ［HTML titles］リストには、現在のプロジェクトに追加されているトピックファイルのタイトルが一覧表示されます。
    キーワードに対応させるトピックのタイトルを選択し、［OK］ボタンをクリックします。
    ［Index Entry］ダイアログに戻ります。
  • 手順3〜4の操作を繰り返し、1つのキーワードに対して複数のトピックを設定することもできます。
    複数のトピックを設定した場合は、HTML Ｈelpウインドウでキーワードを選択すると、トピック選択のダイアログが表示されます。
  1. ［OK］ボタンをクリックします。
    ［Index］タブにキーワードが挿入されます。

キーワードを並べ替える

  • アイコン アイコン （上下矢印アイコン）でキーワードの上下の順番を並べ替えられます。
  • アイコン アイコン （左右矢印アイコン）でキーワードを階層化できます。
  • アイコン （AからZのアイコン）をクリックすると、同じ階層内でキーワードが並べ替えられます。

キーワードを変更する

キーワードを選択して アイコン（Edit selection）をクリックすると、［Index Entry］ダイアログに設定内容が表示されます。
内容を変更して［OK］ボタンをクリックします。

キーワードを削除する

キーワードを選択して アイコン（Delete selection）をクリックすると、キーワードが削除されます。

設定内容を保存する

キーワードの挿入が完了したら、 アイコン（Save File）をクリックして設定内容を索引ファイルに保存します。

(一覧に戻る)

６．コンパイルを実行する

コンパイルを実行する

［Project］タブの アイコン（Save all project files and compile）をクリックします。
コンパイルが開始されます。

  • ［File］メニューの［Compile］を選択するか、ツールバーのアイコン（Compile HTML file）をクリックしても、コンパイルを実行できます。

コンパイルが終了すると、プロジェクトファイルと同じフォルダに、プロジェクトファイルと同じ名前で拡張子が*.chmのHTML Helpファイルが作成されます。

HTML Helpを表示する

  1. ［HTML Help Workshop］の［View］メニューの［Compiled File］を選択するか、アイコン（View compiled file）をクリックします。
    ［View compiled file］ダイアログが表示されます。
  2. ファイル名を確認して［View］ボタンをクリックすると、HTML Helpが表示されます。
  • エクスプローラなどでHTML Helpファイル（*.chm）を直接ダブルクリックしても、表示できます。
  • 初期設定では、HTML Helpウインドウに［検索］タブ、［お気に入り］タブが表示されません。 ［検索］タブ、［お気に入り］タブは、［Project］タブの アイコン（Add/Modify window definitions）で設定します。
    詳しくは「ウインドウのボタンやサイズを変更する」をご覧ください。

(一覧に戻る)

Last updated: December 9, 2007
Copyright (C) 1998-2007 KeiYu HelpLab (http://www.keiyu.com/)
ishida@keiyu.com